@bynder/compact-view 5.1.2 → 5.1.4

package/SmartFilterSelect.js

@@ -0,0 +1,91 @@
+import { jsxs as S, jsx as i } from "react/jsx-runtime";
+import { useState as l } from "react";
+import r from "styled-components";
+import { token as n } from "@bynder/design-system";
+import { getMetapropertiesOptions as C } from "./getMetapropertiesOptions.js";
+import { InfiniteScroll as $ } from "./InfiniteScroll.js";
+import { OptionComponent as v } from "./Option.js";
+import { useAuth as z } from "./LoginContext.js";
+const E = ({
+  metaproperty: t,
+  smartfilterId: h,
+  onOptionSelect: m,
+  selectedOptions: p,
+  filteredMetaproperty: a
+}) => {
+  const x = z(), [f, d] = l(!1), [s, g] = l(t.options), [u, c] = l(t.options.length % 30 === 0), w = async () => {
+    d(!0);
+    const e = s[s.length - 1];
+    try {
+      const o = await C({
+        auth: x,
+        smartfilterId: h,
+        metapropertyId: t.id,
+        labelKeyset: e.label,
+        zindexKeyset: e.zindex,
+        mpoKeyset: e.id
+      });
+      o.options.length ? (g((b) => [...b, ...o.options]), c(o.options.length % 30 === 0)) : c(!1);
+    } catch (o) {
+      throw new Error(`Error while loading more options: ${o}`);
+    } finally {
+      d(!1);
+    }
+  };
+  return /* @__PURE__ */ S(F, { "data-testid": "metaproperty-filter-content", children: [
+    /* @__PURE__ */ i(
+      L,
+      {
+        "data-testid": "metaproperty-title",
+        title: t.label || t.name,
+        children: t.label || t.name
+      }
+    ),
+    /* @__PURE__ */ i(M, { children: /* @__PURE__ */ i(
+      $,
+      {
+        isLoading: f,
+        hasNextPage: u,
+        loadMore: w,
+        children: s.map((e) => a[e?.name] ? /* @__PURE__ */ i(
+          v,
+          {
+            option: e,
+            onClick: m,
+            metapropertyName: t.name,
+            isSelected: !!p[t.name]?.[e.id],
+            metapropertyMultifilter: !!t.isMultifilter,
+            count: a[e.name],
+            showCount: t.showCounter
+          },
+          e.id
+        ) : null)
+      }
+    ) })
+  ] });
+}, F = r.div`
+	color: ${n.colorText};
+	width: 282px;
+`, L = r.h3`
+	padding: ${n.spacing5};
+	margin: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: ${n.fontSize100};
+	line-height: ${n.lineHeightText};
+	border-bottom: 1px solid rgba(3, 16, 38, 0.1);
+	box-shadow: 0px 0px 1px 0px rgba(3, 16, 38, 0.1), 0px 1px 4px -1px rgba(3, 16, 38, 0.1);
+`, M = r.ul`
+	max-height: 400px;
+	overflow-y: auto;
+	padding: 0;
+	width: 100%;
+	list-style: none;
+	margin: 0;
+	scrollbar-width: none;
+`;
+export {
+  E as SmartFilterSelect
+};
+//# sourceMappingURL=SmartFilterSelect.js.map

package/SmartFilterSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartFilterSelect.js","sources":["../../src/filter/filters/smartfilters/Metaproperties/SmartFilterSelect.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { token } from '@bynder/design-system';\nimport {\n\tSmartfilterMetaproperty,\n\tSmartfilterOption,\n\tSmartfilterSelectedOptionType,\n} from '@src/api/rest/types';\nimport { getMetapropertiesOptions } from '@src/api/rest/getMetapropertiesOptions';\nimport { InfiniteScroll } from '@src/common/components/InfiniteScroll';\nimport { OptionComponent } from './Option';\nimport { useAuth } from '@src/login/LoginContext';\n\ntype Props = {\n\tmetaproperty: SmartfilterMetaproperty;\n\tsmartfilterId: string;\n\tonOptionSelect: (\n\t\tmetapropertyName: string,\n\t\toption: SmartfilterOption,\n\t\tmetapropertyMultifilter: boolean,\n\t) => void;\n\tselectedOptions: Record<string, Record<string, SmartfilterSelectedOptionType>>;\n\tfilteredMetaproperty: Record<string, number>;\n};\n\nconst SmartFilterSelect = ({\n\tmetaproperty,\n\tsmartfilterId,\n\tonOptionSelect,\n\tselectedOptions,\n\tfilteredMetaproperty,\n}: Props) => {\n\tconst auth = useAuth();\n\tconst [isLoading, setIsLoading] = useState(false);\n\tconst [options, setOptions] = useState(metaproperty.options);\n\tconst [hasNextPage, setHasNextPage] = useState(metaproperty.options.length % 30 === 0);\n\n\tconst handleLoadMore = async () => {\n\t\tsetIsLoading(true);\n\t\tconst lastOption = options[options.length - 1];\n\n\t\ttry {\n\t\t\tconst response = await getMetapropertiesOptions({\n\t\t\t\tauth,\n\t\t\t\tsmartfilterId,\n\t\t\t\tmetapropertyId: metaproperty.id,\n\t\t\t\tlabelKeyset: lastOption.label,\n\t\t\t\tzindexKeyset: lastOption.zindex,\n\t\t\t\tmpoKeyset: lastOption.id,\n\t\t\t});\n\n\t\t\tif (response.options.length) {\n\t\t\t\tsetOptions((prevOptions) => [...prevOptions, ...response.options]);\n\t\t\t\tsetHasNextPage(response.options.length % 30 === 0);\n\t\t\t} else {\n\t\t\t\tsetHasNextPage(false);\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tthrow new Error(`Error while loading more options: ${error}`);\n\t\t} finally {\n\t\t\tsetIsLoading(false);\n\t\t}\n\t};\n\n\treturn (\n\t\t<FilterContent data-testid=\"metaproperty-filter-content\">\n\t\t\t<FilterHead\n\t\t\t\tdata-testid=\"metaproperty-title\"\n\t\t\t\ttitle={metaproperty.label || metaproperty.name}\n\t\t\t>\n\t\t\t\t{metaproperty.label || metaproperty.name}\n\t\t\t</FilterHead>\n\t\t\t<FilterList>\n\t\t\t\t<InfiniteScroll\n\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\thasNextPage={hasNextPage}\n\t\t\t\t\tloadMore={handleLoadMore}\n\t\t\t\t>\n\t\t\t\t\t{options.map((option) => {\n\t\t\t\t\t\tif (!filteredMetaproperty[option?.name]) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<OptionComponent\n\t\t\t\t\t\t\t\tkey={option.id}\n\t\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\t\tonClick={onOptionSelect}\n\t\t\t\t\t\t\t\tmetapropertyName={metaproperty.name}\n\t\t\t\t\t\t\t\tisSelected={!!selectedOptions[metaproperty.name]?.[option.id]}\n\t\t\t\t\t\t\t\tmetapropertyMultifilter={!!metaproperty.isMultifilter}\n\t\t\t\t\t\t\t\tcount={filteredMetaproperty[option.name]}\n\t\t\t\t\t\t\t\tshowCount={metaproperty.showCounter}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</InfiniteScroll>\n\t\t\t</FilterList>\n\t\t</FilterContent>\n\t);\n};\n\nexport { SmartFilterSelect };\n\nconst FilterContent = styled.div`\n\tcolor: ${token.colorText};\n\twidth: 282px;\n`;\n\nconst FilterHead = styled.h3`\n\tpadding: ${token.spacing5};\n\tmargin: 0;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\tfont-size: ${token.fontSize100};\n\tline-height: ${token.lineHeightText};\n\tborder-bottom: 1px solid rgba(3, 16, 38, 0.1);\n\tbox-shadow: 0px 0px 1px 0px rgba(3, 16, 38, 0.1), 0px 1px 4px -1px rgba(3, 16, 38, 0.1);\n`;\n\nconst FilterList = styled.ul`\n\tmax-height: 400px;\n\toverflow-y: auto;\n\tpadding: 0;\n\twidth: 100%;\n\tlist-style: none;\n\tmargin: 0;\n\tscrollbar-width: none;\n`;\n"],"names":["SmartFilterSelect","metaproperty","smartfilterId","onOptionSelect","selectedOptions","filteredMetaproperty","auth","useAuth","isLoading","setIsLoading","useState","options","setOptions","hasNextPage","setHasNextPage","handleLoadMore","lastOption","response","getMetapropertiesOptions","prevOptions","error","jsxs","FilterContent","jsx","FilterHead","FilterList","InfiniteScroll","option","OptionComponent","styled","token"],"mappings":";;;;;;;;AAyBA,MAAMA,IAAoB,CAAC;AAAA,EAC1B,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,sBAAAC;AACD,MAAa;AACZ,QAAMC,IAAOC,EAAA,GACP,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAASC,CAAU,IAAIF,EAAST,EAAa,OAAO,GACrD,CAACY,GAAaC,CAAc,IAAIJ,EAAST,EAAa,QAAQ,SAAS,OAAO,CAAC,GAE/Ec,IAAiB,YAAY;AAClC,IAAAN,EAAa,EAAI;AACjB,UAAMO,IAAaL,EAAQA,EAAQ,SAAS,CAAC;AAE7C,QAAI;AACH,YAAMM,IAAW,MAAMC,EAAyB;AAAA,QAC/C,MAAAZ;AAAA,QACA,eAAAJ;AAAA,QACA,gBAAgBD,EAAa;AAAA,QAC7B,aAAae,EAAW;AAAA,QACxB,cAAcA,EAAW;AAAA,QACzB,WAAWA,EAAW;AAAA,MAAA,CACtB;AAED,MAAIC,EAAS,QAAQ,UACpBL,EAAW,CAACO,MAAgB,CAAC,GAAGA,GAAa,GAAGF,EAAS,OAAO,CAAC,GACjEH,EAAeG,EAAS,QAAQ,SAAS,OAAO,CAAC,KAEjDH,EAAe,EAAK;AAAA,IAEtB,SAASM,GAAO;AACf,YAAM,IAAI,MAAM,qCAAqCA,CAAK,EAAE;AAAA,IAC7D,UAAA;AACC,MAAAX,EAAa,EAAK;AAAA,IACnB;AAAA,EACD;AAEA,SACC,gBAAAY,EAACC,GAAA,EAAc,eAAY,+BAC1B,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,eAAY;AAAA,QACZ,OAAOvB,EAAa,SAASA,EAAa;AAAA,QAEzC,UAAAA,EAAa,SAASA,EAAa;AAAA,MAAA;AAAA,IAAA;AAAA,sBAEpCwB,GAAA,EACA,UAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACA,WAAAlB;AAAA,QACA,aAAAK;AAAA,QACA,UAAUE;AAAA,QAET,UAAAJ,EAAQ,IAAI,CAACgB,MACRtB,EAAqBsB,GAAQ,IAAI,IAKrC,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YAEA,QAAAD;AAAA,YACA,SAASxB;AAAA,YACT,kBAAkBF,EAAa;AAAA,YAC/B,YAAY,CAAC,CAACG,EAAgBH,EAAa,IAAI,IAAI0B,EAAO,EAAE;AAAA,YAC5D,yBAAyB,CAAC,CAAC1B,EAAa;AAAA,YACxC,OAAOI,EAAqBsB,EAAO,IAAI;AAAA,YACvC,WAAW1B,EAAa;AAAA,UAAA;AAAA,UAPnB0B,EAAO;AAAA,QAAA,IALN,IAeR;AAAA,MAAA;AAAA,IAAA,EACF,CACD;AAAA,EAAA,GACD;AAEF,GAIML,IAAgBO,EAAO;AAAA,UACnBC,EAAM,SAAS;AAAA;AAAA,GAInBN,IAAaK,EAAO;AAAA,YACdC,EAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,cAKZA,EAAM,WAAW;AAAA,gBACfA,EAAM,cAAc;AAAA;AAAA;AAAA,GAK9BL,IAAaI,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/Smartfilters.js

@@ -0,0 +1,186 @@
+import { jsx as r, Fragment as _, jsxs as O } from "react/jsx-runtime";
+import { useState as u, useRef as p, useEffect as T } from "react";
+import { styled as f } from "styled-components";
+import { Box as q, token as S, Flex as G, Button as J } from "@bynder/design-system";
+import { IconArrowLeft as K, IconArrowRight as Q } from "@bynder/icons";
+import { useConfig as Y } from "./ConfigContext.js";
+import { useAssetFilter as Z } from "./AssetFilterContext.js";
+import { Dropdown as tt } from "./Dropdown.js";
+import { Autocomplete as et } from "./Autocomplete.js";
+import { SmartFilterSelect as nt } from "./SmartFilterSelect.js";
+import { getAutocompleteOptions as rt } from "./autocomplete2.js";
+import { useAuth as ot } from "./LoginContext.js";
+import { debounceAsync as it } from "./asyncDebounce.js";
+const vt = ({ smartfilters: l, metaproperties: m }) => {
+  const o = Z(), $ = ot(), { language: w } = Y(), k = lt(l), [L, D] = u({}), [X, A] = u(), [P, M] = u({}), [g, d] = u(0), [s, I] = u(0), [v, y] = u(!1), c = p(null), b = p(!1), a = p(null), h = p(null), x = p({});
+  T(() => {
+    c.current && I(c.current.scrollWidth - c.current.clientWidth), o.isDropdownActive || (D({}), A({}));
+  }, [l, c, o]);
+  const R = g === 0, U = s > 5 && g !== s;
+  function j() {
+    d((t) => {
+      const e = Math.max(t - 250, 0);
+      return e >= 100 ? e : 0;
+    });
+  }
+  function z() {
+    d((t) => {
+      const e = Math.min(t + 250, s);
+      return e <= s - 100 ? e : s;
+    });
+  }
+  const E = async (t, e) => {
+    let n;
+    M((i) => ({
+      ...i,
+      [e]: !0
+    })), t.length >= 2 && (n = await rt({
+      metapropertyId: e,
+      auth: $,
+      searchTerm: t
+    })), A((i) => ({
+      ...i,
+      [e]: n || null
+    })), M((i) => ({
+      ...i,
+      [e]: !1
+    }));
+  }, N = (t) => (x.current[t] || (x.current[t] = it(E, 500)), x.current[t]), F = (t, e, n) => {
+    o.selectSmartfilterOption(t, e, n);
+  }, W = (t, e) => {
+    D((i) => ({
+      ...i,
+      [t]: e
+    })), N(t)(e, t);
+  }, B = (t) => {
+    a.current = t.clientX, b.current = !1, y(!0);
+  }, H = (t) => {
+    if (b.current) {
+      t.preventDefault();
+      const e = (n) => {
+        n.stopPropagation(), document.removeEventListener("click", e, !0);
+      };
+      document.addEventListener("click", e, {
+        capture: !0,
+        once: !0
+      });
+    }
+    a.current = null, h.current = null, y(!1);
+  }, V = (t) => {
+    if (!v || !c.current || !a.current) return;
+    t.preventDefault(), h.current === null && (h.current = g), a.current && Math.abs(t.clientX - a.current) > 5 && (b.current = !0);
+    const e = (t.clientX - a.current) * -1 + h.current;
+    return e <= 16 ? d(0) : e + 16 < s ? d(e) : d(s);
+  };
+  return /* @__PURE__ */ r(_, { children: k.map((t) => m[t.id] ? /* @__PURE__ */ r(
+    tt,
+    {
+      title: t.labels[w] || t.labels.en_US,
+      alt: t.labels[w] || t.labels.en_US,
+      isSmall: !0,
+      fadeIn: !0,
+      isMetapropertyDropdown: !0,
+      children: () => /* @__PURE__ */ O(
+        st,
+        {
+          ref: c,
+          onMouseDown: B,
+          onMouseUp: H,
+          onMouseMove: V,
+          children: [
+            /* @__PURE__ */ r(
+              ct,
+              {
+                $scroll: g,
+                "data-testid": "metaproperty-dropdown-content",
+                $isDragging: v,
+                children: t.metaproperties.map((e) => {
+                  const n = m[t.id][e];
+                  if (!n || !o.existingFilters?.[n.name] || n.type !== "autocomplete" && (n.type !== "smart-single" && n.type !== "select" || n.options.length === 0))
+                    return null;
+                  const i = n.type === "autocomplete" ? /* @__PURE__ */ r(
+                    et,
+                    {
+                      metaproperty: n,
+                      value: L[n.id] || "",
+                      onChange: W,
+                      onOptionSelect: F,
+                      autocompleteOptions: X || {},
+                      isLoading: P[n.id] || !1,
+                      selectedOptions: o.selectedSmartfilterOptions || {}
+                    }
+                  ) : /* @__PURE__ */ r(
+                    nt,
+                    {
+                      metaproperty: n,
+                      smartfilterId: t.id,
+                      onOptionSelect: F,
+                      selectedOptions: o.selectedSmartfilterOptions || {},
+                      filteredMetaproperty: o.existingFilters?.[n.name]
+                    }
+                  );
+                  return /* @__PURE__ */ r(at, { children: i }, e);
+                })
+              }
+            ),
+            /* @__PURE__ */ O(ut, { direction: "row", justifyContent: "flex-end", children: [
+              /* @__PURE__ */ r(
+                C,
+                {
+                  title: "Previous",
+                  icon: /* @__PURE__ */ r(K, {}),
+                  onClick: j,
+                  "data-testid": "left-arrow",
+                  isDisabled: R
+                }
+              ),
+              /* @__PURE__ */ r(
+                C,
+                {
+                  title: "Next",
+                  icon: /* @__PURE__ */ r(Q, {}),
+                  onClick: z,
+                  "data-testid": "right-arrow",
+                  isDisabled: !U
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    },
+    t.id
+  ) : null) });
+};
+function lt(l) {
+  return [...l].sort((m, o) => m.zindex - o.zindex);
+}
+const st = f.div`
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+`, ct = f.div`
+	display: flex;
+	flex-direction: row;
+	transform: translateX(-${(l) => l.$scroll}px);
+	transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.15);
+	width: fit-content;
+	cursor: ${(l) => l.$isDragging ? "grabbing" : "default"};
+`, at = f(q)`
+	border-right: 1px solid rgba(3, 16, 38, 0.1);
+	max-width: 300px;
+`, ut = f(G)`
+	padding: ${S.spacing3};
+	border-top: 1px solid rgba(3, 16, 38, 0.1);
+	gap: ${S.spacing3};
+`, C = f(J)`
+	padding: ${S.spacing3};
+	border-radius: 6px;
+	border: 1px solid rgba(3, 16, 38, 0.1);
+	background: rgba(3, 16, 38, 0.03);
+	cursor: pointer;
+`;
+export {
+  vt as Smartfilter
+};
+//# sourceMappingURL=Smartfilters.js.map

package/Smartfilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Smartfilters.js","sources":["../../src/filter/filters/smartfilters/Smartfilters.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { styled } from 'styled-components';\nimport { Box, Button, Flex, token } from '@bynder/design-system';\nimport { IconArrowLeft, IconArrowRight } from '@bynder/icons';\nimport {\n\tSmartfilter as SmartfilterType,\n\tSmartfilterMetaproperty,\n\tSmartfilterOption,\n\tAutocompleteOption,\n} from '@src/api/rest/types';\nimport { useConfig } from '@src/app-config/ConfigContext';\nimport { useAssetFilter } from '../../AssetFilterContext';\nimport { Dropdown } from '@src/common/components/dropdown/Dropdown';\nimport { Autocomplete } from './Metaproperties/Autocomplete';\nimport { SmartFilterSelect } from './Metaproperties/SmartFilterSelect';\nimport { getAutocompleteOptions, AutocompleteOptions } from '@src/api/rest/autocomplete';\nimport { useAuth } from '@src/login/LoginContext';\nimport { debounceAsync } from '@src/utils/asyncDebounce';\n\ntype Props = {\n\tsmartfilters: SmartfilterType[];\n\tmetaproperties: Record<string, Record<string, SmartfilterMetaproperty>>;\n};\n\nconst Smartfilter = ({ smartfilters, metaproperties }: Props) => {\n\tconst assetFilterState = useAssetFilter();\n\tconst auth = useAuth();\n\tconst { language } = useConfig();\n\n\tconst sortedFilters = sortFilters(smartfilters);\n\n\tconst [inputValue, setInputValue] = useState<{ [key: string]: string }>({});\n\tconst [autocompleteOptions, setAutocompleteOptions] = useState<\n\t\tAutocompleteOptions | undefined\n\t>();\n\tconst [isLoading, setIsLoading] = useState<{ [key: string]: boolean }>({});\n\n\tconst [scroll, setScroll] = useState(0);\n\tconst [maxScroll, setMaxScroll] = useState(0);\n\n\tconst [isDragging, setIsDragging] = useState(false);\n\n\tconst nodeRef = useRef<HTMLDivElement>(null);\n\tconst hasMoved = useRef(false);\n\tconst initialX = useRef<number | null>(null);\n\tconst initialScrollPos = useRef<number | null>(null);\n\n\t// useRef to track inputs so we can debounce them individually\n\tconst debouncedFunctions = useRef<{\n\t\t[key: string]: (search: string, id: string) => Promise<void>;\n\t}>({});\n\n\tuseEffect(() => {\n\t\tif (nodeRef.current) {\n\t\t\tsetMaxScroll(nodeRef.current.scrollWidth - nodeRef.current.clientWidth);\n\t\t}\n\n\t\tif (!assetFilterState.isDropdownActive) {\n\t\t\tsetInputValue({});\n\t\t\tsetAutocompleteOptions({});\n\t\t}\n\t}, [smartfilters, nodeRef, assetFilterState]);\n\n\tconst isLeftArrowDisabled = scroll === 0;\n\tconst isRightArrowDisabled = maxScroll > 5 && scroll !== maxScroll;\n\n\tfunction handleLeftScroll() {\n\t\tsetScroll((prevScroll: number) => {\n\t\t\tconst leftScroll = Math.max(prevScroll - 250, 0);\n\n\t\t\treturn leftScroll >= 100 ? leftScroll : 0;\n\t\t});\n\t}\n\n\tfunction handleRightScroll() {\n\t\tsetScroll((prevScroll: number) => {\n\t\t\tconst rightScroll = Math.min(prevScroll + 250, maxScroll);\n\n\t\t\treturn rightScroll <= maxScroll - 100 ? rightScroll : maxScroll;\n\t\t});\n\t}\n\n\tconst handleApi = async (search: string, id: string) => {\n\t\tlet callAutocomplete;\n\t\t// set the loading state for the specific search as we can have more than 1\n\t\tsetIsLoading((prev) => ({\n\t\t\t...prev,\n\t\t\t[id]: true,\n\t\t}));\n\n\t\t// api searches of 1 character break the api returning a 500\n\t\tif (search.length >= 2) {\n\t\t\tcallAutocomplete = await getAutocompleteOptions({\n\t\t\t\tmetapropertyId: id,\n\t\t\t\tauth,\n\t\t\t\tsearchTerm: search,\n\t\t\t});\n\t\t}\n\n\t\tsetAutocompleteOptions((prev) => ({\n\t\t\t...prev,\n\t\t\t[id]: callAutocomplete ? callAutocomplete : null,\n\t\t}));\n\n\t\tsetIsLoading((prev) => ({\n\t\t\t...prev,\n\t\t\t[id]: false,\n\t\t}));\n\t};\n\n\tconst getDebouncedFunction = (id: string) => {\n\t\t// Create a debounced function for the specific input if it doesn't exist\n\t\tif (!debouncedFunctions.current[id]) {\n\t\t\tdebouncedFunctions.current[id] = debounceAsync(handleApi, 500) as (\n\t\t\t\tsearch: string,\n\t\t\t\tid: string,\n\t\t\t) => Promise<void>;\n\t\t}\n\n\t\treturn debouncedFunctions.current[id];\n\t};\n\n\tconst handleSmartfilterOptionSelections = (\n\t\tmetapropertyName: string,\n\t\toption: AutocompleteOption | SmartfilterOption,\n\t\tisMultifilter: boolean,\n\t) => {\n\t\tassetFilterState.selectSmartfilterOption(metapropertyName, option, isMultifilter);\n\t};\n\n\tconst handleAutocompleteInputChange = (metapropertyId: string, value: string) => {\n\t\tsetInputValue((prev) => ({\n\t\t\t...prev,\n\t\t\t[metapropertyId]: value,\n\t\t}));\n\t\tconst debouncedHandleApi = getDebouncedFunction(metapropertyId);\n\t\tdebouncedHandleApi(value, metapropertyId);\n\t};\n\n\tconst handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n\t\t// Save the initial position for movement detection\n\t\tinitialX.current = event.clientX;\n\t\thasMoved.current = false;\n\t\tsetIsDragging(true);\n\t};\n\n\tconst handleMouseUp = (event: React.MouseEvent<HTMLDivElement>) => {\n\t\tif (hasMoved.current) {\n\t\t\tevent.preventDefault();\n\t\t\tconst preventClickPropagation = (e: MouseEvent) => {\n\t\t\t\te.stopPropagation();\n\t\t\t\tdocument.removeEventListener('click', preventClickPropagation, true);\n\t\t\t};\n\n\t\t\t// Add a one-time click handler that will fire before any other click handlers\n\t\t\tdocument.addEventListener('click', preventClickPropagation, {\n\t\t\t\tcapture: true,\n\t\t\t\tonce: true,\n\t\t\t});\n\t\t}\n\n\t\tinitialX.current = null;\n\t\tinitialScrollPos.current = null;\n\n\t\tsetIsDragging(false);\n\t};\n\n\tconst handleDrag = (event: React.MouseEvent<HTMLDivElement>) => {\n\t\tif (!isDragging || !nodeRef.current || !initialX.current) return;\n\n\t\tevent.preventDefault();\n\n\t\t// This tracks the initial scroll position when the drag starts so it doesn't reset\n\t\t// to 0 when the user starts dragging again.\n\t\tif (initialScrollPos.current === null) {\n\t\t\tinitialScrollPos.current = scroll;\n\t\t}\n\n\t\t// Check if we've moved enough to consider this a drag operation\n\t\tif (initialX.current) {\n\t\t\tconst deltaX = Math.abs(event.clientX - initialX.current);\n\n\t\t\t// If moved more than the threshold in either direction, mark as moved\n\t\t\tif (deltaX > 5) {\n\t\t\t\thasMoved.current = true;\n\t\t\t}\n\t\t}\n\n\t\tconst walkX = (event.clientX - initialX.current) * -1 + initialScrollPos.current;\n\n\t\t// 16 is to make the scroll a bit smoother in case of coming up short (Padding width offset)\n\t\tif (walkX <= 16) {\n\t\t\treturn setScroll(0);\n\t\t}\n\n\t\tif (walkX + 16 < maxScroll) {\n\t\t\treturn setScroll(walkX);\n\t\t}\n\n\t\treturn setScroll(maxScroll);\n\t};\n\n\t/* Note that it is important for the Dropdown component *not* to be rerendered when\n\t * the reference value of the filter object changes, only when it is actually a\n\t * different filter (i.e. when the ID changes). When a GraphQL request is made, the\n\t * same filter will be represented by a new object. If this causes a rerender of the\n\t * Dropdown component, the dropdown will close after every filter selection. Instead,\n\t * the dropdown should stay open after a filter is selected.\n\t */\n\treturn (\n\t\t<>\n\t\t\t{sortedFilters.map((filter) => {\n\t\t\t\tif (!metaproperties[filter.id]) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<Dropdown\n\t\t\t\t\t\tkey={filter.id}\n\t\t\t\t\t\ttitle={filter.labels[language] || filter.labels.en_US}\n\t\t\t\t\t\talt={filter.labels[language] || filter.labels.en_US}\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tfadeIn\n\t\t\t\t\t\tisMetapropertyDropdown\n\t\t\t\t\t>\n\t\t\t\t\t\t{() => (\n\t\t\t\t\t\t\t<MetaPropertyFilterParent\n\t\t\t\t\t\t\t\tref={nodeRef}\n\t\t\t\t\t\t\t\tonMouseDown={handleMouseDown}\n\t\t\t\t\t\t\t\tonMouseUp={handleMouseUp}\n\t\t\t\t\t\t\t\tonMouseMove={handleDrag}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<DropdownContentWrapper\n\t\t\t\t\t\t\t\t\t$scroll={scroll}\n\t\t\t\t\t\t\t\t\tdata-testid=\"metaproperty-dropdown-content\"\n\t\t\t\t\t\t\t\t\t$isDragging={isDragging}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{filter.metaproperties.map((metapropertyId) => {\n\t\t\t\t\t\t\t\t\t\tconst metaproperty =\n\t\t\t\t\t\t\t\t\t\t\tmetaproperties[filter.id][metapropertyId];\n\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t!metaproperty ||\n\t\t\t\t\t\t\t\t\t\t\t!assetFilterState.existingFilters?.[metaproperty.name]\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\tmetaproperty.type !== 'autocomplete' &&\n\t\t\t\t\t\t\t\t\t\t\t((metaproperty.type !== 'smart-single' &&\n\t\t\t\t\t\t\t\t\t\t\t\tmetaproperty.type !== 'select') ||\n\t\t\t\t\t\t\t\t\t\t\t\tmetaproperty.options.length === 0)\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\tconst content =\n\t\t\t\t\t\t\t\t\t\t\tmetaproperty.type === 'autocomplete' ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<Autocomplete\n\t\t\t\t\t\t\t\t\t\t\t\t\tmetaproperty={metaproperty}\n\t\t\t\t\t\t\t\t\t\t\t\t\tvalue={inputValue[metaproperty.id] || ''}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChange={handleAutocompleteInputChange}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonOptionSelect={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleSmartfilterOptionSelections\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tautocompleteOptions={autocompleteOptions || {}}\n\t\t\t\t\t\t\t\t\t\t\t\t\tisLoading={isLoading[metaproperty.id] || false}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedOptions={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tassetFilterState.selectedSmartfilterOptions ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t<SmartFilterSelect\n\t\t\t\t\t\t\t\t\t\t\t\t\tmetaproperty={metaproperty}\n\t\t\t\t\t\t\t\t\t\t\t\t\tsmartfilterId={filter.id}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonOptionSelect={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleSmartfilterOptionSelections\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedOptions={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tassetFilterState.selectedSmartfilterOptions ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tfilteredMetaproperty={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tassetFilterState.existingFilters?.[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmetaproperty.name\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<DropdownContentContainer key={metapropertyId}>\n\t\t\t\t\t\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t\t\t\t\t\t</DropdownContentContainer>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t</DropdownContentWrapper>\n\n\t\t\t\t\t\t\t\t<NavigationParent direction=\"row\" justifyContent=\"flex-end\">\n\t\t\t\t\t\t\t\t\t<NavigationArrow\n\t\t\t\t\t\t\t\t\t\ttitle=\"Previous\"\n\t\t\t\t\t\t\t\t\t\ticon={<IconArrowLeft />}\n\t\t\t\t\t\t\t\t\t\tonClick={handleLeftScroll}\n\t\t\t\t\t\t\t\t\t\tdata-testid=\"left-arrow\"\n\t\t\t\t\t\t\t\t\t\tisDisabled={isLeftArrowDisabled}\n\t\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t\t<NavigationArrow\n\t\t\t\t\t\t\t\t\t\ttitle=\"Next\"\n\t\t\t\t\t\t\t\t\t\ticon={<IconArrowRight />}\n\t\t\t\t\t\t\t\t\t\tonClick={handleRightScroll}\n\t\t\t\t\t\t\t\t\t\tdata-testid=\"right-arrow\"\n\t\t\t\t\t\t\t\t\t\tisDisabled={!isRightArrowDisabled}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</NavigationParent>\n\t\t\t\t\t\t\t</MetaPropertyFilterParent>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Dropdown>\n\t\t\t\t);\n\t\t\t})}\n\t\t</>\n\t);\n};\n\nfunction sortFilters(filters: SmartfilterType[]) {\n\treturn [...filters].sort((a, b) => a.zindex - b.zindex);\n}\n\nexport { Smartfilter };\n\nconst MetaPropertyFilterParent = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\toverflow: hidden;\n`;\n\nconst DropdownContentWrapper = styled.div<{ $scroll: number; $isDragging?: boolean }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\ttransform: translateX(-${(p) => p.$scroll}px);\n\ttransition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.15);\n\twidth: fit-content;\n\tcursor: ${(p) => (p.$isDragging ? 'grabbing' : 'default')};\n`;\n\nconst DropdownContentContainer = styled(Box)`\n\tborder-right: 1px solid rgba(3, 16, 38, 0.1);\n\tmax-width: 300px;\n`;\n\nconst NavigationParent = styled(Flex)`\n\tpadding: ${token.spacing3};\n\tborder-top: 1px solid rgba(3, 16, 38, 0.1);\n\tgap: ${token.spacing3};\n`;\n\nconst NavigationArrow = styled(Button)`\n\tpadding: ${token.spacing3};\n\tborder-radius: 6px;\n\tborder: 1px solid rgba(3, 16, 38, 0.1);\n\tbackground: rgba(3, 16, 38, 0.03);\n\tcursor: pointer;\n`;\n"],"names":["Smartfilter","smartfilters","metaproperties","assetFilterState","useAssetFilter","auth","useAuth","language","useConfig","sortedFilters","sortFilters","inputValue","setInputValue","useState","autocompleteOptions","setAutocompleteOptions","isLoading","setIsLoading","scroll","setScroll","maxScroll","setMaxScroll","isDragging","setIsDragging","nodeRef","useRef","hasMoved","initialX","initialScrollPos","debouncedFunctions","useEffect","isLeftArrowDisabled","isRightArrowDisabled","handleLeftScroll","prevScroll","leftScroll","handleRightScroll","rightScroll","handleApi","search","id","callAutocomplete","prev","getAutocompleteOptions","getDebouncedFunction","debounceAsync","handleSmartfilterOptionSelections","metapropertyName","option","isMultifilter","handleAutocompleteInputChange","metapropertyId","value","handleMouseDown","event","handleMouseUp","preventClickPropagation","e","handleDrag","walkX","jsx","Fragment","filter","Dropdown","jsxs","MetaPropertyFilterParent","DropdownContentWrapper","metaproperty","content","Autocomplete","SmartFilterSelect","DropdownContentContainer","NavigationParent","NavigationArrow","IconArrowLeft","IconArrowRight","filters","a","b","styled","p","Box","Flex","token","Button"],"mappings":";;;;;;;;;;;;;AAwBA,MAAMA,KAAc,CAAC,EAAE,cAAAC,GAAc,gBAAAC,QAA4B;AAChE,QAAMC,IAAmBC,EAAA,GACnBC,IAAOC,GAAA,GACP,EAAE,UAAAC,EAAA,IAAaC,EAAA,GAEfC,IAAgBC,GAAYT,CAAY,GAExC,CAACU,GAAYC,CAAa,IAAIC,EAAoC,CAAA,CAAE,GACpE,CAACC,GAAqBC,CAAsB,IAAIF,EAAA,GAGhD,CAACG,GAAWC,CAAY,IAAIJ,EAAqC,CAAA,CAAE,GAEnE,CAACK,GAAQC,CAAS,IAAIN,EAAS,CAAC,GAChC,CAACO,GAAWC,CAAY,IAAIR,EAAS,CAAC,GAEtC,CAACS,GAAYC,CAAa,IAAIV,EAAS,EAAK,GAE5CW,IAAUC,EAAuB,IAAI,GACrCC,IAAWD,EAAO,EAAK,GACvBE,IAAWF,EAAsB,IAAI,GACrCG,IAAmBH,EAAsB,IAAI,GAG7CI,IAAqBJ,EAExB,EAAE;AAEL,EAAAK,EAAU,MAAM;AACf,IAAIN,EAAQ,WACXH,EAAaG,EAAQ,QAAQ,cAAcA,EAAQ,QAAQ,WAAW,GAGlErB,EAAiB,qBACrBS,EAAc,CAAA,CAAE,GAChBG,EAAuB,CAAA,CAAE;AAAA,EAE3B,GAAG,CAACd,GAAcuB,GAASrB,CAAgB,CAAC;AAE5C,QAAM4B,IAAsBb,MAAW,GACjCc,IAAuBZ,IAAY,KAAKF,MAAWE;AAEzD,WAASa,IAAmB;AAC3B,IAAAd,EAAU,CAACe,MAAuB;AACjC,YAAMC,IAAa,KAAK,IAAID,IAAa,KAAK,CAAC;AAE/C,aAAOC,KAAc,MAAMA,IAAa;AAAA,IACzC,CAAC;AAAA,EACF;AAEA,WAASC,IAAoB;AAC5B,IAAAjB,EAAU,CAACe,MAAuB;AACjC,YAAMG,IAAc,KAAK,IAAIH,IAAa,KAAKd,CAAS;AAExD,aAAOiB,KAAejB,IAAY,MAAMiB,IAAcjB;AAAA,IACvD,CAAC;AAAA,EACF;AAEA,QAAMkB,IAAY,OAAOC,GAAgBC,MAAe;AACvD,QAAIC;AAEJ,IAAAxB,EAAa,CAACyB,OAAU;AAAA,MACvB,GAAGA;AAAA,MACH,CAACF,CAAE,GAAG;AAAA,IAAA,EACL,GAGED,EAAO,UAAU,MACpBE,IAAmB,MAAME,GAAuB;AAAA,MAC/C,gBAAgBH;AAAA,MAChB,MAAAnC;AAAA,MACA,YAAYkC;AAAA,IAAA,CACZ,IAGFxB,EAAuB,CAAC2B,OAAU;AAAA,MACjC,GAAGA;AAAA,MACH,CAACF,CAAE,GAAGC,KAAsC;AAAA,IAAA,EAC3C,GAEFxB,EAAa,CAACyB,OAAU;AAAA,MACvB,GAAGA;AAAA,MACH,CAACF,CAAE,GAAG;AAAA,IAAA,EACL;AAAA,EACH,GAEMI,IAAuB,CAACJ,OAExBX,EAAmB,QAAQW,CAAE,MACjCX,EAAmB,QAAQW,CAAE,IAAIK,GAAcP,GAAW,GAAG,IAMvDT,EAAmB,QAAQW,CAAE,IAG/BM,IAAoC,CACzCC,GACAC,GACAC,MACI;AACJ,IAAA9C,EAAiB,wBAAwB4C,GAAkBC,GAAQC,CAAa;AAAA,EACjF,GAEMC,IAAgC,CAACC,GAAwBC,MAAkB;AAChF,IAAAxC,EAAc,CAAC8B,OAAU;AAAA,MACxB,GAAGA;AAAA,MACH,CAACS,CAAc,GAAGC;AAAA,IAAA,EACjB,GACyBR,EAAqBO,CAAc,EAC3CC,GAAOD,CAAc;AAAA,EACzC,GAEME,IAAkB,CAACC,MAA4C;AAEpE,IAAA3B,EAAS,UAAU2B,EAAM,SACzB5B,EAAS,UAAU,IACnBH,EAAc,EAAI;AAAA,EACnB,GAEMgC,IAAgB,CAACD,MAA4C;AAClE,QAAI5B,EAAS,SAAS;AACrB,MAAA4B,EAAM,eAAA;AACN,YAAME,IAA0B,CAACC,MAAkB;AAClD,QAAAA,EAAE,gBAAA,GACF,SAAS,oBAAoB,SAASD,GAAyB,EAAI;AAAA,MACpE;AAGA,eAAS,iBAAiB,SAASA,GAAyB;AAAA,QAC3D,SAAS;AAAA,QACT,MAAM;AAAA,MAAA,CACN;AAAA,IACF;AAEA,IAAA7B,EAAS,UAAU,MACnBC,EAAiB,UAAU,MAE3BL,EAAc,EAAK;AAAA,EACpB,GAEMmC,IAAa,CAACJ,MAA4C;AAC/D,QAAI,CAAChC,KAAc,CAACE,EAAQ,WAAW,CAACG,EAAS,QAAS;AAE1D,IAAA2B,EAAM,eAAA,GAIF1B,EAAiB,YAAY,SAChCA,EAAiB,UAAUV,IAIxBS,EAAS,WACG,KAAK,IAAI2B,EAAM,UAAU3B,EAAS,OAAO,IAG3C,MACZD,EAAS,UAAU;AAIrB,UAAMiC,KAASL,EAAM,UAAU3B,EAAS,WAAW,KAAKC,EAAiB;AAGzE,WAAI+B,KAAS,KACLxC,EAAU,CAAC,IAGfwC,IAAQ,KAAKvC,IACTD,EAAUwC,CAAK,IAGhBxC,EAAUC,CAAS;AAAA,EAC3B;AASA,SACC,gBAAAwC,EAAAC,GAAA,EACE,UAAApD,EAAc,IAAI,CAACqD,MACd5D,EAAe4D,EAAO,EAAE,IAK5B,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MAEA,OAAOD,EAAO,OAAOvD,CAAQ,KAAKuD,EAAO,OAAO;AAAA,MAChD,KAAKA,EAAO,OAAOvD,CAAQ,KAAKuD,EAAO,OAAO;AAAA,MAC9C,SAAO;AAAA,MACP,QAAM;AAAA,MACN,wBAAsB;AAAA,MAErB,UAAA,MACA,gBAAAE;AAAA,QAACC;AAAA,QAAA;AAAA,UACA,KAAKzC;AAAA,UACL,aAAa6B;AAAA,UACb,WAAWE;AAAA,UACX,aAAaG;AAAA,UAEb,UAAA;AAAA,YAAA,gBAAAE;AAAA,cAACM;AAAA,cAAA;AAAA,gBACA,SAAShD;AAAA,gBACT,eAAY;AAAA,gBACZ,aAAaI;AAAA,gBAEZ,UAAAwC,EAAO,eAAe,IAAI,CAACX,MAAmB;AAC9C,wBAAMgB,IACLjE,EAAe4D,EAAO,EAAE,EAAEX,CAAc;AASzC,sBANC,CAACgB,KACD,CAAChE,EAAiB,kBAAkBgE,EAAa,IAAI,KAMrDA,EAAa,SAAS,mBACpBA,EAAa,SAAS,kBACvBA,EAAa,SAAS,YACtBA,EAAa,QAAQ,WAAW;AAEjC,2BAAO;AAGR,wBAAMC,IACLD,EAAa,SAAS,iBACrB,gBAAAP;AAAA,oBAACS;AAAA,oBAAA;AAAA,sBACA,cAAAF;AAAA,sBACA,OAAOxD,EAAWwD,EAAa,EAAE,KAAK;AAAA,sBACtC,UAAUjB;AAAA,sBACV,gBACCJ;AAAA,sBAED,qBAAqBhC,KAAuB,CAAA;AAAA,sBAC5C,WAAWE,EAAUmD,EAAa,EAAE,KAAK;AAAA,sBACzC,iBACChE,EAAiB,8BACjB,CAAA;AAAA,oBAAC;AAAA,kBAAA,IAIH,gBAAAyD;AAAA,oBAACU;AAAA,oBAAA;AAAA,sBACA,cAAAH;AAAA,sBACA,eAAeL,EAAO;AAAA,sBACtB,gBACChB;AAAA,sBAED,iBACC3C,EAAiB,8BACjB,CAAA;AAAA,sBAED,sBACCA,EAAiB,kBAChBgE,EAAa,IACd;AAAA,oBAAA;AAAA,kBAAA;AAKJ,yBACC,gBAAAP,EAACW,IAAA,EACC,UAAAH,EAAA,GAD6BjB,CAE/B;AAAA,gBAEF,CAAC;AAAA,cAAA;AAAA,YAAA;AAAA,YAGF,gBAAAa,EAACQ,IAAA,EAAiB,WAAU,OAAM,gBAAe,YAChD,UAAA;AAAA,cAAA,gBAAAZ;AAAA,gBAACa;AAAA,gBAAA;AAAA,kBACA,OAAM;AAAA,kBACN,wBAAOC,GAAA,EAAc;AAAA,kBACrB,SAASzC;AAAA,kBACT,eAAY;AAAA,kBACZ,YAAYF;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGb,gBAAA6B;AAAA,gBAACa;AAAA,gBAAA;AAAA,kBACA,OAAM;AAAA,kBACN,wBAAOE,GAAA,EAAe;AAAA,kBACtB,SAASvC;AAAA,kBACT,eAAY;AAAA,kBACZ,YAAY,CAACJ;AAAA,gBAAA;AAAA,cAAA;AAAA,YACd,EAAA,CACD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACD;AAAA,IAnGI8B,EAAO;AAAA,EAAA,IALN,IA4GR,EAAA,CACF;AAEF;AAEA,SAASpD,GAAYkE,GAA4B;AAChD,SAAO,CAAC,GAAGA,CAAO,EAAE,KAAK,CAACC,GAAGC,MAAMD,EAAE,SAASC,EAAE,MAAM;AACvD;AAIA,MAAMb,KAA2Bc,EAAO;AAAA;AAAA;AAAA;AAAA,GAMlCb,KAAyBa,EAAO;AAAA;AAAA;AAAA,0BAGZ,CAACC,MAAMA,EAAE,OAAO;AAAA;AAAA;AAAA,WAG/B,CAACA,MAAOA,EAAE,cAAc,aAAa,SAAU;AAAA,GAGpDT,KAA2BQ,EAAOE,CAAG;AAAA;AAAA;AAAA,GAKrCT,KAAmBO,EAAOG,CAAI;AAAA,YACxBC,EAAM,QAAQ;AAAA;AAAA,QAElBA,EAAM,QAAQ;AAAA,GAGhBV,IAAkBM,EAAOK,CAAM;AAAA,YACzBD,EAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/Spinner.js

@@ -0,0 +1,32 @@
+import { jsx as e } from "react/jsx-runtime";
+import { styled as r } from "styled-components";
+import { token as n } from "@bynder/design-system";
+function g(i) {
+  return /* @__PURE__ */ e(
+    s,
+    {
+      "data-testid": "spinner",
+      $isRelative: i.isRelative,
+      $isHidden: i.isHidden,
+      $isRefreshingSpinner: i.isRefreshingSpinner,
+      $isNotUsingMargin: i.isNotUsingMargin,
+      children: /* @__PURE__ */ e("svg", { className: "spinner", viewBox: "0 0 20 20", children: /* @__PURE__ */ e("circle", { cx: "10", cy: "10", r: "8", fill: "none", strokeWidth: "3" }) })
+    }
+  );
+}
+const s = r.div`
+	display: ${(i) => i.$isHidden ? "none" : "initial"};
+	position: ${(i) => i.$isRelative ? "relative" : "absolute"};
+	top: ${(i) => i.$isRefreshingSpinner ? "initial" : "0"};
+	right: ${(i) => i.$isRefreshingSpinner ? "initial" : "0"};
+	width: ${n.spacing6};
+	height: ${n.spacing6};
+	margin-right: ${(i) => i.$isNotUsingMargin ? "0" : n.spacing3};
+	margin-top: ${(i) => i.$isNotUsingMargin ? "0" : n.spacing4};
+	background-color: #fff;
+	color: rgba(0, 34, 51, 0.3);
+`;
+export {
+  g as Spinner
+};
+//# sourceMappingURL=Spinner.js.map

package/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sources":["../../src/common/components/Spinner.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from 'styled-components';\nimport { token } from '@bynder/design-system';\n\ninterface Props {\n\tisRelative?: boolean;\n\tisHidden?: boolean;\n\tisRefreshingSpinner?: boolean;\n\tisNotUsingMargin?: boolean;\n}\n\nexport function Spinner(props: Props) {\n\treturn (\n\t\t<SpinnerContainer\n\t\t\tdata-testid=\"spinner\"\n\t\t\t$isRelative={props.isRelative}\n\t\t\t$isHidden={props.isHidden}\n\t\t\t$isRefreshingSpinner={props.isRefreshingSpinner}\n\t\t\t$isNotUsingMargin={props.isNotUsingMargin}\n\t\t>\n\t\t\t<svg className=\"spinner\" viewBox=\"0 0 20 20\">\n\t\t\t\t<circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" strokeWidth=\"3\" />\n\t\t\t</svg>\n\t\t</SpinnerContainer>\n\t);\n}\n\nconst SpinnerContainer = styled.div<{\n\t$isRelative?: boolean;\n\t$isHidden?: boolean;\n\t$isRefreshingSpinner?: boolean;\n\t$isNotUsingMargin?: boolean;\n}>`\n\tdisplay: ${(props) => (props.$isHidden ? 'none' : 'initial')};\n\tposition: ${(props) => (props.$isRelative ? 'relative' : 'absolute')};\n\ttop: ${(props) => (props.$isRefreshingSpinner ? 'initial' : '0')};\n\tright: ${(props) => (props.$isRefreshingSpinner ? 'initial' : '0')};\n\twidth: ${token.spacing6};\n\theight: ${token.spacing6};\n\tmargin-right: ${(props) => (props.$isNotUsingMargin ? '0' : token.spacing3)};\n\tmargin-top: ${(props) => (props.$isNotUsingMargin ? '0' : token.spacing4)};\n\tbackground-color: #fff;\n\tcolor: rgba(0, 34, 51, 0.3);\n`;\n"],"names":["Spinner","props","jsx","SpinnerContainer","styled","token"],"mappings":";;;AAYO,SAASA,EAAQC,GAAc;AACrC,SACC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,eAAY;AAAA,MACZ,aAAaF,EAAM;AAAA,MACnB,WAAWA,EAAM;AAAA,MACjB,sBAAsBA,EAAM;AAAA,MAC5B,mBAAmBA,EAAM;AAAA,MAEzB,4BAAC,OAAA,EAAI,WAAU,WAAU,SAAQ,aAChC,4BAAC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,QAAO,aAAY,KAAI,EAAA,CAC3D;AAAA,IAAA;AAAA,EAAA;AAGH;AAEA,MAAME,IAAmBC,EAAO;AAAA,YAMpB,CAACH,MAAWA,EAAM,YAAY,SAAS,SAAU;AAAA,aAChD,CAACA,MAAWA,EAAM,cAAc,aAAa,UAAW;AAAA,QAC7D,CAACA,MAAWA,EAAM,uBAAuB,YAAY,GAAI;AAAA,UACvD,CAACA,MAAWA,EAAM,uBAAuB,YAAY,GAAI;AAAA,UACzDI,EAAM,QAAQ;AAAA,WACbA,EAAM,QAAQ;AAAA,iBACR,CAACJ,MAAWA,EAAM,oBAAoB,MAAMI,EAAM,QAAS;AAAA,eAC7D,CAACJ,MAAWA,EAAM,oBAAoB,MAAMI,EAAM,QAAS;AAAA;AAAA;AAAA;"}

package/StatefulAssetList.js

@@ -0,0 +1,100 @@
+import { jsx as t, jsxs as F } from "react/jsx-runtime";
+import { useEffect as c } from "react";
+import { styled as f } from "styled-components";
+import { token as i } from "@bynder/design-system";
+import { IconErrorOutline as N } from "@bynder/icons";
+import { __ as m } from "./index2.js";
+import { NoResults as I } from "./NoResults.js";
+import { useAssetFilter as _ } from "./AssetFilterContext.js";
+import { useConfig as w } from "./ConfigContext.js";
+import { useSelectedAssetIds as D, useSelection as R } from "./SelectionContext.js";
+import { Oops as M } from "./Oops.js";
+import { ActiveFilters as P } from "./ActiveFilters.js";
+import { pluralize as $ } from "./text.js";
+import { AssetList as b } from "./AssetList.js";
+import { DirectionSelect as j } from "./DirectionSelect.js";
+import { FieldSelect as k } from "./FieldSelect.js";
+import { Tooltip as z } from "./Tooltip.js";
+import { useSearchStore as B } from "./useSearchStore.js";
+import { useSimilaritySearchStore as H } from "./useSimilaritySearchStore.js";
+function ce(e) {
+  const { data: s, isLoading: r, loadMore: g, hasNextPage: p, executeQuery: d } = e.connection, { setIsLoading: S, setSearch: a } = B(), l = w(), A = D(), { selectAssets: h, toggleAssets: v, setAllAssets: L } = R(), x = _(), {
+    isNLSSelected: E,
+    NLSSearchText: y,
+    isSelected: C
+  } = H();
+  if (c(() => {
+    r || S(!1);
+  }, [r]), c(() => {
+    s.tag !== "Failure" && L(u(s));
+  }, [s]), s.tag === "Failure")
+    return /* @__PURE__ */ t(M, { error: new Error(s.value), onRetry: d });
+  const o = s.value?.searchAssets?.assets?.totalCount ?? e.totalCount, T = () => {
+    x.clear(), a("assets", ""), a("collection", "");
+  }, n = !!(C || E && y);
+  return /* @__PURE__ */ t(
+    b,
+    {
+      assets: u(s),
+      count: o,
+      isLoading: r,
+      loadMore: g,
+      hasNextPage: p,
+      theme: l.theme,
+      selectionMode: l.selectionMode,
+      selectedAssetIds: A,
+      onSelect: h,
+      onToggle: v,
+      emptyStateElement: /* @__PURE__ */ t(I, { onReset: T }),
+      children: /* @__PURE__ */ F(O, { children: [
+        o !== void 0 && /* @__PURE__ */ t(U, { "data-testid": "assets-amount", children: $(o, m("{} asset"), m("{} assets")) }, o),
+        e.showActiveFilters && /* @__PURE__ */ t(P, {}),
+        /* @__PURE__ */ t(
+          k,
+          {
+            options: n ? ["NL_SEARCH"] : ["CREATED_AT", "PUBLISHED_AT", "UPDATED_AT", "NAME"]
+          }
+        ),
+        /* @__PURE__ */ t(j, { nlSearch: n }),
+        n && /* @__PURE__ */ t(
+          z,
+          {
+            text: `You cannot change the sorting criteria while a Visual Similarity filter
+							is being applied`,
+            position: "left",
+            margin: "left",
+            marginAmount: "spacing3",
+            children: /* @__PURE__ */ t(N, {})
+          }
+        )
+      ] })
+    }
+  );
+}
+function u(e) {
+  return e.tag === "Loading" && !e.value ? {
+    tag: "Loading",
+    value: void 0
+  } : e.tag === "Loading" ? {
+    tag: e.tag,
+    value: e.value?.searchAssets.assets.nodes
+  } : {
+    tag: e.tag,
+    value: e.value.searchAssets.assets.nodes
+  };
+}
+const O = f.div`
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	z-index: 10;
+	padding: ${i.spacing5} ${i.spacing5} ${i.spacing3} ${i.spacing5};
+`, U = f.span`
+	color: rgba(0, 34, 51, 0.5);
+	flex-shrink: 0;
+	animation: fade-in-down 0.15s ease-out;
+`;
+export {
+  ce as StatefulAssetList
+};
+//# sourceMappingURL=StatefulAssetList.js.map

package/StatefulAssetList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatefulAssetList.js","sources":["../../src/views/asset/StatefulAssetList.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { styled } from 'styled-components';\nimport { token } from '@bynder/design-system';\nimport { IconErrorOutline } from '@bynder/icons';\nimport { __ } from '@src/localization';\nimport { NoResults } from '@src/common/components/NoResults';\nimport { useAssetFilter } from '@src/filter/AssetFilterContext';\nimport { Connection } from '@src/api/graphql.types';\nimport { useConfig } from '@src/app-config/ConfigContext';\nimport { useSelectedAssetIds, useSelection } from '@src/select/SelectionContext';\nimport { Oops } from '@src/error-handling/Oops';\nimport { ActiveFilters } from '@src/filter/active-filters/ActiveFilters';\nimport { pluralize } from '@src/utils/text';\nimport { Asset } from './asset.type';\nimport { AssetList } from './AssetList';\nimport { DirectionSelect } from '@src/order/DirectionSelect';\nimport { FieldSelect } from '@src/order/FieldSelect';\nimport { Tooltip } from '@src/common/components/Tooltip';\nimport { useSearchStore } from '@src/store/useSearchStore';\nimport { useSimilaritySearchStore } from '@src/store/useSimilaritySearchStore';\n\ninterface DataValue {\n\tsearchAssets: {\n\t\tassets: {\n\t\t\ttotalCount: number;\n\t\t\tnodes: Asset[];\n\t\t};\n\t};\n}\n\ninterface Props {\n\tconnection: Connection<DataValue>;\n\ttotalCount?: number;\n\tshowActiveFilters?: boolean;\n}\n\nexport function StatefulAssetList(props: Props) {\n\tconst { data, isLoading, loadMore, hasNextPage, executeQuery } = props.connection;\n\tconst { setIsLoading, setSearch } = useSearchStore();\n\tconst config = useConfig();\n\tconst selectedAssetIds = useSelectedAssetIds();\n\tconst { selectAssets, toggleAssets, setAllAssets } = useSelection();\n\tconst assetFilterState = useAssetFilter();\n\tconst {\n\t\tisNLSSelected,\n\t\tNLSSearchText,\n\t\tisSelected: isSimilaritySearchSelected,\n\t} = useSimilaritySearchStore();\n\n\tuseEffect(() => {\n\t\tif (!isLoading) {\n\t\t\tsetIsLoading(false);\n\t\t}\n\t}, [isLoading]); // eslint-disable-line react-hooks/exhaustive-deps\n\n\tuseEffect(() => {\n\t\tif (data.tag !== 'Failure') {\n\t\t\tsetAllAssets(getAssetNodes(data));\n\t\t}\n\t}, [data]); // eslint-disable-line react-hooks/exhaustive-deps\n\n\tif (data.tag === 'Failure') {\n\t\treturn <Oops error={new Error(data.value)} onRetry={executeQuery} />;\n\t}\n\n\tconst totalCount = data.value?.searchAssets?.assets?.totalCount ?? props.totalCount;\n\n\tconst onReset = () => {\n\t\tassetFilterState.clear();\n\t\tsetSearch('assets', '');\n\t\tsetSearch('collection', '');\n\t};\n\n\tconst isAISearchPerformed = Boolean(\n\t\tisSimilaritySearchSelected || (isNLSSelected && NLSSearchText),\n\t);\n\n\treturn (\n\t\t<AssetList\n\t\t\tassets={getAssetNodes(data)}\n\t\t\tcount={totalCount}\n\t\t\tisLoading={isLoading}\n\t\t\tloadMore={loadMore}\n\t\t\thasNextPage={hasNextPage}\n\t\t\ttheme={config.theme}\n\t\t\tselectionMode={config.selectionMode}\n\t\t\tselectedAssetIds={selectedAssetIds}\n\t\t\tonSelect={selectAssets}\n\t\t\tonToggle={toggleAssets}\n\t\t\temptyStateElement={<NoResults onReset={onReset} />}\n\t\t>\n\t\t\t<StatefulAssetListContainer>\n\t\t\t\t{totalCount !== undefined && (\n\t\t\t\t\t<StatefulAssetListCount data-testid=\"assets-amount\" key={totalCount}>\n\t\t\t\t\t\t{pluralize(totalCount, __('{} asset'), __('{} assets'))}\n\t\t\t\t\t</StatefulAssetListCount>\n\t\t\t\t)}\n\n\t\t\t\t{props.showActiveFilters && <ActiveFilters />}\n\n\t\t\t\t<FieldSelect\n\t\t\t\t\toptions={\n\t\t\t\t\t\tisAISearchPerformed\n\t\t\t\t\t\t\t? ['NL_SEARCH']\n\t\t\t\t\t\t\t: ['CREATED_AT', 'PUBLISHED_AT', 'UPDATED_AT', 'NAME']\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<DirectionSelect nlSearch={isAISearchPerformed} />\n\t\t\t\t{isAISearchPerformed && (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\ttext=\"You cannot change the sorting criteria while a Visual Similarity filter\n\t\t\t\t\t\t\tis being applied\"\n\t\t\t\t\t\tposition=\"left\"\n\t\t\t\t\t\tmargin=\"left\"\n\t\t\t\t\t\tmarginAmount=\"spacing3\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<IconErrorOutline />\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t</StatefulAssetListContainer>\n\t\t</AssetList>\n\t);\n}\n\nfunction getAssetNodes(\n\tdata:\n\t\t| { tag: 'Loading'; value: undefined | null | DataValue }\n\t\t| { tag: 'Loaded'; value: DataValue },\n): { tag: 'Loading'; value: undefined | Asset[] } | { tag: 'Loaded'; value: Asset[] } {\n\tif (data.tag === 'Loading' && !data.value) {\n\t\treturn {\n\t\t\ttag: 'Loading',\n\t\t\tvalue: undefined,\n\t\t};\n\t} else if (data.tag === 'Loading') {\n\t\treturn {\n\t\t\ttag: data.tag,\n\t\t\tvalue: data.value?.searchAssets.assets.nodes,\n\t\t};\n\t}\n\n\treturn {\n\t\ttag: data.tag,\n\t\tvalue: data.value.searchAssets.assets.nodes,\n\t};\n}\n\nconst StatefulAssetListContainer = styled.div`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tz-index: 10;\n\tpadding: ${token.spacing5} ${token.spacing5} ${token.spacing3} ${token.spacing5};\n`;\n\nconst StatefulAssetListCount = styled.span`\n\tcolor: rgba(0, 34, 51, 0.5);\n\tflex-shrink: 0;\n\tanimation: fade-in-down 0.15s ease-out;\n`;\n"],"names":["StatefulAssetList","props","data","isLoading","loadMore","hasNextPage","executeQuery","setIsLoading","setSearch","useSearchStore","config","useConfig","selectedAssetIds","useSelectedAssetIds","selectAssets","toggleAssets","setAllAssets","useSelection","assetFilterState","useAssetFilter","isNLSSelected","NLSSearchText","isSimilaritySearchSelected","useSimilaritySearchStore","useEffect","getAssetNodes","jsx","Oops","totalCount","onReset","isAISearchPerformed","AssetList","NoResults","StatefulAssetListContainer","StatefulAssetListCount","pluralize","__","ActiveFilters","FieldSelect","DirectionSelect","Tooltip","IconErrorOutline","styled","token"],"mappings":"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"}

package/Styles.css.js

@@ -0,0 +1,5 @@
+const e = ':host{font-family:SourceSansPro,Source Sans Pro,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";--fade-in-down: fade-in-down .15s ease-out}.translate-y-2\\/4{-webkit-transform:translateY(-50%);transform:translateY(-50%)}@-webkit-keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fade-in-down{0%{opacity:0;-webkit-transform:translateY(-2px);transform:translateY(-2px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fade-in-down{0%{opacity:0;-webkit-transform:translateY(-2px);transform:translateY(-2px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes border-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes border-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes border-dash{0%{stroke-dasharray:1,100;stroke-dashoffset:0}50%{stroke-dasharray:80,100;stroke-dashoffset:-20}to{stroke-dasharray:80,100;stroke-dashoffset:-48}}@keyframes border-dash{0%{stroke-dasharray:1,100;stroke-dashoffset:0}50%{stroke-dasharray:80,100;stroke-dashoffset:-20}to{stroke-dasharray:80,100;stroke-dashoffset:-48}}.transition-shadow{-webkit-transition:-webkit-box-shadow .1s linear;transition:-webkit-box-shadow .1s linear;transition:box-shadow .1s linear;transition:box-shadow .1s linear,-webkit-box-shadow .1s linear}.transition-transform{-webkit-transition:-webkit-transform .6s cubic-bezier(.175,.885,.32,1.15);transition:-webkit-transform .6s cubic-bezier(.175,.885,.32,1.15);transition:transform .6s cubic-bezier(.175,.885,.32,1.15);transition:transform .6s cubic-bezier(.175,.885,.32,1.15),-webkit-transform .6s cubic-bezier(.175,.885,.32,1.15)}.cv-root{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#fff;font-family:SourceSansPro,Source Sans Pro,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;font-size:16px;color:#023c}.cv-root *,.cv-root *:before,.cv-root *:after{-webkit-box-sizing:inherit;box-sizing:inherit}.cv-container{overflow:hidden;width:100%;height:100%}.cv-container nav:last-of-type{-webkit-box-shadow:0 1px 0 0 rgba(0,34,51,.1),0 1px 6px 0 rgba(0,34,51,.1);box-shadow:0 1px #0022331a,0 1px 6px #0022331a}.cv-dropdown{position:fixed;border-width:1px;border-color:#0022331a;-webkit-animation:fade-in-down .15s ease-out;animation:fade-in-down .15s ease-out;margin-top:16px;border-radius:5px;-webkit-box-shadow:0 4px 10px 0 rgba(0,34,51,.1);box-shadow:0 4px 10px #0022331a;z-index:9999999;overflow-y:hidden;-webkit-transition:left .1s ease-out;transition:left .1s ease-out}.card-list{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-positive:1;flex-grow:1;-ms-flex-line-pack:start;align-content:flex-start;-ms-flex-pack:center;justify-content:center;position:relative;padding-left:8px;padding-right:8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.max-h-400{max-height:400px}.max-w-600{max-width:600px}.flip-y{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.spinner{-webkit-animation:border-rotate 1s linear infinite;animation:border-rotate 1s linear infinite;z-index:2;position:absolute;top:50%;left:50%;margin:-10px 0 0 -10px;width:20px;height:20px}.spinner circle{stroke:currentColor;stroke-linecap:round;-webkit-animation:border-dash 1.5s ease-in-out infinite;animation:border-dash 1.5s ease-in-out infinite}::-ms-clear{display:none}.fa-lg{line-height:1.05em}.z-a-lot{z-index:999999}.z-a-lot-more{z-index:9999999}button:focus{outline:revert}';
+export {
+  e as default
+};
+//# sourceMappingURL=Styles.css.js.map

package/Styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/SwitchNLS.js

@@ -0,0 +1,80 @@
+import { jsxs as l, jsx as i } from "react/jsx-runtime";
+import r from "styled-components";
+import { token as e, textStyles as s, TruncatedText as c, Switch as f } from "@bynder/design-system";
+import { IconSmart as m } from "@bynder/icons";
+import { __ as d } from "./index2.js";
+const C = ({ isNLSSearchOn: n, setIsNLSSearchOn: o }) => {
+  const a = (t) => {
+    t && t.currentTarget !== t.target || (t?.stopPropagation(), o(!n));
+  }, g = () => {
+    o(!n);
+  };
+  return /* @__PURE__ */ l(
+    p,
+    {
+      onClick: a,
+      onKeyDown: (t) => {
+        (t.key === "Enter" || t.key === " ") && (t.preventDefault(), a(t));
+      },
+      tabIndex: 0,
+      "data-testid": "switch-nls-container",
+      children: [
+        /* @__PURE__ */ i(h, { children: /* @__PURE__ */ i(m, {}) }),
+        /* @__PURE__ */ l(u, { id: "labelId", children: [
+          /* @__PURE__ */ i(c, { children: d("Use natural language search") }),
+          /* @__PURE__ */ i(x, { children: /* @__PURE__ */ i(c, { children: d("Find images by describing them") }) })
+        ] }),
+        /* @__PURE__ */ i(b, { children: /* @__PURE__ */ i(
+          f,
+          {
+            isChecked: n,
+            "aria-labelledby": "labelId",
+            onChange: g
+          }
+        ) })
+      ]
+    }
+  );
+}, p = r.div`
+	display: flex;
+
+	align-items: flex-start;
+	margin: ${e.spacing3};
+	padding: ${e.spacing3};
+	background-color: #f3f2fd;
+	border-radius: ${e.radiusLarge};
+
+	&:hover {
+		background-color: #eeedfc;
+		cursor: pointer;
+	}
+
+	&:active {
+		background-color: #f3f2fd;
+	}
+`, h = r.div`
+	flex: none;
+	margin-right: ${e.spacing4};
+	color: ${e.purple500};
+`, u = r.div`
+	${s.uiTextM}
+
+	flex: 1;
+	min-width: 0;
+	font-weight: 400;
+	color: #031026;
+`, x = r.div`
+	${s.uiTextS}
+
+	color: ${e.colorTextMuted};
+`, b = r.div`
+	display: flex;
+	flex: none;
+	gap: ${e.spacing3};
+	align-items: center;
+	margin-left: ${e.spacing4};
+`;
+export {
+  C as SwitchNLS
+};
+//# sourceMappingURL=SwitchNLS.js.map

package/SwitchNLS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchNLS.js","sources":["../../src/search/SwitchNLS.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Switch, textStyles, token, TruncatedText } from '@bynder/design-system';\nimport { IconSmart } from '@bynder/icons';\nimport { __ } from '@src/localization';\n\ninterface Props {\n\tisNLSSearchOn: boolean;\n\tsetIsNLSSearchOn: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nexport const SwitchNLS = ({ isNLSSearchOn, setIsNLSSearchOn }: Props) => {\n\tconst toggleNLSAndFocusSpotlight = (event?: React.MouseEvent | React.KeyboardEvent) => {\n\t\t// Only proceed if the click was directly on the container, not on its children (especially the Switch)\n\t\tif (event && event.currentTarget !== event.target) {\n\t\t\treturn;\n\t\t}\n\n\t\tevent?.stopPropagation();\n\t\tsetIsNLSSearchOn(!isNLSSearchOn);\n\t};\n\n\tconst handleSwitchChange = () => {\n\t\tsetIsNLSSearchOn(!isNLSSearchOn);\n\t};\n\n\treturn (\n\t\t<ItemStyled\n\t\t\tonClick={toggleNLSAndFocusSpotlight}\n\t\t\tonKeyDown={(event) => {\n\t\t\t\tif (event.key === 'Enter' || event.key === ' ') {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\ttoggleNLSAndFocusSpotlight(event);\n\t\t\t\t}\n\t\t\t}}\n\t\t\ttabIndex={0}\n\t\t\tdata-testid=\"switch-nls-container\"\n\t\t>\n\t\t\t<ThumbnailContainer>\n\t\t\t\t<IconSmart />\n\t\t\t</ThumbnailContainer>\n\n\t\t\t<Content id=\"labelId\">\n\t\t\t\t<TruncatedText>{__('Use natural language search')}</TruncatedText>\n\t\t\t\t<Subtext>\n\t\t\t\t\t<TruncatedText>{__('Find images by describing them')}</TruncatedText>\n\t\t\t\t</Subtext>\n\t\t\t</Content>\n\n\t\t\t<RightElements>\n\t\t\t\t<Switch\n\t\t\t\t\tisChecked={isNLSSearchOn}\n\t\t\t\t\taria-labelledby=\"labelId\"\n\t\t\t\t\tonChange={handleSwitchChange}\n\t\t\t\t/>\n\t\t\t</RightElements>\n\t\t</ItemStyled>\n\t);\n};\n\nconst ItemStyled = styled.div`\n\tdisplay: flex;\n\n\talign-items: flex-start;\n\tmargin: ${token.spacing3};\n\tpadding: ${token.spacing3};\n\tbackground-color: #f3f2fd;\n\tborder-radius: ${token.radiusLarge};\n\n\t&:hover {\n\t\tbackground-color: #eeedfc;\n\t\tcursor: pointer;\n\t}\n\n\t&:active {\n\t\tbackground-color: #f3f2fd;\n\t}\n`;\n\nconst ThumbnailContainer = styled.div`\n\tflex: none;\n\tmargin-right: ${token.spacing4};\n\tcolor: ${token.purple500};\n`;\n\nconst Content = styled.div`\n\t${textStyles.uiTextM}\n\n\tflex: 1;\n\tmin-width: 0;\n\tfont-weight: 400;\n\tcolor: #031026;\n`;\n\nconst Subtext = styled.div<{ $isDisabled?: boolean }>`\n\t${textStyles.uiTextS}\n\n\tcolor: ${token.colorTextMuted};\n`;\n\nconst RightElements = styled.div`\n\tdisplay: flex;\n\tflex: none;\n\tgap: ${token.spacing3};\n\talign-items: center;\n\tmargin-left: ${token.spacing4};\n`;\n"],"names":["SwitchNLS","isNLSSearchOn","setIsNLSSearchOn","toggleNLSAndFocusSpotlight","event","handleSwitchChange","jsxs","ItemStyled","jsx","ThumbnailContainer","IconSmart","Content","TruncatedText","__","Subtext","RightElements","Switch","styled","token","textStyles"],"mappings":";;;;;AAWO,MAAMA,IAAY,CAAC,EAAE,eAAAC,GAAe,kBAAAC,QAA8B;AACxE,QAAMC,IAA6B,CAACC,MAAmD;AAEtF,IAAIA,KAASA,EAAM,kBAAkBA,EAAM,WAI3CA,GAAO,gBAAA,GACPF,EAAiB,CAACD,CAAa;AAAA,EAChC,GAEMI,IAAqB,MAAM;AAChC,IAAAH,EAAiB,CAACD,CAAa;AAAA,EAChC;AAEA,SACC,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,SAASJ;AAAA,MACT,WAAW,CAACC,MAAU;AACrB,SAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SAC1CA,EAAM,eAAA,GACND,EAA2BC,CAAK;AAAA,MAElC;AAAA,MACA,UAAU;AAAA,MACV,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAI,EAACC,GAAA,EACA,UAAA,gBAAAD,EAACE,GAAA,CAAA,CAAU,GACZ;AAAA,QAEA,gBAAAJ,EAACK,GAAA,EAAQ,IAAG,WACX,UAAA;AAAA,UAAA,gBAAAH,EAACI,GAAA,EAAe,UAAAC,EAAG,6BAA6B,EAAA,CAAE;AAAA,4BACjDC,GAAA,EACA,UAAA,gBAAAN,EAACI,KAAe,UAAAC,EAAG,gCAAgC,GAAE,EAAA,CACtD;AAAA,QAAA,GACD;AAAA,0BAECE,GAAA,EACA,UAAA,gBAAAP;AAAA,UAACQ;AAAA,UAAA;AAAA,YACA,WAAWf;AAAA,YACX,mBAAgB;AAAA,YAChB,UAAUI;AAAA,UAAA;AAAA,QAAA,EACX,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGH,GAEME,IAAaU,EAAO;AAAA;AAAA;AAAA;AAAA,WAIfC,EAAM,QAAQ;AAAA,YACbA,EAAM,QAAQ;AAAA;AAAA,kBAERA,EAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAY7BT,IAAqBQ,EAAO;AAAA;AAAA,iBAEjBC,EAAM,QAAQ;AAAA,UACrBA,EAAM,SAAS;AAAA,GAGnBP,IAAUM,EAAO;AAAA,GACpBE,EAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQfL,IAAUG,EAAO;AAAA,GACpBE,EAAW,OAAO;AAAA;AAAA,UAEXD,EAAM,cAAc;AAAA,GAGxBH,IAAgBE,EAAO;AAAA;AAAA;AAAA,QAGrBC,EAAM,QAAQ;AAAA;AAAA,gBAENA,EAAM,QAAQ;AAAA;"}

package/TagItem.js

@@ -0,0 +1,38 @@
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { styled as n } from "styled-components";
+import { token as s } from "@bynder/design-system";
+import { Chip as l } from "./Chip.js";
+import { useAssetFilter as r } from "./AssetFilterContext.js";
+function x(t) {
+  const e = r(), i = e.tags.includes(t.tag.name);
+  function o() {
+    i ? e.removeTag(t.tag.name) : t.isLoading || e.addTag(t.tag.name);
+  }
+  return /* @__PURE__ */ m(
+    l,
+    {
+      loading: t.isLoading,
+      active: i,
+      onClick: o,
+      "data-testid": "tag-item",
+      children: [
+        /* @__PURE__ */ a(g, { children: t.tag.name }),
+        /* @__PURE__ */ a(c, { children: t.tag.assetCount })
+      ]
+    },
+    t.tag.id
+  );
+}
+const g = n.span`
+	max-with: 128px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+`, c = n.span`
+	color: rgba(0, 34, 51, 0.5);
+	margin-left: ${s.spacing3};
+`;
+export {
+  x as TagItem
+};
+//# sourceMappingURL=TagItem.js.map

package/TagItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagItem.js","sources":["../../src/filter/filters/tags/TagItem.tsx"],"sourcesContent":["import React from 'react';\nimport { styled } from 'styled-components';\nimport { token } from '@bynder/design-system';\nimport { Chip } from '../../../common/components/Chip';\nimport { useAssetFilter } from '../../AssetFilterContext';\nimport { Tag } from '../metaproperty/MetapropertyFilterContent';\n\nexport function TagItem(props: { tag: Tag; isLoading: boolean }) {\n\tconst assetFilterState = useAssetFilter();\n\n\tconst active = assetFilterState.tags.includes(props.tag.name);\n\n\tfunction handleClick() {\n\t\tif (active) {\n\t\t\tassetFilterState.removeTag(props.tag.name);\n\t\t} else if (!props.isLoading) {\n\t\t\tassetFilterState.addTag(props.tag.name);\n\t\t}\n\t}\n\n\treturn (\n\t\t<Chip\n\t\t\tkey={props.tag.id}\n\t\t\tloading={props.isLoading}\n\t\t\tactive={active}\n\t\t\tonClick={handleClick}\n\t\t\tdata-testid=\"tag-item\"\n\t\t>\n\t\t\t<ChipName>{props.tag.name}</ChipName>\n\t\t\t<ChipCount>{props.tag.assetCount}</ChipCount>\n\t\t</Chip>\n\t);\n}\n\nconst ChipName = styled.span`\n\tmax-with: 128px;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n`;\n\nconst ChipCount = styled.span`\n\tcolor: rgba(0, 34, 51, 0.5);\n\tmargin-left: ${token.spacing3};\n`;\n"],"names":["TagItem","props","assetFilterState","useAssetFilter","active","handleClick","jsxs","Chip","jsx","ChipName","ChipCount","styled","token"],"mappings":";;;;;AAOO,SAASA,EAAQC,GAAyC;AAChE,QAAMC,IAAmBC,EAAA,GAEnBC,IAASF,EAAiB,KAAK,SAASD,EAAM,IAAI,IAAI;AAE5D,WAASI,IAAc;AACtB,IAAID,IACHF,EAAiB,UAAUD,EAAM,IAAI,IAAI,IAC9BA,EAAM,aACjBC,EAAiB,OAAOD,EAAM,IAAI,IAAI;AAAA,EAExC;AAEA,SACC,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MAEA,SAASN,EAAM;AAAA,MACf,QAAAG;AAAA,MACA,SAASC;AAAA,MACT,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAG,EAACC,GAAA,EAAU,UAAAR,EAAM,IAAI,MAAK;AAAA,QAC1B,gBAAAO,EAACE,GAAA,EAAW,UAAAT,EAAM,IAAI,WAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,IAP5BA,EAAM,IAAI;AAAA,EAAA;AAUlB;AAEA,MAAMQ,IAAWE,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOlBD,IAAYC,EAAO;AAAA;AAAA,gBAETC,EAAM,QAAQ;AAAA;"}