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

package/dist/grid/tests/grid-size-sm.js

@@ -798,7 +798,7 @@
           Button,
           {
             className: "k-spinner-increase",
-            icon: "arrow-n",
+            icon: "caret-alt-up",
             rounded: null,
             size,
             fillMode
@@ -808,7 +808,7 @@
           Button,
           {
             className: "k-spinner-decrease",
-            icon: "arrow-s",
+            icon: "caret-alt-down",
             rounded: null,
             size,
             fillMode
@@ -1379,7 +1379,7 @@
           Button,
           {
             className: "k-input-button",
-            icon: "arrow-s",
+            icon: "caret-alt-down",
             rounded: null,
             size: this.props.size,
             fillMode: this.props.fillMode
@@ -1705,7 +1705,7 @@
     }
 `;
   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 k-grid-cols-2" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "col-2" }, "Grid"), /* @__PURE__ */ import_react.default.createElement("section", { className: "col-2" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid k-grid-sm k-grid-no-scrollbar" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header-wrap" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table k-table-sm k-grid-header-table" }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "100px" } }), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th 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" }, "100px")))), /* @__PURE__ */ import_react.default.createElement("th", { 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" }, "no width"))))))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-content" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table k-table-sm k-grid-table" }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "100px" } }), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement("tbody", { className: "k-table-tbody" }, /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "1"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Row")), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row k-table-alt-row k-alt" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "2"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Alt row")), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "3"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "This text continues to the end of the grid to test overflow behavior of row contents, as well as line height and vertical alignment.")), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row k-table-alt-row k-alt" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "4"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-placeholder-line" }))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "5"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-placeholder-line" })))))), /* @__PURE__ */ import_react.default.createElement(Pager, { className: "k-grid-pager", size: "small" }))), /* @__PURE__ */ import_react.default.createElement("span", { className: "col-2" }, "Filtering"), /* @__PURE__ */ import_react.default.createElement("section", { className: "col-2" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid k-grid-sm k-grid-no-scrollbar", style: { height: "150px" } }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header-wrap" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table k-table-sm k-grid-header-table" }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { className: "k-hierarchy-col" }), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-header k-hierarchy-cell" }), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-header k-filterable" }, /* @__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" }, "Default")), /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "k-grid-filter-menu k-grid-header-menu" }, /* @__PURE__ */ import_react.default.createElement(Icon, { name: "filter" })))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-header k-filterable k-hover" }, /* @__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" }, "Hover")), /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "k-grid-filter-menu k-grid-header-menu" }, /* @__PURE__ */ import_react.default.createElement(Icon, { name: "filter" })))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-header k-filterable k-focus" }, /* @__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" }, "Focus")), /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "k-grid-filter-menu k-grid-header-menu" }, /* @__PURE__ */ import_react.default.createElement(Icon, { name: "filter" })))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-header k-filterable k-active" }, /* @__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" }, "Active")), /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "k-grid-filter-menu k-grid-header-menu k-active" }, /* @__PURE__ */ import_react.default.createElement(Icon, { name: "filter" })))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-header k-filterable k-sorted" }, /* @__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" }, "Sorted"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-sort-icon" }, /* @__PURE__ */ import_react.default.createElement(Icon, { name: "sort-asc-small" }))), /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "k-grid-filter-menu k-grid-header-menu" }, /* @__PURE__ */ import_react.default.createElement(Icon, { name: "filter" }))))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row k-filter-row" }, /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell-wrapper" }))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell-wrapper" }, /* @__PURE__ */ import_react.default.createElement(NumericTextbox, null), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell-operator" }, /* @__PURE__ */ import_react.default.createElement(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }), " ", /* @__PURE__ */ import_react.default.createElement(Button, { icon: "filter-clear", disabled: true }))))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell-wrapper" }, /* @__PURE__ */ import_react.default.createElement(Textbox, { showClearButton: false, value: "p" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell-operator" }, /* @__PURE__ */ import_react.default.createElement(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }), " ", /* @__PURE__ */ import_react.default.createElement(Button, { icon: "filter-clear" }))))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell-wrapper" }, /* @__PURE__ */ import_react.default.createElement(Textbox, { showClearButton: false, value: "p" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell-operator" }, /* @__PURE__ */ import_react.default.createElement(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }), " ", /* @__PURE__ */ import_react.default.createElement(Button, { icon: "filter-clear" }))))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell-wrapper" }, /* @__PURE__ */ import_react.default.createElement(Textbox, { showClearButton: false, value: "p" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell-operator" }, /* @__PURE__ */ import_react.default.createElement(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }), " ", /* @__PURE__ */ import_react.default.createElement(Button, { icon: "filter-clear" }))))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell-wrapper" })))))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-content" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table k-table-sm k-grid-table" }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { className: "k-hierarchy-col" }), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement("tbody", { className: "k-table-tbody" }, /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-master-row k-table-row k-expanded" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-hierarchy-cell k-table-td" }, /* @__PURE__ */ import_react.default.createElement(Icon, { name: "collapse" })), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "1"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Text"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Text"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Text"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Text")), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-detail-row k-table-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-hierarchy-cell k-table-td" }), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-detail-cell k-table-td", colSpan: 5 }, /* @__PURE__ */ import_react.default.createElement("div", { style: { background: "#ccc", padding: "10px" } }, "Nested content"))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row k-table-alt-row k-alt k-master-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-hierarchy-cell k-table-td" }, /* @__PURE__ */ import_react.default.createElement(Icon, { name: "expand" })), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "2"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Text"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Text"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Text"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Text"))))))), /* @__PURE__ */ import_react.default.createElement("span", null, "Editing"), /* @__PURE__ */ import_react.default.createElement("section", { className: "col-2" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid k-grid-sm k-grid-no-scrollbar" }, /* @__PURE__ */ import_react.default.createElement(Toolbar, { className: "k-grid-toolbar" }, /* @__PURE__ */ import_react.default.createElement(Button, { icon: "add" }, "Add new record")), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header-wrap" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table k-table-sm k-grid-header-table" }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "300px" } })), /* @__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", { scope: "col", 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" }, "Name")))), /* @__PURE__ */ import_react.default.createElement("th", { scope: "col", 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" }, "Price")))), /* @__PURE__ */ import_react.default.createElement("th", { scope: "col", 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" }, "Available")))), /* @__PURE__ */ import_react.default.createElement("th", { scope: "col", className: "k-table-th k-header" }, "\xA0")))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-content" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table k-table-sm k-grid-table", style: { height: "auto" } }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "300px" } })), /* @__PURE__ */ import_react.default.createElement("tbody", { className: "k-table-tbody" }, /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row k-grid-edit-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, /* @__PURE__ */ import_react.default.createElement(Textbox, { value: "Towel", required: true })), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, /* @__PURE__ */ import_react.default.createElement(NumericTextbox, { invalid: true }), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-tooltip k-validator-tooltip k-tooltip-error k-invalid-msg" }, /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-tooltip-icon", name: "warning" }), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-tooltip-content" }, "Price"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-callout k-callout-n" }))), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, /* @__PURE__ */ import_react.default.createElement(Checkbox, { id: "e77452cd-b3b5-4dc9-8210-17007584b695" }), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-checkbox-label", htmlFor: "e77452cd-b3b5-4dc9-8210-17007584b695" })), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td k-command-cell" }, /* @__PURE__ */ import_react.default.createElement(Button, { icon: "check", themeColor: "primary" }, "Update"), /* @__PURE__ */ import_react.default.createElement(Button, { icon: "cancel" }, "Cancel"))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row k-table-alt-row k-alt k-grid-edit-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td k-dirty-cell" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-dirty" }), "LongSingleWordTestLongSingleWordTestLongSingleWordTestLongSingleWordTest"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "18"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "false"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td k-command-cell" }, /* @__PURE__ */ import_react.default.createElement(Button, { icon: "edit" }, "Edit"), /* @__PURE__ */ import_react.default.createElement(Button, { icon: "close" }, "Delete"))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Chang"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "19"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "false"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td k-command-cell" }, /* @__PURE__ */ import_react.default.createElement(Button, { icon: "edit" }, "Edit"), /* @__PURE__ */ import_react.default.createElement(Button, { icon: "close" }, "Delete")))))))), /* @__PURE__ */ import_react.default.createElement("span", null, "Grouping"), /* @__PURE__ */ import_react.default.createElement("section", { className: "col-2" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid k-grid-sm k-grid-no-scrollbar" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grouping-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grouping-dropclue" }), /* @__PURE__ */ import_react.default.createElement(ChipList, { size: "small" }, /* @__PURE__ */ import_react.default.createElement(Chip, { size: "small", icon: "sort-asc-small", actions: /* @__PURE__ */ import_react.default.createElement(ChipAction, { type: "remove" }) }, "Price"), /* @__PURE__ */ import_react.default.createElement(Chip, { size: "small", icon: "sort-desc-small", actions: /* @__PURE__ */ import_react.default.createElement(ChipAction, { type: "remove" }) }, "Name")), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grouping-drop-container" })), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header-wrap" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table k-table-sm k-grid-header-table" }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { className: "k-group-col" }), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-group-cell k-header", scope: "col" }), /* @__PURE__ */ import_react.default.createElement("th", { 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" }, "Name")))), /* @__PURE__ */ import_react.default.createElement("th", { 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" }, "Price")))), /* @__PURE__ */ import_react.default.createElement("th", { 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" }, "Available")))), /* @__PURE__ */ import_react.default.createElement("th", { 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" }, "Units"))))))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-content" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table k-table-sm k-grid-table", style: { height: "auto" } }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { className: "k-group-col" }), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement("tbody", { className: "k-table-tbody" }, /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row k-table-group-row k-grouping-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td", colSpan: 5 }, /* @__PURE__ */ import_react.default.createElement("p", { className: "k-reset" }, /* @__PURE__ */ import_react.default.createElement(Icon, { name: "expand" }), "Price: 19"))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row k-table-group-row k-grouping-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td", colSpan: 5 }, /* @__PURE__ */ import_react.default.createElement("p", { className: "k-reset" }, /* @__PURE__ */ import_react.default.createElement(Icon, { name: "collapse" }), "Price: 30"))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td k-table-group-td k-group-cell" }, "\xA0"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Chai"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "30"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "false"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "15")))))))))
+    /* @__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 k-grid-cols-2" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "col-2" }, "Grid"), /* @__PURE__ */ import_react.default.createElement("section", { className: "col-2" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid k-grid-sm k-grid-no-scrollbar" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header-wrap" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table k-table-sm k-grid-header-table" }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "100px" } }), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th 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" }, "100px")))), /* @__PURE__ */ import_react.default.createElement("th", { 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" }, "no width"))))))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-content" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table k-table-sm k-grid-table" }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "100px" } }), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement("tbody", { className: "k-table-tbody" }, /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "1"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Row")), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row k-table-alt-row k-alt" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "2"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Alt row")), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "3"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "This text continues to the end of the grid to test overflow behavior of row contents, as well as line height and vertical alignment.")), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row k-table-alt-row k-alt" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "4"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-placeholder-line" }))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "5"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-placeholder-line" })))))), /* @__PURE__ */ import_react.default.createElement(Pager, { className: "k-grid-pager", size: "small" }))), /* @__PURE__ */ import_react.default.createElement("span", { className: "col-2" }, "Filtering"), /* @__PURE__ */ import_react.default.createElement("section", { className: "col-2" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid k-grid-sm k-grid-no-scrollbar", style: { height: "150px" } }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header-wrap" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table k-table-sm k-grid-header-table" }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { className: "k-hierarchy-col" }), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-header k-hierarchy-cell" }), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-header k-filterable" }, /* @__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" }, "Default")), /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "k-grid-filter-menu k-grid-header-menu" }, /* @__PURE__ */ import_react.default.createElement(Icon, { name: "filter" })))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-header k-filterable k-hover" }, /* @__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" }, "Hover")), /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "k-grid-filter-menu k-grid-header-menu" }, /* @__PURE__ */ import_react.default.createElement(Icon, { name: "filter" })))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-header k-filterable k-focus" }, /* @__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" }, "Focus")), /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "k-grid-filter-menu k-grid-header-menu" }, /* @__PURE__ */ import_react.default.createElement(Icon, { name: "filter" })))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-header k-filterable k-active" }, /* @__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" }, "Active")), /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "k-grid-filter-menu k-grid-header-menu k-active" }, /* @__PURE__ */ import_react.default.createElement(Icon, { name: "filter" })))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-header k-filterable k-sorted" }, /* @__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" }, "Sorted"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-sort-icon" }, /* @__PURE__ */ import_react.default.createElement(Icon, { name: "sort-asc-small" }))), /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "k-grid-filter-menu k-grid-header-menu" }, /* @__PURE__ */ import_react.default.createElement(Icon, { name: "filter" }))))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row k-filter-row" }, /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell-wrapper" }))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell-wrapper" }, /* @__PURE__ */ import_react.default.createElement(NumericTextbox, null), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell-operator" }, /* @__PURE__ */ import_react.default.createElement(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }), " ", /* @__PURE__ */ import_react.default.createElement(Button, { icon: "filter-clear", disabled: true }))))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell-wrapper" }, /* @__PURE__ */ import_react.default.createElement(Textbox, { showClearButton: false, value: "p" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell-operator" }, /* @__PURE__ */ import_react.default.createElement(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }), " ", /* @__PURE__ */ import_react.default.createElement(Button, { icon: "filter-clear" }))))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell-wrapper" }, /* @__PURE__ */ import_react.default.createElement(Textbox, { showClearButton: false, value: "p" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell-operator" }, /* @__PURE__ */ import_react.default.createElement(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }), " ", /* @__PURE__ */ import_react.default.createElement(Button, { icon: "filter-clear" }))))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell-wrapper" }, /* @__PURE__ */ import_react.default.createElement(Textbox, { showClearButton: false, value: "p" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell-operator" }, /* @__PURE__ */ import_react.default.createElement(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }), " ", /* @__PURE__ */ import_react.default.createElement(Button, { icon: "filter-clear" }))))), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-filtercell-wrapper" })))))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-content" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table k-table-sm k-grid-table" }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { className: "k-hierarchy-col" }), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement("tbody", { className: "k-table-tbody" }, /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-master-row k-table-row k-expanded" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-hierarchy-cell k-table-td" }, /* @__PURE__ */ import_react.default.createElement(Icon, { name: "caret-alt-down" })), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "1"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Text"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Text"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Text"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Text")), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-detail-row k-table-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-hierarchy-cell k-table-td" }), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-detail-cell k-table-td", colSpan: 5 }, /* @__PURE__ */ import_react.default.createElement("div", { style: { background: "#ccc", padding: "10px" } }, "Nested content"))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row k-table-alt-row k-alt k-master-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-hierarchy-cell k-table-td" }, /* @__PURE__ */ import_react.default.createElement(Icon, { name: "caret-alt-right" })), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "2"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Text"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Text"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Text"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Text"))))))), /* @__PURE__ */ import_react.default.createElement("span", null, "Editing"), /* @__PURE__ */ import_react.default.createElement("section", { className: "col-2" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid k-grid-sm k-grid-no-scrollbar" }, /* @__PURE__ */ import_react.default.createElement(Toolbar, { className: "k-grid-toolbar" }, /* @__PURE__ */ import_react.default.createElement(Button, { icon: "add" }, "Add new record")), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header-wrap" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table k-table-sm k-grid-header-table" }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "300px" } })), /* @__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", { scope: "col", 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" }, "Name")))), /* @__PURE__ */ import_react.default.createElement("th", { scope: "col", 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" }, "Price")))), /* @__PURE__ */ import_react.default.createElement("th", { scope: "col", 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" }, "Available")))), /* @__PURE__ */ import_react.default.createElement("th", { scope: "col", className: "k-table-th k-header" }, "\xA0")))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-content" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table k-table-sm k-grid-table", style: { height: "auto" } }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "300px" } })), /* @__PURE__ */ import_react.default.createElement("tbody", { className: "k-table-tbody" }, /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row k-grid-edit-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, /* @__PURE__ */ import_react.default.createElement(Textbox, { value: "Towel", required: true })), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, /* @__PURE__ */ import_react.default.createElement(NumericTextbox, { invalid: true }), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-tooltip k-validator-tooltip k-tooltip-error k-invalid-msg" }, /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-tooltip-icon", name: "warning" }), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-tooltip-content" }, "Price"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-callout k-callout-n" }))), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, /* @__PURE__ */ import_react.default.createElement(Checkbox, { id: "e77452cd-b3b5-4dc9-8210-17007584b695" }), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-checkbox-label", htmlFor: "e77452cd-b3b5-4dc9-8210-17007584b695" })), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td k-command-cell" }, /* @__PURE__ */ import_react.default.createElement(Button, { icon: "check", themeColor: "primary" }, "Update"), /* @__PURE__ */ import_react.default.createElement(Button, { icon: "cancel" }, "Cancel"))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row k-table-alt-row k-alt k-grid-edit-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td k-dirty-cell" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-dirty" }), "LongSingleWordTestLongSingleWordTestLongSingleWordTestLongSingleWordTest"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "18"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "false"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td k-command-cell" }, /* @__PURE__ */ import_react.default.createElement(Button, { icon: "edit" }, "Edit"), /* @__PURE__ */ import_react.default.createElement(Button, { icon: "close" }, "Delete"))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Chang"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "19"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "false"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td k-command-cell" }, /* @__PURE__ */ import_react.default.createElement(Button, { icon: "edit" }, "Edit"), /* @__PURE__ */ import_react.default.createElement(Button, { icon: "close" }, "Delete")))))))), /* @__PURE__ */ import_react.default.createElement("span", null, "Grouping"), /* @__PURE__ */ import_react.default.createElement("section", { className: "col-2" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid k-grid-sm k-grid-no-scrollbar" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grouping-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grouping-dropclue" }), /* @__PURE__ */ import_react.default.createElement(ChipList, { size: "small" }, /* @__PURE__ */ import_react.default.createElement(Chip, { size: "small", icon: "sort-asc-small", actions: /* @__PURE__ */ import_react.default.createElement(ChipAction, { type: "remove" }) }, "Price"), /* @__PURE__ */ import_react.default.createElement(Chip, { size: "small", icon: "sort-desc-small", actions: /* @__PURE__ */ import_react.default.createElement(ChipAction, { type: "remove" }) }, "Name")), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grouping-drop-container" })), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-header-wrap" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table k-table-sm k-grid-header-table" }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { className: "k-group-col" }), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th k-group-cell k-header", scope: "col" }), /* @__PURE__ */ import_react.default.createElement("th", { 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" }, "Name")))), /* @__PURE__ */ import_react.default.createElement("th", { 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" }, "Price")))), /* @__PURE__ */ import_react.default.createElement("th", { 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" }, "Available")))), /* @__PURE__ */ import_react.default.createElement("th", { 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" }, "Units"))))))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-grid-content" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table k-table-sm k-grid-table", style: { height: "auto" } }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { className: "k-group-col" }), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement("tbody", { className: "k-table-tbody" }, /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row k-table-group-row k-grouping-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td", colSpan: 5 }, /* @__PURE__ */ import_react.default.createElement("p", { className: "k-reset" }, /* @__PURE__ */ import_react.default.createElement(Icon, { name: "caret-alt-right" }), "Price: 19"))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row k-table-group-row k-grouping-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td", colSpan: 5 }, /* @__PURE__ */ import_react.default.createElement("p", { className: "k-reset" }, /* @__PURE__ */ import_react.default.createElement(Icon, { name: "caret-alt-down" }), "Price: 30"))), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td k-table-group-td k-group-cell" }, "\xA0"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "Chai"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "30"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "false"), /* @__PURE__ */ import_react.default.createElement("td", { className: "k-table-td" }, "15")))))))))
   );
 })();
 //# sourceMappingURL=grid-size-sm.js.map