@progress/kendo-themes-html 6.7.0-dev.0 → 6.7.0-dev.2

package/dist/esm/grid/tests/grid-angular.js

@@ -5383,34 +5383,89 @@ import { jsx as jsx47, jsxs as jsxs17 } from "react/jsx-runtime";
 // src/dropdownlist/templates/dropdownlist-grouping-filtering.tsx
 import { Fragment as Fragment14, jsx as jsx48, jsxs as jsxs18 } from "react/jsx-runtime";
 
-// src/textbox/textbox.spec.tsx
+// src/spinbutton/spinbutton.spec.tsx
 import { jsx as jsx49, jsxs as jsxs19 } from "react/jsx-runtime";
-var TEXTBOX_CLASSNAME = `k-textbox`;
-var states22 = [
+var SPINBUTTON_CLASSNAME = `k-spin-button`;
+var states22 = [];
+var options21 = {
+  size: [Size.small, Size.medium, Size.large],
+  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link]
+};
+var defaultProps19 = {
+  size: Size.medium,
+  fillMode: FillMode.solid
+};
+var SpinButton = (props) => {
+  const {
+    size = defaultProps19.size,
+    fillMode = defaultProps19.fillMode,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs19(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        SPINBUTTON_CLASSNAME,
+        props.className
+      ),
+      children: [
+        /* @__PURE__ */ jsx49(
+          Button,
+          {
+            className: "k-spinner-increase",
+            icon: "caret-alt-up",
+            rounded: null,
+            size,
+            fillMode
+          }
+        ),
+        /* @__PURE__ */ jsx49(
+          Button,
+          {
+            className: "k-spinner-decrease",
+            icon: "caret-alt-down",
+            rounded: null,
+            size,
+            fillMode
+          }
+        )
+      ]
+    }
+  );
+};
+SpinButton.states = states22;
+SpinButton.options = options21;
+SpinButton.className = SPINBUTTON_CLASSNAME;
+SpinButton.defaultProps = defaultProps19;
+
+// src/numerictextbox/numerictextbox.spec.tsx
+import { jsx as jsx50, jsxs as jsxs20 } from "react/jsx-runtime";
+var NUMERICTEXTBOX_CLASSNAME = `k-numerictextbox`;
+var states23 = [
   States.hover,
   States.focus,
   States.valid,
   States.invalid,
+  States.loading,
   States.required,
   States.disabled,
-  States.loading,
   States.readonly
 ];
-var options21 = {
+var options22 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
 };
-var defaultProps19 = {
+var defaultProps20 = {
+  showSpinButton: true,
   showClearButton: true,
   size: Input.defaultProps.size,
   rounded: Input.defaultProps.rounded,
   fillMode: Input.defaultProps.fillMode
 };
-var Textbox = (props) => {
+var NumericTextbox = (props) => {
   const {
-    prefix,
-    suffix,
     value,
     placeholder,
     size,
@@ -5424,10 +5479,11 @@ var Textbox = (props) => {
     loading,
     disabled,
     readonly,
-    showClearButton = defaultProps19.showClearButton,
+    showClearButton = defaultProps20.showClearButton,
+    showSpinButton = defaultProps20.showSpinButton,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     Input,
     {
       ...other,
@@ -5442,11 +5498,10 @@ var Textbox = (props) => {
       loading,
       disabled,
       readonly,
-      className: classNames(props.className, TEXTBOX_CLASSNAME),
+      className: classNames(props.className, NUMERICTEXTBOX_CLASSNAME),
       children: [
-        /* @__PURE__ */ jsx49(InputPrefix, { children: prefix }),
-        /* @__PURE__ */ jsx49(InputInnerInput, { placeholder, value }),
-        /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx50(InputInnerInput, { placeholder, value }),
+        /* @__PURE__ */ jsx50(
           InputValidationIcon,
           {
             valid,
@@ -5455,14 +5510,14 @@ var Textbox = (props) => {
             disabled
           }
         ),
-        /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx50(
           InputLoadingIcon,
           {
             loading,
             disabled
           }
         ),
-        showClearButton && /* @__PURE__ */ jsx49(
+        showClearButton && /* @__PURE__ */ jsx50(
           InputClearValue,
           {
             loading,
@@ -5471,38 +5526,40 @@ var Textbox = (props) => {
             value
           }
         ),
-        /* @__PURE__ */ jsx49(InputSuffix, { children: suffix })
+        showSpinButton && /* @__PURE__ */ jsx50(
+          SpinButton,
+          {
+            className: "k-input-spinner",
+            size,
+            fillMode
+          }
+        )
       ]
     }
   );
 };
-Textbox.states = states22;
-Textbox.options = options21;
-Textbox.className = TEXTBOX_CLASSNAME;
-Textbox.defaultProps = defaultProps19;
+NumericTextbox.states = states23;
+NumericTextbox.options = options22;
+NumericTextbox.className = NUMERICTEXTBOX_CLASSNAME;
+NumericTextbox.defaultProps = defaultProps20;
 
-// src/textbox/templates/textbox-normal.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
-
-// src/textbox/templates/textbox-prefix.tsx
-import { jsx as jsx51, jsxs as jsxs20 } from "react/jsx-runtime";
-
-// src/textbox/templates/textbox-suffix.tsx
-import { jsx as jsx52, jsxs as jsxs21 } from "react/jsx-runtime";
+// src/numerictextbox/templates/numerictextbox-normal.tsx
+import { jsx as jsx51 } from "react/jsx-runtime";
 
 // src/pager/pager.spec.tsx
-import { jsx as jsx53, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs21 } from "react/jsx-runtime";
 var PAGER_CLASSNAME = `k-pager`;
-var states23 = [
+var states24 = [
   States.focus,
   States.disabled
 ];
-var options22 = {
+var options23 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultProps20 = {
+var defaultProps21 = {
   size: Size.medium,
-  mobile: null,
+  adaptive: false,
+  itemsPerPage: true,
   type: "numeric",
   pageSizes: true,
   refresh: true,
@@ -5510,18 +5567,19 @@ var defaultProps20 = {
 };
 var Pager = (props) => {
   const {
-    size = defaultProps20.size,
-    mobile = defaultProps20.mobile,
-    type = defaultProps20.type,
-    pageSizes = defaultProps20.pageSizes,
-    refresh = defaultProps20.refresh,
-    info = defaultProps20.info,
+    size = defaultProps21.size,
+    adaptive = defaultProps21.adaptive,
+    itemsPerPage = defaultProps21.itemsPerPage,
+    type = defaultProps21.type,
+    pageSizes = defaultProps21.pageSizes,
+    refresh = defaultProps21.refresh,
+    info = defaultProps21.info,
     focus,
     disabled,
     dir,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       dir,
@@ -5535,21 +5593,17 @@ var Pager = (props) => {
         stateClassNames(PAGER_CLASSNAME, {
           focus,
           disabled
-        }),
-        {
-          "k-pager-mobile-md": mobile === "medium",
-          "k-pager-mobile-sm": mobile === "small"
-        }
+        })
       ),
       children: [
-        /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsxs21(
           "div",
           {
             className: classNames(
               "k-pager-numbers-wrap"
             ),
             children: [
-              /* @__PURE__ */ jsx53(
+              /* @__PURE__ */ jsx52(
                 Button,
                 {
                   className: classNames(
@@ -5563,7 +5617,7 @@ var Pager = (props) => {
                   icon: dir === "rtl" ? "caret-alt-to-right" : "caret-alt-to-left"
                 }
               ),
-              /* @__PURE__ */ jsx53(
+              /* @__PURE__ */ jsx52(
                 Button,
                 {
                   className: classNames(
@@ -5576,30 +5630,14 @@ var Pager = (props) => {
                   icon: dir === "rtl" ? "caret-alt-right" : "caret-alt-left"
                 }
               ),
-              /* @__PURE__ */ jsx53(
-                "select",
-                {
-                  className: classNames(
-                    "k-picker",
-                    "k-picker-solid",
-                    "k-dropdown-list",
-                    "k-dropdown",
-                    "k-rounded-md",
-                    optionClassNames("k-picker", {
-                      size
-                    })
-                  ),
-                  children: /* @__PURE__ */ jsx53("option", { children: "1" })
-                }
-              ),
-              type === "numeric" && /* @__PURE__ */ jsxs22(
+              type === "numeric" && !adaptive && /* @__PURE__ */ jsxs21(
                 "div",
                 {
                   className: classNames(
                     "k-pager-numbers"
                   ),
                   children: [
-                    /* @__PURE__ */ jsx53(
+                    /* @__PURE__ */ jsx52(
                       Button,
                       {
                         fillMode: "flat",
@@ -5609,7 +5647,7 @@ var Pager = (props) => {
                         children: "1"
                       }
                     ),
-                    /* @__PURE__ */ jsx53(
+                    /* @__PURE__ */ jsx52(
                       Button,
                       {
                         hover: true,
@@ -5620,7 +5658,7 @@ var Pager = (props) => {
                         children: "2"
                       }
                     ),
-                    /* @__PURE__ */ jsx53(
+                    /* @__PURE__ */ jsx52(
                       Button,
                       {
                         focus: true,
@@ -5631,7 +5669,7 @@ var Pager = (props) => {
                         children: "3"
                       }
                     ),
-                    /* @__PURE__ */ jsx53(
+                    /* @__PURE__ */ jsx52(
                       Button,
                       {
                         selected: true,
@@ -5642,7 +5680,7 @@ var Pager = (props) => {
                         children: "4"
                       }
                     ),
-                    /* @__PURE__ */ jsx53(
+                    /* @__PURE__ */ jsx52(
                       Button,
                       {
                         hover: true,
@@ -5654,7 +5692,7 @@ var Pager = (props) => {
                         children: "5"
                       }
                     ),
-                    /* @__PURE__ */ jsx53(
+                    /* @__PURE__ */ jsx52(
                       Button,
                       {
                         selected: true,
@@ -5669,20 +5707,39 @@ var Pager = (props) => {
                   ]
                 }
               ),
-              type === "input" && /* @__PURE__ */ jsxs22(
+              type === "numeric" && /* @__PURE__ */ jsx52(
+                "select",
+                {
+                  className: classNames(
+                    "k-picker",
+                    "k-picker-solid",
+                    "k-dropdown-list",
+                    "k-dropdown",
+                    "k-rounded-md",
+                    optionClassNames("k-picker", {
+                      size
+                    }),
+                    {
+                      ["k-hidden"]: !adaptive
+                    }
+                  ),
+                  children: /* @__PURE__ */ jsx52("option", { children: "99" })
+                }
+              ),
+              type === "input" && /* @__PURE__ */ jsxs21(
                 "span",
                 {
                   className: classNames(
                     "k-pager-input"
                   ),
                   children: [
-                    "Page",
-                    /* @__PURE__ */ jsx53(Textbox, { showClearButton: false, size, value: "999" }),
-                    "of 8"
+                    !adaptive && /* @__PURE__ */ jsx52("span", { children: "Page" }),
+                    /* @__PURE__ */ jsx52(NumericTextbox, { value: "999", size, showSpinButton: false, showClearButton: false }),
+                    !adaptive && /* @__PURE__ */ jsx52("span", { children: "of 8" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx53(
+              /* @__PURE__ */ jsx52(
                 Button,
                 {
                   className: classNames(
@@ -5695,7 +5752,7 @@ var Pager = (props) => {
                   icon: dir === "rtl" ? "caret-alt-left" : "caret-alt-right"
                 }
               ),
-              /* @__PURE__ */ jsx53(
+              /* @__PURE__ */ jsx52(
                 Button,
                 {
                   className: classNames(
@@ -5711,19 +5768,19 @@ var Pager = (props) => {
             ]
           }
         ),
-        pageSizes && /* @__PURE__ */ jsxs22(
+        pageSizes && /* @__PURE__ */ jsxs21(
           "span",
           {
             className: classNames(
               "k-pager-sizes"
             ),
             children: [
-              /* @__PURE__ */ jsx53(DropdownList, { value: "20", size }),
-              "items per page"
+              /* @__PURE__ */ jsx52(DropdownList, { value: "99", size }),
+              itemsPerPage && /* @__PURE__ */ jsx52("span", { children: "items per page" })
             ]
           }
         ),
-        refresh && /* @__PURE__ */ jsx53(
+        refresh && /* @__PURE__ */ jsx52(
           Button,
           {
             className: classNames(
@@ -5735,7 +5792,7 @@ var Pager = (props) => {
             icon: "arrow-rotate-cw"
           }
         ),
-        info && /* @__PURE__ */ jsx53(
+        info && /* @__PURE__ */ jsx52(
           "span",
           {
             className: classNames(
@@ -5748,49 +5805,85 @@ var Pager = (props) => {
     }
   );
 };
-Pager.states = states23;
-Pager.options = options22;
+Pager.states = states24;
+Pager.options = options23;
 Pager.className = PAGER_CLASSNAME;
-Pager.defaultProps = defaultProps20;
+Pager.defaultProps = defaultProps21;
+
+// src/skeleton/skeleton.spec.tsx
+import { jsx as jsx53 } from "react/jsx-runtime";
+var SKELETON_CLASSNAME = `k-skeleton`;
+var states25 = [];
+var options24 = {};
+var defaultProps22 = {
+  shape: "text",
+  animation: "pulse"
+};
+var Skeleton = (props) => {
+  const {
+    shape = defaultProps22.shape,
+    animation = defaultProps22.animation,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx53(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        SKELETON_CLASSNAME,
+        {
+          [`k-skeleton-${shape}`]: shape,
+          [`k-skeleton-${animation}`]: animation
+        }
+      ),
+      style: props.style
+    }
+  );
+};
+Skeleton.states = states25;
+Skeleton.options = options24;
+Skeleton.className = SKELETON_CLASSNAME;
+Skeleton.defaultProps = defaultProps22;
 
 // src/grid/tests/grid-angular.tsx
-import { Fragment as Fragment15, jsx as jsx54, jsxs as jsxs23 } from "react/jsx-runtime";
-var grid_angular_default = () => /* @__PURE__ */ jsx54(Fragment15, { children: /* @__PURE__ */ jsxs23("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: [
+import { Fragment as Fragment15, jsx as jsx54, jsxs as jsxs22 } from "react/jsx-runtime";
+var grid_angular_default = () => /* @__PURE__ */ jsx54(Fragment15, { children: /* @__PURE__ */ jsxs22("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: [
   /* @__PURE__ */ jsx54("span", { className: "col-3", children: "Angular grid" }),
-  /* @__PURE__ */ jsx54("section", { className: "col-3", children: /* @__PURE__ */ jsxs23("div", { className: "k-grid k-grid-md k-grid-no-scrollbar", children: [
-    /* @__PURE__ */ jsxs23("div", { className: "k-grid-aria-root", children: [
-      /* @__PURE__ */ jsx54("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx54("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ jsxs23("table", { className: "k-table k-table-md k-grid-header-table", children: [
-        /* @__PURE__ */ jsxs23("colgroup", { children: [
+  /* @__PURE__ */ jsx54("section", { className: "col-3", children: /* @__PURE__ */ jsxs22("div", { className: "k-grid k-grid-md k-grid-no-scrollbar", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "k-grid-aria-root", children: [
+      /* @__PURE__ */ jsx54("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx54("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ jsxs22("table", { className: "k-table k-table-md k-grid-header-table", children: [
+        /* @__PURE__ */ jsxs22("colgroup", { children: [
           /* @__PURE__ */ jsx54("col", { style: { width: "100px" } }),
           /* @__PURE__ */ jsx54("col", {})
         ] }),
-        /* @__PURE__ */ jsx54("thead", { className: "k-table-thead", children: /* @__PURE__ */ jsxs23("tr", { className: "k-table-row", children: [
+        /* @__PURE__ */ jsx54("thead", { className: "k-table-thead", children: /* @__PURE__ */ jsxs22("tr", { className: "k-table-row", children: [
           /* @__PURE__ */ jsx54("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx54("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx54("span", { className: "k-link", children: /* @__PURE__ */ jsx54("span", { className: "k-column-title", children: "100px" }) }) }) }),
           /* @__PURE__ */ jsx54("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx54("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx54("span", { className: "k-link", children: /* @__PURE__ */ jsx54("span", { className: "k-column-title", children: "no width" }) }) }) })
         ] }) })
       ] }) }) }),
-      /* @__PURE__ */ jsx54("div", { className: "k-grid-container", children: /* @__PURE__ */ jsxs23("div", { className: "k-grid-content k-virtual-content", children: [
-        /* @__PURE__ */ jsx54("div", { children: /* @__PURE__ */ jsxs23("table", { className: "k-table k-table-md k-grid-table", children: [
-          /* @__PURE__ */ jsxs23("colgroup", { children: [
+      /* @__PURE__ */ jsx54("div", { className: "k-grid-container", children: /* @__PURE__ */ jsxs22("div", { className: "k-grid-content k-virtual-content", children: [
+        /* @__PURE__ */ jsx54("div", { children: /* @__PURE__ */ jsxs22("table", { className: "k-table k-table-md k-grid-table", children: [
+          /* @__PURE__ */ jsxs22("colgroup", { children: [
             /* @__PURE__ */ jsx54("col", { style: { width: "100px" } }),
             /* @__PURE__ */ jsx54("col", {})
           ] }),
-          /* @__PURE__ */ jsxs23("tbody", { className: "k-table-tbody", children: [
-            /* @__PURE__ */ jsxs23("tr", { className: "k-table-row", children: [
+          /* @__PURE__ */ jsxs22("tbody", { className: "k-table-tbody", children: [
+            /* @__PURE__ */ jsxs22("tr", { className: "k-table-row", children: [
               /* @__PURE__ */ jsx54("td", { className: "k-table-td", children: "1" }),
               /* @__PURE__ */ jsx54("td", { className: "k-table-td", children: "Row" })
             ] }),
-            /* @__PURE__ */ jsxs23("tr", { className: "k-table-row k-table-alt-row k-alt", children: [
+            /* @__PURE__ */ jsxs22("tr", { className: "k-table-row k-table-alt-row k-alt", children: [
               /* @__PURE__ */ jsx54("td", { className: "k-table-td", children: "2" }),
               /* @__PURE__ */ jsx54("td", { className: "k-table-td", children: "Alt row" })
             ] }),
-            /* @__PURE__ */ jsxs23("tr", { className: "k-table-row", children: [
+            /* @__PURE__ */ jsxs22("tr", { className: "k-table-row", children: [
               /* @__PURE__ */ jsx54("td", { className: "k-table-td", children: "3" }),
               /* @__PURE__ */ jsx54("td", { className: "k-table-td", children: "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__ */ jsxs23("tr", { className: "k-table-row k-table-alt-row k-alt", children: [
+            /* @__PURE__ */ jsxs22("tr", { className: "k-table-row k-table-alt-row k-alt", children: [
               /* @__PURE__ */ jsx54("td", { className: "k-table-td", children: "4" }),
-              /* @__PURE__ */ jsx54("td", { className: "k-table-td", children: /* @__PURE__ */ jsx54("span", { className: "k-placeholder-line" }) })
+              /* @__PURE__ */ jsx54("td", { className: "k-table-td", children: /* @__PURE__ */ jsx54(Skeleton, { animation: false }) })
             ] })
           ] })
         ] }) }),
@@ -5800,9 +5893,9 @@ var grid_angular_default = () => /* @__PURE__ */ jsx54(Fragment15, { children: /
     /* @__PURE__ */ jsx54(Pager, { className: "k-grid-pager" })
   ] }) }),
   /* @__PURE__ */ jsx54("span", { className: "col-3", children: "Angular -- fixed height, hierarchy, filter menu, sort icon" }),
-  /* @__PURE__ */ jsx54("section", { className: "col-3", children: /* @__PURE__ */ jsx54("div", { className: "k-grid k-grid-md k-grid-no-scrollbar", style: { height: "240px" }, children: /* @__PURE__ */ jsxs23("div", { className: "k-grid-aria-root", children: [
-    /* @__PURE__ */ jsx54("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx54("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ jsxs23("table", { className: "k-table k-table-md k-grid-header-table", children: [
-      /* @__PURE__ */ jsxs23("colgroup", { children: [
+  /* @__PURE__ */ jsx54("section", { className: "col-3", children: /* @__PURE__ */ jsx54("div", { className: "k-grid k-grid-md k-grid-no-scrollbar", style: { height: "240px" }, children: /* @__PURE__ */ jsxs22("div", { className: "k-grid-aria-root", children: [
+    /* @__PURE__ */ jsx54("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx54("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ jsxs22("table", { className: "k-table k-table-md k-grid-header-table", children: [
+      /* @__PURE__ */ jsxs22("colgroup", { children: [
         /* @__PURE__ */ jsx54("col", { className: "k-hierarchy-col" }),
         /* @__PURE__ */ jsx54("col", { style: { width: "80px" } }),
         /* @__PURE__ */ jsx54("col", {}),
@@ -5810,27 +5903,27 @@ var grid_angular_default = () => /* @__PURE__ */ jsx54(Fragment15, { children: /
         /* @__PURE__ */ jsx54("col", {}),
         /* @__PURE__ */ jsx54("col", {})
       ] }),
-      /* @__PURE__ */ jsx54("thead", { className: "k-table-thead", children: /* @__PURE__ */ jsxs23("tr", { className: "k-table-row", children: [
+      /* @__PURE__ */ jsx54("thead", { className: "k-table-thead", children: /* @__PURE__ */ jsxs22("tr", { className: "k-table-row", children: [
         /* @__PURE__ */ jsx54("th", { className: "k-table-th k-header k-hierarchy-cell" }),
         /* @__PURE__ */ jsx54("th", { className: "k-table-th k-header" }),
-        /* @__PURE__ */ jsx54("th", { className: "k-table-th k-header k-filterable", children: /* @__PURE__ */ jsxs23("span", { className: "k-cell-inner", children: [
+        /* @__PURE__ */ jsx54("th", { className: "k-table-th k-header k-filterable", children: /* @__PURE__ */ jsxs22("span", { className: "k-cell-inner", children: [
           /* @__PURE__ */ jsx54("span", { className: "k-link", children: /* @__PURE__ */ jsx54("span", { className: "k-column-title", children: "Default" }) }),
           /* @__PURE__ */ jsx54("a", { className: "k-grid-filter-menu k-grid-header-menu", children: /* @__PURE__ */ jsx54(Icon, { icon: "filter" }) })
         ] }) }),
-        /* @__PURE__ */ jsx54("th", { className: "k-table-th k-header k-filterable", children: /* @__PURE__ */ jsxs23("span", { className: "k-cell-inner", children: [
+        /* @__PURE__ */ jsx54("th", { className: "k-table-th k-header k-filterable", children: /* @__PURE__ */ jsxs22("span", { className: "k-cell-inner", children: [
           /* @__PURE__ */ jsx54("span", { className: "k-link", children: /* @__PURE__ */ jsx54("span", { className: "k-column-title", children: "Hover" }) }),
           /* @__PURE__ */ jsx54("a", { className: "k-grid-filter-menu k-grid-header-menu", children: /* @__PURE__ */ jsx54(Icon, { icon: "filter" }) })
         ] }) }),
-        /* @__PURE__ */ jsx54("th", { className: "k-table-th k-header k-filterable k-focus", children: /* @__PURE__ */ jsxs23("span", { className: "k-cell-inner", children: [
+        /* @__PURE__ */ jsx54("th", { className: "k-table-th k-header k-filterable k-focus", children: /* @__PURE__ */ jsxs22("span", { className: "k-cell-inner", children: [
           /* @__PURE__ */ jsx54("span", { className: "k-link", children: /* @__PURE__ */ jsx54("span", { className: "k-column-title", children: "Focus" }) }),
           /* @__PURE__ */ jsx54("a", { className: "k-grid-filter-menu k-grid-header-menu", children: /* @__PURE__ */ jsx54(Icon, { icon: "filter" }) })
         ] }) }),
-        /* @__PURE__ */ jsx54("th", { className: "k-table-th k-header k-filterable", children: /* @__PURE__ */ jsxs23("span", { className: "k-cell-inner", children: [
+        /* @__PURE__ */ jsx54("th", { className: "k-table-th k-header k-filterable", children: /* @__PURE__ */ jsxs22("span", { className: "k-cell-inner", children: [
           /* @__PURE__ */ jsx54("span", { className: "k-link", children: /* @__PURE__ */ jsx54("span", { className: "k-column-title", children: "Active" }) }),
           /* @__PURE__ */ jsx54("a", { className: "k-grid-filter-menu k-grid-header-menu k-active", children: /* @__PURE__ */ jsx54(Icon, { icon: "filter" }) })
         ] }) }),
-        /* @__PURE__ */ jsx54("th", { className: "k-table-th k-header k-filterable k-sorted", children: /* @__PURE__ */ jsxs23("span", { className: "k-cell-inner", children: [
-          /* @__PURE__ */ jsxs23("span", { className: "k-link", children: [
+        /* @__PURE__ */ jsx54("th", { className: "k-table-th k-header k-filterable k-sorted", children: /* @__PURE__ */ jsxs22("span", { className: "k-cell-inner", children: [
+          /* @__PURE__ */ jsxs22("span", { className: "k-link", children: [
             /* @__PURE__ */ jsx54("span", { className: "k-column-title", children: "Sorted" }),
             /* @__PURE__ */ jsx54("span", { className: "k-sort-icon", children: /* @__PURE__ */ jsx54("span", { className: "k-icon k-i-sort-asc-small" }) })
           ] }),
@@ -5838,9 +5931,9 @@ var grid_angular_default = () => /* @__PURE__ */ jsx54(Fragment15, { children: /
         ] }) })
       ] }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx54("div", { className: "k-grid-container", children: /* @__PURE__ */ jsxs23("div", { className: "k-grid-content k-virtual-content", children: [
-      /* @__PURE__ */ jsx54("div", { children: /* @__PURE__ */ jsxs23("table", { className: "k-table k-table-md k-grid-table", children: [
-        /* @__PURE__ */ jsxs23("colgroup", { children: [
+    /* @__PURE__ */ jsx54("div", { className: "k-grid-container", children: /* @__PURE__ */ jsxs22("div", { className: "k-grid-content k-virtual-content", children: [
+      /* @__PURE__ */ jsx54("div", { children: /* @__PURE__ */ jsxs22("table", { className: "k-table k-table-md k-grid-table", children: [
+        /* @__PURE__ */ jsxs22("colgroup", { children: [
           /* @__PURE__ */ jsx54("col", { className: "k-hierarchy-col" }),
           /* @__PURE__ */ jsx54("col", { style: { width: "80px" } }),
           /* @__PURE__ */ jsx54("col", {}),
@@ -5848,10 +5941,10 @@ var grid_angular_default = () => /* @__PURE__ */ jsx54(Fragment15, { children: /
           /* @__PURE__ */ jsx54("col", {}),
           /* @__PURE__ */ jsx54("col", {})
         ] }),
-        /* @__PURE__ */ jsxs23("tbody", { className: "k-table-tbody", children: [
-          /* @__PURE__ */ jsxs23("tr", { className: "k-table-row k-master-row k-expanded", children: [
+        /* @__PURE__ */ jsxs22("tbody", { className: "k-table-tbody", children: [
+          /* @__PURE__ */ jsxs22("tr", { className: "k-table-row k-master-row k-expanded", children: [
             /* @__PURE__ */ jsx54("td", { className: "k-table-td k-hierarchy-cell", children: /* @__PURE__ */ jsx54(Icon, { icon: "minus" }) }),
-            /* @__PURE__ */ jsxs23("td", { className: "k-table-td", children: [
+            /* @__PURE__ */ jsxs22("td", { className: "k-table-td", children: [
               /* @__PURE__ */ jsx54(Checkbox, {}),
               /* @__PURE__ */ jsx54("label", { className: "k-checkbox-label" })
             ] }),
@@ -5861,13 +5954,13 @@ var grid_angular_default = () => /* @__PURE__ */ jsx54(Fragment15, { children: /
             /* @__PURE__ */ jsx54("td", { className: "k-table-td", children: "Text" }),
             /* @__PURE__ */ jsx54("td", { className: "k-table-td", children: "Text" })
           ] }),
-          /* @__PURE__ */ jsxs23("tr", { className: "k-table-row k-detail-row", children: [
+          /* @__PURE__ */ jsxs22("tr", { className: "k-table-row k-detail-row", children: [
             /* @__PURE__ */ jsx54("td", { className: "k-table-td k-hierarchy-cell" }),
             /* @__PURE__ */ jsx54("td", { className: "k-table-td k-detail-cell", colSpan: 6, children: /* @__PURE__ */ jsx54("div", { style: { padding: "10px" }, children: "Nested content" }) })
           ] }),
-          /* @__PURE__ */ jsxs23("tr", { className: "k-table-row k-table-alt-row k-alt k-master-row", children: [
+          /* @__PURE__ */ jsxs22("tr", { className: "k-table-row k-table-alt-row k-alt k-master-row", children: [
             /* @__PURE__ */ jsx54("td", { className: "k-table-td k-hierarchy-cell", children: /* @__PURE__ */ jsx54(Icon, { icon: "plus" }) }),
-            /* @__PURE__ */ jsxs23("td", { className: "k-table-td", children: [
+            /* @__PURE__ */ jsxs22("td", { className: "k-table-td", children: [
               /* @__PURE__ */ jsx54(Checkbox, {}),
               /* @__PURE__ */ jsx54("label", { className: "k-checkbox-label" })
             ] }),
@@ -5883,42 +5976,42 @@ var grid_angular_default = () => /* @__PURE__ */ jsx54(Fragment15, { children: /
     ] }) })
   ] }) }) }),
   /* @__PURE__ */ jsx54("span", { className: "col-3", children: "Angular -- standalone column chooser" }),
-  /* @__PURE__ */ jsx54("section", { className: "col-2", children: /* @__PURE__ */ jsxs23("div", { className: "k-grid k-grid-md", children: [
-    /* @__PURE__ */ jsxs23("div", { className: "k-toolbar k-grid-toolbar", children: [
+  /* @__PURE__ */ jsx54("section", { className: "col-2", children: /* @__PURE__ */ jsxs22("div", { className: "k-grid k-grid-md", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "k-toolbar k-grid-toolbar", children: [
       /* @__PURE__ */ jsx54("div", { className: "k-spacer" }),
       /* @__PURE__ */ jsx54("div", { className: "k-grid-column-chooser", children: /* @__PURE__ */ jsx54(Button, { fillMode: "flat", icon: "columns" }) })
     ] }),
-    /* @__PURE__ */ jsx54("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx54("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ jsxs23("table", { className: "k-table k-table-md k-grid-header-table", children: [
-      /* @__PURE__ */ jsxs23("colgroup", { children: [
+    /* @__PURE__ */ jsx54("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx54("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ jsxs22("table", { className: "k-table k-table-md k-grid-header-table", children: [
+      /* @__PURE__ */ jsxs22("colgroup", { children: [
         /* @__PURE__ */ jsx54("col", {}),
         /* @__PURE__ */ jsx54("col", {}),
         /* @__PURE__ */ jsx54("col", {})
       ] }),
-      /* @__PURE__ */ jsx54("thead", { className: "k-table-thead", children: /* @__PURE__ */ jsxs23("tr", { className: "k-table-row", children: [
+      /* @__PURE__ */ jsx54("thead", { className: "k-table-thead", children: /* @__PURE__ */ jsxs22("tr", { className: "k-table-row", children: [
         /* @__PURE__ */ jsx54("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx54("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx54("span", { className: "k-link", children: /* @__PURE__ */ jsx54("span", { className: "k-column-title", children: "Product" }) }) }) }),
         /* @__PURE__ */ jsx54("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx54("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx54("span", { className: "k-link", children: /* @__PURE__ */ jsx54("span", { className: "k-column-title", children: "Unit Price" }) }) }) }),
         /* @__PURE__ */ jsx54("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx54("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx54("span", { className: "k-link", children: /* @__PURE__ */ jsx54("span", { className: "k-column-title", children: "Qty Per Unit" }) }) }) })
       ] }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx54("div", { className: "k-grid-container", children: /* @__PURE__ */ jsxs23("div", { className: "k-grid-content k-virtual-content", children: [
-      /* @__PURE__ */ jsx54("div", { className: "k-grid-table-wrap", children: /* @__PURE__ */ jsxs23("table", { className: "k-table k-table-md k-grid-table", children: [
-        /* @__PURE__ */ jsxs23("colgroup", { children: [
+    /* @__PURE__ */ jsx54("div", { className: "k-grid-container", children: /* @__PURE__ */ jsxs22("div", { className: "k-grid-content k-virtual-content", children: [
+      /* @__PURE__ */ jsx54("div", { className: "k-grid-table-wrap", children: /* @__PURE__ */ jsxs22("table", { className: "k-table k-table-md k-grid-table", children: [
+        /* @__PURE__ */ jsxs22("colgroup", { children: [
           /* @__PURE__ */ jsx54("col", {}),
           /* @__PURE__ */ jsx54("col", {}),
           /* @__PURE__ */ jsx54("col", {})
         ] }),
-        /* @__PURE__ */ jsxs23("tbody", { className: "k-table-tbody", children: [
-          /* @__PURE__ */ jsxs23("tr", { className: "k-table-row k-master-row k-expanded", children: [
+        /* @__PURE__ */ jsxs22("tbody", { className: "k-table-tbody", children: [
+          /* @__PURE__ */ jsxs22("tr", { className: "k-table-row k-master-row k-expanded", children: [
             /* @__PURE__ */ jsx54("td", { className: "k-table-td", children: "Chai" }),
             /* @__PURE__ */ jsx54("td", { className: "k-table-td", children: "18" }),
             /* @__PURE__ */ jsx54("td", { className: "k-table-td", children: "10 boxes x 20 bags" })
           ] }),
-          /* @__PURE__ */ jsxs23("tr", { className: "k-table-row k-table-alt-row k-alt k-master-row", children: [
+          /* @__PURE__ */ jsxs22("tr", { className: "k-table-row k-table-alt-row k-alt k-master-row", children: [
             /* @__PURE__ */ jsx54("td", { className: "k-table-td", children: "Chang" }),
             /* @__PURE__ */ jsx54("td", { className: "k-table-td", children: "19" }),
             /* @__PURE__ */ jsx54("td", { className: "k-table-td", children: "24 - 12 oz bottles" })
           ] }),
-          /* @__PURE__ */ jsxs23("tr", { className: "k-table-row k-table-alt-row k-alt k-master-row", children: [
+          /* @__PURE__ */ jsxs22("tr", { className: "k-table-row k-table-alt-row k-alt k-master-row", children: [
             /* @__PURE__ */ jsx54("td", { className: "k-table-td", children: "Aniseed Syrup" }),
             /* @__PURE__ */ jsx54("td", { className: "k-table-td", children: "20" }),
             /* @__PURE__ */ jsx54("td", { className: "k-table-td", children: "24 - 12 oz bottles" })
@@ -5928,24 +6021,24 @@ var grid_angular_default = () => /* @__PURE__ */ jsx54(Fragment15, { children: /
       /* @__PURE__ */ jsx54("div", { className: "k-height-container", children: /* @__PURE__ */ jsx54("div", {}) })
     ] }) })
   ] }) }),
-  /* @__PURE__ */ jsx54("section", { className: "col-1", children: /* @__PURE__ */ jsxs23(Popup, { children: [
+  /* @__PURE__ */ jsx54("section", { className: "col-1", children: /* @__PURE__ */ jsxs22(Popup, { children: [
     /* @__PURE__ */ jsx54("span", { className: "k-column-chooser-title", children: "Columns" }),
-    /* @__PURE__ */ jsxs23("div", { className: "k-column-list-wrapper", children: [
-      /* @__PURE__ */ jsxs23("div", { className: "k-column-list", children: [
-        /* @__PURE__ */ jsxs23("label", { className: "k-column-list-item", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "k-column-list-wrapper", children: [
+      /* @__PURE__ */ jsxs22("div", { className: "k-column-list", children: [
+        /* @__PURE__ */ jsxs22("label", { className: "k-column-list-item", children: [
           /* @__PURE__ */ jsx54(Checkbox, {}),
           /* @__PURE__ */ jsx54("span", { className: "k-checkbox-label", children: "ID" })
         ] }),
-        /* @__PURE__ */ jsxs23("label", { className: "k-column-list-item", children: [
+        /* @__PURE__ */ jsxs22("label", { className: "k-column-list-item", children: [
           /* @__PURE__ */ jsx54(Checkbox, {}),
           /* @__PURE__ */ jsx54("span", { className: "k-checkbox-label", children: "Name" })
         ] }),
-        /* @__PURE__ */ jsxs23("label", { className: "k-column-list-item", children: [
+        /* @__PURE__ */ jsxs22("label", { className: "k-column-list-item", children: [
           /* @__PURE__ */ jsx54(Checkbox, {}),
           /* @__PURE__ */ jsx54("span", { className: "k-checkbox-label", children: "Category" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs23(ActionButtons, { children: [
+      /* @__PURE__ */ jsxs22(ActionButtons, { children: [
         /* @__PURE__ */ jsx54(Button, { children: "Reset" }),
         /* @__PURE__ */ jsx54(Button, { themeColor: "primary", children: "Apply" })
       ] })