@tcn/ui-table 2.3.7 → 2.3.9

package/dist/components/table_filter_panel/field_filters/clear_button.d.ts

@@ -0,0 +1,5 @@
+import { ButtonProps } from '@tcn/ui/actions';
+export interface ClearFilterButtonProps extends Omit<ButtonProps, 'children'> {
+}
+export declare function ClearFilterButton({ onClick, hierarchy, utility, ...props }: ClearFilterButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=clear_button.d.ts.map

package/dist/components/table_filter_panel/field_filters/clear_button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clear_button.d.ts","sourceRoot":"","sources":["../../../../src/components/table_filter_panel/field_filters/clear_button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE3D,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;CAAG;AAEhF,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,SAAsB,EACtB,OAAc,EACd,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAMxB"}

package/dist/components/table_filter_panel/field_filters/clear_button.js

@@ -0,0 +1,15 @@
+import { jsx as r } from "react/jsx-runtime";
+import { CrossCircleIcon as n } from "@tcn/icons/cross_circle_icon.js";
+import { Button as m } from "@tcn/ui/actions";
+function l({
+  onClick: t,
+  hierarchy: o = "tertiary",
+  utility: e = !0,
+  ...i
+}) {
+  return /* @__PURE__ */ r(m, { utility: e, onClick: t, hierarchy: o, ...i, children: /* @__PURE__ */ r(n, {}) });
+}
+export {
+  l as ClearFilterButton
+};
+//# sourceMappingURL=clear_button.js.map

package/dist/components/table_filter_panel/field_filters/clear_button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clear_button.js","sources":["../../../../src/components/table_filter_panel/field_filters/clear_button.tsx"],"sourcesContent":["import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';\nimport { Button, type ButtonProps } from '@tcn/ui/actions';\n\nexport interface ClearFilterButtonProps extends Omit<ButtonProps, 'children'> {}\n\nexport function ClearFilterButton({\n  onClick,\n  hierarchy = 'tertiary',\n  utility = true,\n  ...props\n}: ClearFilterButtonProps) {\n  return (\n    <Button utility={utility} onClick={onClick} hierarchy={hierarchy} {...props}>\n      <CrossCircleIcon />\n    </Button>\n  );\n}\n"],"names":["ClearFilterButton","onClick","hierarchy","utility","props","jsx","Button","CrossCircleIcon"],"mappings":";;;AAKO,SAASA,EAAkB;AAAA,EAChC,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,GAAGC;AACL,GAA2B;AACzB,SACE,gBAAAC,EAACC,KAAO,SAAAH,GAAkB,SAAAF,GAAkB,WAAAC,GAAuB,GAAGE,GACpE,UAAA,gBAAAC,EAACE,GAAA,CAAA,CAAgB,EAAA,CACnB;AAEJ;"}

package/dist/components/table_filter_panel/field_filters/clearable_field.d.ts

@@ -0,0 +1,9 @@
+import { VStackProps } from '@tcn/ui/stacks';
+export interface ClearableFieldProps extends VStackProps {
+    label?: string;
+    onClear?: () => void;
+    isClearable?: boolean;
+    inline?: boolean;
+}
+export declare function ClearableField({ children, label, onClear, isClearable, vAlign, hAlign, gap, inline, ...props }: ClearableFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=clearable_field.d.ts.map

package/dist/components/table_filter_panel/field_filters/clearable_field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clearable_field.d.ts","sourceRoot":"","sources":["../../../../src/components/table_filter_panel/field_filters/clearable_field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAIlE,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,OAAO,EACP,WAAW,EACX,MAAgB,EAChB,MAAgB,EAChB,GAAW,EACX,MAAc,EACd,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAWrB"}

package/dist/components/table_filter_panel/field_filters/clearable_field.js

@@ -0,0 +1,28 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { VStack as s, HStack as l } from "@tcn/ui/stacks";
+import { ClearFilterButton as x } from "./clear_button.js";
+import { FieldLabel as o } from "@tcn/ui/form";
+function F({
+  children: a,
+  label: t,
+  onClear: d,
+  isClearable: c,
+  vAlign: f = "start",
+  hAlign: m = "start",
+  gap: p = "4px",
+  inline: e = !1,
+  ...n
+}) {
+  return /* @__PURE__ */ i(s, { vAlign: f, hAlign: m, gap: p, ...n, children: [
+    !e && /* @__PURE__ */ r(o, { children: t }),
+    /* @__PURE__ */ i(l, { width: "flex", gap: "4px", children: [
+      e && /* @__PURE__ */ r(o, { children: t }),
+      /* @__PURE__ */ r(l, { width: "flex", children: a }),
+      /* @__PURE__ */ r(x, { onClick: d, disabled: c })
+    ] })
+  ] });
+}
+export {
+  F as ClearableField
+};
+//# sourceMappingURL=clearable_field.js.map

package/dist/components/table_filter_panel/field_filters/clearable_field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clearable_field.js","sources":["../../../../src/components/table_filter_panel/field_filters/clearable_field.tsx"],"sourcesContent":["import { HStack, VStack, type VStackProps } from '@tcn/ui/stacks';\nimport { ClearFilterButton } from './clear_button.js';\nimport { FieldLabel } from '@tcn/ui/form';\n\nexport interface ClearableFieldProps extends VStackProps {\n  label?: string;\n  onClear?: () => void;\n  isClearable?: boolean;\n  inline?: boolean;\n}\n\nexport function ClearableField({\n  children,\n  label,\n  onClear,\n  isClearable,\n  vAlign = 'start',\n  hAlign = 'start',\n  gap = '4px',\n  inline = false,\n  ...props\n}: ClearableFieldProps) {\n  return (\n    <VStack vAlign={vAlign} hAlign={hAlign} gap={gap} {...props}>\n      {!inline && <FieldLabel>{label}</FieldLabel>}\n      <HStack width=\"flex\" gap=\"4px\">\n        {inline && <FieldLabel>{label}</FieldLabel>}\n        <HStack width=\"flex\">{children}</HStack>\n        <ClearFilterButton onClick={onClear} disabled={isClearable} />\n      </HStack>\n    </VStack>\n  );\n}\n"],"names":["ClearableField","children","label","onClear","isClearable","vAlign","hAlign","gap","inline","props","VStack","jsx","FieldLabel","jsxs","HStack","ClearFilterButton"],"mappings":";;;;AAWO,SAASA,EAAe;AAAA,EAC7B,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,KAAAC,IAAM;AAAA,EACN,QAAAC,IAAS;AAAA,EACT,GAAGC;AACL,GAAwB;AACtB,2BACGC,GAAA,EAAO,QAAAL,GAAgB,QAAAC,GAAgB,KAAAC,GAAW,GAAGE,GACnD,UAAA;AAAA,IAAA,CAACD,KAAU,gBAAAG,EAACC,GAAA,EAAY,UAAAV,EAAA,CAAM;AAAA,IAC/B,gBAAAW,EAACC,GAAA,EAAO,OAAM,QAAO,KAAI,OACtB,UAAA;AAAA,MAAAN,KAAU,gBAAAG,EAACC,KAAY,UAAAV,EAAA,CAAM;AAAA,MAC9B,gBAAAS,EAACG,GAAA,EAAO,OAAM,QAAQ,UAAAb,EAAA,CAAS;AAAA,MAC/B,gBAAAU,EAACI,GAAA,EAAkB,SAASZ,GAAS,UAAUC,EAAA,CAAa;AAAA,IAAA,EAAA,CAC9D;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/table_filter_panel/field_filters/date_field_filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date_field_filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table_filter_panel/field_filters/date_field_filter.tsx"],"names":[],"mappings":"AAUA,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,KAAK,GACN,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,2CAqDA"}
+{"version":3,"file":"date_field_filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table_filter_panel/field_filters/date_field_filter.tsx"],"names":[],"mappings":"AAOA,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,KAAK,GACN,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,2CAgCA"}

package/dist/components/table_filter_panel/field_filters/date_field_filter.js

@@ -1,60 +1,51 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { CrossCircleIcon as d } from "@tcn/icons/cross_circle_icon.js";
-import { useSignalValue as o } from "@tcn/state";
-import { Button as c } from "@tcn/ui/actions";
-import { DatePickerInput as h } from "@tcn/ui/inputs";
-import { VStack as f, Box as e, HStack as s } from "@tcn/ui/stacks";
-import { Title as x, BodyText as m } from "@tcn/ui/typography";
-import { useFieldFilterStrategy as D } from "./use_field_filter_strategy.js";
-import { DateFieldFilterPresenter as g } from "./date_field_filter_presenter.js";
-function E({
-  fieldName: p,
-  label: u
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { useSignalValue as n } from "@tcn/state";
+import { DatePickerInput as i } from "@tcn/ui/inputs";
+import { useFieldFilterStrategy as u } from "./use_field_filter_strategy.js";
+import { DateFieldFilterPresenter as p } from "./date_field_filter_presenter.js";
+import { ClearableField as o } from "./clearable_field.js";
+import { FieldSet as D } from "@tcn/ui/form";
+function h({
+  fieldName: s,
+  label: d
 }) {
-  const r = D(g, p), a = o(r.broadcasts.startDate), n = o(r.broadcasts.endDate);
-  return /* @__PURE__ */ l(f, { gap: "4px", children: [
-    /* @__PURE__ */ t(e, { width: "flex", children: /* @__PURE__ */ t(x, { size: "md", children: u }) }),
-    /* @__PURE__ */ l(s, { gap: "4px", children: [
-      /* @__PURE__ */ t(e, { width: "auto", children: /* @__PURE__ */ t(m, { size: "lg", children: "Start" }) }),
-      /* @__PURE__ */ t(e, { width: "flex", children: /* @__PURE__ */ t(
-        h,
-        {
-          value: a,
-          onChange: (i) => r.setStartDate(i)
-        }
-      ) }),
-      /* @__PURE__ */ t(e, { width: "auto", children: /* @__PURE__ */ t(
-        c,
-        {
-          onClick: () => r.setStartDate(null),
-          hierarchy: "tertiary",
-          disabled: a == null,
-          children: /* @__PURE__ */ t(d, {})
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ l(s, { gap: "4px", children: [
-      /* @__PURE__ */ t(e, { width: "auto", children: /* @__PURE__ */ t(m, { size: "lg", children: "End" }) }),
-      /* @__PURE__ */ t(e, { width: "flex", children: /* @__PURE__ */ t(
-        h,
-        {
-          value: n,
-          onChange: (i) => r.setEndDate(i)
-        }
-      ) }),
-      /* @__PURE__ */ t(e, { width: "auto", children: /* @__PURE__ */ t(
-        c,
-        {
-          onClick: () => r.setEndDate(null),
-          hierarchy: "tertiary",
-          disabled: n == null,
-          children: /* @__PURE__ */ t(d, {})
-        }
-      ) })
-    ] })
+  const e = u(p, s), a = n(e.broadcasts.startDate), l = n(e.broadcasts.endDate);
+  return /* @__PURE__ */ m(D, { legend: d, gap: "4px", children: [
+    /* @__PURE__ */ t(
+      o,
+      {
+        inline: !0,
+        label: "Start",
+        onClear: () => e.setStartDate(null),
+        isClearable: a == null,
+        children: /* @__PURE__ */ t(
+          i,
+          {
+            value: a,
+            onChange: (r) => e.setStartDate(r)
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t(
+      o,
+      {
+        inline: !0,
+        label: "End",
+        onClear: () => e.setEndDate(null),
+        isClearable: l == null,
+        children: /* @__PURE__ */ t(
+          i,
+          {
+            value: l,
+            onChange: (r) => e.setEndDate(r)
+          }
+        )
+      }
+    )
   ] });
 }
 export {
-  E as DateFieldFilter
+  h as DateFieldFilter
 };
 //# sourceMappingURL=date_field_filter.js.map

package/dist/components/table_filter_panel/field_filters/date_field_filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"date_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/date_field_filter.tsx"],"sourcesContent":["import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';\nimport { useSignalValue } from '@tcn/state';\nimport { Button } from '@tcn/ui/actions';\nimport { DatePickerInput } from '@tcn/ui/inputs';\nimport { Box, HStack, VStack } from '@tcn/ui/stacks';\nimport { BodyText, Title } from '@tcn/ui/typography';\nimport React from 'react';\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\nimport { DateFieldFilterPresenter } from './date_field_filter_presenter.js';\n\nexport function DateFieldFilter({\n  fieldName,\n  label,\n}: {\n  fieldName: string;\n  label: string;\n}) {\n  const presenter = useFieldFilterStrategy(DateFieldFilterPresenter, fieldName);\n\n  const startDate = useSignalValue(presenter.broadcasts.startDate);\n  const endDate = useSignalValue(presenter.broadcasts.endDate);\n\n  return (\n    <VStack gap=\"4px\">\n      <Box width=\"flex\">\n        <Title size=\"md\">{label}</Title>\n      </Box>\n      <HStack gap=\"4px\">\n        <Box width=\"auto\">\n          <BodyText size=\"lg\">Start</BodyText>\n        </Box>\n        <Box width=\"flex\">\n          <DatePickerInput\n            value={startDate}\n            onChange={value => presenter.setStartDate(value)}\n          />\n        </Box>\n        <Box width=\"auto\">\n          <Button\n            onClick={() => presenter.setStartDate(null)}\n            hierarchy=\"tertiary\"\n            disabled={startDate == null}\n          >\n            <CrossCircleIcon />\n          </Button>\n        </Box>\n      </HStack>\n      <HStack gap=\"4px\">\n        <Box width=\"auto\">\n          <BodyText size=\"lg\">End</BodyText>\n        </Box>\n        <Box width=\"flex\">\n          <DatePickerInput\n            value={endDate}\n            onChange={value => presenter.setEndDate(value)}\n          />\n        </Box>\n        <Box width=\"auto\">\n          <Button\n            onClick={() => presenter.setEndDate(null)}\n            hierarchy=\"tertiary\"\n            disabled={endDate == null}\n          >\n            <CrossCircleIcon />\n          </Button>\n        </Box>\n      </HStack>\n    </VStack>\n  );\n}\n"],"names":["DateFieldFilter","fieldName","label","presenter","useFieldFilterStrategy","DateFieldFilterPresenter","startDate","useSignalValue","endDate","jsxs","VStack","jsx","Box","Title","HStack","BodyText","DatePickerInput","value","Button","CrossCircleIcon"],"mappings":";;;;;;;;;AAUO,SAASA,EAAgB;AAAA,EAC9B,WAAAC;AAAA,EACA,OAAAC;AACF,GAGG;AACD,QAAMC,IAAYC,EAAuBC,GAA0BJ,CAAS,GAEtEK,IAAYC,EAAeJ,EAAU,WAAW,SAAS,GACzDK,IAAUD,EAAeJ,EAAU,WAAW,OAAO;AAE3D,SACE,gBAAAM,EAACC,GAAA,EAAO,KAAI,OACV,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD,EAACE,KAAM,MAAK,MAAM,aAAM,EAAA,CAC1B;AAAA,IACA,gBAAAJ,EAACK,GAAA,EAAO,KAAI,OACV,UAAA;AAAA,MAAA,gBAAAH,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD,EAACI,KAAS,MAAK,MAAK,mBAAK,EAAA,CAC3B;AAAA,MACA,gBAAAJ,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,OAAOV;AAAA,UACP,UAAU,CAAAW,MAASd,EAAU,aAAac,CAAK;AAAA,QAAA;AAAA,MAAA,GAEnD;AAAA,MACA,gBAAAN,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAAS,MAAMf,EAAU,aAAa,IAAI;AAAA,UAC1C,WAAU;AAAA,UACV,UAAUG,KAAa;AAAA,UAEvB,4BAACa,GAAA,CAAA,CAAgB;AAAA,QAAA;AAAA,MAAA,EACnB,CACF;AAAA,IAAA,GACF;AAAA,IACA,gBAAAV,EAACK,GAAA,EAAO,KAAI,OACV,UAAA;AAAA,MAAA,gBAAAH,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD,EAACI,KAAS,MAAK,MAAK,iBAAG,EAAA,CACzB;AAAA,MACA,gBAAAJ,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,OAAOR;AAAA,UACP,UAAU,CAAAS,MAASd,EAAU,WAAWc,CAAK;AAAA,QAAA;AAAA,MAAA,GAEjD;AAAA,MACA,gBAAAN,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAAS,MAAMf,EAAU,WAAW,IAAI;AAAA,UACxC,WAAU;AAAA,UACV,UAAUK,KAAW;AAAA,UAErB,4BAACW,GAAA,CAAA,CAAgB;AAAA,QAAA;AAAA,MAAA,EACnB,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"date_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/date_field_filter.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { DatePickerInput } from '@tcn/ui/inputs';\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\nimport { DateFieldFilterPresenter } from './date_field_filter_presenter.js';\nimport { ClearableField } from './clearable_field.js';\nimport { FieldSet } from '@tcn/ui/form';\n\nexport function DateFieldFilter({\n  fieldName,\n  label,\n}: {\n  fieldName: string;\n  label: string;\n}) {\n  const presenter = useFieldFilterStrategy(DateFieldFilterPresenter, fieldName);\n\n  const startDate = useSignalValue(presenter.broadcasts.startDate);\n  const endDate = useSignalValue(presenter.broadcasts.endDate);\n\n  return (\n    <FieldSet legend={label} gap=\"4px\">\n      <ClearableField\n        inline\n        label=\"Start\"\n        onClear={() => presenter.setStartDate(null)}\n        isClearable={startDate == null}\n      >\n        <DatePickerInput\n          value={startDate}\n          onChange={value => presenter.setStartDate(value)}\n        />\n      </ClearableField>\n      <ClearableField\n        inline\n        label=\"End\"\n        onClear={() => presenter.setEndDate(null)}\n        isClearable={endDate == null}\n      >\n        <DatePickerInput\n          value={endDate}\n          onChange={value => presenter.setEndDate(value)}\n        />\n      </ClearableField>\n    </FieldSet>\n  );\n}\n"],"names":["DateFieldFilter","fieldName","label","presenter","useFieldFilterStrategy","DateFieldFilterPresenter","startDate","useSignalValue","endDate","jsxs","FieldSet","jsx","ClearableField","DatePickerInput","value"],"mappings":";;;;;;;AAOO,SAASA,EAAgB;AAAA,EAC9B,WAAAC;AAAA,EACA,OAAAC;AACF,GAGG;AACD,QAAMC,IAAYC,EAAuBC,GAA0BJ,CAAS,GAEtEK,IAAYC,EAAeJ,EAAU,WAAW,SAAS,GACzDK,IAAUD,EAAeJ,EAAU,WAAW,OAAO;AAE3D,SACE,gBAAAM,EAACC,GAAA,EAAS,QAAQR,GAAO,KAAI,OAC3B,UAAA;AAAA,IAAA,gBAAAS;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,QAAM;AAAA,QACN,OAAM;AAAA,QACN,SAAS,MAAMT,EAAU,aAAa,IAAI;AAAA,QAC1C,aAAaG,KAAa;AAAA,QAE1B,UAAA,gBAAAK;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,OAAOP;AAAA,YACP,UAAU,CAAAQ,MAASX,EAAU,aAAaW,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACjD;AAAA,IAAA;AAAA,IAEF,gBAAAH;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,QAAM;AAAA,QACN,OAAM;AAAA,QACN,SAAS,MAAMT,EAAU,WAAW,IAAI;AAAA,QACxC,aAAaK,KAAW;AAAA,QAExB,UAAA,gBAAAG;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,OAAOL;AAAA,YACP,UAAU,CAAAM,MAASX,EAAU,WAAWW,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAC/C;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/components/table_filter_panel/field_filters/mulit_select_field_filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mulit_select_field_filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table_filter_panel/field_filters/mulit_select_field_filter.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAI3D,MAAM,MAAM,2BAA2B,GAAG,gBAAgB,GAAG;IAC3D,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;CAChE,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,KAAK,EACL,OAAO,GACR,EAAE,2BAA2B,2CA+C7B"}
+{"version":3,"file":"mulit_select_field_filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table_filter_panel/field_filters/mulit_select_field_filter.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAK3D,MAAM,MAAM,2BAA2B,GAAG,gBAAgB,GAAG;IAC3D,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;CAChE,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,KAAK,EACL,OAAO,GACR,EAAE,2BAA2B,2CA4C7B"}

package/dist/components/table_filter_panel/field_filters/mulit_select_field_filter.js

@@ -1,31 +1,30 @@
 import { jsxs as o, jsx as l } from "react/jsx-runtime";
-import { CrossCircleIcon as f } from "@tcn/icons/cross_circle_icon.js";
-import { useSignalValue as h } from "@tcn/state";
-import { Button as p } from "@tcn/ui/actions";
-import { Multiselect as b, Option as v } from "@tcn/ui/inputs";
-import { VStack as g, Box as c, HStack as x } from "@tcn/ui/stacks";
-import { Title as S } from "@tcn/ui/typography";
-import { MultiSelectFieldFilterPresenter as F } from "./multi_select_field_filter_presenter.js";
-import { useFieldFilterStrategy as V } from "./use_field_filter_strategy.js";
-function I({
-  fieldName: m,
-  label: s,
-  options: t
+import { useSignalValue as f } from "@tcn/state";
+import { Multiselect as h, Option as p } from "@tcn/ui/inputs";
+import { VStack as b, Box as u, HStack as v } from "@tcn/ui/stacks";
+import { Title as g } from "@tcn/ui/typography";
+import { MultiSelectFieldFilterPresenter as x } from "./multi_select_field_filter_presenter.js";
+import { useFieldFilterStrategy as F } from "./use_field_filter_strategy.js";
+import { ClearFilterButton as S } from "./clear_button.js";
+function z({
+  fieldName: c,
+  label: d,
+  options: r
 }) {
-  const i = V(F, m), a = h(i.broadcasts.value), u = a?.map((e) => t.find((r) => r.value === e)?.label ?? "").filter(Boolean) ?? [];
-  return /* @__PURE__ */ o(g, { gap: "4px", children: [
-    /* @__PURE__ */ l(c, { width: "flex", children: /* @__PURE__ */ l(S, { size: "md", children: s }) }),
-    /* @__PURE__ */ o(x, { children: [
-      /* @__PURE__ */ l(c, { width: "flex", children: /* @__PURE__ */ l(
-        b,
+  const i = F(x, c), a = f(i.broadcasts.value), m = a?.map((e) => r.find((t) => t.value === e)?.label ?? "").filter(Boolean) ?? [];
+  return /* @__PURE__ */ o(b, { gap: "4px", children: [
+    /* @__PURE__ */ l(u, { width: "flex", children: /* @__PURE__ */ l(g, { size: "md", children: d }) }),
+    /* @__PURE__ */ o(v, { children: [
+      /* @__PURE__ */ l(u, { width: "flex", children: /* @__PURE__ */ l(
+        h,
         {
-          value: u,
+          value: m,
           onChange: (e) => {
-            const r = e.map((n) => t.find((d) => d.label === n)?.value).filter((n) => n !== void 0);
-            i.setValue(r.length > 0 ? r : null);
+            const t = e.map((n) => r.find((s) => s.label === n)?.value).filter((n) => n !== void 0);
+            i.setValue(t.length > 0 ? t : null);
           },
-          children: t.map((e) => /* @__PURE__ */ l(
-            v,
+          children: r.map((e) => /* @__PURE__ */ l(
+            p,
             {
               value: e.label,
               label: e.label,
@@ -36,18 +35,16 @@ function I({
         }
       ) }),
       /* @__PURE__ */ l(
-        p,
+        S,
         {
           onClick: () => i.setValue(null),
-          hierarchy: "tertiary",
-          disabled: a == null || a.length === 0,
-          children: /* @__PURE__ */ l(f, {})
+          disabled: a == null || a.length === 0
         }
       )
     ] })
   ] });
 }
 export {
-  I as MulitSelectFieldFilter
+  z as MulitSelectFieldFilter
 };
 //# sourceMappingURL=mulit_select_field_filter.js.map

package/dist/components/table_filter_panel/field_filters/mulit_select_field_filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"mulit_select_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/mulit_select_field_filter.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';\nimport { useSignalValue } from '@tcn/state';\nimport { Button } from '@tcn/ui/actions';\nimport { Multiselect, Option } from '@tcn/ui/inputs';\nimport { Box, HStack, VStack } from '@tcn/ui/stacks';\nimport { Title } from '@tcn/ui/typography';\nimport { FieldFilterProps } from './field_filter_props.js';\nimport { MultiSelectFieldFilterPresenter } from './multi_select_field_filter_presenter.js';\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\n\nexport type MulitSelectFieldFilterProps = FieldFilterProps & {\n  options: { label: string; value: string | boolean | number }[];\n};\n\nexport function MulitSelectFieldFilter({\n  fieldName,\n  label,\n  options,\n}: MulitSelectFieldFilterProps) {\n  const presenter = useFieldFilterStrategy(MultiSelectFieldFilterPresenter, fieldName);\n\n  const values = useSignalValue(presenter.broadcasts.value);\n  const selectedLabels =\n    values\n      ?.map(value => options.find(option => option.value === value)?.label ?? '')\n      .filter(Boolean) ?? [];\n\n  return (\n    <VStack gap=\"4px\">\n      <Box width=\"flex\">\n        <Title size=\"md\">{label}</Title>\n      </Box>\n      <HStack>\n        <Box width=\"flex\">\n          <Multiselect\n            value={selectedLabels}\n            onChange={selectedLabels => {\n              const realValues = selectedLabels\n                .map(label => options.find(option => option.label === label)?.value)\n                .filter(value => value !== undefined) as (string | boolean | number)[];\n\n              presenter.setValue(realValues.length > 0 ? realValues : null);\n            }}\n          >\n            {options.map(option => (\n              <Option\n                key={option.value.toString()}\n                value={option.label}\n                label={option.label}\n              >\n                {option.label}\n              </Option>\n            ))}\n          </Multiselect>\n        </Box>\n        <Button\n          onClick={() => presenter.setValue(null)}\n          hierarchy=\"tertiary\"\n          disabled={values == null || values.length === 0}\n        >\n          <CrossCircleIcon />\n        </Button>\n      </HStack>\n    </VStack>\n  );\n}\n"],"names":["MulitSelectFieldFilter","fieldName","label","options","presenter","useFieldFilterStrategy","MultiSelectFieldFilterPresenter","values","useSignalValue","selectedLabels","value","option","jsxs","VStack","jsx","Box","Title","HStack","Multiselect","realValues","Option","Button","CrossCircleIcon"],"mappings":";;;;;;;;;AAgBO,SAASA,EAAuB;AAAA,EACrC,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AACF,GAAgC;AAC9B,QAAMC,IAAYC,EAAuBC,GAAiCL,CAAS,GAE7EM,IAASC,EAAeJ,EAAU,WAAW,KAAK,GAClDK,IACJF,GACI,IAAI,CAAAG,MAASP,EAAQ,KAAK,CAAAQ,MAAUA,EAAO,UAAUD,CAAK,GAAG,SAAS,EAAE,EACzE,OAAO,OAAO,KAAK,CAAA;AAExB,SACE,gBAAAE,EAACC,GAAA,EAAO,KAAI,OACV,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD,EAACE,KAAM,MAAK,MAAM,aAAM,EAAA,CAC1B;AAAA,sBACCC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAH,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,OAAOT;AAAA,UACP,UAAU,CAAAA,MAAkB;AAC1B,kBAAMU,IAAaV,EAChB,IAAI,CAAAP,MAASC,EAAQ,KAAK,CAAAQ,MAAUA,EAAO,UAAUT,CAAK,GAAG,KAAK,EAClE,OAAO,CAAAQ,MAASA,MAAU,MAAS;AAEtC,YAAAN,EAAU,SAASe,EAAW,SAAS,IAAIA,IAAa,IAAI;AAAA,UAC9D;AAAA,UAEC,UAAAhB,EAAQ,IAAI,CAAAQ,MACX,gBAAAG;AAAA,YAACM;AAAA,YAAA;AAAA,cAEC,OAAOT,EAAO;AAAA,cACd,OAAOA,EAAO;AAAA,cAEb,UAAAA,EAAO;AAAA,YAAA;AAAA,YAJHA,EAAO,MAAM,SAAA;AAAA,UAAS,CAM9B;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,MACA,gBAAAG;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAAS,MAAMjB,EAAU,SAAS,IAAI;AAAA,UACtC,WAAU;AAAA,UACV,UAAUG,KAAU,QAAQA,EAAO,WAAW;AAAA,UAE9C,4BAACe,GAAA,CAAA,CAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IACnB,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"mulit_select_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/mulit_select_field_filter.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { Multiselect, Option } from '@tcn/ui/inputs';\nimport { Box, HStack, VStack } from '@tcn/ui/stacks';\nimport { Title } from '@tcn/ui/typography';\nimport { FieldFilterProps } from './field_filter_props.js';\nimport { MultiSelectFieldFilterPresenter } from './multi_select_field_filter_presenter.js';\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\nimport { ClearFilterButton } from './clear_button.js';\n\nexport type MulitSelectFieldFilterProps = FieldFilterProps & {\n  options: { label: string; value: string | boolean | number }[];\n};\n\nexport function MulitSelectFieldFilter({\n  fieldName,\n  label,\n  options,\n}: MulitSelectFieldFilterProps) {\n  const presenter = useFieldFilterStrategy(MultiSelectFieldFilterPresenter, fieldName);\n\n  const values = useSignalValue(presenter.broadcasts.value);\n  const selectedLabels =\n    values\n      ?.map(value => options.find(option => option.value === value)?.label ?? '')\n      .filter(Boolean) ?? [];\n\n  return (\n    <VStack gap=\"4px\">\n      <Box width=\"flex\">\n        <Title size=\"md\">{label}</Title>\n      </Box>\n      <HStack>\n        <Box width=\"flex\">\n          <Multiselect\n            value={selectedLabels}\n            onChange={selectedLabels => {\n              const realValues = selectedLabels\n                .map(label => options.find(option => option.label === label)?.value)\n                .filter(value => value !== undefined) as (string | boolean | number)[];\n\n              presenter.setValue(realValues.length > 0 ? realValues : null);\n            }}\n          >\n            {options.map(option => (\n              <Option\n                key={option.value.toString()}\n                value={option.label}\n                label={option.label}\n              >\n                {option.label}\n              </Option>\n            ))}\n          </Multiselect>\n        </Box>\n        <ClearFilterButton\n          onClick={() => presenter.setValue(null)}\n          disabled={values == null || values.length === 0}\n        />\n      </HStack>\n    </VStack>\n  );\n}\n"],"names":["MulitSelectFieldFilter","fieldName","label","options","presenter","useFieldFilterStrategy","MultiSelectFieldFilterPresenter","values","useSignalValue","selectedLabels","value","option","jsxs","VStack","jsx","Box","Title","HStack","Multiselect","realValues","Option","ClearFilterButton"],"mappings":";;;;;;;;AAaO,SAASA,EAAuB;AAAA,EACrC,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AACF,GAAgC;AAC9B,QAAMC,IAAYC,EAAuBC,GAAiCL,CAAS,GAE7EM,IAASC,EAAeJ,EAAU,WAAW,KAAK,GAClDK,IACJF,GACI,IAAI,CAAAG,MAASP,EAAQ,KAAK,CAAAQ,MAAUA,EAAO,UAAUD,CAAK,GAAG,SAAS,EAAE,EACzE,OAAO,OAAO,KAAK,CAAA;AAExB,SACE,gBAAAE,EAACC,GAAA,EAAO,KAAI,OACV,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD,EAACE,KAAM,MAAK,MAAM,aAAM,EAAA,CAC1B;AAAA,sBACCC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAH,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,OAAOT;AAAA,UACP,UAAU,CAAAA,MAAkB;AAC1B,kBAAMU,IAAaV,EAChB,IAAI,CAAAP,MAASC,EAAQ,KAAK,CAAAQ,MAAUA,EAAO,UAAUT,CAAK,GAAG,KAAK,EAClE,OAAO,CAAAQ,MAASA,MAAU,MAAS;AAEtC,YAAAN,EAAU,SAASe,EAAW,SAAS,IAAIA,IAAa,IAAI;AAAA,UAC9D;AAAA,UAEC,UAAAhB,EAAQ,IAAI,CAAAQ,MACX,gBAAAG;AAAA,YAACM;AAAA,YAAA;AAAA,cAEC,OAAOT,EAAO;AAAA,cACd,OAAOA,EAAO;AAAA,cAEb,UAAAA,EAAO;AAAA,YAAA;AAAA,YAJHA,EAAO,MAAM,SAAA;AAAA,UAAS,CAM9B;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,MACA,gBAAAG;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAAS,MAAMjB,EAAU,SAAS,IAAI;AAAA,UACtC,UAAUG,KAAU,QAAQA,EAAO,WAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IAChD,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/table_filter_panel/field_filters/number_field_filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number_field_filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table_filter_panel/field_filters/number_field_filter.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAO3D,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,gBAAgB,2CAsCvE"}
+{"version":3,"file":"number_field_filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table_filter_panel/field_filters/number_field_filter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAQ3D,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,gBAAgB,2CAgCvE"}

package/dist/components/table_filter_panel/field_filters/number_field_filter.js

@@ -1,48 +1,41 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { CrossCircleIcon as s } from "@tcn/icons/cross_circle_icon.js";
-import { useSignalValue as o } from "@tcn/state";
-import { Button as c } from "@tcn/ui/actions";
-import { Select as u, Option as p, Input as d } from "@tcn/ui/inputs";
-import { VStack as h, Box as f, HStack as b } from "@tcn/ui/stacks";
-import { Title as x } from "@tcn/ui/typography";
-import { NumberFieldFilterPresenter as g } from "./number_field_filter_presenter.js";
-import { useFieldFilterStrategy as F } from "./use_field_filter_strategy.js";
-const S = [">=", ">", "<=", "<", "=", "!="];
-function I({ fieldName: n, label: a }) {
-  const t = F(g, n), i = o(t.broadcasts.value), m = o(t.broadcasts.operator);
-  return /* @__PURE__ */ l(h, { gap: "4px", children: [
-    /* @__PURE__ */ r(f, { width: "flex", children: /* @__PURE__ */ r(x, { size: "md", children: a }) }),
-    /* @__PURE__ */ l(b, { width: "flex", children: [
-      /* @__PURE__ */ r(
-        u,
-        {
-          value: m,
-          onChange: (e) => t.setOperator(e),
-          width: "55px",
-          children: S.map((e) => /* @__PURE__ */ r(p, { value: e, label: e, children: e }, e))
-        }
-      ),
-      /* @__PURE__ */ r(
-        d,
-        {
-          type: "number",
-          value: String(i ?? ""),
-          onChange: (e) => t.setValue(Number(e))
-        }
-      ),
-      /* @__PURE__ */ r(
-        c,
-        {
-          onClick: () => t.setValue(null),
-          hierarchy: "tertiary",
-          disabled: i == null,
-          children: /* @__PURE__ */ r(s, {})
-        }
-      )
-    ] })
-  ] });
+import { jsx as t, jsxs as u } from "react/jsx-runtime";
+import { useSignalValue as n } from "@tcn/state";
+import { InputGroup as s, Select as m, Option as p, Input as c } from "@tcn/ui/inputs";
+import { NumberFieldFilterPresenter as d } from "./number_field_filter_presenter.js";
+import { useFieldFilterStrategy as b } from "./use_field_filter_strategy.js";
+import { ClearableField as f } from "./clearable_field.js";
+const h = [">=", ">", "<=", "<", "=", "!="];
+function N({ fieldName: o, label: a }) {
+  const r = b(d, o), l = n(r.broadcasts.value), i = n(r.broadcasts.operator);
+  return /* @__PURE__ */ t(
+    f,
+    {
+      label: a,
+      onClear: () => r.setValue(null),
+      isClearable: l == null,
+      children: /* @__PURE__ */ u(s, { children: [
+        /* @__PURE__ */ t(
+          m,
+          {
+            value: i,
+            onChange: (e) => r.setOperator(e),
+            width: "55px",
+            children: h.map((e) => /* @__PURE__ */ t(p, { value: e, label: e, children: e }, e))
+          }
+        ),
+        /* @__PURE__ */ t(
+          c,
+          {
+            type: "number",
+            value: String(l ?? ""),
+            onChange: (e) => r.setValue(Number(e))
+          }
+        )
+      ] })
+    }
+  );
 }
 export {
-  I as NumberFieldFilter
+  N as NumberFieldFilter
 };
 //# sourceMappingURL=number_field_filter.js.map

package/dist/components/table_filter_panel/field_filters/number_field_filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"number_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/number_field_filter.tsx"],"sourcesContent":["import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';\nimport { useSignalValue } from '@tcn/state';\nimport { Button } from '@tcn/ui/actions';\nimport { Input, Option, Select } from '@tcn/ui/inputs';\nimport { Box, HStack, VStack } from '@tcn/ui/stacks';\nimport { Title } from '@tcn/ui/typography';\nimport React from 'react';\nimport { FieldFilterProps } from './field_filter_props.js';\nimport { NumberFieldFilterPresenter } from './number_field_filter_presenter.js';\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\nimport { ComparisonOperator } from '../types.js';\n\nconst operators: ComparisonOperator[] = ['>=', '>', '<=', '<', '=', '!='];\n\nexport function NumberFieldFilter({ fieldName, label }: FieldFilterProps) {\n  const presenter = useFieldFilterStrategy(NumberFieldFilterPresenter, fieldName);\n\n  const value = useSignalValue(presenter.broadcasts.value);\n  const operator = useSignalValue(presenter.broadcasts.operator);\n\n  return (\n    <VStack gap=\"4px\">\n      <Box width=\"flex\">\n        <Title size=\"md\">{label}</Title>\n      </Box>\n      <HStack width=\"flex\">\n        <Select\n          value={operator}\n          onChange={value => presenter.setOperator(value as ComparisonOperator)}\n          width=\"55px\"\n        >\n          {operators.map(operator => (\n            <Option key={operator} value={operator} label={operator}>\n              {operator}\n            </Option>\n          ))}\n        </Select>\n        <Input\n          type=\"number\"\n          value={String(value ?? '')}\n          onChange={value => presenter.setValue(Number(value))}\n        />\n        <Button\n          onClick={() => presenter.setValue(null)}\n          hierarchy=\"tertiary\"\n          disabled={value == null}\n        >\n          <CrossCircleIcon />\n        </Button>\n      </HStack>\n    </VStack>\n  );\n}\n"],"names":["operators","NumberFieldFilter","fieldName","label","presenter","useFieldFilterStrategy","NumberFieldFilterPresenter","value","useSignalValue","operator","jsxs","VStack","jsx","Box","Title","HStack","Select","Option","Input","Button","CrossCircleIcon"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAkC,CAAC,MAAM,KAAK,MAAM,KAAK,KAAK,IAAI;AAEjE,SAASC,EAAkB,EAAE,WAAAC,GAAW,OAAAC,KAA2B;AACxE,QAAMC,IAAYC,EAAuBC,GAA4BJ,CAAS,GAExEK,IAAQC,EAAeJ,EAAU,WAAW,KAAK,GACjDK,IAAWD,EAAeJ,EAAU,WAAW,QAAQ;AAE7D,SACE,gBAAAM,EAACC,GAAA,EAAO,KAAI,OACV,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD,EAACE,KAAM,MAAK,MAAM,aAAM,EAAA,CAC1B;AAAA,IACA,gBAAAJ,EAACK,GAAA,EAAO,OAAM,QACZ,UAAA;AAAA,MAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,OAAOP;AAAA,UACP,UAAU,CAAAF,MAASH,EAAU,YAAYG,CAA2B;AAAA,UACpE,OAAM;AAAA,UAEL,UAAAP,EAAU,IAAI,CAAAS,MACb,gBAAAG,EAACK,GAAA,EAAsB,OAAOR,GAAU,OAAOA,GAC5C,UAAAA,EAAAA,GADUA,CAEb,CACD;AAAA,QAAA;AAAA,MAAA;AAAA,MAEH,gBAAAG;AAAA,QAACM;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO,OAAOX,KAAS,EAAE;AAAA,UACzB,UAAU,CAAAA,MAASH,EAAU,SAAS,OAAOG,CAAK,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,MAErD,gBAAAK;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAAS,MAAMf,EAAU,SAAS,IAAI;AAAA,UACtC,WAAU;AAAA,UACV,UAAUG,KAAS;AAAA,UAEnB,4BAACa,GAAA,CAAA,CAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IACnB,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"number_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/number_field_filter.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { Input, Option, Select, InputGroup } from '@tcn/ui/inputs';\nimport { FieldFilterProps } from './field_filter_props.js';\nimport { NumberFieldFilterPresenter } from './number_field_filter_presenter.js';\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\nimport { ComparisonOperator } from '../types.js';\nimport { ClearableField } from './clearable_field.js';\n\nconst operators: ComparisonOperator[] = ['>=', '>', '<=', '<', '=', '!='];\n\nexport function NumberFieldFilter({ fieldName, label }: FieldFilterProps) {\n  const presenter = useFieldFilterStrategy(NumberFieldFilterPresenter, fieldName);\n\n  const value = useSignalValue(presenter.broadcasts.value);\n  const operator = useSignalValue(presenter.broadcasts.operator);\n\n  return (\n    <ClearableField\n      label={label}\n      onClear={() => presenter.setValue(null)}\n      isClearable={value == null}\n    >\n      <InputGroup>\n        <Select\n          value={operator}\n          onChange={value => presenter.setOperator(value as ComparisonOperator)}\n          width=\"55px\"\n        >\n          {operators.map(operator => (\n            <Option key={operator} value={operator} label={operator}>\n              {operator}\n            </Option>\n          ))}\n        </Select>\n        <Input\n          type=\"number\"\n          value={String(value ?? '')}\n          onChange={value => presenter.setValue(Number(value))}\n        />\n      </InputGroup>\n    </ClearableField>\n  );\n}\n"],"names":["operators","NumberFieldFilter","fieldName","label","presenter","useFieldFilterStrategy","NumberFieldFilterPresenter","value","useSignalValue","operator","jsx","ClearableField","InputGroup","Select","Option","Input"],"mappings":";;;;;;AAQA,MAAMA,IAAkC,CAAC,MAAM,KAAK,MAAM,KAAK,KAAK,IAAI;AAEjE,SAASC,EAAkB,EAAE,WAAAC,GAAW,OAAAC,KAA2B;AACxE,QAAMC,IAAYC,EAAuBC,GAA4BJ,CAAS,GAExEK,IAAQC,EAAeJ,EAAU,WAAW,KAAK,GACjDK,IAAWD,EAAeJ,EAAU,WAAW,QAAQ;AAE7D,SACE,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAR;AAAA,MACA,SAAS,MAAMC,EAAU,SAAS,IAAI;AAAA,MACtC,aAAaG,KAAS;AAAA,MAEtB,4BAACK,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAOJ;AAAA,YACP,UAAU,CAAAF,MAASH,EAAU,YAAYG,CAA2B;AAAA,YACpE,OAAM;AAAA,YAEL,UAAAP,EAAU,IAAI,CAAAS,MACb,gBAAAC,EAACI,GAAA,EAAsB,OAAOL,GAAU,OAAOA,GAC5C,UAAAA,EAAAA,GADUA,CAEb,CACD;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAC;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO,OAAOR,KAAS,EAAE;AAAA,YACzB,UAAU,CAAAA,MAASH,EAAU,SAAS,OAAOG,CAAK,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACrD,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/table_filter_panel/field_filters/number_range_field_filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number_range_field_filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table_filter_panel/field_filters/number_range_field_filter.tsx"],"names":[],"mappings":"AAUA,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,KAAK,GACN,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,2CAmDA"}
+{"version":3,"file":"number_range_field_filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table_filter_panel/field_filters/number_range_field_filter.tsx"],"names":[],"mappings":"AAOA,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,KAAK,GACN,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,2CAmCA"}

package/dist/components/table_filter_panel/field_filters/number_range_field_filter.js

@@ -1,62 +1,53 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { CrossCircleIcon as o } from "@tcn/icons/cross_circle_icon.js";
-import { useSignalValue as d } from "@tcn/state";
-import { Button as m } from "@tcn/ui/actions";
-import { Input as u } from "@tcn/ui/inputs";
-import { VStack as x, Box as i, HStack as c } from "@tcn/ui/stacks";
-import { Title as f, BodyText as s } from "@tcn/ui/typography";
-import { useFieldFilterStrategy as g } from "./use_field_filter_strategy.js";
+import { jsxs as s, jsx as l } from "react/jsx-runtime";
+import { useSignalValue as t } from "@tcn/state";
+import { Input as i } from "@tcn/ui/inputs";
+import { useFieldFilterStrategy as p } from "./use_field_filter_strategy.js";
 import { NumberRangeFieldFilterPresenter as b } from "./number_range_field_filter_presenter.js";
-function z({
-  fieldName: h,
-  label: p
+import { FieldSet as d } from "@tcn/ui/form";
+import { ClearableField as u } from "./clearable_field.js";
+function M({
+  fieldName: o,
+  label: m
 }) {
-  const r = g(b, h), n = d(r.broadcasts.minValue), a = d(r.broadcasts.maxValue);
-  return /* @__PURE__ */ t(x, { gap: "4px", children: [
-    /* @__PURE__ */ e(i, { width: "flex", children: /* @__PURE__ */ e(f, { size: "md", children: p }) }),
-    /* @__PURE__ */ t(c, { gap: "4px", children: [
-      /* @__PURE__ */ e(i, { width: "auto", children: /* @__PURE__ */ e(s, { size: "lg", children: "Min" }) }),
-      /* @__PURE__ */ e(i, { width: "flex", children: /* @__PURE__ */ e(
-        u,
-        {
-          type: "number",
-          value: String(n ?? ""),
-          onChange: (l) => r.setMinValue(Number(l))
-        }
-      ) }),
-      /* @__PURE__ */ e(
-        m,
-        {
-          onClick: () => r.setMinValue(null),
-          hierarchy: "tertiary",
-          disabled: n == null,
-          children: /* @__PURE__ */ e(o, {})
-        }
-      )
-    ] }),
-    /* @__PURE__ */ t(c, { gap: "4px", children: [
-      /* @__PURE__ */ e(i, { width: "auto", children: /* @__PURE__ */ e(s, { size: "lg", children: "Max" }) }),
-      /* @__PURE__ */ e(i, { width: "flex", children: /* @__PURE__ */ e(
-        u,
-        {
-          type: "number",
-          value: String(a ?? ""),
-          onChange: (l) => r.setMaxValue(Number(l))
-        }
-      ) }),
-      /* @__PURE__ */ e(
-        m,
-        {
-          onClick: () => r.setMaxValue(null),
-          hierarchy: "tertiary",
-          disabled: a == null,
-          children: /* @__PURE__ */ e(o, {})
-        }
-      )
-    ] })
+  const e = p(b, o), n = t(e.broadcasts.minValue), a = t(e.broadcasts.maxValue);
+  return /* @__PURE__ */ s(d, { legend: m, gap: "4px", children: [
+    /* @__PURE__ */ l(
+      u,
+      {
+        label: "Min",
+        onClear: () => e.setMinValue(null),
+        isClearable: n == null,
+        inline: !0,
+        children: /* @__PURE__ */ l(
+          i,
+          {
+            type: "number",
+            value: String(n ?? ""),
+            onChange: (r) => e.setMinValue(Number(r))
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ l(
+      u,
+      {
+        label: "Max",
+        onClear: () => e.setMaxValue(null),
+        isClearable: a == null,
+        inline: !0,
+        children: /* @__PURE__ */ l(
+          i,
+          {
+            type: "number",
+            value: String(a ?? ""),
+            onChange: (r) => e.setMaxValue(Number(r))
+          }
+        )
+      }
+    )
   ] });
 }
 export {
-  z as NumberRangeFieldFilter
+  M as NumberRangeFieldFilter
 };
 //# sourceMappingURL=number_range_field_filter.js.map

package/dist/components/table_filter_panel/field_filters/number_range_field_filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"number_range_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/number_range_field_filter.tsx"],"sourcesContent":["import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';\nimport { useSignalValue } from '@tcn/state';\nimport { Button } from '@tcn/ui/actions';\nimport { Input } from '@tcn/ui/inputs';\nimport { Box, HStack, VStack } from '@tcn/ui/stacks';\nimport { BodyText, Title } from '@tcn/ui/typography';\nimport React from 'react';\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\nimport { NumberRangeFieldFilterPresenter } from './number_range_field_filter_presenter.js';\n\nexport function NumberRangeFieldFilter({\n  fieldName,\n  label,\n}: {\n  fieldName: string;\n  label: string;\n}) {\n  const presenter = useFieldFilterStrategy(NumberRangeFieldFilterPresenter, fieldName);\n\n  const minValue = useSignalValue(presenter.broadcasts.minValue);\n  const maxValue = useSignalValue(presenter.broadcasts.maxValue);\n\n  return (\n    <VStack gap=\"4px\">\n      <Box width=\"flex\">\n        <Title size=\"md\">{label}</Title>\n      </Box>\n      <HStack gap=\"4px\">\n        <Box width=\"auto\">\n          <BodyText size=\"lg\">Min</BodyText>\n        </Box>\n        <Box width=\"flex\">\n          <Input\n            type=\"number\"\n            value={String(minValue ?? '')}\n            onChange={value => presenter.setMinValue(Number(value))}\n          />\n        </Box>\n        <Button\n          onClick={() => presenter.setMinValue(null)}\n          hierarchy=\"tertiary\"\n          disabled={minValue == null}\n        >\n          <CrossCircleIcon />\n        </Button>\n      </HStack>\n      <HStack gap=\"4px\">\n        <Box width=\"auto\">\n          <BodyText size=\"lg\">Max</BodyText>\n        </Box>\n        <Box width=\"flex\">\n          <Input\n            type=\"number\"\n            value={String(maxValue ?? '')}\n            onChange={value => presenter.setMaxValue(Number(value))}\n          />\n        </Box>\n        <Button\n          onClick={() => presenter.setMaxValue(null)}\n          hierarchy=\"tertiary\"\n          disabled={maxValue == null}\n        >\n          <CrossCircleIcon />\n        </Button>\n      </HStack>\n    </VStack>\n  );\n}\n"],"names":["NumberRangeFieldFilter","fieldName","label","presenter","useFieldFilterStrategy","NumberRangeFieldFilterPresenter","minValue","useSignalValue","maxValue","jsxs","VStack","jsx","Box","Title","HStack","BodyText","Input","value","Button","CrossCircleIcon"],"mappings":";;;;;;;;;AAUO,SAASA,EAAuB;AAAA,EACrC,WAAAC;AAAA,EACA,OAAAC;AACF,GAGG;AACD,QAAMC,IAAYC,EAAuBC,GAAiCJ,CAAS,GAE7EK,IAAWC,EAAeJ,EAAU,WAAW,QAAQ,GACvDK,IAAWD,EAAeJ,EAAU,WAAW,QAAQ;AAE7D,SACE,gBAAAM,EAACC,GAAA,EAAO,KAAI,OACV,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD,EAACE,KAAM,MAAK,MAAM,aAAM,EAAA,CAC1B;AAAA,IACA,gBAAAJ,EAACK,GAAA,EAAO,KAAI,OACV,UAAA;AAAA,MAAA,gBAAAH,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD,EAACI,KAAS,MAAK,MAAK,iBAAG,EAAA,CACzB;AAAA,MACA,gBAAAJ,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO,OAAOV,KAAY,EAAE;AAAA,UAC5B,UAAU,CAAAW,MAASd,EAAU,YAAY,OAAOc,CAAK,CAAC;AAAA,QAAA;AAAA,MAAA,GAE1D;AAAA,MACA,gBAAAN;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAAS,MAAMf,EAAU,YAAY,IAAI;AAAA,UACzC,WAAU;AAAA,UACV,UAAUG,KAAY;AAAA,UAEtB,4BAACa,GAAA,CAAA,CAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IACnB,GACF;AAAA,IACA,gBAAAV,EAACK,GAAA,EAAO,KAAI,OACV,UAAA;AAAA,MAAA,gBAAAH,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD,EAACI,KAAS,MAAK,MAAK,iBAAG,EAAA,CACzB;AAAA,MACA,gBAAAJ,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO,OAAOR,KAAY,EAAE;AAAA,UAC5B,UAAU,CAAAS,MAASd,EAAU,YAAY,OAAOc,CAAK,CAAC;AAAA,QAAA;AAAA,MAAA,GAE1D;AAAA,MACA,gBAAAN;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAAS,MAAMf,EAAU,YAAY,IAAI;AAAA,UACzC,WAAU;AAAA,UACV,UAAUK,KAAY;AAAA,UAEtB,4BAACW,GAAA,CAAA,CAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IACnB,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"number_range_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/number_range_field_filter.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { Input } from '@tcn/ui/inputs';\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\nimport { NumberRangeFieldFilterPresenter } from './number_range_field_filter_presenter.js';\nimport { FieldSet } from '@tcn/ui/form';\nimport { ClearableField } from './clearable_field.js';\n\nexport function NumberRangeFieldFilter({\n  fieldName,\n  label,\n}: {\n  fieldName: string;\n  label: string;\n}) {\n  const presenter = useFieldFilterStrategy(NumberRangeFieldFilterPresenter, fieldName);\n\n  const minValue = useSignalValue(presenter.broadcasts.minValue);\n  const maxValue = useSignalValue(presenter.broadcasts.maxValue);\n\n  return (\n    <FieldSet legend={label} gap=\"4px\">\n      <ClearableField\n        label=\"Min\"\n        onClear={() => presenter.setMinValue(null)}\n        isClearable={minValue == null}\n        inline\n      >\n        <Input\n          type=\"number\"\n          value={String(minValue ?? '')}\n          onChange={value => presenter.setMinValue(Number(value))}\n        />\n      </ClearableField>\n\n      <ClearableField\n        label=\"Max\"\n        onClear={() => presenter.setMaxValue(null)}\n        isClearable={maxValue == null}\n        inline\n      >\n        <Input\n          type=\"number\"\n          value={String(maxValue ?? '')}\n          onChange={value => presenter.setMaxValue(Number(value))}\n        />\n      </ClearableField>\n    </FieldSet>\n  );\n}\n"],"names":["NumberRangeFieldFilter","fieldName","label","presenter","useFieldFilterStrategy","NumberRangeFieldFilterPresenter","minValue","useSignalValue","maxValue","jsxs","FieldSet","jsx","ClearableField","Input","value"],"mappings":";;;;;;;AAOO,SAASA,EAAuB;AAAA,EACrC,WAAAC;AAAA,EACA,OAAAC;AACF,GAGG;AACD,QAAMC,IAAYC,EAAuBC,GAAiCJ,CAAS,GAE7EK,IAAWC,EAAeJ,EAAU,WAAW,QAAQ,GACvDK,IAAWD,EAAeJ,EAAU,WAAW,QAAQ;AAE7D,SACE,gBAAAM,EAACC,GAAA,EAAS,QAAQR,GAAO,KAAI,OAC3B,UAAA;AAAA,IAAA,gBAAAS;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAS,MAAMT,EAAU,YAAY,IAAI;AAAA,QACzC,aAAaG,KAAY;AAAA,QACzB,QAAM;AAAA,QAEN,UAAA,gBAAAK;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO,OAAOP,KAAY,EAAE;AAAA,YAC5B,UAAU,CAAAQ,MAASX,EAAU,YAAY,OAAOW,CAAK,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACxD;AAAA,IAAA;AAAA,IAGF,gBAAAH;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAS,MAAMT,EAAU,YAAY,IAAI;AAAA,QACzC,aAAaK,KAAY;AAAA,QACzB,QAAM;AAAA,QAEN,UAAA,gBAAAG;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO,OAAOL,KAAY,EAAE;AAAA,YAC5B,UAAU,CAAAM,MAASX,EAAU,YAAY,OAAOW,CAAK,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACxD;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/components/table_filter_panel/field_filters/select_field_filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select_field_filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table_filter_panel/field_filters/select_field_filter.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAI3D,MAAM,MAAM,sBAAsB,GAAG,gBAAgB,GAAG;IACtD,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;CAChE,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,sBAAsB,2CAwCtF"}
+{"version":3,"file":"select_field_filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table_filter_panel/field_filters/select_field_filter.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAK3D,MAAM,MAAM,sBAAsB,GAAG,gBAAgB,GAAG;IACtD,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;CAChE,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,sBAAsB,2CAqCtF"}