@progress/kendo-themes-html 6.0.4-dev.0 → 6.0.4-dev.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/appbar/tests/appbar.js +1 -1
  2. package/dist/appbar/tests/appbar.js.map +2 -2
  3. package/dist/bottom-nav/tests/bottom-nav-colors.js +1 -1
  4. package/dist/bottom-nav/tests/bottom-nav-colors.js.map +2 -2
  5. package/dist/calendar/tests/calendar-classic-jquery.js +1 -1
  6. package/dist/calendar/tests/calendar-classic-jquery.js.map +2 -2
  7. package/dist/calendar/tests/calendar-infinite-rtl.js +1 -1
  8. package/dist/calendar/tests/calendar-infinite-rtl.js.map +2 -2
  9. package/dist/calendar/tests/calendar-infinite.js +1 -1
  10. package/dist/calendar/tests/calendar-infinite.js.map +2 -2
  11. package/dist/calendar/tests/calendar-modern-angular.js +1 -1
  12. package/dist/calendar/tests/calendar-modern-angular.js.map +2 -2
  13. package/dist/calendar/tests/calendar-modern-jquery.js +1 -1
  14. package/dist/calendar/tests/calendar-modern-jquery.js.map +2 -2
  15. package/dist/drawer/tests/drawer-rtl.js +1 -9
  16. package/dist/drawer/tests/drawer-rtl.js.map +2 -2
  17. package/dist/drawer/tests/drawer.js +1 -9
  18. package/dist/drawer/tests/drawer.js.map +2 -2
  19. package/dist/grid/tests/grid-grouping-detail-template.js +1 -1
  20. package/dist/grid/tests/grid-grouping-detail-template.js.map +2 -2
  21. package/dist/grid/tests/grid-sticky-multicolumn-headers.js +1 -1
  22. package/dist/grid/tests/grid-sticky-multicolumn-headers.js.map +2 -2
  23. package/package.json +2 -2
  24. package/src/appbar/tests/appbar.tsx +13 -15
  25. package/src/bottom-nav/tests/bottom-nav-colors.tsx +18 -18
  26. package/src/calendar/tests/calendar-classic-jquery.tsx +176 -2
  27. package/src/calendar/tests/calendar-infinite-rtl.tsx +723 -0
  28. package/src/calendar/tests/calendar-infinite.tsx +723 -0
  29. package/src/calendar/tests/calendar-modern-angular.tsx +4 -2
  30. package/src/calendar/tests/calendar-modern-jquery.tsx +4 -2
  31. package/src/drawer/tests/drawer-rtl.tsx +6 -16
  32. package/src/drawer/tests/drawer.tsx +6 -16
  33. package/src/grid/tests/grid-grouping-detail-template.tsx +4 -4
  34. package/src/grid/tests/grid-sticky-multicolumn-headers.tsx +2 -2
@@ -32,7 +32,7 @@
32
32
  document.getElementById("app")
33
33
  );
34
34
  root.render(
35
- /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { id: "test-area", className: "k-d-grid" }, /* @__PURE__ */ import_react.default.createElement("h3", null, "LTR"), /* @__PURE__ */ import_react.default.createElement("div", { className: "test-grid k-grid k-grid-md k-grid-display-block k-grid-no-scrollbar", style: { height: "300px", width: "800px" } }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header-wrap k-auto-scrollable" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table k-table-md k-grid-header-table" }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "200px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "100px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "100px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "100px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "100px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "1000px" } })), /* @__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", { rowSpan: 4, className: "k-table-th k-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Contact Name")))), /* @__PURE__ */ import_react.default.createElement("th", { colSpan: 4, className: "k-table-th k-grid-header-sticky k-header", style: { left: "0px", right: "0px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Contact Info")))), /* @__PURE__ */ import_react.default.createElement("th", { rowSpan: 4, className: "k-table-th k-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Phone"))))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { rowSpan: 3, className: "k-table-th k-grid-header-sticky k-header k-first", style: { left: "0px", right: "300px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Contact Title")))), /* @__PURE__ */ import_react.default.createElement("th", { colSpan: 3, className: "k-table-th k-grid-no-left-border k-grid-header-sticky k-header", style: { left: "100px", right: "0px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Location"))))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { colSpan: 2, className: "k-table-th k-grid-no-left-border k-grid-header-sticky k-header k-first", style: { left: "100px", right: "100px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Test")))), /* @__PURE__ */ import_react.default.createElement("th", { rowSpan: 2, className: "k-table-th k-grid-no-left-border k-grid-header-sticky k-header", style: { left: "300px", right: "0px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "City"))))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-grid-no-left-border k-grid-header-sticky k-header k-first", style: { left: "100px", right: "200px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Fax")))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-grid-no-left-border k-grid-header-sticky k-header", style: { left: "200px", right: "100px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Country")))))))))), /* @__PURE__ */ import_react.default.createElement("h3", null, "RTL"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-rtl k-d-flex k-justify-content-end" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "test-grid k-grid k-grid-md k-grid-display-block k-grid-no-scrollbar", style: { height: "300px", width: "800px" } }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header-wrap k-auto-scrollable" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table k-table-md k-grid-header-table" }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "200px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "100px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "100px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "100px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "100px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "1000px" } })), /* @__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", { rowSpan: 4, className: "k-table-th k-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Contact Name")))), /* @__PURE__ */ import_react.default.createElement("th", { colSpan: 4, className: "k-table-th k-grid-header-sticky k-header", style: { left: "0px", right: "0px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Contact Info")))), /* @__PURE__ */ import_react.default.createElement("th", { rowSpan: 4, className: "k-table-th k-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Phone"))))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { rowSpan: 3, className: "k-table-th k-grid-header-sticky k-header k-first", style: { left: "300px", right: "0px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Contact Title")))), /* @__PURE__ */ import_react.default.createElement("th", { colSpan: 3, className: "k-table-th k-grid-no-left-border k-grid-header-sticky k-header", style: { left: "0px", right: "100px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Location"))))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { colSpan: 2, className: "k-table-th k-grid-no-left-border k-grid-header-sticky k-header k-first", style: { left: "100px", right: "100px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Test")))), /* @__PURE__ */ import_react.default.createElement("th", { rowSpan: 2, className: "k-table-th k-grid-no-left-border k-grid-header-sticky k-header", style: { left: "0px", right: "300px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "City"))))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-grid-no-left-border k-grid-header-sticky k-header k-first", style: { left: "200px", right: "100px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Fax")))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-grid-no-left-border k-grid-header-sticky k-header", style: { left: "100px", right: "200px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Country")))))))))))))
35
+ /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { id: "test-area", className: "k-d-grid" }, /* @__PURE__ */ import_react.default.createElement("span", null, "LTR"), /* @__PURE__ */ import_react.default.createElement("div", { className: "test-grid k-grid k-grid-md k-grid-display-block k-grid-no-scrollbar", style: { height: "300px", width: "800px" } }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header-wrap k-auto-scrollable" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table k-table-md k-grid-header-table" }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "200px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "100px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "100px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "100px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "100px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "1000px" } })), /* @__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", { rowSpan: 4, className: "k-table-th k-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Contact Name")))), /* @__PURE__ */ import_react.default.createElement("th", { colSpan: 4, className: "k-table-th k-grid-header-sticky k-header", style: { left: "0px", right: "0px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Contact Info")))), /* @__PURE__ */ import_react.default.createElement("th", { rowSpan: 4, className: "k-table-th k-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Phone"))))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { rowSpan: 3, className: "k-table-th k-grid-header-sticky k-header k-first", style: { left: "0px", right: "300px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Contact Title")))), /* @__PURE__ */ import_react.default.createElement("th", { colSpan: 3, className: "k-table-th k-grid-no-left-border k-grid-header-sticky k-header", style: { left: "100px", right: "0px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Location"))))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { colSpan: 2, className: "k-table-th k-grid-no-left-border k-grid-header-sticky k-header k-first", style: { left: "100px", right: "100px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Test")))), /* @__PURE__ */ import_react.default.createElement("th", { rowSpan: 2, className: "k-table-th k-grid-no-left-border k-grid-header-sticky k-header", style: { left: "300px", right: "0px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "City"))))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-grid-no-left-border k-grid-header-sticky k-header k-first", style: { left: "100px", right: "200px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Fax")))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-grid-no-left-border k-grid-header-sticky k-header", style: { left: "200px", right: "100px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Country")))))))))), /* @__PURE__ */ import_react.default.createElement("span", null, "RTL"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-rtl k-d-flex k-justify-content-end" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "test-grid k-grid k-grid-md k-grid-display-block k-grid-no-scrollbar", style: { height: "300px", width: "800px" } }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header-wrap k-auto-scrollable" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table k-table-md k-grid-header-table" }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "200px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "100px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "100px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "100px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "100px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "1000px" } })), /* @__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", { rowSpan: 4, className: "k-table-th k-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Contact Name")))), /* @__PURE__ */ import_react.default.createElement("th", { colSpan: 4, className: "k-table-th k-grid-header-sticky k-header", style: { left: "0px", right: "0px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Contact Info")))), /* @__PURE__ */ import_react.default.createElement("th", { rowSpan: 4, className: "k-table-th k-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Phone"))))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { rowSpan: 3, className: "k-table-th k-grid-header-sticky k-header k-first", style: { left: "300px", right: "0px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Contact Title")))), /* @__PURE__ */ import_react.default.createElement("th", { colSpan: 3, className: "k-table-th k-grid-no-left-border k-grid-header-sticky k-header", style: { left: "0px", right: "100px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Location"))))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { colSpan: 2, className: "k-table-th k-grid-no-left-border k-grid-header-sticky k-header k-first", style: { left: "100px", right: "100px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Test")))), /* @__PURE__ */ import_react.default.createElement("th", { rowSpan: 2, className: "k-table-th k-grid-no-left-border k-grid-header-sticky k-header", style: { left: "0px", right: "300px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "City"))))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-grid-no-left-border k-grid-header-sticky k-header k-first", style: { left: "200px", right: "100px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Fax")))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-grid-no-left-border k-grid-header-sticky k-header", style: { left: "100px", right: "200px" } }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-link" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-column-title" }, "Country")))))))))))))
36
36
  );
37
37
  })();
38
38
  //# sourceMappingURL=grid-sticky-multicolumn-headers.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/grid/tests/grid-sticky-multicolumn-headers.tsx"],
4
- "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('app') as HTMLElement\n);\n\nroot.render(\n <>\n <div id=\"test-area\" className=\"k-d-grid\">\n <h3>LTR</h3>\n <div className=\"test-grid k-grid k-grid-md k-grid-display-block k-grid-no-scrollbar\" style={{ height: \"300px\", width: \"800px\" }}>\n <div className=\"k-grid-header\">\n <div className=\"k-grid-header-wrap k-auto-scrollable\">\n <table className=\"k-table k-table-md k-grid-header-table\">\n <colgroup>\n <col style={{ width: \"200px\" }} />\n <col style={{ width: \"100px\" }} />\n <col style={{ width: \"100px\" }} />\n <col style={{ width: \"100px\" }} />\n <col style={{ width: \"100px\" }} />\n <col style={{ width: \"1000px\" }} />\n </colgroup>\n <thead className=\"k-table-thead\">\n <tr className=\"k-table-row\">\n <th rowSpan={4} className=\"k-table-th k-header\">\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Contact Name</span>\n </span>\n </span>\n </th>\n <th colSpan={4} className=\"k-table-th k-grid-header-sticky k-header\" style={{ left: '0px', right: '0px' }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Contact Info</span>\n </span>\n </span>\n </th>\n <th rowSpan={4} className=\"k-table-th k-header\">\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Phone</span>\n </span>\n </span>\n </th>\n </tr>\n <tr className=\"k-table-row\">\n <th rowSpan={3} className=\"k-table-th k-grid-header-sticky k-header k-first\" style={{ left: '0px', right: \"300px\" }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Contact Title</span>\n </span>\n </span>\n </th>\n <th colSpan={3} className=\"k-table-th k-grid-no-left-border k-grid-header-sticky k-header\"style={{ left: \"100px\", right: '0px' }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Location</span>\n </span>\n </span>\n </th>\n </tr>\n <tr className=\"k-table-row\">\n <th colSpan={2} className=\"k-table-th k-grid-no-left-border k-grid-header-sticky k-header k-first\" style={{ left: \"100px\", right: \"100px\" }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Test</span>\n </span>\n </span>\n </th>\n <th rowSpan={2} className=\"k-table-th k-grid-no-left-border k-grid-header-sticky k-header\" style={{ left: \"300px\", right: '0px' }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">City</span>\n </span>\n </span>\n </th>\n </tr>\n <tr className=\"k-table-row\">\n <th className=\"k-table-th k-grid-no-left-border k-grid-header-sticky k-header k-first\" style={{ left: \"100px\", right: \"200px\" }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Fax</span>\n </span>\n </span>\n </th>\n <th className=\"k-table-th k-grid-no-left-border k-grid-header-sticky k-header\" style={{ left: \"200px\", right: \"100px\" }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Country</span>\n </span>\n </span>\n </th>\n </tr>\n </thead>\n </table>\n </div>\n </div>\n </div>\n\n <h3>RTL</h3>\n <div className=\"k-rtl k-d-flex k-justify-content-end\">\n <div className=\"test-grid k-grid k-grid-md k-grid-display-block k-grid-no-scrollbar\" style={{ height: \"300px\", width: \"800px\" }}>\n <div className=\"k-grid-header\">\n <div className=\"k-grid-header-wrap k-auto-scrollable\">\n <table className=\"k-table k-table-md k-grid-header-table\">\n <colgroup>\n <col style={{ width: \"200px\" }} />\n <col style={{ width: \"100px\" }} />\n <col style={{ width: \"100px\" }} />\n <col style={{ width: \"100px\" }} />\n <col style={{ width: \"100px\" }} />\n <col style={{ width: \"1000px\" }} />\n </colgroup>\n <thead className=\"k-table-thead\">\n <tr className=\"k-table-row\">\n <th rowSpan={4} className=\"k-table-th k-header\">\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Contact Name</span>\n </span>\n </span>\n </th>\n <th colSpan={4} className=\"k-table-th k-grid-header-sticky k-header\" style={{ left: '0px', right: '0px' }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Contact Info</span>\n </span>\n </span>\n </th>\n <th rowSpan={4} className=\"k-table-th k-header\">\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Phone</span>\n </span>\n </span>\n </th>\n </tr>\n <tr className=\"k-table-row\">\n <th rowSpan={3} className=\"k-table-th k-grid-header-sticky k-header k-first\" style={{ left: \"300px\", right: '0px' }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Contact Title</span>\n </span>\n </span>\n </th>\n <th colSpan={3} className=\"k-table-th k-grid-no-left-border k-grid-header-sticky k-header\" style={{ left: '0px', right: \"100px\" }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Location</span>\n </span>\n </span>\n </th>\n </tr>\n <tr className=\"k-table-row\">\n <th colSpan={2} className=\"k-table-th k-grid-no-left-border k-grid-header-sticky k-header k-first\" style={{ left: \"100px\", right: \"100px\" }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Test</span>\n </span>\n </span>\n </th>\n <th rowSpan={2} className=\"k-table-th k-grid-no-left-border k-grid-header-sticky k-header\" style={{ left: '0px', right: \"300px\" }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">City</span>\n </span>\n </span>\n </th>\n </tr>\n <tr className=\"k-table-row\">\n <th className=\"k-table-th k-grid-no-left-border k-grid-header-sticky k-header k-first\" style={{ left: \"200px\", right: \"100px\" }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Fax</span>\n </span>\n </span>\n </th>\n <th className=\"k-table-th k-grid-no-left-border k-grid-header-sticky k-header\" style={{ left: \"100px\", right: \"200px\" }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Country</span>\n </span>\n </span>\n </th>\n </tr>\n </thead>\n </table>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </>\n);\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('app') as HTMLElement\n);\n\nroot.render(\n <>\n <div id=\"test-area\" className=\"k-d-grid\">\n <span>LTR</span>\n <div className=\"test-grid k-grid k-grid-md k-grid-display-block k-grid-no-scrollbar\" style={{ height: \"300px\", width: \"800px\" }}>\n <div className=\"k-grid-header\">\n <div className=\"k-grid-header-wrap k-auto-scrollable\">\n <table className=\"k-table k-table-md k-grid-header-table\">\n <colgroup>\n <col style={{ width: \"200px\" }} />\n <col style={{ width: \"100px\" }} />\n <col style={{ width: \"100px\" }} />\n <col style={{ width: \"100px\" }} />\n <col style={{ width: \"100px\" }} />\n <col style={{ width: \"1000px\" }} />\n </colgroup>\n <thead className=\"k-table-thead\">\n <tr className=\"k-table-row\">\n <th rowSpan={4} className=\"k-table-th k-header\">\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Contact Name</span>\n </span>\n </span>\n </th>\n <th colSpan={4} className=\"k-table-th k-grid-header-sticky k-header\" style={{ left: '0px', right: '0px' }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Contact Info</span>\n </span>\n </span>\n </th>\n <th rowSpan={4} className=\"k-table-th k-header\">\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Phone</span>\n </span>\n </span>\n </th>\n </tr>\n <tr className=\"k-table-row\">\n <th rowSpan={3} className=\"k-table-th k-grid-header-sticky k-header k-first\" style={{ left: '0px', right: \"300px\" }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Contact Title</span>\n </span>\n </span>\n </th>\n <th colSpan={3} className=\"k-table-th k-grid-no-left-border k-grid-header-sticky k-header\"style={{ left: \"100px\", right: '0px' }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Location</span>\n </span>\n </span>\n </th>\n </tr>\n <tr className=\"k-table-row\">\n <th colSpan={2} className=\"k-table-th k-grid-no-left-border k-grid-header-sticky k-header k-first\" style={{ left: \"100px\", right: \"100px\" }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Test</span>\n </span>\n </span>\n </th>\n <th rowSpan={2} className=\"k-table-th k-grid-no-left-border k-grid-header-sticky k-header\" style={{ left: \"300px\", right: '0px' }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">City</span>\n </span>\n </span>\n </th>\n </tr>\n <tr className=\"k-table-row\">\n <th className=\"k-table-th k-grid-no-left-border k-grid-header-sticky k-header k-first\" style={{ left: \"100px\", right: \"200px\" }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Fax</span>\n </span>\n </span>\n </th>\n <th className=\"k-table-th k-grid-no-left-border k-grid-header-sticky k-header\" style={{ left: \"200px\", right: \"100px\" }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Country</span>\n </span>\n </span>\n </th>\n </tr>\n </thead>\n </table>\n </div>\n </div>\n </div>\n\n <span>RTL</span>\n <div className=\"k-rtl k-d-flex k-justify-content-end\">\n <div className=\"test-grid k-grid k-grid-md k-grid-display-block k-grid-no-scrollbar\" style={{ height: \"300px\", width: \"800px\" }}>\n <div className=\"k-grid-header\">\n <div className=\"k-grid-header-wrap k-auto-scrollable\">\n <table className=\"k-table k-table-md k-grid-header-table\">\n <colgroup>\n <col style={{ width: \"200px\" }} />\n <col style={{ width: \"100px\" }} />\n <col style={{ width: \"100px\" }} />\n <col style={{ width: \"100px\" }} />\n <col style={{ width: \"100px\" }} />\n <col style={{ width: \"1000px\" }} />\n </colgroup>\n <thead className=\"k-table-thead\">\n <tr className=\"k-table-row\">\n <th rowSpan={4} className=\"k-table-th k-header\">\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Contact Name</span>\n </span>\n </span>\n </th>\n <th colSpan={4} className=\"k-table-th k-grid-header-sticky k-header\" style={{ left: '0px', right: '0px' }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Contact Info</span>\n </span>\n </span>\n </th>\n <th rowSpan={4} className=\"k-table-th k-header\">\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Phone</span>\n </span>\n </span>\n </th>\n </tr>\n <tr className=\"k-table-row\">\n <th rowSpan={3} className=\"k-table-th k-grid-header-sticky k-header k-first\" style={{ left: \"300px\", right: '0px' }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Contact Title</span>\n </span>\n </span>\n </th>\n <th colSpan={3} className=\"k-table-th k-grid-no-left-border k-grid-header-sticky k-header\" style={{ left: '0px', right: \"100px\" }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Location</span>\n </span>\n </span>\n </th>\n </tr>\n <tr className=\"k-table-row\">\n <th colSpan={2} className=\"k-table-th k-grid-no-left-border k-grid-header-sticky k-header k-first\" style={{ left: \"100px\", right: \"100px\" }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Test</span>\n </span>\n </span>\n </th>\n <th rowSpan={2} className=\"k-table-th k-grid-no-left-border k-grid-header-sticky k-header\" style={{ left: '0px', right: \"300px\" }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">City</span>\n </span>\n </span>\n </th>\n </tr>\n <tr className=\"k-table-row\">\n <th className=\"k-table-th k-grid-no-left-border k-grid-header-sticky k-header k-first\" style={{ left: \"200px\", right: \"100px\" }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Fax</span>\n </span>\n </span>\n </th>\n <th className=\"k-table-th k-grid-no-left-border k-grid-header-sticky k-header\" style={{ left: \"100px\", right: \"200px\" }}>\n <span className=\"k-cell-inner\">\n <span className=\"k-link\">\n <span className=\"k-column-title\">Country</span>\n </span>\n </span>\n </th>\n </tr>\n </thead>\n </table>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </>\n);\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAkB;AAClB,sBAAqB;AAErB,MAAM,OAAO,cAAAA,QAAS;AAAA,IAClB,SAAS,eAAe,KAAK;AAAA,EACjC;AAEA,OAAK;AAAA,IACD,6BAAAC,QAAA,2BAAAA,QAAA,gBACI,6BAAAA,QAAA,cAAC,SAAI,IAAG,aAAY,WAAU,cAC1B,6BAAAA,QAAA,cAAC,cAAK,KAAG,GACT,6BAAAA,QAAA,cAAC,SAAI,WAAU,uEAAsE,OAAO,EAAE,QAAQ,SAAS,OAAO,QAAQ,KAC1H,6BAAAA,QAAA,cAAC,SAAI,WAAU,mBACX,6BAAAA,QAAA,cAAC,SAAI,WAAU,0CACX,6BAAAA,QAAA,cAAC,WAAM,WAAU,4CACb,6BAAAA,QAAA,cAAC,kBACG,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,GAAG,GAChC,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,GAAG,GAChC,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,GAAG,GAChC,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,GAAG,GAChC,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,GAAG,GAChC,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,SAAS,GAAG,CACrC,GACA,6BAAAA,QAAA,cAAC,WAAM,WAAU,mBACb,6BAAAA,QAAA,cAAC,QAAG,WAAU,iBACV,6BAAAA,QAAA,cAAC,QAAG,SAAS,GAAG,WAAU,yBACtB,6BAAAA,QAAA,cAAC,UAAK,WAAU,kBACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,YACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,oBAAiB,cAAY,CACjD,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC,QAAG,SAAS,GAAG,WAAU,4CAA2C,OAAO,EAAE,MAAM,OAAO,OAAO,MAAM,KACpG,6BAAAA,QAAA,cAAC,UAAK,WAAU,kBACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,YACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,oBAAiB,cAAY,CACjD,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC,QAAG,SAAS,GAAG,WAAU,yBACtB,6BAAAA,QAAA,cAAC,UAAK,WAAU,kBACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,YACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,oBAAiB,OAAK,CAC1C,CACJ,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC,QAAG,WAAU,iBACV,6BAAAA,QAAA,cAAC,QAAG,SAAS,GAAG,WAAU,oDAAmD,OAAO,EAAE,MAAM,OAAO,OAAO,QAAQ,KAC9G,6BAAAA,QAAA,cAAC,UAAK,WAAU,kBACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,YACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,oBAAiB,eAAa,CAClD,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC,QAAG,SAAS,GAAG,WAAU,kEAAgE,OAAO,EAAE,MAAM,SAAS,OAAO,MAAM,KAC3H,6BAAAA,QAAA,cAAC,UAAK,WAAU,kBACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,YACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,oBAAiB,UAAQ,CAC7C,CACJ,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC,QAAG,WAAU,iBACV,6BAAAA,QAAA,cAAC,QAAG,SAAS,GAAG,WAAU,0EAAyE,OAAO,EAAE,MAAM,SAAS,OAAO,QAAQ,KACtI,6BAAAA,QAAA,cAAC,UAAK,WAAU,kBACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,YACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,oBAAiB,MAAI,CACzC,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC,QAAG,SAAS,GAAG,WAAU,kEAAiE,OAAO,EAAE,MAAM,SAAS,OAAO,MAAM,KAC5H,6BAAAA,QAAA,cAAC,UAAK,WAAU,kBACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,YACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,oBAAiB,MAAI,CACzC,CACJ,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC,QAAG,WAAU,iBACV,6BAAAA,QAAA,cAAC,QAAG,WAAU,0EAAyE,OAAO,EAAE,MAAM,SAAS,OAAO,QAAQ,KAC1H,6BAAAA,QAAA,cAAC,UAAK,WAAU,kBACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,YACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,oBAAiB,KAAG,CACxC,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC,QAAG,WAAU,kEAAiE,OAAO,EAAE,MAAM,SAAS,OAAO,QAAQ,KAClH,6BAAAA,QAAA,cAAC,UAAK,WAAU,kBACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,YACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,oBAAiB,SAAO,CAC5C,CACJ,CACJ,CACJ,CACJ,CACJ,CACJ,CACJ,CACJ,GAEA,6BAAAA,QAAA,cAAC,cAAK,KAAG,GACT,6BAAAA,QAAA,cAAC,SAAI,WAAU,0CACX,6BAAAA,QAAA,cAAC,SAAI,WAAU,uEAAsE,OAAO,EAAE,QAAQ,SAAS,OAAO,QAAQ,KAC1H,6BAAAA,QAAA,cAAC,SAAI,WAAU,mBACX,6BAAAA,QAAA,cAAC,SAAI,WAAU,0CACX,6BAAAA,QAAA,cAAC,WAAM,WAAU,4CACb,6BAAAA,QAAA,cAAC,kBACG,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,GAAG,GAChC,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,GAAG,GAChC,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,GAAG,GAChC,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,GAAG,GAChC,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,GAAG,GAChC,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,SAAS,GAAG,CACrC,GACA,6BAAAA,QAAA,cAAC,WAAM,WAAU,mBACb,6BAAAA,QAAA,cAAC,QAAG,WAAU,iBACV,6BAAAA,QAAA,cAAC,QAAG,SAAS,GAAG,WAAU,yBACtB,6BAAAA,QAAA,cAAC,UAAK,WAAU,kBACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,YACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,oBAAiB,cAAY,CACjD,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC,QAAG,SAAS,GAAG,WAAU,4CAA2C,OAAO,EAAE,MAAM,OAAO,OAAO,MAAM,KACpG,6BAAAA,QAAA,cAAC,UAAK,WAAU,kBACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,YACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,oBAAiB,cAAY,CACjD,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC,QAAG,SAAS,GAAG,WAAU,yBACtB,6BAAAA,QAAA,cAAC,UAAK,WAAU,kBACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,YACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,oBAAiB,OAAK,CAC1C,CACJ,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC,QAAG,WAAU,iBACV,6BAAAA,QAAA,cAAC,QAAG,SAAS,GAAG,WAAU,oDAAmD,OAAO,EAAE,MAAM,SAAS,OAAO,MAAM,KAC9G,6BAAAA,QAAA,cAAC,UAAK,WAAU,kBACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,YACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,oBAAiB,eAAa,CAClD,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC,QAAG,SAAS,GAAG,WAAU,kEAAiE,OAAO,EAAE,MAAM,OAAO,OAAO,QAAQ,KAC5H,6BAAAA,QAAA,cAAC,UAAK,WAAU,kBACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,YACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,oBAAiB,UAAQ,CAC7C,CACJ,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC,QAAG,WAAU,iBACV,6BAAAA,QAAA,cAAC,QAAG,SAAS,GAAG,WAAU,0EAAyE,OAAO,EAAE,MAAM,SAAS,OAAO,QAAQ,KACtI,6BAAAA,QAAA,cAAC,UAAK,WAAU,kBACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,YACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,oBAAiB,MAAI,CACzC,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC,QAAG,SAAS,GAAG,WAAU,kEAAiE,OAAO,EAAE,MAAM,OAAO,OAAO,QAAQ,KAC5H,6BAAAA,QAAA,cAAC,UAAK,WAAU,kBACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,YACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,oBAAiB,MAAI,CACzC,CACJ,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC,QAAG,WAAU,iBACV,6BAAAA,QAAA,cAAC,QAAG,WAAU,0EAAyE,OAAO,EAAE,MAAM,SAAS,OAAO,QAAQ,KAC1H,6BAAAA,QAAA,cAAC,UAAK,WAAU,kBACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,YACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,oBAAiB,KAAG,CACxC,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC,QAAG,WAAU,kEAAiE,OAAO,EAAE,MAAM,SAAS,OAAO,QAAQ,KAClH,6BAAAA,QAAA,cAAC,UAAK,WAAU,kBACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,YACZ,6BAAAA,QAAA,cAAC,UAAK,WAAU,oBAAiB,SAAO,CAC5C,CACJ,CACJ,CACJ,CACJ,CACJ,CACJ,CACJ,CACJ,CACJ,CAEJ,CACJ;AAAA,EACJ;",
6
6
  "names": ["ReactDOM", "React"]
7
7
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-themes-html",
3
3
  "description": "A collection of HTML helpers used for developing Kendo UI themes",
4
- "version": "6.0.4-dev.0",
4
+ "version": "6.0.4-dev.1",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -43,5 +43,5 @@
43
43
  "devDependencies": {
44
44
  "@types/react": "^18.0.2"
45
45
  },
46
- "gitHead": "15583e94f67633d6680efd66700436332e389175"
46
+ "gitHead": "06ad9ba31573c1384dad684f03b818ee245247a5"
47
47
  }
@@ -38,8 +38,8 @@ root.render(
38
38
  <>
39
39
  <style>{styles}</style>
40
40
  <div id="test-area" className="k-d-grid k-grid-cols-1">
41
+ <span>Appbar Sticky and Inherit ThemeColor</span>
41
42
  <section>
42
- <h4>Appbar Sticky and Inherit ThemeColor</h4>
43
43
  <div style={{ background: "#1976d2", color: "#fff" }}>
44
44
  <Appbar positionMode={'sticky'} themeColor={'inherit'}>
45
45
  <AppbarSection>
@@ -74,9 +74,8 @@ root.render(
74
74
  </div>
75
75
  </section>
76
76
 
77
-
77
+ <span>Appbar Light ThemeColor</span>
78
78
  <section>
79
- <h4>Appbar Light ThemeColor</h4>
80
79
  <Appbar themeColor={'light'}>
81
80
  <AppbarSection>
82
81
  <Icon name="menu" />
@@ -109,9 +108,8 @@ root.render(
109
108
  </Appbar>
110
109
  </section>
111
110
 
112
-
111
+ <span>Appbar Dark ThemeColor</span>
113
112
  <section>
114
- <h4>Appbar Dark ThemeColor</h4>
115
113
  <Appbar themeColor={'dark'}>
116
114
  <AppbarSection>
117
115
  <Icon name="menu" />
@@ -144,8 +142,8 @@ root.render(
144
142
  </Appbar>
145
143
  </section>
146
144
 
145
+ <span>Appbar Primary ThemeColor</span>
147
146
  <section>
148
- <h4>Appbar Primary ThemeColor</h4>
149
147
  <Appbar themeColor={'primary'}>
150
148
  <AppbarSection>
151
149
  <Icon name="menu" />
@@ -178,8 +176,8 @@ root.render(
178
176
  </Appbar>
179
177
  </section>
180
178
 
179
+ <span>Appbar Secondary ThemeColor</span>
181
180
  <section>
182
- <h4>Appbar Secondary ThemeColor</h4>
183
181
  <Appbar themeColor={'secondary'}>
184
182
  <AppbarSection>
185
183
  <Icon name="menu" />
@@ -212,8 +210,8 @@ root.render(
212
210
  </Appbar>
213
211
  </section>
214
212
 
213
+ <span>Appbar Tertiary ThemeColor</span>
215
214
  <section>
216
- <h4>Appbar Tertiary ThemeColor</h4>
217
215
  <Appbar themeColor={'tertiary'}>
218
216
  <AppbarSection>
219
217
  <Icon name="menu" />
@@ -246,8 +244,8 @@ root.render(
246
244
  </Appbar>
247
245
  </section>
248
246
 
247
+ <span>Appbar Info ThemeColor</span>
249
248
  <section>
250
- <h4>Appbar Info ThemeColor</h4>
251
249
  <Appbar themeColor={'info'}>
252
250
  <AppbarSection>
253
251
  <Icon name="menu" />
@@ -280,8 +278,8 @@ root.render(
280
278
  </Appbar>
281
279
  </section>
282
280
 
281
+ <span>Appbar Success ThemeColor</span>
283
282
  <section>
284
- <h4>Appbar Success ThemeColor</h4>
285
283
  <Appbar themeColor={'success'}>
286
284
  <AppbarSection>
287
285
  <Icon name="menu" />
@@ -314,8 +312,8 @@ root.render(
314
312
  </Appbar>
315
313
  </section>
316
314
 
315
+ <span>Appbar Warning ThemeColor</span>
317
316
  <section>
318
- <h4>Appbar Warning ThemeColor</h4>
319
317
  <Appbar themeColor={'warning'}>
320
318
  <AppbarSection>
321
319
  <Icon name="menu" />
@@ -348,8 +346,8 @@ root.render(
348
346
  </Appbar>
349
347
  </section>
350
348
 
349
+ <span>Appbar Error ThemeColor</span>
351
350
  <section>
352
- <h4>Appbar Error ThemeColor</h4>
353
351
  <Appbar themeColor={'error'}>
354
352
  <AppbarSection>
355
353
  <Icon name="menu" />
@@ -382,8 +380,8 @@ root.render(
382
380
  </Appbar>
383
381
  </section>
384
382
 
383
+ <span>Appbar Inverse ThemeColor</span>
385
384
  <section>
386
- <h4>Appbar Inverse ThemeColor</h4>
387
385
  <Appbar themeColor={'inverse'}>
388
386
  <AppbarSection>
389
387
  <Icon name="menu" />
@@ -416,8 +414,8 @@ root.render(
416
414
  </Appbar>
417
415
  </section>
418
416
 
417
+ <span>Sticky AppBar</span>
419
418
  <section>
420
- <h4>Sticky AppBar</h4>
421
419
  <Appbar themeColor={'light'} positionMode={'sticky'}>
422
420
  <AppbarSection>
423
421
  <Icon name="menu" />
@@ -450,8 +448,8 @@ root.render(
450
448
  </Appbar>
451
449
  </section>
452
450
 
451
+ <span>RTL AppBar</span>
453
452
  <section>
454
- <h4>RTL AppBar</h4>
455
453
  <Appbar themeColor={'light'} dir="rtl">
456
454
  <AppbarSection>
457
455
  <Icon name="menu" />
@@ -23,7 +23,7 @@ root.render(
23
23
  <h2>Solid Colors</h2>
24
24
  <div className="colors k-d-grid k-grid-cols-2">
25
25
  <section>
26
- <h4>Primary ThemeColor</h4>
26
+ <span className="k-col-start-1">Primary ThemeColor</span>
27
27
  <nav className="k-bottom-nav k-bottom-nav-primary k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
28
28
  <span className="k-bottom-nav-item">
29
29
  <Icon className="k-bottom-nav-item-icon" name="email" />
@@ -45,7 +45,7 @@ root.render(
45
45
  </section>
46
46
 
47
47
  <section>
48
- <h4>Secondary ThemeColor</h4>
48
+ <span>Secondary ThemeColor</span>
49
49
  <nav className="k-bottom-nav k-bottom-nav-secondary k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
50
50
  <span className="k-bottom-nav-item">
51
51
  <Icon className="k-bottom-nav-item-icon" name="email" />
@@ -67,7 +67,7 @@ root.render(
67
67
  </section>
68
68
 
69
69
  <section>
70
- <h4>Tertiary ThemeColor</h4>
70
+ <span>Tertiary ThemeColor</span>
71
71
  <nav className="k-bottom-nav k-bottom-nav-tertiary k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
72
72
  <span className="k-bottom-nav-item">
73
73
  <Icon className="k-bottom-nav-item-icon" name="email" />
@@ -89,7 +89,7 @@ root.render(
89
89
  </section>
90
90
 
91
91
  <section>
92
- <h4>Info ThemeColor</h4>
92
+ <span>Info ThemeColor</span>
93
93
  <nav className="k-bottom-nav k-bottom-nav-info k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
94
94
  <span className="k-bottom-nav-item">
95
95
  <Icon className="k-bottom-nav-item-icon" name="email" />
@@ -111,7 +111,7 @@ root.render(
111
111
  </section>
112
112
 
113
113
  <section>
114
- <h4>Success ThemeColor</h4>
114
+ <span>Success ThemeColor</span>
115
115
  <nav className="k-bottom-nav k-bottom-nav-success k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
116
116
  <span className="k-bottom-nav-item">
117
117
  <Icon className="k-bottom-nav-item-icon" name="email" />
@@ -133,7 +133,7 @@ root.render(
133
133
  </section>
134
134
 
135
135
  <section>
136
- <h4>Warning ThemeColor</h4>
136
+ <span>Warning ThemeColor</span>
137
137
  <nav className="k-bottom-nav k-bottom-nav-warning k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
138
138
  <span className="k-bottom-nav-item">
139
139
  <Icon className="k-bottom-nav-item-icon" name="email" />
@@ -155,7 +155,7 @@ root.render(
155
155
  </section>
156
156
 
157
157
  <section>
158
- <h4>Error ThemeColor</h4>
158
+ <span>Error ThemeColor</span>
159
159
  <nav className="k-bottom-nav k-bottom-nav-error k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
160
160
  <span className="k-bottom-nav-item">
161
161
  <Icon className="k-bottom-nav-item-icon" name="email" />
@@ -177,7 +177,7 @@ root.render(
177
177
  </section>
178
178
 
179
179
  <section>
180
- <h4>Dark ThemeColor</h4>
180
+ <span>Dark ThemeColor</span>
181
181
  <nav className="k-bottom-nav k-bottom-nav-dark k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
182
182
  <span className="k-bottom-nav-item">
183
183
  <Icon className="k-bottom-nav-item-icon" name="email" />
@@ -199,7 +199,7 @@ root.render(
199
199
  </section>
200
200
 
201
201
  <section>
202
- <h4>Light ThemeColor</h4>
202
+ <span>Light ThemeColor</span>
203
203
  <nav className="k-bottom-nav k-bottom-nav-light k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
204
204
  <span className="k-bottom-nav-item">
205
205
  <Icon className="k-bottom-nav-item-icon" name="email" />
@@ -224,7 +224,7 @@ root.render(
224
224
  <h2>Flat Colors</h2>
225
225
  <div className="colors colors-flat k-d-grid k-grid-cols-2">
226
226
  <section>
227
- <h4>Primary ThemeColor</h4>
227
+ <span>Primary ThemeColor</span>
228
228
  <nav className="k-bottom-nav k-bottom-nav-primary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
229
229
  <span className="k-bottom-nav-item">
230
230
  <Icon className="k-bottom-nav-item-icon" name="email" />
@@ -246,7 +246,7 @@ root.render(
246
246
  </section>
247
247
 
248
248
  <section>
249
- <h4>Secondary ThemeColor</h4>
249
+ <span>Secondary ThemeColor</span>
250
250
  <nav className="k-bottom-nav k-bottom-nav-secondary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
251
251
  <span className="k-bottom-nav-item">
252
252
  <Icon className="k-bottom-nav-item-icon" name="email" />
@@ -268,7 +268,7 @@ root.render(
268
268
  </section>
269
269
 
270
270
  <section>
271
- <h4>Tertiary ThemeColor</h4>
271
+ <span>Tertiary ThemeColor</span>
272
272
  <nav className="k-bottom-nav k-bottom-nav-tertiary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
273
273
  <span className="k-bottom-nav-item">
274
274
  <Icon className="k-bottom-nav-item-icon" name="email" />
@@ -290,7 +290,7 @@ root.render(
290
290
  </section>
291
291
 
292
292
  <section>
293
- <h4>Info ThemeColor</h4>
293
+ <span>Info ThemeColor</span>
294
294
  <nav className="k-bottom-nav k-bottom-nav-info k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
295
295
  <span className="k-bottom-nav-item">
296
296
  <Icon className="k-bottom-nav-item-icon" name="email" />
@@ -312,7 +312,7 @@ root.render(
312
312
  </section>
313
313
 
314
314
  <section>
315
- <h4>Success ThemeColor</h4>
315
+ <span>Success ThemeColor</span>
316
316
  <nav className="k-bottom-nav k-bottom-nav-success k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
317
317
  <span className="k-bottom-nav-item">
318
318
  <Icon className="k-bottom-nav-item-icon" name="email" />
@@ -334,7 +334,7 @@ root.render(
334
334
  </section>
335
335
 
336
336
  <section>
337
- <h4>Warning ThemeColor</h4>
337
+ <span>Warning ThemeColor</span>
338
338
  <nav className="k-bottom-nav k-bottom-nav-warning k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
339
339
  <span className="k-bottom-nav-item">
340
340
  <Icon className="k-bottom-nav-item-icon" name="email" />
@@ -356,7 +356,7 @@ root.render(
356
356
  </section>
357
357
 
358
358
  <section>
359
- <h4>Error ThemeColor</h4>
359
+ <span>Error ThemeColor</span>
360
360
  <nav className="k-bottom-nav k-bottom-nav-error k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
361
361
  <span className="k-bottom-nav-item">
362
362
  <Icon className="k-bottom-nav-item-icon" name="email" />
@@ -378,7 +378,7 @@ root.render(
378
378
  </section>
379
379
 
380
380
  <section>
381
- <h4>Dark ThemeColor</h4>
381
+ <span>Dark ThemeColor</span>
382
382
  <nav className="k-bottom-nav k-bottom-nav-dark k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
383
383
  <span className="k-bottom-nav-item">
384
384
  <Icon className="k-bottom-nav-item-icon" name="email" />
@@ -400,7 +400,7 @@ root.render(
400
400
  </section>
401
401
 
402
402
  <section>
403
- <h4>Light ThemeColor</h4>
403
+ <span>Light ThemeColor</span>
404
404
  <nav className="k-bottom-nav k-bottom-nav-light k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
405
405
  <span className="k-bottom-nav-item">
406
406
  <Icon className="k-bottom-nav-item-icon" name="email" />