@bynder/compact-view 5.1.3 → 5.2.0

package/ActiveFilter.js

@@ -0,0 +1,33 @@
+import { jsx as e } from "react/jsx-runtime";
+import r from "styled-components";
+import { token as i, Chip as o } from "@bynder/design-system";
+function l(t) {
+  return /* @__PURE__ */ e(
+    n,
+    {
+      icon: t.icon,
+      size: "s",
+      onDelete: t.onClick,
+      "data-testid": `selected-filter:${t.title}`,
+      children: t.title
+    }
+  );
+}
+const n = r(o)`
+	background-color: transparent;
+	margin-right: ${i.spacing3};
+	border: 1px solid ${i.gray50};
+	box-shadow: 0 1px 6px -2px rgba(0, 34, 51, 0.1);
+
+	div {
+		svg {
+			width: 20px;
+			height: 20px;
+			margin-right: ${i.spacing2};
+		}
+	}
+`;
+export {
+  l as ActiveFilter
+};
+//# sourceMappingURL=ActiveFilter.js.map

package/ActiveFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveFilter.js","sources":["../../src/filter/active-filters/ActiveFilter.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Chip, token } from '@bynder/design-system';\n\nexport function ActiveFilter(props: {\n\tonClick?: () => void;\n\ttitle: string;\n\ticon?: React.ReactNode;\n}) {\n\treturn (\n\t\t<StyledChip\n\t\t\ticon={props.icon}\n\t\t\tsize=\"s\"\n\t\t\tonDelete={props.onClick}\n\t\t\tdata-testid={`selected-filter:${props.title}`}\n\t\t>\n\t\t\t{props.title}\n\t\t</StyledChip>\n\t);\n}\n\nconst StyledChip = styled(Chip)`\n\tbackground-color: transparent;\n\tmargin-right: ${token.spacing3};\n\tborder: 1px solid ${token.gray50};\n\tbox-shadow: 0 1px 6px -2px rgba(0, 34, 51, 0.1);\n\n\tdiv {\n\t\tsvg {\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t\tmargin-right: ${token.spacing2};\n\t\t}\n\t}\n`;\n"],"names":["ActiveFilter","props","jsx","StyledChip","styled","Chip","token"],"mappings":";;;AAIO,SAASA,EAAaC,GAI1B;AACF,SACC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,MAAMF,EAAM;AAAA,MACZ,MAAK;AAAA,MACL,UAAUA,EAAM;AAAA,MAChB,eAAa,mBAAmBA,EAAM,KAAK;AAAA,MAE1C,UAAAA,EAAM;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAME,IAAaC,EAAOC,CAAI;AAAA;AAAA,iBAEbC,EAAM,QAAQ;AAAA,qBACVA,EAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAOdA,EAAM,QAAQ;AAAA;AAAA;AAAA;"}

package/ActiveFilters.js

@@ -0,0 +1,81 @@
+import { jsx as i, jsxs as f } from "react/jsx-runtime";
+import h from "styled-components";
+import { Button as v } from "@bynder/design-system";
+import { assetTypeToString as y, getAssetTypeIcon as u } from "./asset.type.js";
+import { HorizontalScroll as x } from "./HorizontalScroll.js";
+import { useAssetFilter as A } from "./AssetFilterContext.js";
+import { ActiveFilter as s } from "./ActiveFilter.js";
+import { __ as d } from "./index2.js";
+import { useSimilaritySearchStore as g } from "./useSimilaritySearchStore.js";
+function B() {
+  const t = A(), {
+    isSelected: o,
+    setIsSelected: l,
+    isNLSSelected: c,
+    setIsNLSSelected: n,
+    NLSSearchText: a,
+    setNLSSearchText: m
+  } = g(), S = Object.values(t.selectedSmartfilterOptions || {}), p = S.length === 0 && t.assetTypes.length === 0 && t.tags.length === 0 && !o && !(c && a) ? void 0 : /* @__PURE__ */ i(k, { children: /* @__PURE__ */ i(
+    v,
+    {
+      variant: "clean",
+      isSmall: !0,
+      onClick: () => {
+        t.clear(), l(!1), n(!1), m(void 0);
+      },
+      children: d("Clear filters")
+    }
+  ) });
+  return /* @__PURE__ */ i("div", { "data-testid": "selected-filter-list", children: /* @__PURE__ */ f(x, { isActiveFilter: !0, static: p, children: [
+    t.assetTypes.map((e) => {
+      const r = u(e);
+      return /* @__PURE__ */ i(
+        s,
+        {
+          onClick: () => t.removeAssetType(e),
+          title: y(e),
+          icon: /* @__PURE__ */ i(r, {})
+        },
+        e
+      );
+    }),
+    S.map(
+      (e) => Object.values(e).map((r) => /* @__PURE__ */ i(
+        s,
+        {
+          onClick: () => t.removeSmartfilterOption(
+            r.metapropertyName,
+            r.id
+          ),
+          title: r.label
+        },
+        r.id
+      ))
+    ),
+    t.tags.map((e) => /* @__PURE__ */ i(
+      s,
+      {
+        onClick: () => t.removeTag(e),
+        title: e
+      },
+      e
+    )),
+    (o || c && a) && /* @__PURE__ */ i(
+      s,
+      {
+        onClick: () => {
+          l(!1), n(!1), m(void 0);
+        },
+        title: d("Show similar")
+      }
+    )
+  ] }) });
+}
+const k = h.div`
+	flex-shrink: 0;
+	animation: var(--fade-in-down);
+`;
+export {
+  B as ActiveFilters
+};
+//# sourceMappingURL=ActiveFilters.js.map

package/ActiveFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveFilters.js","sources":["../../src/filter/active-filters/ActiveFilters.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@bynder/design-system';\n\nimport { assetTypeToString, getAssetTypeIcon } from '@src/views/asset/asset.type';\nimport { HorizontalScroll } from '@src/common/components/HorizontalScroll';\nimport { useAssetFilter } from '../AssetFilterContext';\nimport { ActiveFilter } from './ActiveFilter';\nimport { __ } from '@src/localization';\nimport { useSimilaritySearchStore } from '@src/store/useSimilaritySearchStore';\n\nexport function ActiveFilters() {\n\tconst assetFilterState = useAssetFilter();\n\tconst {\n\t\tisSelected: isSimilaritySearchSelected,\n\t\tsetIsSelected: setIsSimilaritySearchSelected,\n\t\tisNLSSelected,\n\t\tsetIsNLSSelected,\n\t\tNLSSearchText,\n\t\tsetNLSSearchText,\n\t} = useSimilaritySearchStore();\n\n\tconst smartfilterOptions = Object.values(assetFilterState.selectedSmartfilterOptions || {});\n\n\tconst isEmpty =\n\t\tsmartfilterOptions.length === 0 &&\n\t\tassetFilterState.assetTypes.length === 0 &&\n\t\tassetFilterState.tags.length === 0 &&\n\t\t!isSimilaritySearchSelected &&\n\t\t!(isNLSSelected && NLSSearchText);\n\n\tconst fixedButton = !isEmpty ? (\n\t\t<AnimationWrapper>\n\t\t\t<Button\n\t\t\t\tvariant=\"clean\"\n\t\t\t\tisSmall\n\t\t\t\tonClick={() => {\n\t\t\t\t\tassetFilterState.clear();\n\t\t\t\t\tsetIsSimilaritySearchSelected(false);\n\t\t\t\t\tsetIsNLSSelected(false);\n\t\t\t\t\tsetNLSSearchText(undefined);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{__('Clear filters')}\n\t\t\t</Button>\n\t\t</AnimationWrapper>\n\t) : undefined;\n\n\treturn (\n\t\t<div data-testid=\"selected-filter-list\">\n\t\t\t<HorizontalScroll isActiveFilter static={fixedButton}>\n\t\t\t\t{assetFilterState.assetTypes.map((assetType) => {\n\t\t\t\t\tconst Icon = getAssetTypeIcon(assetType);\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ActiveFilter\n\t\t\t\t\t\t\tkey={assetType}\n\t\t\t\t\t\t\tonClick={() => assetFilterState.removeAssetType(assetType)}\n\t\t\t\t\t\t\ttitle={assetTypeToString(assetType)}\n\t\t\t\t\t\t\ticon={<Icon />}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\n\t\t\t\t{smartfilterOptions.map((option) =>\n\t\t\t\t\tObject.values(option).map((value) => (\n\t\t\t\t\t\t<ActiveFilter\n\t\t\t\t\t\t\tkey={value.id}\n\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\tassetFilterState.removeSmartfilterOption(\n\t\t\t\t\t\t\t\t\tvalue.metapropertyName,\n\t\t\t\t\t\t\t\t\tvalue.id,\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ttitle={value.label}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)),\n\t\t\t\t)}\n\n\t\t\t\t{assetFilterState.tags.map((tag) => (\n\t\t\t\t\t<ActiveFilter\n\t\t\t\t\t\tkey={tag}\n\t\t\t\t\t\tonClick={() => assetFilterState.removeTag(tag)}\n\t\t\t\t\t\ttitle={tag}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\n\t\t\t\t{(isSimilaritySearchSelected || (isNLSSelected && NLSSearchText)) && (\n\t\t\t\t\t<ActiveFilter\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tsetIsSimilaritySearchSelected(false);\n\t\t\t\t\t\t\tsetIsNLSSelected(false);\n\t\t\t\t\t\t\tsetNLSSearchText(undefined);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ttitle={__('Show similar')}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</HorizontalScroll>\n\t\t</div>\n\t);\n}\n\nconst AnimationWrapper = styled.div`\n\tflex-shrink: 0;\n\tanimation: var(--fade-in-down);\n`;\n"],"names":["ActiveFilters","assetFilterState","useAssetFilter","isSimilaritySearchSelected","setIsSimilaritySearchSelected","isNLSSelected","setIsNLSSelected","NLSSearchText","setNLSSearchText","useSimilaritySearchStore","smartfilterOptions","fixedButton","jsx","AnimationWrapper","Button","HorizontalScroll","assetType","Icon","getAssetTypeIcon","ActiveFilter","assetTypeToString","option","value","tag","__","styled"],"mappings":";;;;;;;;;AAWO,SAASA,IAAgB;AAC/B,QAAMC,IAAmBC,EAAA,GACnB;AAAA,IACL,YAAYC;AAAA,IACZ,eAAeC;AAAA,IACf,eAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,kBAAAC;AAAA,EAAA,IACGC,EAAA,GAEEC,IAAqB,OAAO,OAAOT,EAAiB,8BAA8B,CAAA,CAAE,GASpFU,IANLD,EAAmB,WAAW,KAC9BT,EAAiB,WAAW,WAAW,KACvCA,EAAiB,KAAK,WAAW,KACjC,CAACE,KACD,EAAEE,KAAiBE,KAiBhB,SAdH,gBAAAK,EAACC,GAAA,EACA,UAAA,gBAAAD;AAAA,IAACE;AAAA,IAAA;AAAA,MACA,SAAQ;AAAA,MACR,SAAO;AAAA,MACP,SAAS,MAAM;AACd,QAAAb,EAAiB,MAAA,GACjBG,EAA8B,EAAK,GACnCE,EAAiB,EAAK,GACtBE,EAAiB,MAAS;AAAA,MAC3B;AAAA,MAEC,YAAG,eAAe;AAAA,IAAA;AAAA,EAAA,GAErB;AAGD,SACC,gBAAAI,EAAC,SAAI,eAAY,wBAChB,4BAACG,GAAA,EAAiB,gBAAc,IAAC,QAAQJ,GACvC,UAAA;AAAA,IAAAV,EAAiB,WAAW,IAAI,CAACe,MAAc;AAC/C,YAAMC,IAAOC,EAAiBF,CAAS;AAEvC,aACC,gBAAAJ;AAAA,QAACO;AAAA,QAAA;AAAA,UAEA,SAAS,MAAMlB,EAAiB,gBAAgBe,CAAS;AAAA,UACzD,OAAOI,EAAkBJ,CAAS;AAAA,UAClC,wBAAOC,GAAA,CAAA,CAAK;AAAA,QAAA;AAAA,QAHPD;AAAA,MAAA;AAAA,IAMR,CAAC;AAAA,IAEAN,EAAmB;AAAA,MAAI,CAACW,MACxB,OAAO,OAAOA,CAAM,EAAE,IAAI,CAACC,MAC1B,gBAAAV;AAAA,QAACO;AAAA,QAAA;AAAA,UAEA,SAAS,MACRlB,EAAiB;AAAA,YAChBqB,EAAM;AAAA,YACNA,EAAM;AAAA,UAAA;AAAA,UAGR,OAAOA,EAAM;AAAA,QAAA;AAAA,QAPRA,EAAM;AAAA,MAAA,CASZ;AAAA,IAAA;AAAA,IAGDrB,EAAiB,KAAK,IAAI,CAACsB,MAC3B,gBAAAX;AAAA,MAACO;AAAA,MAAA;AAAA,QAEA,SAAS,MAAMlB,EAAiB,UAAUsB,CAAG;AAAA,QAC7C,OAAOA;AAAA,MAAA;AAAA,MAFFA;AAAA,IAAA,CAIN;AAAA,KAECpB,KAA+BE,KAAiBE,MACjD,gBAAAK;AAAA,MAACO;AAAA,MAAA;AAAA,QACA,SAAS,MAAM;AACd,UAAAf,EAA8B,EAAK,GACnCE,EAAiB,EAAK,GACtBE,EAAiB,MAAS;AAAA,QAC3B;AAAA,QACA,OAAOgB,EAAG,cAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EACzB,EAAA,CAEF,EAAA,CACD;AAEF;AAEA,MAAMX,IAAmBY,EAAO;AAAA;AAAA;AAAA;"}

package/AddMedia.js

@@ -0,0 +1,90 @@
+import { jsxs as x, Fragment as L, jsx as c } from "react/jsx-runtime";
+import { useRef as C, useState as b, useEffect as A } from "react";
+import { Button as E } from "@bynder/design-system";
+import { useConfig as M } from "./ConfigContext.js";
+import { useAuth as O } from "./LoginContext.js";
+import { useSelection as T } from "./SelectionContext.js";
+import { FileSelector as j } from "./FileSelector.js";
+import { getAsset as D } from "./getAsset.js";
+import { getAssets as N } from "./getAssets.js";
+import { isErr as k } from "./result.type.js";
+import { logger as q } from "./logger.js";
+import { ButtonAction as B } from "./ButtonAction.js";
+import { convertAssetIdToBase64 as G } from "./base64Converter.js";
+import { useSimilaritySearchStore as p } from "./useSimilaritySearchStore.js";
+function tt(t) {
+  const { assetFieldSelection: r, onSuccess: i, selectionMode: u, noCache: f } = M(), {
+    isSelected: d,
+    NLSSearchText: h,
+    isNLSSelected: g
+  } = p(), { preselectedAssetIds: F } = T(), m = O(), l = C(!0), [s, a] = b(
+    u === "SingleSelectFile" ? { status: "WaitingForFileSelection" } : { status: "Ready" }
+  );
+  function y(e) {
+    a(e === void 0 ? { status: "WaitingForFileSelection" } : { status: "ReadyWithFile", file: e });
+  }
+  A(() => () => {
+    l.current = !1;
+  }, []);
+  function v() {
+    const e = s.status === "ReadyWithFile" ? s.file : void 0;
+    a({ status: "Loading" }), u !== "MultiSelect" && t.selection[0]?.type === "asset" ? D({
+      assetId: d || h && g ? G(t.selection[0].value.id) : t.selection[0].value.id,
+      auth: m,
+      assetFieldSelection: r,
+      noCache: f
+    }).then((n) => {
+      S(n, e);
+    }) : N({
+      selectedItems: t.selection,
+      auth: m,
+      assetFieldSelection: r,
+      noCache: f,
+      isSimilaritySearchEnabled: d
+    }).then((n) => {
+      S(n, e);
+    });
+  }
+  function S(e, n) {
+    if (k(e)) {
+      a({ status: "Error" });
+      return;
+    }
+    try {
+      const o = Array.isArray(e.value) ? e.value : [e.value];
+      o.sort((R, W) => w(R, W, F)), i(o, { selectedFile: n });
+    } catch (o) {
+      q.error(o);
+    }
+    l.current && (a({ status: "Done" }), setTimeout(() => {
+      l.current && a((o) => o.status === "ReadyWithFile" ? o : n ? { status: "ReadyWithFile", file: n } : { status: "Ready" });
+    }, 2e3));
+  }
+  return /* @__PURE__ */ x(L, { children: [
+    u === "SingleSelectFile" && t.selection[0]?.type === "asset" && /* @__PURE__ */ c(j, { asset: t.selection[0].value, onChange: y }),
+    /* @__PURE__ */ c(
+      E,
+      {
+        variant: "primary",
+        isDisabled: s.status === "Loading" || s.status === "WaitingForFileSelection",
+        onClick: v,
+        "data-testid": "add-button",
+        isLoading: s.status === "Loading",
+        children: /* @__PURE__ */ c(
+          B,
+          {
+            status: s.status,
+            numberOfSelectedItems: t.selection.length
+          }
+        )
+      }
+    )
+  ] });
+}
+function w(t, r, i) {
+  return i ? !i.includes(t.id) && i.includes(r.id) ? 1 : i.includes(t.id) && !i.includes(r.id) ? -1 : i.indexOf(t.id) - i.indexOf(r.id) : 0;
+}
+export {
+  tt as AddMedia
+};
+//# sourceMappingURL=AddMedia.js.map

package/AddMedia.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddMedia.js","sources":["../../src/select/add-media/AddMedia.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Button } from '@bynder/design-system';\n\nimport { useConfig } from '../../app-config/ConfigContext';\nimport { useAuth } from '../../login/LoginContext';\nimport { SelectedItem, useSelection } from '../SelectionContext';\nimport { FileSelector } from '../FileSelector';\nimport { File } from '../file.type';\nimport { Asset, getAsset } from '../../api/getAsset';\nimport { getAssets } from '../../api/getAssets';\nimport { isErr, Result } from '../../auth/result.type';\nimport { logger } from '../../utils/logger';\nimport { ButtonAction } from './ButtonAction';\nimport { State } from './addMedia.type';\nimport { convertAssetIdToBase64 } from '@src/utils/base64Converter';\nimport { useSimilaritySearchStore } from '@src/store/useSimilaritySearchStore';\n\ninterface Props {\n\tselection: SelectedItem[];\n}\n\nexport function AddMedia(props: Props) {\n\tconst { assetFieldSelection, onSuccess, selectionMode, noCache } = useConfig();\n\tconst {\n\t\tisSelected: isSimilaritySearchEnabled,\n\t\tNLSSearchText,\n\t\tisNLSSelected,\n\t} = useSimilaritySearchStore();\n\tconst { preselectedAssetIds } = useSelection();\n\tconst auth = useAuth();\n\tconst isMounted = useRef(true);\n\n\tconst [state, setState] = useState<State>(\n\t\tselectionMode === 'SingleSelectFile'\n\t\t\t? { status: 'WaitingForFileSelection' }\n\t\t\t: { status: 'Ready' },\n\t);\n\n\tfunction handleChangeFile(file: File | undefined) {\n\t\tif (file === undefined) {\n\t\t\tsetState({ status: 'WaitingForFileSelection' });\n\t\t} else {\n\t\t\tsetState({ status: 'ReadyWithFile', file });\n\t\t}\n\t}\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tisMounted.current = false;\n\t\t};\n\t}, []);\n\n\tfunction handleGetAssets() {\n\t\tconst selectedFile = state.status === 'ReadyWithFile' ? state.file : undefined;\n\t\tsetState({ status: 'Loading' });\n\n\t\tif (selectionMode !== 'MultiSelect' && props.selection[0]?.type === 'asset') {\n\t\t\tgetAsset({\n\t\t\t\tassetId:\n\t\t\t\t\tisSimilaritySearchEnabled || (NLSSearchText && isNLSSelected)\n\t\t\t\t\t\t? convertAssetIdToBase64(props.selection[0].value.id)\n\t\t\t\t\t\t: props.selection[0].value.id,\n\t\t\t\tauth,\n\t\t\t\tassetFieldSelection,\n\t\t\t\tnoCache,\n\t\t\t}).then((result) => {\n\t\t\t\tsetStateAfterRequest(result, selectedFile);\n\t\t\t});\n\t\t} else {\n\t\t\tgetAssets({\n\t\t\t\tselectedItems: props.selection,\n\t\t\t\tauth,\n\t\t\t\tassetFieldSelection,\n\t\t\t\tnoCache,\n\t\t\t\tisSimilaritySearchEnabled,\n\t\t\t}).then((result) => {\n\t\t\t\tsetStateAfterRequest(result, selectedFile);\n\t\t\t});\n\t\t}\n\t}\n\n\tfunction setStateAfterRequest(result: Result<Asset | Asset[], string>, selectedFile?: File) {\n\t\tif (isErr(result)) {\n\t\t\tsetState({ status: 'Error' });\n\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tconst value = Array.isArray(result.value) ? result.value : [result.value];\n\n\t\t\t// Keep the order of preselected assets in the return result\n\t\t\tvalue.sort((a, b) => sortAssets(a, b, preselectedAssetIds));\n\n\t\t\tonSuccess(value, { selectedFile });\n\t\t} catch (e) {\n\t\t\tlogger.error(e);\n\t\t}\n\n\t\t// onSuccess might close compact view, so only set state\n\t\t// if still mounted.\n\t\tif (isMounted.current) {\n\t\t\tsetState({ status: 'Done' });\n\t\t\tsetTimeout(() => {\n\t\t\t\tif (isMounted.current) {\n\t\t\t\t\tsetState((prevState) => {\n\t\t\t\t\t\tif (prevState.status === 'ReadyWithFile') {\n\t\t\t\t\t\t\treturn prevState;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn selectedFile\n\t\t\t\t\t\t\t? { status: 'ReadyWithFile', file: selectedFile }\n\t\t\t\t\t\t\t: { status: 'Ready' };\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}, 2000);\n\t\t}\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{/* The second part of this condition should always be true. The footer is only shown\n\t\t\t * if there is something selected, and only assets can be selected in SingleSelectFile\n\t\t\t * mode. The condition is only included so Typescript knows what type the selected\n\t\t\t * item is. */}\n\t\t\t{selectionMode === 'SingleSelectFile' && props.selection[0]?.type === 'asset' && (\n\t\t\t\t<FileSelector asset={props.selection[0].value} onChange={handleChangeFile} />\n\t\t\t)}\n\n\t\t\t<Button\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tisDisabled={\n\t\t\t\t\tstate.status === 'Loading' || state.status === 'WaitingForFileSelection'\n\t\t\t\t}\n\t\t\t\tonClick={handleGetAssets}\n\t\t\t\tdata-testid=\"add-button\"\n\t\t\t\tisLoading={state.status === 'Loading'}\n\t\t\t>\n\t\t\t\t<ButtonAction\n\t\t\t\t\tstatus={state.status}\n\t\t\t\t\tnumberOfSelectedItems={props.selection.length}\n\t\t\t\t/>\n\t\t\t</Button>\n\t\t</>\n\t);\n}\n\nfunction sortAssets(assetA: Asset, assetB: Asset, preselectedAssetIds): number {\n\tif (!preselectedAssetIds) return 0;\n\n\tif (!preselectedAssetIds.includes(assetA.id) && preselectedAssetIds.includes(assetB.id)) {\n\t\treturn 1;\n\t}\n\n\tif (preselectedAssetIds.includes(assetA.id) && !preselectedAssetIds.includes(assetB.id)) {\n\t\treturn -1;\n\t}\n\n\treturn preselectedAssetIds.indexOf(assetA.id) - preselectedAssetIds.indexOf(assetB.id);\n}\n"],"names":["AddMedia","props","assetFieldSelection","onSuccess","selectionMode","noCache","useConfig","isSimilaritySearchEnabled","NLSSearchText","isNLSSelected","useSimilaritySearchStore","preselectedAssetIds","useSelection","auth","useAuth","isMounted","useRef","state","setState","useState","handleChangeFile","file","useEffect","handleGetAssets","selectedFile","getAsset","convertAssetIdToBase64","result","setStateAfterRequest","getAssets","isErr","value","a","b","sortAssets","e","logger","prevState","jsxs","Fragment","jsx","FileSelector","Button","ButtonAction","assetA","assetB"],"mappings":"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"}

package/Advanced.js

@@ -0,0 +1,66 @@
+import { jsx as t, jsxs as c, Fragment as d } from "react/jsx-runtime";
+import { styled as o } from "styled-components";
+import { token as i } from "@bynder/design-system";
+import { IconAdjust as g } from "@bynder/icons";
+import { Dropdown as p } from "./Dropdown.js";
+import { __ as m } from "./index2.js";
+import { useConfig as l } from "./ConfigContext.js";
+import { Spinner as u } from "./Spinner.js";
+import { AssetTypeItem as f } from "./AssetTypeItem.js";
+function O(n) {
+  const { assetTypes: r } = l(), s = r.filter(
+    (e) => a(n.count, e) > 0
+  );
+  return r.length === 0 || s.length === 0 ? null : /* @__PURE__ */ t(A, { title: /* @__PURE__ */ t(h, {}), isSmall: !0, fadeIn: !0, children: () => /* @__PURE__ */ c(d, { children: [
+    n.isLoading && /* @__PURE__ */ t(u, {}),
+    /* @__PURE__ */ t($, { children: m("Type") }),
+    /* @__PURE__ */ t(y, { children: s.map((e) => /* @__PURE__ */ t(
+      f,
+      {
+        type: e,
+        count: a(n.count, e),
+        isLoading: n.isLoading
+      },
+      e
+    )) })
+  ] }) });
+}
+function h() {
+  return /* @__PURE__ */ c(d, { children: [
+    /* @__PURE__ */ t(I, {}),
+    m("Advanced")
+  ] });
+}
+function a(n, r) {
+  switch (r) {
+    case "AUDIO":
+      return n.audio;
+    case "DOCUMENT":
+      return n.document;
+    case "IMAGE":
+      return n.image;
+    case "VIDEO":
+      return n.video;
+    case "ARCHIVE":
+      return n.archive;
+  }
+}
+const A = o(p)``, $ = o.h1`
+	padding: ${i.spacing5} ${i.spacing5} 0 ${i.spacing5};
+	margin: 0 0 ${i.spacing5} 0;
+	font-size: ${i.fontSize100};
+`, I = o(g)`
+	display: inline;
+	margin-right: ${i.spacing3};
+	height: ${i.spacing6};
+	width: ${i.spacing6};
+`, y = o.ul`
+	padding: 0;
+	margin: 0;
+	list-style: none;
+	padding-bottom: ${i.spacing2};
+`;
+export {
+  O as Advanced
+};
+//# sourceMappingURL=Advanced.js.map

package/Advanced.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Advanced.js","sources":["../../src/filter/filters/advanced/Advanced.tsx"],"sourcesContent":["import React from 'react';\nimport { styled } from 'styled-components';\nimport { token } from '@bynder/design-system';\nimport { IconAdjust } from '@bynder/icons';\nimport { Dropdown } from '../../../common/components/dropdown/Dropdown';\nimport { __ } from '../../../localization';\nimport { useConfig } from '../../../app-config/ConfigContext';\nimport { AssetType } from '../../../views/asset/asset.type';\nimport { Spinner } from '../../../common/components/Spinner';\nimport { AssetTypeItem } from './AssetTypeItem';\n\ninterface Count {\n\taudio: number;\n\tdocument: number;\n\timage: number;\n\tvideo: number;\n\tarchive: number;\n}\n\ninterface AdvancedProps {\n\tisLoading: boolean;\n\tcount: Count;\n}\n\nexport function Advanced(props: AdvancedProps) {\n\tconst { assetTypes } = useConfig();\n\n\tconst assetTypesWithAssets = assetTypes.filter(\n\t\t(type) => getAssetCountForType(props.count, type) > 0,\n\t);\n\n\tif (assetTypes.length === 0 || assetTypesWithAssets.length === 0) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<DropdownContainer title={<Title />} isSmall fadeIn>\n\t\t\t{() => (\n\t\t\t\t<>\n\t\t\t\t\t{props.isLoading && <Spinner />}\n\t\t\t\t\t<DropdownTitle>{__('Type')}</DropdownTitle>\n\n\t\t\t\t\t<UnorderedList>\n\t\t\t\t\t\t{assetTypesWithAssets.map((assetType) => (\n\t\t\t\t\t\t\t<AssetTypeItem\n\t\t\t\t\t\t\t\tkey={assetType}\n\t\t\t\t\t\t\t\ttype={assetType}\n\t\t\t\t\t\t\t\tcount={getAssetCountForType(props.count, assetType)}\n\t\t\t\t\t\t\t\tisLoading={props.isLoading}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</UnorderedList>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</DropdownContainer>\n\t);\n}\n\n// eslint-disable-next-line react/no-multi-comp\nfunction Title() {\n\treturn (\n\t\t<>\n\t\t\t<Icon />\n\t\t\t{__('Advanced')}\n\t\t</>\n\t);\n}\n\nfunction getAssetCountForType(count: Count, type: AssetType) {\n\tswitch (type) {\n\t\tcase 'AUDIO':\n\t\t\treturn count.audio;\n\t\tcase 'DOCUMENT':\n\t\t\treturn count.document;\n\t\tcase 'IMAGE':\n\t\t\treturn count.image;\n\t\tcase 'VIDEO':\n\t\t\treturn count.video;\n\t\tcase 'ARCHIVE':\n\t\t\treturn count.archive;\n\t}\n}\n\nconst DropdownContainer = styled(Dropdown)``;\n\nconst DropdownTitle = styled.h1`\n\tpadding: ${token.spacing5} ${token.spacing5} 0 ${token.spacing5};\n\tmargin: 0 0 ${token.spacing5} 0;\n\tfont-size: ${token.fontSize100};\n`;\n\nconst Icon = styled(IconAdjust)`\n\tdisplay: inline;\n\tmargin-right: ${token.spacing3};\n\theight: ${token.spacing6};\n\twidth: ${token.spacing6};\n`;\n\nconst UnorderedList = styled.ul`\n\tpadding: 0;\n\tmargin: 0;\n\tlist-style: none;\n\tpadding-bottom: ${token.spacing2};\n`;\n"],"names":["Advanced","props","assetTypes","useConfig","assetTypesWithAssets","type","getAssetCountForType","jsx","DropdownContainer","Title","jsxs","Fragment","Spinner","DropdownTitle","__","UnorderedList","assetType","AssetTypeItem","Icon","count","styled","Dropdown","token","IconAdjust"],"mappings":";;;;;;;;;AAwBO,SAASA,EAASC,GAAsB;AAC9C,QAAM,EAAE,YAAAC,EAAA,IAAeC,EAAA,GAEjBC,IAAuBF,EAAW;AAAA,IACvC,CAACG,MAASC,EAAqBL,EAAM,OAAOI,CAAI,IAAI;AAAA,EAAA;AAGrD,SAAIH,EAAW,WAAW,KAAKE,EAAqB,WAAW,IACvD,OAIP,gBAAAG,EAACC,GAAA,EAAkB,OAAO,gBAAAD,EAACE,GAAA,CAAA,CAAM,GAAI,SAAO,IAAC,QAAM,IACjD,UAAA,MACA,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAAV,EAAM,+BAAcW,GAAA,CAAA,CAAQ;AAAA,IAC7B,gBAAAL,EAACM,GAAA,EAAe,UAAAC,EAAG,MAAM,EAAA,CAAE;AAAA,IAE3B,gBAAAP,EAACQ,GAAA,EACC,UAAAX,EAAqB,IAAI,CAACY,MAC1B,gBAAAT;AAAA,MAACU;AAAA,MAAA;AAAA,QAEA,MAAMD;AAAA,QACN,OAAOV,EAAqBL,EAAM,OAAOe,CAAS;AAAA,QAClD,WAAWf,EAAM;AAAA,MAAA;AAAA,MAHZe;AAAA,IAAA,CAKN,EAAA,CACF;AAAA,EAAA,EAAA,CACD,EAAA,CAEF;AAEF;AAGA,SAASP,IAAQ;AAChB,SACC,gBAAAC,EAAAC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAJ,EAACW,GAAA,EAAK;AAAA,IACLJ,EAAG,UAAU;AAAA,EAAA,GACf;AAEF;AAEA,SAASR,EAAqBa,GAAcd,GAAiB;AAC5D,UAAQA,GAAA;AAAA,IACP,KAAK;AACJ,aAAOc,EAAM;AAAA,IACd,KAAK;AACJ,aAAOA,EAAM;AAAA,IACd,KAAK;AACJ,aAAOA,EAAM;AAAA,IACd,KAAK;AACJ,aAAOA,EAAM;AAAA,IACd,KAAK;AACJ,aAAOA,EAAM;AAAA,EAAA;AAEhB;AAEA,MAAMX,IAAoBY,EAAOC,CAAQ,KAEnCR,IAAgBO,EAAO;AAAA,YACjBE,EAAM,QAAQ,IAAIA,EAAM,QAAQ,MAAMA,EAAM,QAAQ;AAAA,eACjDA,EAAM,QAAQ;AAAA,cACfA,EAAM,WAAW;AAAA,GAGzBJ,IAAOE,EAAOG,CAAU;AAAA;AAAA,iBAEbD,EAAM,QAAQ;AAAA,WACpBA,EAAM,QAAQ;AAAA,UACfA,EAAM,QAAQ;AAAA,GAGlBP,IAAgBK,EAAO;AAAA;AAAA;AAAA;AAAA,mBAIVE,EAAM,QAAQ;AAAA;"}

package/App.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { AssetFilterJson } from './filter/assetFilter.type';
 import { AssetType } from './views/asset/asset.type';
 import { SelectionMode } from './app-config/appConfig.type';
@@ -14,6 +14,8 @@ export interface Props {
     onSuccess?: (assets: unknown[], additionalInformation: {
         selectedFile?: File;
     }) => void;
+    defaultImageDerivativeName?: string;
+    defaultVideoDerivativeName?: string;
     theme?: Theme;
     hideExternalAccess?: boolean;
     selectedAssets?: string[];
@@ -24,4 +26,4 @@ export interface Props {
     noCache?: boolean;
     selectAllOption?: boolean;
 }
-export declare function App({ assetFieldSelection, assetFilter, assetTypes, defaultSearchTerm, language, mode, onSuccess, theme, hideExternalAccess, selectedAssets, hideLimitedUse, isContainerMode, __shouldAddOriginal__, hideSwitch, noCache, selectAllOption, }: Props): React.JSX.Element;
+export declare function App({ assetFieldSelection, assetFilter, assetTypes, defaultSearchTerm, language, mode, onSuccess, defaultImageDerivativeName, defaultVideoDerivativeName, theme, hideExternalAccess, selectedAssets, hideLimitedUse, isContainerMode, __shouldAddOriginal__, hideSwitch, noCache, selectAllOption, }: Props): React.JSX.Element;

package/App.js

@@ -0,0 +1,93 @@
+import { jsx as e, jsxs as s, Fragment as F } from "react/jsx-runtime";
+import { useEffect as V } from "react";
+import { BrowserClient as D, makeFetchTransport as E, defaultStackParser as I, Hub as T } from "@sentry/browser";
+import { CollectionsView as k } from "./CollectionsView.js";
+import { CollectionView as y } from "./CollectionView.js";
+import { ConfigProvider as M, useConfig as O } from "./ConfigContext.js";
+import { AssetFilter as R } from "./AssetFilter.js";
+import { useLocalization as U } from "./index2.js";
+import { ShadowRoot as x } from "./ShadowRoot.js";
+import { AssetFilterProvider as j } from "./AssetFilterContext.js";
+import { SelectionProvider as H } from "./SelectionContext.js";
+import { ThemeStyles as N } from "./Theming.js";
+import { Toolbar as z } from "./Toolbar.js";
+import { AssetsView as B } from "./AssetsView.js";
+import { SelectionFooter as G } from "./SelectionFooter.js";
+import { Shield as L } from "./Shield.js";
+import { Dat as _ } from "./Dat.js";
+import "./DatDropdownItem.js";
+import { useRouterSelectors as q } from "./useRouterStore.js";
+import { useSearchStore as J, useClearCollectionOnPageChange as K } from "./useSearchStore.js";
+import { useDat as Q } from "./useDatStore.js";
+let n;
+n = new D({
+  dsn: "https://dd74b64cc05845468f0c3654b458da29@sentry10.bynder.cloud/464",
+  autoSessionTracking: !0,
+  tracesSampleRate: 1,
+  integrations: [],
+  stackParser: I,
+  transport: E
+}), new T(n);
+function Se({
+  assetFieldSelection: o,
+  assetFilter: r,
+  assetTypes: a = ["IMAGE", "AUDIO", "VIDEO", "DOCUMENT", "ARCHIVE"],
+  defaultSearchTerm: l,
+  language: c = "en_US",
+  mode: p = "MultiSelect",
+  // eslint-disable-next-line no-console
+  onSuccess: f = (t, { selectedFile: i }) => console.log(t, i),
+  defaultImageDerivativeName: d,
+  defaultVideoDerivativeName: u,
+  theme: h,
+  hideExternalAccess: g,
+  selectedAssets: S,
+  hideLimitedUse: C,
+  isContainerMode: w = !1,
+  __shouldAddOriginal__: v,
+  hideSwitch: A = !1,
+  noCache: P = !1,
+  selectAllOption: b = !1
+}) {
+  U(c);
+  const { setSearch: t } = J(), { datUrl: i } = Q(), m = {
+    assetFieldSelection: o,
+    assetFilter: r,
+    assetTypes: a,
+    language: c,
+    onSuccess: f,
+    defaultImageDerivativeName: d,
+    defaultVideoDerivativeName: u,
+    selectionMode: p,
+    theme: h,
+    hideExternalAccess: g,
+    __shouldAddOriginal__: v,
+    hideSwitch: A,
+    noCache: P,
+    selectAllOption: b
+  };
+  return V(() => {
+    t("assets", l ?? "");
+  }, [l, t]), /* @__PURE__ */ e(L, { sentryClient: n, children: /* @__PURE__ */ e(x, { isContainerMode: w, children: /* @__PURE__ */ e(j, { hideLimitedUse: C, predefinedFilter: r, children: /* @__PURE__ */ e(M, { value: m, children: /* @__PURE__ */ s(H, { preselectedAssetIds: S ?? [], children: [
+    /* @__PURE__ */ e(N, { theme: m.theme }),
+    /* @__PURE__ */ s("div", { className: "cv-root cv-container", children: [
+      /* @__PURE__ */ e(z, {}),
+      /* @__PURE__ */ e(W, {}),
+      /* @__PURE__ */ e(G, {}),
+      i && /* @__PURE__ */ e(_, {})
+    ] })
+  ] }) }) }) }) });
+}
+function W() {
+  const o = q.use.page(), { assetFilter: r } = O();
+  return K(o), /* @__PURE__ */ s(F, { children: [
+    o.page !== "collections" && (r === void 0 || r && r.showToolbar) && /* @__PURE__ */ e(R, {}),
+    o.page === "assets" && /* @__PURE__ */ e(B, {}),
+    o.page === "collections" && /* @__PURE__ */ e(k, {}),
+    o.page === "collection" && /* @__PURE__ */ e(y, { collection: o.collection })
+  ] });
+}
+export {
+  Se as App
+};
+//# sourceMappingURL=App.js.map

package/App.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"App.js","sources":["../../src/App.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { BrowserClient, defaultStackParser, makeFetchTransport, Hub } from '@sentry/browser';\nimport { AssetFilterJson } from './filter/assetFilter.type';\nimport { AssetType } from './views/asset/asset.type';\nimport { CollectionsView } from './views/collections/CollectionsView';\nimport { CollectionView } from './views/collection/CollectionView';\nimport { ConfigProvider, useConfig } from './app-config/ConfigContext';\nimport { SelectionMode } from './app-config/appConfig.type';\nimport { AssetFilter } from './filter/AssetFilter';\nimport { useLocalization } from './localization';\nimport { ShadowRoot } from './style/shadowroot/ShadowRoot';\nimport { AssetFilterProvider } from './filter/AssetFilterContext';\nimport { SelectionProvider } from './select/SelectionContext';\nimport { Theme, ThemeStyles } from './style/Theming';\nimport { Toolbar } from './toolbar/Toolbar';\nimport { File } from './select/file.type';\nimport { AssetsView } from './views/asset/AssetsView';\nimport { SelectionFooter } from './select/SelectionFooter';\nimport { Shield } from './error-handling/Shield';\nimport { Dat } from './Dat';\nimport { useRouterSelectors } from './store/useRouterStore';\nimport { useClearCollectionOnPageChange, useSearchStore } from './store/useSearchStore';\nimport { useDat } from './store/useDatStore';\n\nlet sentryClient;\n\n// Initialize Sentry on production\nif (process.env.NODE_ENV === 'production') {\n\tsentryClient = new BrowserClient({\n\t\tdsn: 'https://dd74b64cc05845468f0c3654b458da29@sentry10.bynder.cloud/464',\n\t\tautoSessionTracking: true,\n\t\ttracesSampleRate: 1.0,\n\t\tintegrations: [],\n\t\tstackParser: defaultStackParser,\n\t\ttransport: makeFetchTransport,\n\t});\n\tnew Hub(sentryClient);\n}\n\nexport interface Props {\n\tassetFieldSelection?: string;\n\tassetFilter?: AssetFilterJson;\n\tassetTypes?: AssetType[];\n\tdefaultSearchTerm?: string;\n\tlanguage?: string;\n\tmode?: SelectionMode;\n\tonSuccess?: (assets: unknown[], additionalInformation: { selectedFile?: File }) => void;\n\tdefaultImageDerivativeName?: string;\n\tdefaultVideoDerivativeName?: string;\n\ttheme?: Theme;\n\thideExternalAccess?: boolean;\n\tselectedAssets?: string[];\n\thideLimitedUse?: boolean;\n\tisContainerMode?: boolean;\n\t__shouldAddOriginal__?: boolean;\n\thideSwitch?: boolean;\n\tnoCache?: boolean;\n\tselectAllOption?: boolean;\n}\n\nexport function App({\n\tassetFieldSelection,\n\tassetFilter,\n\tassetTypes = ['IMAGE', 'AUDIO', 'VIDEO', 'DOCUMENT', 'ARCHIVE'],\n\tdefaultSearchTerm,\n\tlanguage = 'en_US',\n\tmode = 'MultiSelect',\n\t// eslint-disable-next-line no-console\n\tonSuccess = (assets, { selectedFile }) => console.log(assets, selectedFile),\n\tdefaultImageDerivativeName,\n\tdefaultVideoDerivativeName,\n\ttheme,\n\thideExternalAccess,\n\tselectedAssets,\n\thideLimitedUse,\n\tisContainerMode = false,\n\t__shouldAddOriginal__,\n\thideSwitch = false,\n\tnoCache = false,\n\tselectAllOption = false,\n}: Props) {\n\tuseLocalization(language);\n\tconst { setSearch } = useSearchStore();\n\tconst { datUrl } = useDat();\n\n\tconst config = {\n\t\tassetFieldSelection,\n\t\tassetFilter,\n\t\tassetTypes,\n\t\tlanguage,\n\t\tonSuccess,\n\t\tdefaultImageDerivativeName,\n\t\tdefaultVideoDerivativeName,\n\t\tselectionMode: mode,\n\t\ttheme,\n\t\thideExternalAccess,\n\t\t__shouldAddOriginal__,\n\t\thideSwitch,\n\t\tnoCache,\n\t\tselectAllOption,\n\t};\n\n\tuseEffect(() => {\n\t\tsetSearch('assets', defaultSearchTerm ?? '');\n\t}, [defaultSearchTerm, setSearch]);\n\n\treturn (\n\t\t<Shield sentryClient={sentryClient}>\n\t\t\t<ShadowRoot isContainerMode={isContainerMode}>\n\t\t\t\t<AssetFilterProvider hideLimitedUse={hideLimitedUse} predefinedFilter={assetFilter}>\n\t\t\t\t\t<ConfigProvider value={config}>\n\t\t\t\t\t\t<SelectionProvider preselectedAssetIds={selectedAssets ?? []}>\n\t\t\t\t\t\t\t<ThemeStyles theme={config.theme} />\n\t\t\t\t\t\t\t<div className=\"cv-root cv-container\">\n\t\t\t\t\t\t\t\t<Toolbar />\n\t\t\t\t\t\t\t\t<CurrentPageView />\n\t\t\t\t\t\t\t\t<SelectionFooter />\n\n\t\t\t\t\t\t\t\t{datUrl && <Dat />}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</SelectionProvider>\n\t\t\t\t\t</ConfigProvider>\n\t\t\t\t</AssetFilterProvider>\n\t\t\t</ShadowRoot>\n\t\t</Shield>\n\t);\n}\n\n// eslint-disable-next-line react/no-multi-comp\nfunction CurrentPageView() {\n\tconst page = useRouterSelectors.use.page();\n\tconst { assetFilter } = useConfig();\n\n\t// Clear collection search state on page change\n\tuseClearCollectionOnPageChange(page);\n\n\treturn (\n\t\t<>\n\t\t\t{page.page !== 'collections' &&\n\t\t\t\t(assetFilter === undefined || (assetFilter && assetFilter.showToolbar)) && (\n\t\t\t\t\t<AssetFilter />\n\t\t\t\t)}\n\n\t\t\t{page.page === 'assets' && <AssetsView />}\n\t\t\t{page.page === 'collections' && <CollectionsView />}\n\t\t\t{page.page === 'collection' && <CollectionView collection={page.collection} />}\n\t\t</>\n\t);\n}\n"],"names":["sentryClient","BrowserClient","defaultStackParser","makeFetchTransport","Hub","App","assetFieldSelection","assetFilter","assetTypes","defaultSearchTerm","language","mode","onSuccess","assets","selectedFile","defaultImageDerivativeName","defaultVideoDerivativeName","theme","hideExternalAccess","selectedAssets","hideLimitedUse","isContainerMode","__shouldAddOriginal__","hideSwitch","noCache","selectAllOption","useLocalization","setSearch","useSearchStore","datUrl","useDat","config","useEffect","jsx","Shield","ShadowRoot","AssetFilterProvider","ConfigProvider","jsxs","SelectionProvider","ThemeStyles","Toolbar","CurrentPageView","SelectionFooter","Dat","page","useRouterSelectors","useConfig","useClearCollectionOnPageChange","Fragment","AssetFilter","AssetsView","CollectionsView","CollectionView"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyBA,IAAIA;AAIHA,IAAe,IAAIC,EAAc;AAAA,EAChC,KAAK;AAAA,EACL,qBAAqB;AAAA,EACrB,kBAAkB;AAAA,EAClB,cAAc,CAAA;AAAA,EACd,aAAaC;AAAA,EACb,WAAWC;AAAA,CACX,GACD,IAAIC,EAAIJ,CAAY;AAwBd,SAASK,GAAI;AAAA,EACnB,qBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa,CAAC,SAAS,SAAS,SAAS,YAAY,SAAS;AAAA,EAC9D,mBAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA;AAAA,EAEP,WAAAC,IAAY,CAACC,GAAQ,EAAE,cAAAC,QAAmB,QAAQ,IAAID,GAAQC,CAAY;AAAA,EAC1E,4BAAAC;AAAA,EACA,4BAAAC;AAAA,EACA,OAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,uBAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,SAAAC,IAAU;AAAA,EACV,iBAAAC,IAAkB;AACnB,GAAU;AACT,EAAAC,EAAgBhB,CAAQ;AACxB,QAAM,EAAE,WAAAiB,EAAA,IAAcC,EAAA,GAChB,EAAE,QAAAC,EAAA,IAAWC,EAAA,GAEbC,IAAS;AAAA,IACd,qBAAAzB;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAE;AAAA,IACA,WAAAE;AAAA,IACA,4BAAAG;AAAA,IACA,4BAAAC;AAAA,IACA,eAAeL;AAAA,IACf,OAAAM;AAAA,IACA,oBAAAC;AAAA,IACA,uBAAAI;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,iBAAAC;AAAA,EAAA;AAGD,SAAAO,EAAU,MAAM;AACf,IAAAL,EAAU,UAAUlB,KAAqB,EAAE;AAAA,EAC5C,GAAG,CAACA,GAAmBkB,CAAS,CAAC,GAGhC,gBAAAM,EAACC,KAAO,cAAAlC,GACP,UAAA,gBAAAiC,EAACE,KAAW,iBAAAd,GACX,UAAA,gBAAAY,EAACG,KAAoB,gBAAAhB,GAAgC,kBAAkBb,GACtE,UAAA,gBAAA0B,EAACI,GAAA,EAAe,OAAON,GACtB,UAAA,gBAAAO,EAACC,KAAkB,qBAAqBpB,KAAkB,CAAA,GACzD,UAAA;AAAA,sBAACqB,GAAA,EAAY,OAAOT,EAAO,OAAO;AAAA,IAClC,gBAAAO,EAAC,OAAA,EAAI,WAAU,wBACd,UAAA;AAAA,MAAA,gBAAAL,EAACQ,GAAA,EAAQ;AAAA,wBACRC,GAAA,EAAgB;AAAA,wBAChBC,GAAA,EAAgB;AAAA,MAEhBd,uBAAWe,GAAA,CAAA,CAAI;AAAA,IAAA,GACjB;AAAA,EAAA,EAAA,CACD,EAAA,CACD,GACD,EAAA,CACD,EAAA,CACD;AAEF;AAGA,SAASF,IAAkB;AAC1B,QAAMG,IAAOC,EAAmB,IAAI,KAAA,GAC9B,EAAE,aAAAvC,EAAA,IAAgBwC,EAAA;AAGxB,SAAAC,EAA+BH,CAAI,GAGlC,gBAAAP,EAAAW,GAAA,EACE,UAAA;AAAA,IAAAJ,EAAK,SAAS,kBACbtC,MAAgB,UAAcA,KAAeA,EAAY,kCACxD2C,GAAA,CAAA,CAAY;AAAA,IAGdL,EAAK,SAAS,YAAY,gBAAAZ,EAACkB,GAAA,CAAA,CAAW;AAAA,IACtCN,EAAK,SAAS,iBAAiB,gBAAAZ,EAACmB,GAAA,CAAA,CAAgB;AAAA,IAChDP,EAAK,SAAS,kCAAiBQ,GAAA,EAAe,YAAYR,EAAK,WAAA,CAAY;AAAA,EAAA,GAC7E;AAEF;"}

package/AssetCard.js

@@ -0,0 +1,172 @@
+import { jsx as i, jsxs as f } from "react/jsx-runtime";
+import { useState as g, useEffect as x } from "react";
+import s from "styled-components";
+import { token as r, Card as l, Badge as w, TruncatedText as P } from "@bynder/design-system";
+import { useConfig as U } from "./ConfigContext.js";
+import { getStatusText as V, getExtension as W, getThumbnail as b } from "./utils.js";
+import { __ as d } from "./index2.js";
+import { ContextAction as _ } from "./ContextAction.js";
+import { AssetCardMetaproperties as z } from "./AssetCardMetaproperties.js";
+import { useDat as L } from "./useDatStore.js";
+function Z({
+  className: e,
+  fadeIn: y = !0,
+  asset: t,
+  isSelected: n,
+  isOutlined: C,
+  onClick: p,
+  children: $ = null,
+  isSilimilaritySearchEnabled: v = !1,
+  onSimilaritySearch: T
+}) {
+  const [B, S] = g(), [I, k] = g(), { openDat: A, setTransformation: M } = L(), { theme: m } = U(), c = V(t), h = W(t);
+  x(() => {
+    const o = t.metaproperties?.nodes.filter(
+      (a) => a.showInGridView || a.showInListView
+    );
+    S(o);
+  }, [t.metaproperties]), x(() => {
+    const o = t.textMetaproperties?.filter(
+      (a) => a.showInGridView || a.showInListView
+    );
+    k(o);
+  }, [t.textMetaproperties]);
+  const u = (o) => {
+    p !== void 0 && (o.stopPropagation(), M(), p(t, o));
+  }, D = (o) => {
+    o.stopPropagation(), T([t.databaseId ? t.databaseId : t.id]);
+  };
+  return /* @__PURE__ */ i(
+    j,
+    {
+      id: t.id,
+      $theme: m,
+      $isOutlined: (n || C) && m?.colorPrimary !== void 0,
+      $fadeIn: y,
+      className: e,
+      "data-drag-select-id": t.id,
+      children: /* @__PURE__ */ f(
+        l,
+        {
+          contextAction: /* @__PURE__ */ i(
+            _,
+            {
+              transformBaseUrl: t.files?.transformBaseUrl?.url,
+              portalUrl: t.url,
+              onOpenDAT: () => {
+                A(t.files?.transformBaseUrl?.url, t, t.name);
+              }
+            }
+          ),
+          selectButtonAriaLabel: n ? d("Deselect") : d("Select"),
+          onSelect: u,
+          onClick: u,
+          isSelected: n,
+          "aria-selected": n,
+          "data-testid": "asset-card",
+          children: [
+            /* @__PURE__ */ f(
+              l.Frame,
+              {
+                icon: c ? /* @__PURE__ */ i(E, { $limitWidth: !!h, children: /* @__PURE__ */ i(w, { color: "black-alpha", "data-testid": "asset-tag", children: /* @__PURE__ */ i(P, { children: c }) }) }) : void 0,
+                "data-testid": "asset-type",
+                badge: h,
+                children: [
+                  /* @__PURE__ */ i(l.Images, { children: b(t) && /* @__PURE__ */ i(
+                    l.Img,
+                    {
+                      src: b(t),
+                      alt: t.name,
+                      contentResize: "fit"
+                    }
+                  ) }),
+                  v && t.__typename === "Image" && /* @__PURE__ */ i(
+                    H,
+                    {
+                      onClick: D,
+                      "data-testid": "similarity-search-indicator",
+                      type: "button",
+                      "aria-label": "similarity-search-button",
+                      className: "showSimilarButton",
+                      children: /* @__PURE__ */ i(w, { isSmall: !0, children: d("Show similar") })
+                    }
+                  )
+                ]
+              }
+            ),
+            $,
+            /* @__PURE__ */ i(G, { "data-testid": "asset-name", children: t.name }),
+            /* @__PURE__ */ i(
+              z,
+              {
+                metaproperties: B,
+                textMetaproperties: I
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+const j = s.div`
+	margin: ${r.spacing3};
+	width: 224px;
+	align-self: flex-start;
+	position: relative;
+	${(e) => e.$fadeIn ? "animation: var(--fade-in-down);" : ""}
+
+	--userComponentCardSelectedColor: ${({ $theme: e }) => e?.colorButtonPrimary};
+	--userComponentCardSelectedColorHover: ${({ $theme: e }) => e?.colorButtonPrimaryHover};
+	--userComponentCardSelectedColorActive: ${({ $theme: e }) => e?.colorButtonPrimaryActive};
+
+	.showSimilarButton {
+		display: none;
+	}
+
+	&:hover .showSimilarButton {
+		display: block;
+	}
+`, E = s.div`
+	${(e) => e.$limitWidth && "max-width: 142px;"}
+	margin-top: ${r.spacing2};
+`, G = s.p`
+	width: auto;
+	max-width: 100%;
+	height: auto;
+	line-height: 20px;
+	min-height: 20px;
+	max-height: 20px;
+	padding: 0 ${r.spacing5};
+	margin: ${r.spacing3} 0;
+	transition: all 200ms ease;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	box-sizing: content-box;
+
+	&:hover {
+		max-height: 80px;
+		word-break: break-all;
+		white-space: normal;
+	}
+`, H = s.button`
+	background: none;
+	border: none;
+	padding: 0;
+	margin: 0;
+	font: inherit;
+	color: inherit;
+	cursor: pointer;
+	outline: none;
+	text-align: inherit;
+
+	position: absolute;
+	bottom: ${r.spacing4};
+	left: ${r.spacing4};
+	z-index: 1;
+`;
+export {
+  Z as AssetCard
+};
+//# sourceMappingURL=AssetCard.js.map