@toolbox-web/grid 1.4.0 → 1.6.0

package/lib/plugins/filtering/index.js

@@ -1,19 +1,19 @@
-function _(h) {
-  const { totalRows: e, viewportHeight: t, scrollTop: r, rowHeight: i, overscan: n } = h, a = Math.ceil(t / i);
-  let o = Math.floor(r / i) - n;
-  o < 0 && (o = 0);
-  let l = o + a + n * 2;
-  return l > e && (l = e), l === e && o > 0 && (o = Math.max(0, l - a - n * 2)), {
-    start: o,
-    end: l,
-    offsetY: o * i,
-    totalHeight: e * i
+function G(F) {
+  const { totalRows: e, viewportHeight: t, scrollTop: r, rowHeight: n, overscan: s } = F, o = Math.ceil(t / n);
+  let c = Math.floor(r / n) - s;
+  c < 0 && (c = 0);
+  let i = c + o + s * 2;
+  return i > e && (i = e), i === e && c > 0 && (c = Math.max(0, i - o - s * 2)), {
+    start: c,
+    end: i,
+    offsetY: c * n,
+    totalHeight: e * n
   };
 }
-function M(h, e) {
-  return h <= e;
+function $(F, e) {
+  return F <= e;
 }
-const H = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', z = {
+const B = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', K = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -22,11 +22,11 @@ const H = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentCo
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
   toolPanel: "☰",
-  filter: H,
-  filterActive: H,
+  filter: B,
+  filterActive: B,
   print: "🖨️"
 };
-class q {
+class W {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -250,7 +250,7 @@ class q {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...z, ...e };
+    return { ...K, ...e };
   }
   // #region Animation Helpers
   /**
@@ -326,31 +326,31 @@ class q {
   }
   // #endregion
 }
-function B(h) {
-  return h.meta?.utility === !0;
+function j(F) {
+  return F.meta?.utility === !0;
 }
-function Y(h, e, t = !1) {
-  const r = h[e.field];
+function U(F, e, t = !1) {
+  const r = F[e.field];
   if (e.operator === "blank")
     return r == null || r === "";
   if (e.operator === "notBlank")
     return r != null && r !== "";
   if (r == null) return !1;
-  const i = String(r), n = t ? i : i.toLowerCase(), a = t ? String(e.value) : String(e.value).toLowerCase();
+  const n = String(r), s = t ? n : n.toLowerCase(), o = t ? String(e.value) : String(e.value).toLowerCase();
   switch (e.operator) {
     // Text operators
     case "contains":
-      return n.includes(a);
+      return s.includes(o);
     case "notContains":
-      return !n.includes(a);
+      return !s.includes(o);
     case "equals":
-      return n === a;
+      return s === o;
     case "notEquals":
-      return n !== a;
+      return s !== o;
     case "startsWith":
-      return n.startsWith(a);
+      return s.startsWith(o);
     case "endsWith":
-      return n.endsWith(a);
+      return s.endsWith(o);
     // Number/Date operators (use raw numeric values)
     case "lessThan":
       return Number(r) < Number(e.value);
@@ -371,12 +371,12 @@ function Y(h, e, t = !1) {
       return !0;
   }
 }
-function D(h, e, t = !1) {
-  return e.length ? h.filter((r) => e.every((i) => Y(r, i, t))) : h;
+function J(F, e, t = !1) {
+  return e.length ? F.filter((r) => e.every((n) => U(r, n, t))) : F;
 }
-function $(h) {
+function Q(F) {
   return JSON.stringify(
-    h.map((e) => ({
+    F.map((e) => ({
       field: e.field,
       operator: e.operator,
       value: e.value,
@@ -384,20 +384,20 @@ function $(h) {
     }))
   );
 }
-function V(h, e) {
+function O(F, e) {
   const t = /* @__PURE__ */ new Set();
-  for (const r of h) {
-    const i = r[e];
-    i != null && t.add(i);
+  for (const r of F) {
+    const n = r[e];
+    n != null && t.add(n);
   }
-  return [...t].sort((r, i) => typeof r == "number" && typeof i == "number" ? r - i : String(r).localeCompare(String(i)));
+  return [...t].sort((r, n) => typeof r == "number" && typeof n == "number" ? r - n : String(r).localeCompare(String(n)));
 }
-const G = '@layer tbw-plugins{tbw-grid .tbw-quick-filter-input{flex:1;max-width:300px;height:var(--tbw-input-height, 1.75rem);padding:var(--tbw-input-padding, 0 .5rem);border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);background:var(--tbw-color-bg);color:var(--tbw-color-fg);font-size:var(--tbw-font-size-sm, .8125rem)}tbw-grid .tbw-quick-filter-input:focus{outline:none;border-color:var(--tbw-color-accent)}tbw-grid .header-cell.filtered:before{content:"";position:absolute;top:var(--tbw-spacing-xs, .25rem);right:var(--tbw-spacing-xs, .25rem);width:var(--tbw-indicator-size, .375rem);height:var(--tbw-indicator-size, .375rem);background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));border-radius:50%}tbw-grid .tbw-filter-btn{display:var(--tbw-filter-btn-display, inline-flex);visibility:var(--tbw-filter-btn-visibility, visible);align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:2px;margin-left:var(--tbw-spacing-xs, .25rem);opacity:.4;transition:opacity .15s,visibility 0s,display 0s allow-discrete;color:inherit;vertical-align:middle;transition-behavior:allow-discrete}tbw-grid .tbw-filter-btn:hover,tbw-grid .tbw-filter-btn.active{opacity:1;visibility:visible;display:inline-flex}tbw-grid .tbw-filter-btn.active{color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6))}tbw-grid .header-row .cell:hover .tbw-filter-btn,tbw-grid .header-row .cell.filtered .tbw-filter-btn{display:inline-flex;visibility:visible}}', K = "@layer tbw-plugins{.tbw-filter-panel{position:fixed;background:var(--tbw-filter-panel-bg, var(--tbw-color-panel-bg, light-dark(#eeeeee, #222222)));color:var(--tbw-filter-panel-fg, var(--tbw-color-fg, light-dark(#222222, #eeeeee)));border:1px solid var(--tbw-filter-panel-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-filter-panel-radius, var(--tbw-border-radius, .25rem));box-shadow:0 4px 16px var(--tbw-filter-panel-shadow, var(--tbw-color-shadow, light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3))));padding:var(--tbw-panel-padding, var(--tbw-spacing-lg, .75rem));z-index:10000;min-width:200px;max-width:280px;max-height:350px;display:flex;flex-direction:column;font-family:var(--tbw-font-family, system-ui, sans-serif);font-size:var(--tbw-font-size, .8125rem);transform-origin:top center}.tbw-filter-panel.tbw-filter-panel-above{transform-origin:bottom center}.tbw-filter-panel.tbw-filter-panel-animated{animation:tbw-filter-panel-enter var(--tbw-animation-duration, .15s) var(--tbw-animation-easing, ease-out)}.tbw-filter-panel.tbw-filter-panel-above.tbw-filter-panel-animated{animation:tbw-filter-panel-enter-above var(--tbw-animation-duration, .15s) var(--tbw-animation-easing, ease-out)}@keyframes tbw-filter-panel-enter{0%{opacity:0;transform:scaleY(.3) translateY(-10px)}to{opacity:1;transform:scaleY(1) translateY(0)}}@keyframes tbw-filter-panel-enter-above{0%{opacity:0;transform:scaleY(.3) translateY(10px)}to{opacity:1;transform:scaleY(1) translateY(0)}}@supports (anchor-name: --test){.tbw-filter-panel{position-anchor:--tbw-filter-anchor;top:anchor(bottom);left:anchor(left);margin-top:4px;position-try-fallbacks:flip-inline,flip-block,flip-block flip-inline}}.tbw-filter-search{margin-bottom:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.tbw-filter-search-input{width:100%;padding:var(--tbw-filter-search-padding, var(--tbw-spacing-sm, .375rem) var(--tbw-spacing-md, .5rem));background:var(--tbw-filter-input-bg, var(--tbw-color-bg, transparent));color:inherit;border:1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-filter-input-radius, var(--tbw-border-radius, .25rem));font-size:inherit;box-sizing:border-box}.tbw-filter-search-input:focus{outline:none;border-color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));box-shadow:0 0 0 2px rgba(from var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6)) r g b / 15%)}.tbw-filter-actions{display:flex;padding:var(--tbw-button-padding-sm, .25rem .125rem);margin-bottom:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));border-bottom:1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)))}.tbw-filter-action-btn{background:transparent;border:none;color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));cursor:pointer;font-size:var(--tbw-font-size-xs, .75rem);padding:2px 0}.tbw-filter-action-btn:hover{text-decoration:underline}.tbw-filter-values{flex:1;overflow-y:auto;margin-bottom:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));max-height:180px;position:relative}.tbw-filter-values-spacer{width:1px}.tbw-filter-values-content{position:absolute;top:0;left:0;right:0}.tbw-filter-value-item{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));padding:var(--tbw-button-padding-sm, .25rem .125rem);cursor:pointer;border-radius:3px;min-height:var(--tbw-filter-item-height, 28px)}.tbw-filter-value-item:hover{background:var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)))}.tbw-filter-checkbox{margin:0;cursor:pointer;accent-color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6))}.tbw-filter-no-match{color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));padding:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem)) 0;text-align:center;font-style:italic}.tbw-filter-buttons{display:flex;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));padding-top:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));border-top:1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)))}.tbw-filter-apply-btn{flex:1;padding:var(--tbw-filter-btn-padding, var(--tbw-button-padding, .375rem .75rem));background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));color:var(--tbw-filter-accent-fg, var(--tbw-color-accent-fg, light-dark(#ffffff, #000000)));border:none;border-radius:var(--tbw-border-radius, .25rem);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem);font-weight:var(--tbw-filter-btn-font-weight, 500);min-height:var(--tbw-filter-btn-min-height, auto)}.tbw-filter-apply-btn:hover{filter:brightness(.9)}.tbw-filter-clear-btn{flex:1;padding:var(--tbw-filter-btn-padding, var(--tbw-button-padding, .375rem .75rem));background:transparent;color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));border:1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-border-radius, .25rem);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem);font-weight:var(--tbw-filter-btn-font-weight, 500);min-height:var(--tbw-filter-btn-min-height, auto)}.tbw-filter-clear-btn:hover{background:var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)))}}";
-class v extends q {
+const X = '@layer tbw-plugins{tbw-grid .tbw-quick-filter-input{flex:1;max-width:300px;height:var(--tbw-input-height, 1.75rem);padding:var(--tbw-input-padding, 0 .5rem);border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);background:var(--tbw-color-bg);color:var(--tbw-color-fg);font-size:var(--tbw-font-size-sm, .8125rem)}tbw-grid .tbw-quick-filter-input:focus{outline:none;border-color:var(--tbw-color-accent)}tbw-grid .header-cell.filtered:before{content:"";position:absolute;top:var(--tbw-spacing-xs, .25rem);right:var(--tbw-spacing-xs, .25rem);width:var(--tbw-indicator-size, .375rem);height:var(--tbw-indicator-size, .375rem);background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));border-radius:50%}tbw-grid .tbw-filter-btn{display:var(--tbw-filter-btn-display, inline-flex);visibility:var(--tbw-filter-btn-visibility, visible);align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:2px;margin-left:var(--tbw-spacing-xs, .25rem);opacity:.4;transition:opacity .15s,visibility 0s,display 0s allow-discrete;color:inherit;vertical-align:middle;transition-behavior:allow-discrete}tbw-grid .tbw-filter-btn:hover,tbw-grid .tbw-filter-btn.active{opacity:1;visibility:visible;display:inline-flex}tbw-grid .tbw-filter-btn.active{color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6))}tbw-grid .header-row .cell:hover .tbw-filter-btn,tbw-grid .header-row .cell.filtered .tbw-filter-btn{display:inline-flex;visibility:visible}}', Z = "@layer tbw-plugins{.tbw-filter-panel{position:fixed;background:var(--tbw-filter-panel-bg, var(--tbw-color-panel-bg, light-dark(#eeeeee, #222222)));color:var(--tbw-filter-panel-fg, var(--tbw-color-fg, light-dark(#222222, #eeeeee)));border:1px solid var(--tbw-filter-panel-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-filter-panel-radius, var(--tbw-border-radius, .25rem));box-shadow:0 4px 16px var(--tbw-filter-panel-shadow, var(--tbw-color-shadow, light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3))));padding:var(--tbw-panel-padding, var(--tbw-spacing-lg, .75rem));z-index:10000;min-width:200px;max-width:280px;max-height:350px;display:flex;flex-direction:column;font-family:var(--tbw-font-family, system-ui, sans-serif);font-size:var(--tbw-font-size, .8125rem);transform-origin:top center}.tbw-filter-panel.tbw-filter-panel-above{transform-origin:bottom center}.tbw-filter-panel.tbw-filter-panel-animated{animation:tbw-filter-panel-enter var(--tbw-animation-duration, .15s) var(--tbw-animation-easing, ease-out)}.tbw-filter-panel.tbw-filter-panel-above.tbw-filter-panel-animated{animation:tbw-filter-panel-enter-above var(--tbw-animation-duration, .15s) var(--tbw-animation-easing, ease-out)}@keyframes tbw-filter-panel-enter{0%{opacity:0;transform:scaleY(.3) translateY(-10px)}to{opacity:1;transform:scaleY(1) translateY(0)}}@keyframes tbw-filter-panel-enter-above{0%{opacity:0;transform:scaleY(.3) translateY(10px)}to{opacity:1;transform:scaleY(1) translateY(0)}}@supports (anchor-name: --test){.tbw-filter-panel{position-anchor:--tbw-filter-anchor;top:anchor(bottom);left:anchor(left);margin-top:4px;position-try-fallbacks:flip-inline,flip-block,flip-block flip-inline}}.tbw-filter-search{margin-bottom:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));min-height:var(--tbw-filter-item-height, 28px)}.tbw-filter-search-input{height:var(--tbw-filter-item-height, 28px);width:100%;padding:var(--tbw-filter-search-padding, var(--tbw-spacing-sm, .375rem) var(--tbw-spacing-md, .5rem));background:var(--tbw-filter-input-bg, var(--tbw-color-bg, transparent));color:inherit;border:1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-filter-input-radius, var(--tbw-border-radius, .25rem));font-size:inherit;box-sizing:border-box}.tbw-filter-search-input:focus{outline:none;border-color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));box-shadow:0 0 0 2px rgba(from var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6)) r g b / 15%)}.tbw-filter-actions{display:flex;padding:var(--tbw-button-padding-sm, .25rem .125rem);margin-bottom:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));border-bottom:1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));min-height:var(--tbw-filter-item-height, 28px)}.tbw-filter-action-btn{background:transparent;border:none;color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));cursor:pointer;font-size:var(--tbw-font-size-xs, .75rem);padding:2px 0}.tbw-filter-action-btn:hover{text-decoration:underline}.tbw-filter-values{flex:1;overflow-y:auto;margin-bottom:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));max-height:180px;position:relative}.tbw-filter-values-spacer{width:1px}.tbw-filter-values-content{position:absolute;top:0;left:0;right:0}.tbw-filter-value-item{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));padding:var(--tbw-button-padding-sm, .25rem .125rem);cursor:pointer;border-radius:3px;height:var(--tbw-filter-item-height, 28px)}.tbw-filter-value-item:hover{background:var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)))}.tbw-filter-checkbox{margin:0;cursor:pointer;accent-color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6))}.tbw-filter-no-match{color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));padding:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem)) 0;text-align:center;font-style:italic}.tbw-filter-buttons{display:flex;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));padding-top:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));border-top:1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)))}.tbw-filter-apply-btn{flex:1;padding:var(--tbw-filter-btn-padding, var(--tbw-button-padding, .375rem .75rem));background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));color:var(--tbw-filter-accent-fg, var(--tbw-color-accent-fg, light-dark(#ffffff, #000000)));border:none;border-radius:var(--tbw-border-radius, .25rem);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem);font-weight:var(--tbw-filter-btn-font-weight, 500);min-height:var(--tbw-filter-btn-min-height, auto)}.tbw-filter-apply-btn:hover{filter:brightness(.9)}.tbw-filter-clear-btn{flex:1;padding:var(--tbw-filter-btn-padding, var(--tbw-button-padding, .375rem .75rem));background:transparent;color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));border:1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-border-radius, .25rem);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem);font-weight:var(--tbw-filter-btn-font-weight, 500);min-height:var(--tbw-filter-btn-min-height, auto)}.tbw-filter-clear-btn:hover{background:var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)))}.tbw-filter-range-title{font-weight:500;margin-bottom:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));padding-bottom:var(--tbw-spacing-sm, .375rem);border-bottom:1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)))}.tbw-filter-range-inputs,.tbw-filter-date-range{display:flex;align-items:flex-end;gap:var(--tbw-spacing-sm, .375rem);margin-bottom:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.tbw-filter-range-group,.tbw-filter-date-group{display:flex;flex-direction:column;gap:var(--tbw-spacing-xs, .25rem);flex:1}.tbw-filter-range-label{font-size:var(--tbw-font-size-xs, .75rem);color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)))}.tbw-filter-range-input,.tbw-filter-date-input{width:100%;height:var(--tbw-filter-item-height, 28px);padding:var(--tbw-spacing-xs, .25rem) var(--tbw-spacing-sm, .375rem);background:var(--tbw-filter-input-bg, var(--tbw-color-bg, transparent));color:inherit;border:1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-filter-input-radius, var(--tbw-border-radius, .25rem));font-size:inherit;box-sizing:border-box}.tbw-filter-range-input:focus,.tbw-filter-date-input:focus{outline:none;border-color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));box-shadow:0 0 0 2px rgba(from var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6)) r g b / 15%)}.tbw-filter-range-separator{color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));padding-bottom:var(--tbw-spacing-xs, .25rem)}.tbw-filter-range-slider{position:relative;height:24px;margin:var(--tbw-spacing-md, .5rem) 0 var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.tbw-filter-range-track{position:absolute;top:50%;left:0;right:0;height:4px;background:var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:2px;transform:translateY(-50%)}.tbw-filter-range-fill{position:absolute;top:50%;height:4px;background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));border-radius:2px;transform:translateY(-50%)}.tbw-filter-range-thumb{position:absolute;top:0;width:100%;height:100%;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}.tbw-filter-range-thumb::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));border:2px solid var(--tbw-filter-panel-bg, var(--tbw-color-panel-bg, light-dark(#eeeeee, #222222)));border-radius:50%;cursor:pointer;pointer-events:all;box-shadow:0 1px 3px #0003}.tbw-filter-range-thumb::-moz-range-thumb{width:16px;height:16px;background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));border:2px solid var(--tbw-filter-panel-bg, var(--tbw-color-panel-bg, light-dark(#eeeeee, #222222)));border-radius:50%;cursor:pointer;pointer-events:all;box-shadow:0 1px 3px #0003}.tbw-filter-range-thumb::-webkit-slider-thumb:hover{transform:scale(1.1)}.tbw-filter-range-thumb::-moz-range-thumb:hover{transform:scale(1.1)}}";
+class M extends W {
   /** @internal */
   name = "filtering";
   /** @internal */
-  styles = G;
+  styles = X;
   /** @internal */
   get defaultConfig() {
     return {
@@ -407,6 +407,21 @@ class v extends q {
       useWorker: !0
     };
   }
+  // #region Helpers
+  /**
+   * Check if filtering is enabled at the grid level.
+   * Grid-wide `filterable: false` disables filtering for all columns.
+   */
+  isFilteringEnabled() {
+    return this.grid.effectiveConfig?.filterable !== !1;
+  }
+  /**
+   * Check if a specific column is filterable, respecting both grid-level and column-level settings.
+   */
+  isColumnFilterable(e) {
+    return this.isFilteringEnabled() ? e.filterable !== !1 : !1;
+  }
+  // #endregion
   // #region Internal State
   filters = /* @__PURE__ */ new Map();
   cachedResult = null;
@@ -438,7 +453,7 @@ class v extends q {
           return t;
       }
     }
-    return v.DEFAULT_LIST_ITEM_HEIGHT;
+    return M.DEFAULT_LIST_ITEM_HEIGHT;
   }
   /**
    * Sync excludedValues map from a filter model (for set filters).
@@ -464,40 +479,40 @@ class v extends q {
     if (!t.length) return [...e];
     if (this.config.filterHandler)
       return this.cachedResult ? this.cachedResult : [...e];
-    const r = $(t);
+    const r = Q(t);
     if (this.cacheKey === r && this.cachedResult)
       return this.cachedResult;
-    const i = D([...e], t, this.config.caseSensitive);
-    return this.cachedResult = i, this.cacheKey = r, i;
+    const n = J([...e], t, this.config.caseSensitive);
+    return this.cachedResult = n, this.cacheKey = r, n;
   }
   /** @internal */
   afterRender() {
     const e = this.gridElement;
     if (!e) return;
     e.querySelectorAll('[part~="header-cell"]').forEach((r) => {
-      const i = r.getAttribute("data-col");
-      if (i === null) return;
-      const n = this.visibleColumns[parseInt(i, 10)];
-      if (!n || n.filterable === !1 || B(n)) return;
-      const a = n.field;
-      if (!a) return;
-      const o = this.filters.has(a);
-      let l = r.querySelector(".tbw-filter-btn");
-      if (l) {
-        const b = l.classList.contains("active");
-        if (l.classList.toggle("active", o), r.classList.toggle("filtered", o), b !== o) {
-          const E = o ? "filterActive" : "filter";
-          this.setIcon(l, this.resolveIcon(E));
+      const n = r.getAttribute("data-col");
+      if (n === null) return;
+      const s = this.visibleColumns[parseInt(n, 10)];
+      if (!s || !this.isColumnFilterable(s) || j(s)) return;
+      const o = s.field;
+      if (!o) return;
+      const c = this.filters.has(o);
+      let i = r.querySelector(".tbw-filter-btn");
+      if (i) {
+        const w = i.classList.contains("active");
+        if (i.classList.toggle("active", c), r.classList.toggle("filtered", c), w !== c) {
+          const b = c ? "filterActive" : "filter";
+          this.setIcon(i, this.resolveIcon(b));
         }
         return;
       }
-      l = document.createElement("button"), l.className = "tbw-filter-btn", l.setAttribute("aria-label", `Filter ${n.header ?? a}`);
-      const m = o ? "filterActive" : "filter";
-      this.setIcon(l, this.resolveIcon(m)), o && (l.classList.add("active"), r.classList.add("filtered")), l.addEventListener("click", (b) => {
-        b.stopPropagation(), this.toggleFilterPanel(a, n, l);
+      i = document.createElement("button"), i.className = "tbw-filter-btn", i.setAttribute("aria-label", `Filter ${s.header ?? o}`);
+      const m = c ? "filterActive" : "filter";
+      this.setIcon(i, this.resolveIcon(m)), c && (i.classList.add("active"), r.classList.add("filtered")), i.addEventListener("click", (w) => {
+        w.stopPropagation(), this.toggleFilterPanel(o, s, i);
       });
-      const p = r.querySelector(".resize-handle");
-      p ? r.insertBefore(l, p) : r.appendChild(l);
+      const S = r.querySelector(".resize-handle");
+      S ? r.insertBefore(i, S) : r.appendChild(i);
     });
   }
   // #endregion
@@ -584,7 +599,7 @@ class v extends q {
    * Uses sourceRows to include all values regardless of current filter.
    */
   getUniqueValues(e) {
-    return V(this.sourceRows, e);
+    return O(this.sourceRows, e);
   }
   // #endregion
   // #region Private Methods
@@ -595,8 +610,8 @@ class v extends q {
   copyGridThemeContext(e) {
     const t = this.gridElement;
     if (!t) return;
-    for (const i of t.classList)
-      i.startsWith("tbw-") || i === "selecting" || e.classList.add(i);
+    for (const n of t.classList)
+      n.startsWith("tbw-") || n === "selecting" || e.classList.add(n);
     const r = t.dataset.theme;
     r && (e.dataset.theme = r);
   }
@@ -610,7 +625,7 @@ class v extends q {
       return;
     }
     const e = document.createElement("style");
-    e.id = "tbw-filter-panel-styles", e.textContent = K, document.head.appendChild(e), this.globalStylesInjected = !0;
+    e.id = "tbw-filter-panel-styles", e.textContent = Z, document.head.appendChild(e), this.globalStylesInjected = !0;
   }
   /**
    * Toggle the filter panel for a field
@@ -621,41 +636,48 @@ class v extends q {
       return;
     }
     this.closeFilterPanel();
-    const i = document.createElement("div");
-    if (i.className = "tbw-filter-panel", this.copyGridThemeContext(i), this.isAnimationEnabled && i.classList.add("tbw-filter-panel-animated"), this.panelElement = i, this.openPanelField = e, this.config.valuesHandler) {
-      i.innerHTML = '<div class="tbw-filter-loading">Loading...</div>', document.body.appendChild(i), this.positionPanel(i, r), this.setupPanelCloseHandler(i, r), this.config.valuesHandler(e, t).then((a) => {
-        this.openPanelField !== e || !this.panelElement || (i.innerHTML = "", this.renderPanelContent(e, t, i, a));
+    const n = document.createElement("div");
+    if (n.className = "tbw-filter-panel", this.copyGridThemeContext(n), this.isAnimationEnabled && n.classList.add("tbw-filter-panel-animated"), this.panelElement = n, this.openPanelField = e, this.config.valuesHandler) {
+      n.innerHTML = '<div class="tbw-filter-loading">Loading...</div>', document.body.appendChild(n), this.positionPanel(n, r), this.setupPanelCloseHandler(n, r), this.config.valuesHandler(e, t).then((o) => {
+        this.openPanelField !== e || !this.panelElement || (n.innerHTML = "", this.renderPanelContent(e, t, n, o));
       });
       return;
     }
-    const n = V(this.sourceRows, e);
-    this.renderPanelContent(e, t, i, n), document.body.appendChild(i), this.positionPanel(i, r), this.setupPanelCloseHandler(i, r);
+    const s = O(this.sourceRows, e);
+    document.body.appendChild(n), this.positionPanel(n, r), this.renderPanelContent(e, t, n, s), this.setupPanelCloseHandler(n, r);
   }
   /**
    * Render filter panel content with given values
    */
-  renderPanelContent(e, t, r, i) {
-    let n = this.excludedValues.get(e);
-    n || (n = /* @__PURE__ */ new Set(), this.excludedValues.set(e, n));
-    const a = this.searchText.get(e) ?? "", o = {
+  renderPanelContent(e, t, r, n) {
+    let s = this.excludedValues.get(e);
+    s || (s = /* @__PURE__ */ new Set(), this.excludedValues.set(e, s));
+    const o = this.searchText.get(e) ?? "", c = {
       field: e,
       column: t,
-      uniqueValues: i,
-      excludedValues: n,
-      searchText: a,
+      uniqueValues: n,
+      excludedValues: s,
+      searchText: o,
       applySetFilter: (m) => {
         this.applySetFilter(e, m), this.closeFilterPanel();
       },
-      applyTextFilter: (m, p, b) => {
-        this.applyTextFilter(e, m, p, b), this.closeFilterPanel();
+      applyTextFilter: (m, S, w) => {
+        this.applyTextFilter(e, m, S, w), this.closeFilterPanel();
       },
       clearFilter: () => {
         this.clearFieldFilter(e), this.closeFilterPanel();
       },
       closePanel: () => this.closeFilterPanel()
     };
-    let l = !1;
-    this.config.filterPanelRenderer && (this.config.filterPanelRenderer(r, o), l = r.children.length > 0), l || this.renderDefaultFilterPanel(r, o, i, n);
+    let i = !1;
+    if (this.config.filterPanelRenderer && (this.config.filterPanelRenderer(r, c), i = r.children.length > 0), !i && t.type) {
+      const m = this.grid.effectiveConfig.typeDefaults?.[t.type];
+      m?.filterPanelRenderer && (m.filterPanelRenderer(r, c), i = r.children.length > 0);
+    }
+    if (!i) {
+      const m = t.type;
+      m === "number" ? this.renderNumberFilterPanel(r, c, n) : m === "date" ? this.renderDateFilterPanel(r, c, n) : this.renderDefaultFilterPanel(r, c, n, s);
+    }
   }
   /**
    * Setup click-outside handler to close the panel
@@ -684,137 +706,245 @@ class v extends q {
    * Check if browser supports CSS Anchor Positioning
    */
   static checkAnchorPositioningSupport() {
-    return v.supportsAnchorPositioning === null && (v.supportsAnchorPositioning = CSS.supports("anchor-name", "--test")), v.supportsAnchorPositioning;
+    return M.supportsAnchorPositioning === null && (M.supportsAnchorPositioning = CSS.supports("anchor-name", "--test")), M.supportsAnchorPositioning;
   }
   /**
    * Position the panel below the header cell
    * Uses CSS Anchor Positioning if supported, falls back to JS positioning
    */
   positionPanel(e, t) {
-    const i = t.closest(".cell") ?? t;
-    if (i.style.anchorName = "--tbw-filter-anchor", this.panelAnchorElement = i, v.checkAnchorPositioningSupport()) {
+    const n = t.closest(".cell") ?? t;
+    if (n.style.anchorName = "--tbw-filter-anchor", this.panelAnchorElement = n, M.checkAnchorPositioningSupport()) {
       requestAnimationFrame(() => {
-        const a = e.getBoundingClientRect(), o = i.getBoundingClientRect();
-        a.top < o.top && e.classList.add("tbw-filter-panel-above");
+        const o = e.getBoundingClientRect(), c = n.getBoundingClientRect();
+        o.top < c.top && e.classList.add("tbw-filter-panel-above");
       });
       return;
     }
-    const n = i.getBoundingClientRect();
-    e.style.position = "fixed", e.style.top = `${n.bottom + 4}px`, e.style.left = `${n.left}px`, requestAnimationFrame(() => {
-      const a = e.getBoundingClientRect();
-      a.right > window.innerWidth - 8 && (e.style.left = `${n.right - a.width}px`), a.bottom > window.innerHeight - 8 && (e.style.top = `${n.top - a.height - 4}px`, e.classList.add("tbw-filter-panel-above"));
+    const s = n.getBoundingClientRect();
+    e.style.position = "fixed", e.style.top = `${s.bottom + 4}px`, e.style.left = `${s.left}px`, requestAnimationFrame(() => {
+      const o = e.getBoundingClientRect();
+      o.right > window.innerWidth - 8 && (e.style.left = `${s.right - o.width}px`), o.bottom > window.innerHeight - 8 && (e.style.top = `${s.top - o.height - 4}px`, e.classList.add("tbw-filter-panel-above"));
     });
   }
   /**
    * Render the default filter panel content
    */
-  renderDefaultFilterPanel(e, t, r, i) {
-    const { field: n } = t, a = this.getListItemHeight(), o = document.createElement("div");
-    o.className = "tbw-filter-search";
-    const l = document.createElement("input");
-    l.type = "text", l.placeholder = "Search...", l.className = "tbw-filter-search-input", l.value = this.searchText.get(n) ?? "", o.appendChild(l), e.appendChild(o);
+  renderDefaultFilterPanel(e, t, r, n) {
+    const { field: s } = t, o = this.getListItemHeight(), c = document.createElement("div");
+    c.className = "tbw-filter-search";
+    const i = document.createElement("input");
+    i.type = "text", i.placeholder = "Search...", i.className = "tbw-filter-search-input", i.value = this.searchText.get(s) ?? "", c.appendChild(i), e.appendChild(c);
     const m = document.createElement("div");
     m.className = "tbw-filter-actions";
-    const p = document.createElement("label");
-    p.className = "tbw-filter-value-item", p.style.padding = "0", p.style.margin = "0";
-    const b = document.createElement("input");
-    b.type = "checkbox", b.className = "tbw-filter-checkbox";
-    const E = document.createElement("span");
-    E.textContent = "Select All", p.appendChild(b), p.appendChild(E), m.appendChild(p);
-    const F = () => {
-      const s = [...x.values()], u = s.every((c) => c), w = s.every((c) => !c);
-      b.checked = u, b.indeterminate = !u && !w;
+    const S = document.createElement("label");
+    S.className = "tbw-filter-value-item", S.style.padding = "0", S.style.margin = "0";
+    const w = document.createElement("input");
+    w.type = "checkbox", w.className = "tbw-filter-checkbox";
+    const b = document.createElement("span");
+    b.textContent = "Select All", S.appendChild(w), S.appendChild(b), m.appendChild(S);
+    const v = () => {
+      const l = [...E.values()], p = l.every((d) => d), C = l.every((d) => !d);
+      w.checked = p, w.indeterminate = !p && !C;
     };
-    b.addEventListener("change", () => {
-      const s = b.checked;
-      for (const u of x.keys())
-        x.set(u, s);
-      F(), T();
+    w.addEventListener("change", () => {
+      const l = w.checked;
+      for (const p of E.keys())
+        E.set(p, l);
+      v(), R();
     }), e.appendChild(m);
     const y = document.createElement("div");
     y.className = "tbw-filter-values";
-    const S = document.createElement("div");
-    S.className = "tbw-filter-values-spacer", y.appendChild(S);
     const g = document.createElement("div");
-    g.className = "tbw-filter-values-content", y.appendChild(g);
-    const x = /* @__PURE__ */ new Map();
-    r.forEach((s) => {
-      const u = s == null ? "__null__" : String(s);
-      x.set(u, !i.has(s));
-    }), F();
-    let C = [];
-    const I = (s, u) => {
-      const w = s == null ? "(Blank)" : String(s), c = s == null ? "__null__" : String(s), d = document.createElement("label");
-      d.className = "tbw-filter-value-item", d.style.position = "absolute", d.style.top = `${u * a}px`, d.style.left = "0", d.style.right = "0", d.style.height = `${a}px`, d.style.boxSizing = "border-box";
-      const f = document.createElement("input");
-      f.type = "checkbox", f.className = "tbw-filter-checkbox", f.checked = x.get(c) ?? !0, f.dataset.value = c, f.addEventListener("change", () => {
-        x.set(c, f.checked), F();
+    g.className = "tbw-filter-values-spacer", y.appendChild(g);
+    const x = document.createElement("div");
+    x.className = "tbw-filter-values-content", y.appendChild(x);
+    const E = /* @__PURE__ */ new Map();
+    r.forEach((l) => {
+      const p = l == null ? "__null__" : String(l);
+      E.set(p, !n.has(l));
+    }), v();
+    let N = [];
+    const k = (l, p) => {
+      const C = l == null ? "(Blank)" : String(l), d = l == null ? "__null__" : String(l), a = document.createElement("label");
+      a.className = "tbw-filter-value-item", a.style.position = "absolute", a.style.top = `calc(var(--tbw-filter-item-height, 28px) * ${p})`, a.style.left = "0", a.style.right = "0", a.style.boxSizing = "border-box";
+      const u = document.createElement("input");
+      u.type = "checkbox", u.className = "tbw-filter-checkbox", u.checked = E.get(d) ?? !0, u.dataset.value = d, u.addEventListener("change", () => {
+        E.set(d, u.checked), v();
       });
-      const P = document.createElement("span");
-      return P.textContent = w, d.appendChild(f), d.appendChild(P), d;
-    }, T = () => {
-      const s = C.length, u = y.clientHeight, w = y.scrollTop;
-      if (S.style.height = `${s * a}px`, M(s, v.LIST_BYPASS_THRESHOLD / 3)) {
-        g.innerHTML = "", g.style.transform = "translateY(0px)", C.forEach((d, f) => {
-          g.appendChild(I(d, f));
+      const I = document.createElement("span");
+      return I.textContent = C, a.appendChild(u), a.appendChild(I), a;
+    }, R = () => {
+      const l = N.length, p = y.clientHeight, C = y.scrollTop;
+      if (g.style.height = `${l * o}px`, $(l, M.LIST_BYPASS_THRESHOLD / 3)) {
+        x.innerHTML = "", x.style.transform = "translateY(0px)", N.forEach((a, u) => {
+          x.appendChild(k(a, u));
         });
         return;
       }
-      const c = _({
-        totalRows: s,
-        viewportHeight: u,
-        scrollTop: w,
-        rowHeight: a,
-        overscan: v.LIST_OVERSCAN
+      const d = G({
+        totalRows: l,
+        viewportHeight: p,
+        scrollTop: C,
+        rowHeight: o,
+        overscan: M.LIST_OVERSCAN
       });
-      g.style.transform = `translateY(${c.offsetY}px)`, g.innerHTML = "";
-      for (let d = c.start; d < c.end; d++)
-        g.appendChild(I(C[d], d - c.start));
-    }, L = (s) => {
-      const u = this.config.caseSensitive ?? !1, w = u ? s : s.toLowerCase();
-      if (C = r.filter((c) => {
-        const d = c == null ? "(Blank)" : String(c), f = u ? d : d.toLowerCase();
-        return !s || f.includes(w);
-      }), C.length === 0) {
-        S.style.height = "0px", g.innerHTML = "";
-        const c = document.createElement("div");
-        c.className = "tbw-filter-no-match", c.textContent = "No matching values", g.appendChild(c);
+      x.style.transform = `translateY(${d.offsetY}px)`, x.innerHTML = "";
+      for (let a = d.start; a < d.end; a++)
+        x.appendChild(k(N[a], a - d.start));
+    }, P = (l) => {
+      const p = this.config.caseSensitive ?? !1, C = p ? l : l.toLowerCase();
+      if (N = r.filter((d) => {
+        const a = d == null ? "(Blank)" : String(d), u = p ? a : a.toLowerCase();
+        return !l || u.includes(C);
+      }), N.length === 0) {
+        g.style.height = "0px", x.innerHTML = "";
+        const d = document.createElement("div");
+        d.className = "tbw-filter-no-match", d.textContent = "No matching values", x.appendChild(d);
         return;
       }
-      T();
+      R();
     };
     y.addEventListener(
       "scroll",
       () => {
-        C.length > 0 && T();
+        N.length > 0 && R();
       },
       { passive: !0 }
-    ), L(l.value), e.appendChild(y);
-    let N;
-    l.addEventListener("input", () => {
-      clearTimeout(N), N = setTimeout(() => {
-        this.searchText.set(n, l.value), L(l.value);
+    ), P(i.value), e.appendChild(y);
+    let f;
+    i.addEventListener("input", () => {
+      clearTimeout(f), f = setTimeout(() => {
+        this.searchText.set(s, i.value), P(i.value);
       }, this.config.debounceMs ?? 150);
     });
-    const R = document.createElement("div");
-    R.className = "tbw-filter-buttons";
-    const k = document.createElement("button");
-    k.className = "tbw-filter-apply-btn", k.textContent = "Apply", k.addEventListener("click", () => {
-      const s = [];
-      for (const [u, w] of x)
-        if (!w)
-          if (u === "__null__")
-            s.push(null);
+    const A = document.createElement("div");
+    A.className = "tbw-filter-buttons";
+    const T = document.createElement("button");
+    T.className = "tbw-filter-apply-btn", T.textContent = "Apply", T.addEventListener("click", () => {
+      const l = [];
+      for (const [p, C] of E)
+        if (!C)
+          if (p === "__null__")
+            l.push(null);
           else {
-            const c = r.find((d) => String(d) === u);
-            s.push(c !== void 0 ? c : u);
+            const d = r.find((a) => String(a) === p);
+            l.push(d !== void 0 ? d : p);
           }
-      t.applySetFilter(s);
-    }), R.appendChild(k);
-    const A = document.createElement("button");
-    A.className = "tbw-filter-clear-btn", A.textContent = "Clear Filter", A.addEventListener("click", () => {
+      t.applySetFilter(l);
+    }), A.appendChild(T);
+    const L = document.createElement("button");
+    L.className = "tbw-filter-clear-btn", L.textContent = "Clear Filter", L.addEventListener("click", () => {
+      t.clearFilter();
+    }), A.appendChild(L), e.appendChild(A);
+  }
+  /**
+   * Render a number range filter panel with min/max inputs and slider
+   */
+  renderNumberFilterPanel(e, t, r) {
+    const { field: n, column: s } = t, o = s.filterParams, c = s.editorParams, i = (h, V) => {
+      if (typeof h == "number") return h;
+      if (typeof h == "string") {
+        const H = parseFloat(h);
+        return isNaN(H) ? V : H;
+      }
+      return V;
+    }, m = r.filter((h) => typeof h == "number" && !isNaN(h)), S = m.length > 0 ? Math.min(...m) : 0, w = m.length > 0 ? Math.max(...m) : 100, b = i(o?.min ?? c?.min, S), v = i(o?.max ?? c?.max, w), y = o?.step ?? c?.step ?? 1, g = this.filters.get(n);
+    let x = b, E = v;
+    g?.operator === "between" ? (x = i(g.value, b), E = i(g.valueTo, v)) : g?.operator === "greaterThanOrEqual" ? x = i(g.value, b) : g?.operator === "lessThanOrEqual" && (E = i(g.value, v));
+    const N = document.createElement("div");
+    N.className = "tbw-filter-range-title", N.textContent = s.header || n, e.appendChild(N);
+    const k = document.createElement("div");
+    k.className = "tbw-filter-range-inputs";
+    const R = document.createElement("div");
+    R.className = "tbw-filter-range-group";
+    const P = document.createElement("label");
+    P.textContent = "Min", P.className = "tbw-filter-range-label";
+    const f = document.createElement("input");
+    f.type = "number", f.className = "tbw-filter-range-input", f.min = String(b), f.max = String(v), f.step = String(y), f.value = String(x), R.appendChild(P), R.appendChild(f), k.appendChild(R);
+    const A = document.createElement("span");
+    A.className = "tbw-filter-range-separator", A.textContent = "–", k.appendChild(A);
+    const T = document.createElement("div");
+    T.className = "tbw-filter-range-group";
+    const L = document.createElement("label");
+    L.textContent = "Max", L.className = "tbw-filter-range-label";
+    const l = document.createElement("input");
+    l.type = "number", l.className = "tbw-filter-range-input", l.min = String(b), l.max = String(v), l.step = String(y), l.value = String(E), T.appendChild(L), T.appendChild(l), k.appendChild(T), e.appendChild(k);
+    const p = document.createElement("div");
+    p.className = "tbw-filter-range-slider";
+    const C = document.createElement("div");
+    C.className = "tbw-filter-range-track";
+    const d = document.createElement("div");
+    d.className = "tbw-filter-range-fill";
+    const a = document.createElement("input");
+    a.type = "range", a.className = "tbw-filter-range-thumb tbw-filter-range-thumb-min", a.min = String(b), a.max = String(v), a.step = String(y), a.value = String(x);
+    const u = document.createElement("input");
+    u.type = "range", u.className = "tbw-filter-range-thumb tbw-filter-range-thumb-max", u.min = String(b), u.max = String(v), u.step = String(y), u.value = String(E), p.appendChild(C), p.appendChild(d), p.appendChild(a), p.appendChild(u), e.appendChild(p);
+    const I = () => {
+      const h = parseFloat(a.value), V = parseFloat(u.value), H = v - b, q = (h - b) / H * 100, Y = (V - b) / H * 100;
+      d.style.left = `${q}%`, d.style.width = `${Y - q}%`;
+    };
+    a.addEventListener("input", () => {
+      const h = Math.min(parseFloat(a.value), parseFloat(u.value));
+      a.value = String(h), f.value = String(h), I();
+    }), u.addEventListener("input", () => {
+      const h = Math.max(parseFloat(u.value), parseFloat(a.value));
+      u.value = String(h), l.value = String(h), I();
+    }), f.addEventListener("input", () => {
+      let h = parseFloat(f.value) || b;
+      h = Math.max(b, Math.min(h, parseFloat(l.value))), a.value = String(h), I();
+    }), l.addEventListener("input", () => {
+      let h = parseFloat(l.value) || v;
+      h = Math.min(v, Math.max(h, parseFloat(f.value))), u.value = String(h), I();
+    }), I();
+    const _ = document.createElement("div");
+    _.className = "tbw-filter-buttons";
+    const z = document.createElement("button");
+    z.className = "tbw-filter-apply-btn", z.textContent = "Apply", z.addEventListener("click", () => {
+      const h = parseFloat(f.value), V = parseFloat(l.value);
+      t.applyTextFilter("between", h, V);
+    }), _.appendChild(z);
+    const D = document.createElement("button");
+    D.className = "tbw-filter-clear-btn", D.textContent = "Clear Filter", D.addEventListener("click", () => {
+      t.clearFilter();
+    }), _.appendChild(D), e.appendChild(_);
+  }
+  /**
+   * Render a date range filter panel with from/to date inputs
+   */
+  renderDateFilterPanel(e, t, r) {
+    const { field: n, column: s } = t, o = s.filterParams, c = s.editorParams, i = r.filter((a) => a instanceof Date || typeof a == "string" && !isNaN(Date.parse(a))).map((a) => a instanceof Date ? a : new Date(a)).filter((a) => !isNaN(a.getTime())), m = i.length > 0 ? new Date(Math.min(...i.map((a) => a.getTime()))) : null, S = i.length > 0 ? new Date(Math.max(...i.map((a) => a.getTime()))) : null, w = (a) => a ? a.toISOString().split("T")[0] : "", b = (a) => a ? typeof a == "string" ? a : typeof a == "number" ? w(new Date(a)) : "" : "", v = b(o?.min) || b(c?.min) || w(m), y = b(o?.max) || b(c?.max) || w(S), g = this.filters.get(n);
+    let x = "", E = "";
+    g?.operator === "between" ? (x = b(g.value) || "", E = b(g.valueTo) || "") : g?.operator === "greaterThanOrEqual" ? x = b(g.value) || "" : g?.operator === "lessThanOrEqual" && (E = b(g.value) || "");
+    const N = document.createElement("div");
+    N.className = "tbw-filter-range-title", N.textContent = s.header || n, e.appendChild(N);
+    const k = document.createElement("div");
+    k.className = "tbw-filter-date-range";
+    const R = document.createElement("div");
+    R.className = "tbw-filter-date-group";
+    const P = document.createElement("label");
+    P.textContent = "From", P.className = "tbw-filter-range-label";
+    const f = document.createElement("input");
+    f.type = "date", f.className = "tbw-filter-date-input", v && (f.min = v), y && (f.max = y), f.value = x, R.appendChild(P), R.appendChild(f), k.appendChild(R);
+    const A = document.createElement("span");
+    A.className = "tbw-filter-range-separator", A.textContent = "–", k.appendChild(A);
+    const T = document.createElement("div");
+    T.className = "tbw-filter-date-group";
+    const L = document.createElement("label");
+    L.textContent = "To", L.className = "tbw-filter-range-label";
+    const l = document.createElement("input");
+    l.type = "date", l.className = "tbw-filter-date-input", v && (l.min = v), y && (l.max = y), l.value = E, T.appendChild(L), T.appendChild(l), k.appendChild(T), e.appendChild(k);
+    const p = document.createElement("div");
+    p.className = "tbw-filter-buttons";
+    const C = document.createElement("button");
+    C.className = "tbw-filter-apply-btn", C.textContent = "Apply", C.addEventListener("click", () => {
+      const a = f.value, u = l.value;
+      a && u ? t.applyTextFilter("between", a, u) : a ? t.applyTextFilter("greaterThanOrEqual", a) : u ? t.applyTextFilter("lessThanOrEqual", u) : t.clearFilter();
+    }), p.appendChild(C);
+    const d = document.createElement("button");
+    d.className = "tbw-filter-clear-btn", d.textContent = "Clear Filter", d.addEventListener("click", () => {
       t.clearFilter();
-    }), R.appendChild(A), e.appendChild(R);
+    }), p.appendChild(d), e.appendChild(p);
   }
   /**
    * Apply a set filter (exclude values)
@@ -828,15 +958,15 @@ class v extends q {
     }), this.applyFiltersInternal();
   }
   /**
-   * Apply a text filter
+   * Apply a text/number/date filter
    */
-  applyTextFilter(e, t, r, i) {
+  applyTextFilter(e, t, r, n) {
     this.filters.set(e, {
       field: e,
       type: "text",
       operator: t,
       value: r,
-      valueTo: i
+      valueTo: n
     }), this.applyFiltersInternal();
   }
   /**
@@ -848,13 +978,13 @@ class v extends q {
     if (this.config.filterHandler) {
       const t = this.grid;
       t.setAttribute("aria-busy", "true");
-      const r = this.config.filterHandler(e, this.sourceRows), i = (n) => {
-        t.removeAttribute("aria-busy"), this.cachedResult = n, this.grid.rows = n, this.emit("filter-change", {
+      const r = this.config.filterHandler(e, this.sourceRows), n = (s) => {
+        t.removeAttribute("aria-busy"), this.cachedResult = s, this.grid.rows = s, this.emit("filter-change", {
           filters: e,
-          filteredRowCount: n.length
+          filteredRowCount: s.length
         }), this.requestRender();
       };
-      r && typeof r.then == "function" ? r.then(i) : i(r);
+      r && typeof r.then == "function" ? r.then(n) : n(r);
       return;
     }
     this.emit("filter-change", {
@@ -901,6 +1031,6 @@ class v extends q {
   // #endregion
 }
 export {
-  v as FilteringPlugin
+  M as FilteringPlugin
 };
 //# sourceMappingURL=index.js.map