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

package/dist/cjs/filter/tests/filter.js

@@ -8247,20 +8247,32 @@ ToolbarPopup.options = options49;
 ToolbarPopup.className = TOOLBARPOPUP_CLASSNAME;
 ToolbarPopup.defaultProps = defaultProps47;
 
-// src/toolbar/templates/toolbar-normal.tsx
+// src/split-button/templates/icon-split-button.tsx
 var import_jsx_runtime121 = require("react/jsx-runtime");
 
-// src/toolbar/templates/toolbar-resizable.tsx
+// src/split-button/templates/icon-text-split-button.tsx
 var import_jsx_runtime122 = require("react/jsx-runtime");
 
-// src/toolbar/templates/toolbar-angular-normal.tsx
+// src/split-button/templates/text-split-button.tsx
 var import_jsx_runtime123 = require("react/jsx-runtime");
 
-// src/toolbar/templates/toolbar-angular-resizable.tsx
+// src/split-button/templates/split-button-popup.tsx
 var import_jsx_runtime124 = require("react/jsx-runtime");
 
-// src/filter/filter-preview.tsx
+// src/toolbar/templates/toolbar-normal.tsx
 var import_jsx_runtime125 = require("react/jsx-runtime");
+
+// src/toolbar/templates/toolbar-resizable.tsx
+var import_jsx_runtime126 = require("react/jsx-runtime");
+
+// src/toolbar/templates/toolbar-angular-normal.tsx
+var import_jsx_runtime127 = require("react/jsx-runtime");
+
+// src/toolbar/templates/toolbar-angular-resizable.tsx
+var import_jsx_runtime128 = require("react/jsx-runtime");
+
+// src/filter/filter-preview.tsx
+var import_jsx_runtime129 = require("react/jsx-runtime");
 var FILTER_PREVIEW_CLASSNAME = "k-filter-preview";
 var states52 = [];
 var options50 = {};
@@ -8271,11 +8283,11 @@ var FilterPreview = (props) => {
   if (fields) {
     fields.map(({ name, value }) => {
       expressionPreview.push(
-        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: `k-filter-preview-${name}`, children: `${value} ` })
+        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: `k-filter-preview-${name}`, children: `${value} ` })
       );
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: classNames(FILTER_PREVIEW_CLASSNAME), children: expressionPreview });
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: classNames(FILTER_PREVIEW_CLASSNAME), children: expressionPreview });
 };
 FilterPreview.states = states52;
 FilterPreview.options = options50;
@@ -8283,7 +8295,7 @@ FilterPreview.defaultProps = defaultProps48;
 FilterPreview.className = FILTER_PREVIEW_CLASSNAME;
 
 // src/filter/filter.spec.tsx
-var import_jsx_runtime126 = require("react/jsx-runtime");
+var import_jsx_runtime130 = require("react/jsx-runtime");
 var FILTER_CLASSNAME = "k-filter";
 var states53 = [];
 var options51 = {};
@@ -8291,22 +8303,22 @@ var defaultProps49 = {};
 var Filter = (props) => {
   const { children } = props;
   const filterChildren = [];
-  let expressionPreview = /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_jsx_runtime126.Fragment, {});
+  let expressionPreview = /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_jsx_runtime130.Fragment, {});
   if (children) {
     if (Array.isArray(children)) {
       children.map((child) => {
         if (child.type !== FilterPreview) {
           filterChildren.push(child);
         } else {
-          expressionPreview = /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(FilterPreview, { ...child.props });
+          expressionPreview = /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(FilterPreview, { ...child.props });
         }
       });
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: classNames(props.className, FILTER_CLASSNAME), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("ul", { className: "k-filter-container", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("li", { className: "k-filter-group-main", children: filterChildren }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: classNames(props.className, FILTER_CLASSNAME), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("ul", { className: "k-filter-container", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("li", { className: "k-filter-group-main", children: filterChildren }) }),
     expressionPreview,
-    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Button, { className: "k-filter-apply", children: "Apply" })
+    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Button, { className: "k-filter-apply", children: "Apply" })
   ] });
 };
 Filter.states = states53;
@@ -8315,109 +8327,169 @@ Filter.defaultProps = defaultProps49;
 Filter.className = FILTER_CLASSNAME;
 
 // src/filter/filter-toolbar.tsx
-var import_jsx_runtime127 = require("react/jsx-runtime");
+var import_jsx_runtime131 = require("react/jsx-runtime");
 var FILTER_TOOLBAR_CLASSNAME = "k-filter-toolbar";
 var states54 = [];
 var options52 = {};
 var defaultProps50 = {};
 var FilterToolbar = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { className: classNames(FILTER_TOOLBAR_CLASSNAME), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: classNames(FILTER_TOOLBAR_CLASSNAME), children });
 };
 FilterToolbar.states = states54;
 FilterToolbar.options = options52;
 FilterToolbar.defaultProps = defaultProps50;
 
 // src/filter/filter-lines.tsx
-var import_jsx_runtime128 = require("react/jsx-runtime");
+var import_jsx_runtime132 = require("react/jsx-runtime");
 var FILTER_LINES_CLASSNAME = "k-filter-lines";
 var states55 = [];
 var options53 = {};
 var defaultProps51 = {};
 var FilterLines = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("ul", { className: classNames(FILTER_LINES_CLASSNAME), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("ul", { className: classNames(FILTER_LINES_CLASSNAME), children });
 };
 FilterLines.states = states55;
 FilterLines.options = options53;
 FilterLines.defaultProps = defaultProps51;
 
 // src/filter/filter-item.tsx
-var import_jsx_runtime129 = require("react/jsx-runtime");
+var import_jsx_runtime133 = require("react/jsx-runtime");
 var FILTER_ITEM_CLASSNAME = "k-filter-item";
 var states56 = [];
 var options54 = {};
 var defaultProps52 = {};
 var FilterItem = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("li", { className: classNames(FILTER_ITEM_CLASSNAME), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("li", { className: classNames(FILTER_ITEM_CLASSNAME), children });
 };
 FilterItem.states = states56;
 FilterItem.options = options54;
 FilterItem.defaultProps = defaultProps52;
 
+// src/filter/templates/filter-normal.tsx
+var import_jsx_runtime134 = require("react/jsx-runtime");
+var FilterNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+  Filter,
+  {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(FilterToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(Toolbar, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(ButtonGroup, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Button, { selected: true, children: "And" }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Button, { children: "Or" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Button, { icon: "filter-add-expression", children: "Add Expression" }),
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Button, { icon: "filter-add-group", children: "Add Group" }),
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Button, { fillMode: "flat", icon: "x" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(FilterLines, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(FilterItem, { children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(FilterToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(Toolbar, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ToolbarItem, { className: "k-filter-field", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DropdownList, { value: "Name" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ToolbarItem, { className: "k-filter-operator", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DropdownList, { value: "Is equal to" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ToolbarItem, { className: "k-filter-value", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Textbox, { placeholder: "James" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Button, { fillMode: "flat", icon: "x" })
+        ] }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(FilterItem, { children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(FilterToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(Toolbar, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ToolbarItem, { className: "k-filter-field", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DropdownList, { value: "Price" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ToolbarItem, { className: "k-filter-operator", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DropdownList, { value: "Is greater than" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ToolbarItem, { className: "k-filter-value", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(NumericTextbox, { placeholder: "100,00" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Button, { fillMode: "flat", icon: "x" })
+        ] }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(FilterItem, { children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(FilterToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(Toolbar, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ToolbarItem, { className: "k-filter-field", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DropdownList, { value: "First Ordered" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ToolbarItem, { className: "k-filter-operator", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DropdownList, { value: "Is before" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ToolbarItem, { className: "k-filter-value", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DatePicker, { placeholder: "1/21/2021" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Button, { fillMode: "flat", icon: "x" })
+        ] }) }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+        FilterPreview,
+        {
+          fields: [
+            { name: "bracket", value: "(" },
+            { name: "field", value: "Price" },
+            { name: "criteria", value: "Is greater than" },
+            { name: "value", value: "'100,00'" },
+            { name: "operator", value: "AND" },
+            { name: "bracket", value: "(" },
+            { name: "bracket", value: "(" },
+            { name: "field", value: "FirstOrdered" },
+            { name: "criteria", value: "Is before" },
+            { name: "value", value: "'Thursday Jan 21 2021'" },
+            { name: "bracket", value: ")" },
+            { name: "bracket", value: ")" },
+            { name: "bracket", value: ")" }
+          ]
+        }
+      )
+    ],
+    ...props
+  }
+);
+
 // src/filter/tests/filter.tsx
-var import_jsx_runtime130 = require("react/jsx-runtime");
-var filter_default = () => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_jsx_runtime130.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { id: "test-area", className: "k-d-grid", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(Filter, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(FilterToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(Toolbar, { focus: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(ButtonGroup, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Button, { selected: true, children: "And" }),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Button, { children: "Or" })
+var import_jsx_runtime135 = require("react/jsx-runtime");
+var filter_default = () => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_jsx_runtime135.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { id: "test-area", className: "k-d-grid", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(FilterNormal, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(FilterToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(Toolbar, { focus: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(ButtonGroup, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { selected: true, children: "And" }),
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { children: "Or" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Button, { icon: "filter-add-expression", children: "Add Expression" }),
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Button, { icon: "filter-add-group", children: "Add Group" }),
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Button, { fillMode: "flat", icon: "x" })
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { icon: "filter-add-expression", children: "Add Expression" }),
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { icon: "filter-add-group", children: "Add Group" }),
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { fillMode: "flat", icon: "x" })
   ] }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(FilterLines, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(FilterItem, { children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(FilterToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(Toolbar, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToolbarItem, { className: "k-filter-field", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownList, { value: "Name" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToolbarItem, { className: "k-filter-operator", focus: true, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownList, { value: "Is equal to" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToolbarItem, { className: "k-filter-value", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Textbox, { placeholder: "James" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Button, { fillMode: "flat", icon: "x" })
+  /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(FilterLines, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(FilterItem, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(FilterToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(Toolbar, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ToolbarItem, { className: "k-filter-field", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DropdownList, { value: "Name" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ToolbarItem, { className: "k-filter-operator", focus: true, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DropdownList, { value: "Is equal to" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ToolbarItem, { className: "k-filter-value", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Textbox, { placeholder: "James" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { fillMode: "flat", icon: "x" })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(FilterItem, { children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(FilterToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(Toolbar, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToolbarItem, { className: "k-filter-field", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownList, { value: "Price" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToolbarItem, { className: "k-filter-operator", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownList, { value: "Is greater than" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToolbarItem, { className: "k-filter-value", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(NumericTextbox, { placeholder: "100,00" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Button, { fillMode: "flat", icon: "x" })
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(FilterItem, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(FilterToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(Toolbar, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ToolbarItem, { className: "k-filter-field", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DropdownList, { value: "Price" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ToolbarItem, { className: "k-filter-operator", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DropdownList, { value: "Is greater than" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ToolbarItem, { className: "k-filter-value", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(NumericTextbox, { placeholder: "100,00" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { fillMode: "flat", icon: "x" })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(FilterItem, { children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(FilterToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(Toolbar, { focus: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToolbarItem, { className: "k-filter-field", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownList, { value: "Discontinued" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToolbarItem, { className: "k-filter-operator", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownList, { value: "Is equal to" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToolbarItem, { className: "k-filter-value", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownList, { value: "False" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Button, { fillMode: "flat", icon: "x" })
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(FilterItem, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(FilterToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(Toolbar, { focus: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ToolbarItem, { className: "k-filter-field", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DropdownList, { value: "Discontinued" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ToolbarItem, { className: "k-filter-operator", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DropdownList, { value: "Is equal to" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ToolbarItem, { className: "k-filter-value", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DropdownList, { value: "False" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { fillMode: "flat", icon: "x" })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(FilterItem, { children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(FilterToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(Toolbar, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToolbarItem, { className: "k-filter-field", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownList, { value: "First Ordered" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToolbarItem, { className: "k-filter-operator", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownList, { value: "Is before" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToolbarItem, { className: "k-filter-value", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DatePicker, { placeholder: "1/21/2021" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Button, { fillMode: "flat", icon: "x" })
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(FilterItem, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(FilterToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(Toolbar, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ToolbarItem, { className: "k-filter-field", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DropdownList, { value: "First Ordered" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ToolbarItem, { className: "k-filter-operator", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DropdownList, { value: "Is before" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ToolbarItem, { className: "k-filter-value", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DatePicker, { placeholder: "1/21/2021" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { fillMode: "flat", icon: "x" })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(FilterItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(FilterToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(Toolbar, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(ButtonGroup, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Button, { selected: true, children: "And" }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Button, { children: "Or" })
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(FilterItem, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(FilterToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(Toolbar, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(ButtonGroup, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { selected: true, children: "And" }),
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { children: "Or" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Button, { icon: "filter-add-expression", children: "Add Expression" }),
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Button, { icon: "filter-add-group", children: "Add Group" }),
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Button, { fillMode: "flat", icon: "x" })
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { icon: "filter-add-expression", children: "Add Expression" }),
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { icon: "filter-add-group", children: "Add Group" }),
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { fillMode: "flat", icon: "x" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(FilterLines, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(FilterItem, { children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(FilterToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(Toolbar, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToolbarItem, { className: "k-filter-field", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownList, { value: "Name" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToolbarItem, { className: "k-filter-operator", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownList, { value: "Is empty" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Button, { fillMode: "flat", icon: "x" })
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(FilterLines, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(FilterItem, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(FilterToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(Toolbar, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ToolbarItem, { className: "k-filter-field", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DropdownList, { value: "Name" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ToolbarItem, { className: "k-filter-operator", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DropdownList, { value: "Is empty" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { fillMode: "flat", icon: "x" })
         ] }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(FilterItem, { children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(FilterToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(Toolbar, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToolbarItem, { className: "k-filter-field", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownList, { value: "Price" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToolbarItem, { className: " k-filter-operator", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownList, { value: "Is not null" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Button, { fillMode: "flat", icon: "x" })
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(FilterItem, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(FilterToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(Toolbar, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ToolbarItem, { className: "k-filter-field", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DropdownList, { value: "Price" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ToolbarItem, { className: " k-filter-operator", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DropdownList, { value: "Is not null" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { fillMode: "flat", icon: "x" })
         ] }) }) })
       ] })
     ] })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
     FilterPreview,
     {
       fields: [