@zeniai/web-components 3.16.50 → 3.16.51

package/dist/MatchingOperatorDropdown-9KNmfeJC.js

@@ -0,0 +1,572 @@
+import { j as n, u as f, P as R, c as j, S as C } from "./vendor-.pnpm-BZbZ6JJC.js";
+import { forwardRef as F, useRef as B, useState as v, useEffect as M } from "react";
+import c from "@emotion/styled";
+import { fC as A, S as o, fD as z, aq as L, t as m, o as D, u as V, a as O, f2 as N, p as E, G as H, n as P } from "./index-Ced64tAR.js";
+import { S as I } from "./filter-cZIFUNvj.js";
+import { Z as x } from "./ZeniDatePicker-DBCil4F2.js";
+const W = c.div`
+  display: flex;
+  align-items: center;
+  height: ${o.sp6};
+  background: transparent;
+  position: relative;
+  margin: auto 0;
+`, Y = c.div`
+  border-top-left-radius: ${o.sp1};
+  border-bottom-left-radius: ${o.sp1};
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  padding: ${o.sp0} ${o.sp2};
+  align-items: center;
+  transition: width 0.1s linear;
+  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
+  border-right: ${(e) => `1px solid ${e.theme.colors.grey3}`};
+  width: ${(e) => e.stretched ? "197px" : "167px"};
+  background: ${(e) => e.stretched ? e.theme.colors.background : "transparent"};
+  svg {
+    color: ${(e) => e.stretched ? e.theme.colors.primary : e.theme.colors.hero};
+    cursor: pointer;
+    &:hover {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+  &:focus-within {
+    width: 197px;
+    background: ${(e) => e.theme.colors.background};
+    svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, G = c(z)`
+  padding: 0 0 0 28px;
+  outline: none;
+  border: none;
+  height: 100%;
+  width: 100%;
+  background: unset;
+  color: ${(e) => `${e.theme.colors.primary}`};
+`, q = c.button`
+  cursor: ${(e) => e.isDisabled ? "auto" : "pointer"};
+  padding: ${o.sp2} 14px;
+  background: ${(e) => e.buttonOnly ? "inherit" : e.isActive ? e.theme.colors.background : "unset"};
+  border: none;
+  outline: none;
+  display: flex;
+  align-items: center;
+  svg {
+    color: ${(e) => e.isDisabled ? e.theme.colors.grey3 : e.isActive ? e.theme.colors.primary : e.theme.colors.hero};
+  }
+  &:hover {
+    background: ${(e) => e.buttonOnly ? "inherit" : e.isDisabled ? "unset" : e.theme.colors.background};
+    svg {
+      color: ${(e) => e.isDisabled ? e.theme.colors.grey3 : e.theme.colors.primary};
+    }
+  }
+`, T = c.button`
+  background: unset;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  padding: 0;
+`, U = c(L)`
+  position: absolute;
+  top: -${o.sp1};
+  right: -${o.sp1};
+  background: ${(e) => e.theme.colors.primary};
+  color: ${(e) => e.theme.colors.grey5};
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, Z = c.div`
+  height: ${o.sp6};
+  border: ${(e) => e.buttonOnly ? "none" : `1px solid ${e.theme.colors.grey3}`};
+  border-left: none;
+  overflow: hidden;
+  border-top-right-radius: ${o.sp1};
+  border-bottom-right-radius: ${o.sp1};
+  box-sizing: border-box;
+`, _ = F(
+  ({
+    onSearchTextChanged: e,
+    onFilterButtonClick: s,
+    isFilterBtnActive: r,
+    isFilterDisabled: t,
+    filtersCount: a,
+    filterText: i,
+    searchPlaceholder: u,
+    includeSearch: d = !0
+  }, l) => {
+    const p = B(null), y = (g) => {
+      e && e(g.target.value);
+    }, $ = () => {
+      s && s();
+    }, b = () => {
+      p.current?.focus();
+    }, h = a != null && a > 0;
+    return /* @__PURE__ */ n.jsxs(W, { children: [
+      d ? /* @__PURE__ */ n.jsxs(Y, { stretched: i.trim().length > 0, children: [
+        /* @__PURE__ */ n.jsx(T, { onClick: b, children: /* @__PURE__ */ n.jsx(A, { width: o.sp4, height: o.sp4 }) }),
+        /* @__PURE__ */ n.jsx(
+          G,
+          {
+            value: i,
+            ref: p,
+            onChange: y,
+            type: "text",
+            placeholder: u
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ n.jsx(Z, { buttonOnly: !d, children: /* @__PURE__ */ n.jsxs(
+        q,
+        {
+          isActive: r,
+          isDisabled: t ?? !1,
+          buttonOnly: !d,
+          ref: l,
+          onClick: $,
+          children: [
+            /* @__PURE__ */ n.jsx(I, { width: o.sp4, height: o.sp4 }),
+            h && /* @__PURE__ */ n.jsx(U, { children: a })
+          ]
+        }
+      ) })
+    ] });
+  }
+);
+_.displayName = "SearchBoxWithFilterButton";
+const ue = ({
+  open: e,
+  anchorEl: s,
+  children: r,
+  paperStyle: t,
+  onClose: a
+}) => {
+  const i = f();
+  return /* @__PURE__ */ n.jsx(
+    R,
+    {
+      transitionDuration: 400,
+      anchorEl: s,
+      open: e,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      PaperProps: {
+        style: {
+          ...t,
+          marginTop: "6px",
+          background: "transparent",
+          boxShadow: `${o.sp0} 2px ${o.sp2} ${i.colors.dropShadowHover}`
+        }
+      },
+      onClose: a,
+      children: r
+    }
+  );
+}, J = {
+  valuesCombinationOperator: "ANY",
+  values: [],
+  matchingOperator: "equal"
+}, ge = ({
+  currentFilters: e,
+  selectedOption: s,
+  categoryIndex: r
+}) => e.categories == null ? {
+  categoryCombinationOperator: "AND",
+  categories: [
+    {
+      ...J,
+      field: s.value
+    }
+  ]
+} : {
+  ...e,
+  categories: e.categories.map((a, i) => i !== r ? a : {
+    ...a,
+    field: s.value,
+    values: []
+  })
+}, pe = ({
+  currentFilters: e,
+  selectedOption: s,
+  categoryIndex: r
+}) => e?.categories == null ? e : {
+  ...e,
+  categories: e.categories.map((a, i) => i !== r ? a : {
+    ...a,
+    matchingOperator: s.value
+  })
+}, he = ({
+  currentFilters: e,
+  selectedOptions: s,
+  categoryIndex: r
+}) => e.categories == null ? e : {
+  ...e,
+  categories: e.categories.map((a, i) => i !== r ? a : {
+    ...a,
+    values: s.map((u) => u.value)
+  })
+}, K = (e) => ({
+  placeholder: (r) => ({
+    ...r,
+    color: e.colors.grey1,
+    ...m.standardRegular.cssObject
+  }),
+  input: (r) => ({
+    ...r,
+    color: e.colors.primary,
+    margin: 0,
+    padding: 0
+  }),
+  control: (r) => ({
+    ...r,
+    backgroundColor: e.colors.background,
+    border: "none",
+    boxShadow: "none",
+    height: o.sp6,
+    cursor: "pointer"
+  }),
+  valueContainer: (r) => ({
+    ...r,
+    height: "100%",
+    padding: `${o.sp2} ${o.sp3}`
+  }),
+  indicatorSeparator: (r) => ({
+    ...r,
+    display: "none"
+  }),
+  indicatorsContainer: (r) => ({
+    ...r,
+    display: "none"
+  }),
+  option: (r, t) => ({
+    ...r,
+    ...m.standardRegular.cssObject,
+    padding: `${o.sp2} ${o.sp3}`,
+    cursor: "pointer",
+    color: t.isSelected || t.isFocused ? e.colors.primary : e.colors.hero,
+    background: t.isSelected || t.isFocused ? e.colors.background : e.colors.grey5,
+    ":hover": {
+      color: e.colors.primary,
+      backgroundColor: e.colors.background
+    }
+  }),
+  singleValue: (r) => ({
+    ...r,
+    color: e.colors.primary,
+    margin: 0
+  }),
+  menuList: (r) => ({
+    ...r,
+    backgroundColor: e.colors.grey5,
+    maxHeight: "320px"
+  }),
+  menu: (r) => ({
+    ...r,
+    boxShadow: `${o.sp0} 2px ${o.sp2} ${e.colors.dropShadowHover}`
+  })
+}), me = (e) => ({
+  placeholder: (r) => ({
+    ...r,
+    color: e.colors.grey1,
+    ...m.standardRegular.cssObject
+  }),
+  input: (r) => ({
+    ...r,
+    color: e.colors.primary,
+    margin: 0,
+    padding: 0
+  }),
+  control: (r) => ({
+    ...r,
+    backgroundColor: e.colors.background,
+    border: "none",
+    boxShadow: "none",
+    minHeight: "unset"
+  }),
+  valueContainer: (r) => ({
+    ...r,
+    height: "100%",
+    padding: 0,
+    rowGap: o.sp2,
+    columnGap: o.sp1
+  }),
+  indicatorSeparator: (r) => ({
+    ...r,
+    display: "none"
+  }),
+  indicatorsContainer: (r) => ({
+    ...r,
+    display: "none"
+  }),
+  option: (r, t) => ({
+    ...r,
+    ...m.standardRegular.cssObject,
+    padding: `${o.sp2} ${o.sp3}`,
+    cursor: "pointer",
+    color: t.isSelected ? e.colors.primary : e.colors.hero,
+    background: t.isSelected ? e.colors.background : e.colors.grey5,
+    ":hover": {
+      color: e.colors.primary,
+      backgroundColor: e.colors.background
+    }
+  }),
+  singleValue: (r) => ({
+    ...r,
+    color: e.colors.primary
+  }),
+  multiValue: (r) => ({
+    ...r,
+    padding: `${o.sp0} ${o.sp2}`,
+    border: `1px solid ${e.colors.primary}`,
+    background: "none",
+    borderRadius: o.sp1,
+    margin: 0,
+    columnGap: o.sp2,
+    alignItems: "center",
+    height: o.sp4
+  }),
+  multiValueLabel: (r) => ({
+    ...r,
+    padding: 0,
+    paddingLeft: 0,
+    color: e.colors.primary,
+    maxWidth: "200px"
+  }),
+  multiValueRemove: (r) => ({
+    ...r,
+    padding: 0,
+    ":hover": {
+      background: "none",
+      cursor: "pointer"
+    },
+    svg: {
+      color: e.colors.primary
+    }
+  }),
+  menuList: (r) => ({
+    ...r,
+    backgroundColor: e.colors.grey5
+  }),
+  menu: (r) => ({
+    ...r,
+    boxShadow: `${o.sp0} 2px ${o.sp2} ${e.colors.dropShadowHover}`,
+    width: "315px",
+    right: `-${o.sp3}`,
+    marginTop: o.sp3
+  }),
+  container: (r) => ({
+    ...r,
+    flex: 1
+  })
+}), be = ({
+  categoryCombinationOperator: e,
+  onChange: s,
+  buttonsDisabled: r
+}) => {
+  const t = c.button`
+    padding: ${o.sp2};
+    outline: none;
+    border: none;
+    border-radius: 0;
+    width: 50%;
+    cursor: pointer;
+    background-color: ${(l) => l.selected ? l.theme.colors.grey3 : l.theme.colors.grey5};
+  `, a = c(D)`
+    color: ${(l) => l.buttonsDisabled ? l.theme.colors.grey2 : l.selected ? l.theme.colors.primary : l.theme.colors.hero};
+  `, i = c.div`
+    border: ${(l) => "1px solid " + l.theme.colors.grey3};
+    border-radius: ${o.sp1};
+    overflow: hidden;
+  `, u = () => {
+    s("AND");
+  }, d = () => {
+    s("OR");
+  };
+  return /* @__PURE__ */ n.jsxs(i, { children: [
+    /* @__PURE__ */ n.jsx(
+      t,
+      {
+        disabled: r,
+        onClick: u,
+        selected: e === "AND",
+        children: /* @__PURE__ */ n.jsx(
+          a,
+          {
+            buttonsDisabled: r,
+            selected: e === "AND",
+            children: "and"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ n.jsx(
+      t,
+      {
+        disabled: r,
+        onClick: d,
+        selected: e === "OR",
+        children: /* @__PURE__ */ n.jsx(
+          a,
+          {
+            buttonsDisabled: r,
+            selected: e === "OR",
+            children: "or"
+          }
+        )
+      }
+    )
+  ] });
+}, ye = ({
+  selectedDates: e,
+  onDateRangeChange: s
+}) => {
+  const r = f(), t = V(), a = e?.[0], i = e?.[1], [u, d] = v(
+    a ? {
+      date: a
+    } : void 0
+  ), [l, p] = v(
+    i ? {
+      date: i
+    } : void 0
+  );
+  M(() => {
+    u != null && l != null && s({ startDate: u?.date, endDate: l?.date });
+  }, [u, l]);
+  const y = (g) => {
+    g.isAfter(l?.date) && p(void 0), d({ date: g });
+  }, $ = (g) => {
+    p({ date: g });
+  }, {
+    dateFormat: {
+      visual: { MMMDCommaYYYYformat: b }
+    },
+    spendManagement: { filters: h }
+  } = O.getLocalizedStrings();
+  return /* @__PURE__ */ n.jsxs(Q, { size: t, children: [
+    /* @__PURE__ */ n.jsx(X, { children: /* @__PURE__ */ n.jsx(N, {}) }),
+    /* @__PURE__ */ n.jsx(k, { children: /* @__PURE__ */ n.jsx(
+      x,
+      {
+        onSelectedDateChanged: y,
+        selectedDate: u,
+        dateFormat: b,
+        placeHolder: /* @__PURE__ */ n.jsx(S, { children: h.from }),
+        style: { backgroundColor: r.colors.background }
+      }
+    ) }),
+    /* @__PURE__ */ n.jsx(S, { children: h.enDash }),
+    /* @__PURE__ */ n.jsx(k, { children: /* @__PURE__ */ n.jsx(
+      x,
+      {
+        onSelectedDateChanged: $,
+        minDate: ee(u?.date),
+        selectedDate: l,
+        dateFormat: b,
+        placeHolder: /* @__PURE__ */ n.jsx(S, { children: h.to }),
+        style: { backgroundColor: r.colors.background }
+      }
+    ) })
+  ] });
+}, Q = c.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: ${o.sp2};
+  justify-content: space-evenly;
+  flex-wrap: ${(e) => e.size === "small" ? "wrap" : "nowrap"};
+`, k = c.div`
+  display: flex;
+  align-items: center;
+  padding-left: ${o.sp3};
+  cursor: pointer;
+`, S = c(E)`
+  color: ${(e) => e.theme.colors.hero};
+  background: ${(e) => e.theme.colors.background};
+`, X = c.div`
+  height: ${o.sp3};
+  width: ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, ee = (e) => {
+  if (e != null)
+    return e.add(1, "day");
+}, re = c.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`, oe = c(P)`
+  color: ${(e) => e.theme.colors.primary};
+  width: ${o.sp4};
+  height: ${o.sp4};
+`, ne = (e) => {
+  const { isSelected: s } = e;
+  return /* @__PURE__ */ n.jsx(j.Option, { ...e, children: /* @__PURE__ */ n.jsxs(re, { children: [
+    /* @__PURE__ */ n.jsx(H, { children: e.label }),
+    s && /* @__PURE__ */ n.jsx(oe, {})
+  ] }) });
+}, te = (e) => /* @__PURE__ */ n.jsx(j.SingleValue, { ...e, children: /* @__PURE__ */ n.jsx(D, { children: e.children }) }), w = [
+  { value: "equal", label: "is" },
+  { value: "not-equal", label: "is not" }
+], $e = ({
+  onChange: e,
+  value: s,
+  categoryIndex: r
+}) => {
+  const t = f(), i = {
+    ...K(t),
+    menu: (d) => ({
+      ...d,
+      boxShadow: `${o.sp0} 2px ${o.sp2} ${t.colors.dropShadowHover}`,
+      width: `${o.sp12}`
+    }),
+    option: (d) => ({
+      ...d,
+      ...m.standardRegular.cssObject
+    })
+  }, u = w.find(
+    (d) => d.value === s
+  );
+  return /* @__PURE__ */ n.jsx(
+    C,
+    {
+      isSearchable: !1,
+      isMulti: !1,
+      value: u,
+      onChange: (d) => {
+        e(d, r);
+      },
+      placeholder: O.getLocalizedStrings().cockpit.filters.categoryPlaceholder,
+      options: w,
+      styles: i,
+      menuPosition: "fixed",
+      components: { Option: ne, SingleValue: te }
+    }
+  );
+};
+export {
+  be as C,
+  ne as D,
+  ue as F,
+  $e as M,
+  J as N,
+  _ as S,
+  me as a,
+  ye as b,
+  ge as c,
+  pe as d,
+  he as e,
+  K as g
+};

package/dist/MatchingOperatorDropdown-PJhM9hf2.cjs

@@ -0,0 +1,130 @@
+"use strict";const t=require("./vendor-.pnpm-DHyNpoQL.cjs"),x=require("react"),l=require("@emotion/styled"),o=require("./index-C5IoNVAR.cjs"),D=require("./filter-D00CTD87.cjs"),j=require("./ZeniDatePicker-CF_UPO6P.cjs"),E=l.div`
+  display: flex;
+  align-items: center;
+  height: ${o.Space.sp6};
+  background: transparent;
+  position: relative;
+  margin: auto 0;
+`,O=l.div`
+  border-top-left-radius: ${o.Space.sp1};
+  border-bottom-left-radius: ${o.Space.sp1};
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  padding: ${o.Space.sp0} ${o.Space.sp2};
+  align-items: center;
+  transition: width 0.1s linear;
+  border: ${e=>`1px solid ${e.theme.colors.grey3}`};
+  border-right: ${e=>`1px solid ${e.theme.colors.grey3}`};
+  width: ${e=>e.stretched?"197px":"167px"};
+  background: ${e=>e.stretched?e.theme.colors.background:"transparent"};
+  svg {
+    color: ${e=>e.stretched?e.theme.colors.primary:e.theme.colors.hero};
+    cursor: pointer;
+    &:hover {
+      color: ${e=>e.theme.colors.primary};
+    }
+  }
+  &:focus-within {
+    width: 197px;
+    background: ${e=>e.theme.colors.background};
+    svg {
+      color: ${e=>e.theme.colors.primary};
+    }
+  }
+`,C=l(o.SmallRegularInput)`
+  padding: 0 0 0 28px;
+  outline: none;
+  border: none;
+  height: 100%;
+  width: 100%;
+  background: unset;
+  color: ${e=>`${e.theme.colors.primary}`};
+`,F=l.button`
+  cursor: ${e=>e.isDisabled?"auto":"pointer"};
+  padding: ${o.Space.sp2} 14px;
+  background: ${e=>e.buttonOnly?"inherit":e.isActive?e.theme.colors.background:"unset"};
+  border: none;
+  outline: none;
+  display: flex;
+  align-items: center;
+  svg {
+    color: ${e=>e.isDisabled?e.theme.colors.grey3:e.isActive?e.theme.colors.primary:e.theme.colors.hero};
+  }
+  &:hover {
+    background: ${e=>e.buttonOnly?"inherit":e.isDisabled?"unset":e.theme.colors.background};
+    svg {
+      color: ${e=>e.isDisabled?e.theme.colors.grey3:e.theme.colors.primary};
+    }
+  }
+`,B=l.button`
+  background: unset;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  padding: 0;
+`,M=l(o.ExtraSmallMedium)`
+  position: absolute;
+  top: -${o.Space.sp1};
+  right: -${o.Space.sp1};
+  background: ${e=>e.theme.colors.primary};
+  color: ${e=>e.theme.colors.grey5};
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`,A=l.div`
+  height: ${o.Space.sp6};
+  border: ${e=>e.buttonOnly?"none":`1px solid ${e.theme.colors.grey3}`};
+  border-left: none;
+  overflow: hidden;
+  border-top-right-radius: ${o.Space.sp1};
+  border-bottom-right-radius: ${o.Space.sp1};
+  box-sizing: border-box;
+`,R=x.forwardRef(({onSearchTextChanged:e,onFilterButtonClick:s,isFilterBtnActive:r,isFilterDisabled:n,filtersCount:a,filterText:c,searchPlaceholder:u,includeSearch:d=!0},i)=>{const g=x.useRef(null),S=p=>{e&&e(p.target.value)},b=()=>{s&&s()},m=()=>{g.current?.focus()},h=a!=null&&a>0;return t.jsxRuntimeExports.jsxs(E,{children:[d?t.jsxRuntimeExports.jsxs(O,{stretched:c.trim().length>0,children:[t.jsxRuntimeExports.jsx(B,{onClick:m,children:t.jsxRuntimeExports.jsx(o.SvgSearch,{width:o.Space.sp4,height:o.Space.sp4})}),t.jsxRuntimeExports.jsx(C,{value:c,ref:g,onChange:S,type:"text",placeholder:u})]}):null,t.jsxRuntimeExports.jsx(A,{buttonOnly:!d,children:t.jsxRuntimeExports.jsxs(F,{isActive:r,isDisabled:n??!1,buttonOnly:!d,ref:i,onClick:b,children:[t.jsxRuntimeExports.jsx(D.SvgFilter,{width:o.Space.sp4,height:o.Space.sp4}),h&&t.jsxRuntimeExports.jsx(M,{children:a})]})})]})});R.displayName="SearchBoxWithFilterButton";const L=({open:e,anchorEl:s,children:r,paperStyle:n,onClose:a})=>{const c=t.useTheme();return t.jsxRuntimeExports.jsx(t.Popover,{transitionDuration:400,anchorEl:s,open:e,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},PaperProps:{style:{...n,marginTop:"6px",background:"transparent",boxShadow:`${o.Space.sp0} 2px ${o.Space.sp2} ${c.colors.dropShadowHover}`}},onClose:a,children:r})},f={valuesCombinationOperator:"ANY",values:[],matchingOperator:"equal"},V=({currentFilters:e,selectedOption:s,categoryIndex:r})=>e.categories==null?{categoryCombinationOperator:"AND",categories:[{...f,field:s.value}]}:{...e,categories:e.categories.map((a,c)=>c!==r?a:{...a,field:s.value,values:[]})},z=({currentFilters:e,selectedOption:s,categoryIndex:r})=>e?.categories==null?e:{...e,categories:e.categories.map((a,c)=>c!==r?a:{...a,matchingOperator:s.value})},P=({currentFilters:e,selectedOptions:s,categoryIndex:r})=>e.categories==null?e:{...e,categories:e.categories.map((a,c)=>c!==r?a:{...a,values:s.map(u=>u.value)})},k=e=>({placeholder:r=>({...r,color:e.colors.grey1,...o.textStyles.standardRegular.cssObject}),input:r=>({...r,color:e.colors.primary,margin:0,padding:0}),control:r=>({...r,backgroundColor:e.colors.background,border:"none",boxShadow:"none",height:o.Space.sp6,cursor:"pointer"}),valueContainer:r=>({...r,height:"100%",padding:`${o.Space.sp2} ${o.Space.sp3}`}),indicatorSeparator:r=>({...r,display:"none"}),indicatorsContainer:r=>({...r,display:"none"}),option:(r,n)=>({...r,...o.textStyles.standardRegular.cssObject,padding:`${o.Space.sp2} ${o.Space.sp3}`,cursor:"pointer",color:n.isSelected||n.isFocused?e.colors.primary:e.colors.hero,background:n.isSelected||n.isFocused?e.colors.background:e.colors.grey5,":hover":{color:e.colors.primary,backgroundColor:e.colors.background}}),singleValue:r=>({...r,color:e.colors.primary,margin:0}),menuList:r=>({...r,backgroundColor:e.colors.grey5,maxHeight:"320px"}),menu:r=>({...r,boxShadow:`${o.Space.sp0} 2px ${o.Space.sp2} ${e.colors.dropShadowHover}`})}),q=e=>({placeholder:r=>({...r,color:e.colors.grey1,...o.textStyles.standardRegular.cssObject}),input:r=>({...r,color:e.colors.primary,margin:0,padding:0}),control:r=>({...r,backgroundColor:e.colors.background,border:"none",boxShadow:"none",minHeight:"unset"}),valueContainer:r=>({...r,height:"100%",padding:0,rowGap:o.Space.sp2,columnGap:o.Space.sp1}),indicatorSeparator:r=>({...r,display:"none"}),indicatorsContainer:r=>({...r,display:"none"}),option:(r,n)=>({...r,...o.textStyles.standardRegular.cssObject,padding:`${o.Space.sp2} ${o.Space.sp3}`,cursor:"pointer",color:n.isSelected?e.colors.primary:e.colors.hero,background:n.isSelected?e.colors.background:e.colors.grey5,":hover":{color:e.colors.primary,backgroundColor:e.colors.background}}),singleValue:r=>({...r,color:e.colors.primary}),multiValue:r=>({...r,padding:`${o.Space.sp0} ${o.Space.sp2}`,border:`1px solid ${e.colors.primary}`,background:"none",borderRadius:o.Space.sp1,margin:0,columnGap:o.Space.sp2,alignItems:"center",height:o.Space.sp4}),multiValueLabel:r=>({...r,padding:0,paddingLeft:0,color:e.colors.primary,maxWidth:"200px"}),multiValueRemove:r=>({...r,padding:0,":hover":{background:"none",cursor:"pointer"},svg:{color:e.colors.primary}}),menuList:r=>({...r,backgroundColor:e.colors.grey5}),menu:r=>({...r,boxShadow:`${o.Space.sp0} 2px ${o.Space.sp2} ${e.colors.dropShadowHover}`,width:"315px",right:`-${o.Space.sp3}`,marginTop:o.Space.sp3}),container:r=>({...r,flex:1})}),N=({categoryCombinationOperator:e,onChange:s,buttonsDisabled:r})=>{const n=l.button`
+    padding: ${o.Space.sp2};
+    outline: none;
+    border: none;
+    border-radius: 0;
+    width: 50%;
+    cursor: pointer;
+    background-color: ${i=>i.selected?i.theme.colors.grey3:i.theme.colors.grey5};
+  `,a=l(o.StandardRegularSp)`
+    color: ${i=>i.buttonsDisabled?i.theme.colors.grey2:i.selected?i.theme.colors.primary:i.theme.colors.hero};
+  `,c=l.div`
+    border: ${i=>"1px solid "+i.theme.colors.grey3};
+    border-radius: ${o.Space.sp1};
+    overflow: hidden;
+  `,u=()=>{s("AND")},d=()=>{s("OR")};return t.jsxRuntimeExports.jsxs(c,{children:[t.jsxRuntimeExports.jsx(n,{disabled:r,onClick:u,selected:e==="AND",children:t.jsxRuntimeExports.jsx(a,{buttonsDisabled:r,selected:e==="AND",children:"and"})}),t.jsxRuntimeExports.jsx(n,{disabled:r,onClick:d,selected:e==="OR",children:t.jsxRuntimeExports.jsx(a,{buttonsDisabled:r,selected:e==="OR",children:"or"})})]})},W=({selectedDates:e,onDateRangeChange:s})=>{const r=t.useTheme(),n=o.useWindowSizeContext(),a=e?.[0],c=e?.[1],[u,d]=x.useState(a?{date:a}:void 0),[i,g]=x.useState(c?{date:c}:void 0);x.useEffect(()=>{u!=null&&i!=null&&s({startDate:u?.date,endDate:i?.date})},[u,i]);const S=p=>{p.isAfter(i?.date)&&g(void 0),d({date:p})},b=p=>{g({date:p})},{dateFormat:{visual:{MMMDCommaYYYYformat:m}},spendManagement:{filters:h}}=o.appLocale.getLocalizedStrings();return t.jsxRuntimeExports.jsxs(Y,{size:n,children:[t.jsxRuntimeExports.jsx(H,{children:t.jsxRuntimeExports.jsx(o.SvgCalendar,{})}),t.jsxRuntimeExports.jsx($,{children:t.jsxRuntimeExports.jsx(j.ZeniDatePicker,{onSelectedDateChanged:S,selectedDate:u,dateFormat:m,placeHolder:t.jsxRuntimeExports.jsx(y,{children:h.from}),style:{backgroundColor:r.colors.background}})}),t.jsxRuntimeExports.jsx(y,{children:h.enDash}),t.jsxRuntimeExports.jsx($,{children:t.jsxRuntimeExports.jsx(j.ZeniDatePicker,{onSelectedDateChanged:b,minDate:I(u?.date),selectedDate:i,dateFormat:m,placeHolder:t.jsxRuntimeExports.jsx(y,{children:h.to}),style:{backgroundColor:r.colors.background}})})]})},Y=l.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: ${o.Space.sp2};
+  justify-content: space-evenly;
+  flex-wrap: ${e=>e.size==="small"?"wrap":"nowrap"};
+`,$=l.div`
+  display: flex;
+  align-items: center;
+  padding-left: ${o.Space.sp3};
+  cursor: pointer;
+`,y=l(o.StandardRegular)`
+  color: ${e=>e.theme.colors.hero};
+  background: ${e=>e.theme.colors.background};
+`,H=l.div`
+  height: ${o.Space.sp3};
+  width: ${o.Space.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,I=e=>{if(e!=null)return e.add(1,"day")},T=l.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`,U=l(o.SvgTick)`
+  color: ${e=>e.theme.colors.primary};
+  width: ${o.Space.sp4};
+  height: ${o.Space.sp4};
+`,w=e=>{const{isSelected:s}=e;return t.jsxRuntimeExports.jsx(t.components.Option,{...e,children:t.jsxRuntimeExports.jsxs(T,{children:[t.jsxRuntimeExports.jsx(o.SmallRegular,{children:e.label}),s&&t.jsxRuntimeExports.jsx(U,{})]})})},_=e=>t.jsxRuntimeExports.jsx(t.components.SingleValue,{...e,children:t.jsxRuntimeExports.jsx(o.StandardRegularSp,{children:e.children})}),v=[{value:"equal",label:"is"},{value:"not-equal",label:"is not"}],G=({onChange:e,value:s,categoryIndex:r})=>{const n=t.useTheme(),c={...k(n),menu:d=>({...d,boxShadow:`${o.Space.sp0} 2px ${o.Space.sp2} ${n.colors.dropShadowHover}`,width:`${o.Space.sp12}`}),option:d=>({...d,...o.textStyles.standardRegular.cssObject})},u=v.find(d=>d.value===s);return t.jsxRuntimeExports.jsx(t.StateManagedSelect$1,{isSearchable:!1,isMulti:!1,value:u,onChange:d=>{e(d,r)},placeholder:o.appLocale.getLocalizedStrings().cockpit.filters.categoryPlaceholder,options:v,styles:c,menuPosition:"fixed",components:{Option:w,SingleValue:_}})};exports.CombinationOperatorButton=N;exports.DateRangeFilterField=W;exports.DropdownOption=w;exports.FiltersPopover=L;exports.MatchingOperatorDropdown=G;exports.NEW_CATEGORY_BODY=f;exports.SearchBoxWithFilterButton=R;exports.getDropdownStyles=k;exports.getMultiSelectDropdownStyles=q;exports.getUpdatedFiltersOnCategoryChange=V;exports.getUpdatedFiltersOnMatchingOperatorChange=z;exports.getUpdatedFiltersOnValueChange=P;