@ndla/image-search 11.0.148-alpha.0 → 11.0.150-alpha.0

package/es/ImageMeta.mjs

@@ -2,7 +2,6 @@ import { Text } from "@ndla/primitives";
 import { humanFileSize } from "@ndla/util";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/ImageMeta.tsx
 /**
 * Copyright (c) 2022-present, NDLA.
@@ -11,12 +10,12 @@ import { jsx } from "react/jsx-runtime";
 * LICENSE file in the root directory of this source tree.
 *
 */
-const ImageMeta = ({ contentType, fileSize, imageDimensions, locale }) => {
+const ImageMeta = ({ contentType, fileSize, imageDimensions, originalDate, locale }) => {
 	return /* @__PURE__ */ jsx(Text, { children: `${contentType} - ${useMemo(() => {
 		return humanFileSize(fileSize, locale);
-	}, [fileSize, locale])}${imageDimensions ? ` - ${imageDimensions.width}x${imageDimensions.height} px` : ""}` });
+	}, [fileSize, locale])}${imageDimensions ? ` - ${imageDimensions.width}x${imageDimensions.height} px` : ""}${originalDate ? ` - ${originalDate}` : ""}` });
 };
-
 //#endregion
 export { ImageMeta };
+
 //# sourceMappingURL=ImageMeta.mjs.map

package/es/ImageMeta.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ImageMeta.mjs","names":[],"sources":["../src/ImageMeta.tsx"],"sourcesContent":["/**\n * Copyright (c) 2022-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Text } from \"@ndla/primitives\";\nimport type { ImageDimensionsDTO } from \"@ndla/types-backend/image-api\";\nimport { humanFileSize } from \"@ndla/util\";\nimport { useMemo } from \"react\";\n\ninterface Props {\n  contentType: string;\n  fileSize: number;\n  imageDimensions?: ImageDimensionsDTO;\n  locale: string;\n}\n\nexport const ImageMeta = ({ contentType, fileSize, imageDimensions, locale }: Props) => {\n  const prettySize = useMemo(() => {\n    return humanFileSize(fileSize, locale);\n  }, [fileSize, locale]);\n\n  const dimensions = imageDimensions ? ` - ${imageDimensions.width}x${imageDimensions.height} px` : \"\";\n  return <Text>{`${contentType} - ${prettySize}${dimensions}`}</Text>;\n};\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAa,aAAa,EAAE,aAAa,UAAU,iBAAiB,aAAoB;AAMtF,QAAO,oBAAC,kBAAM,GAAG,YAAY,KALV,cAAc;AAC/B,SAAO,cAAc,UAAU,OAAO;IACrC,CAAC,UAAU,OAAO,CAAC,GAEH,kBAAkB,MAAM,gBAAgB,MAAM,GAAG,gBAAgB,OAAO,OAAO,OAC/B"}
+{"version":3,"file":"ImageMeta.mjs","names":[],"sources":["../src/ImageMeta.tsx"],"sourcesContent":["/**\n * Copyright (c) 2022-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Text } from \"@ndla/primitives\";\nimport type { ImageDimensionsDTO } from \"@ndla/types-backend/image-api\";\nimport { humanFileSize } from \"@ndla/util\";\nimport { useMemo } from \"react\";\n\ninterface Props {\n  contentType: string;\n  fileSize: number;\n  imageDimensions?: ImageDimensionsDTO;\n  originalDate?: string;\n  locale: string;\n}\n\nexport const ImageMeta = ({ contentType, fileSize, imageDimensions, originalDate, locale }: Props) => {\n  const prettySize = useMemo(() => {\n    return humanFileSize(fileSize, locale);\n  }, [fileSize, locale]);\n\n  const dimensions = imageDimensions ? ` - ${imageDimensions.width}x${imageDimensions.height} px` : \"\";\n  const date = originalDate ? ` - ${originalDate}` : \"\";\n  return <Text>{`${contentType} - ${prettySize}${dimensions}${date}`}</Text>;\n};\n"],"mappings":";;;;;;;;;;;;AAqBA,MAAa,aAAa,EAAE,aAAa,UAAU,iBAAiB,cAAc,aAAoB;AAOpG,QAAO,oBAAC,MAAD,EAAA,UAAO,GAAG,YAAY,KANV,cAAc;AAC/B,SAAO,cAAc,UAAU,OAAO;IACrC,CAAC,UAAU,OAAO,CAAC,GAEH,kBAAkB,MAAM,gBAAgB,MAAM,GAAG,gBAAgB,OAAO,OAAO,KACrF,eAAe,MAAM,iBAAiB,MACuB,CAAA"}

package/es/ImageSearch.mjs

@@ -4,7 +4,6 @@ import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeftShortLine, ArrowRightShortLine, SearchLine } from "@ndla/icons";
 import { styled } from "@ndla/styled-system/jsx";
-
 //#region src/ImageSearch.tsx
 /**
 * Copyright (c) 2017-present, NDLA.
@@ -161,7 +160,7 @@ const ImageSearch = ({ onImageSelect, searchImages: search, onError, locale, noR
 		})
 	] });
 };
-
 //#endregion
 export { ImageSearch };
+
 //# sourceMappingURL=ImageSearch.mjs.map

package/es/ImageSearch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ImageSearch.mjs","names":[],"sources":["../src/ImageSearch.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ArrowLeftShortLine, ArrowRightShortLine, SearchLine } from \"@ndla/icons\";\nimport {\n  Button,\n  IconButton,\n  Input,\n  PaginationContext,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationNextTrigger,\n  PaginationPrevTrigger,\n  PaginationRoot,\n  Text,\n  type PaginationRootProps,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageMetaInformationV3DTO, SearchResultV3DTO, SearchParamsDTO } from \"@ndla/types-backend/image-api\";\nimport { type ChangeEvent, type ReactNode, type KeyboardEvent, useEffect, useState } from \"react\";\nimport { ImageSearchResult } from \"./ImageSearchResult\";\n\nconst ImageSearchWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"small\",\n  },\n});\n\nconst StyledSearchResults = styled(\"div\", {\n  base: {\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(auto-fit, minmax(200px, 1fr))\",\n    gridGap: \"xsmall\",\n    gridAutoFlow: \"dense\",\n  },\n});\n\nconst InputWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xsmall\",\n  },\n});\n\nconst StyledPaginationRoot = styled(PaginationRoot, {\n  base: {\n    flexWrap: \"wrap\",\n  },\n});\n\nconst StyledButton = styled(Button, {\n  base: {\n    tabletWideDown: {\n      paddingInline: \"xsmall\",\n      \"& span\": {\n        display: \"none\",\n      },\n    },\n  },\n});\n\nconst StyledPaginationItem = styled(PaginationItem, {\n  base: {\n    tabletWideDown: {\n      \"&:nth-child(2)\": {\n        display: \"none\",\n      },\n      \"&:nth-last-child(2)\": {\n        display: \"none\",\n      },\n    },\n  },\n});\n\nexport interface PreviewTranslations {\n  creatorsLabel: string;\n  license: string;\n  caption: string;\n  altText: string;\n  modelRelease: string;\n  tags: string;\n  close: string;\n  checkboxLabel?: string;\n  missingTitleFallback?: string;\n  useImageTitle: string;\n}\n\nexport interface ImageSearchTranslations {\n  searchPlaceholder: string;\n  searchButtonTitle: string;\n  imagePreview: PreviewTranslations;\n  paginationTranslations: PaginationRootProps[\"translations\"];\n}\n\nexport interface ImageSearchProps {\n  onImageSelect: (image: ImageMetaInformationV3DTO) => void;\n  searchImages: (query: string | undefined, page: number | undefined) => Promise<SearchResultV3DTO>;\n  onError?: (err: any) => void;\n  locale: string;\n  noResults?: ReactNode;\n  checkboxAction?: (image: ImageMetaInformationV3DTO) => void;\n  showCheckbox?: boolean;\n  translations: ImageSearchTranslations;\n}\n\nexport const ImageSearch = ({\n  onImageSelect,\n  searchImages: search,\n  onError,\n  locale,\n  noResults,\n  checkboxAction,\n  showCheckbox,\n  translations,\n}: ImageSearchProps) => {\n  const [queryObject, setQueryObject] = useState<SearchParamsDTO>({\n    query: undefined,\n    page: 1,\n    pageSize: 16,\n  });\n  const [selectedImage, setSelectedImage] = useState<ImageMetaInformationV3DTO | undefined>();\n  const [searching, setSearching] = useState<boolean>(false);\n  const [searchResult, setSearchResult] = useState<SearchResultV3DTO | undefined>();\n\n  const { page } = queryObject;\n  const noResultsFound = !searching && searchResult?.results.length === 0;\n\n  const onSelectImage = (image: ImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => {\n    setSelectedImage(undefined);\n    if (!image) return;\n    onImageSelect(image);\n    if (saveAsMetaImage) {\n      checkboxAction?.(image);\n    }\n  };\n\n  const searchImages = (queryObject: SearchParamsDTO) => {\n    setSearching(true);\n    search(queryObject.query, queryObject.page)\n      .then((result) => {\n        setQueryObject({\n          query: queryObject.query,\n          pageSize: result.pageSize,\n          page: queryObject.page,\n        });\n        setSearchResult(result);\n        setSearching(false);\n      })\n      .catch((err) => {\n        onError?.(err);\n        setSearching(false);\n      });\n  };\n\n  const handleQueryChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {\n    setQueryObject((prevState) => ({\n      ...prevState,\n      query: value,\n    }));\n  };\n\n  const onEnter = (e: KeyboardEvent<HTMLInputElement | HTMLButtonElement>) => {\n    if (e.key === \"Enter\") {\n      searchImages(queryObject);\n    }\n  };\n\n  useEffect(() => {\n    searchImages(queryObject);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <ImageSearchWrapper>\n      <InputWrapper role=\"search\">\n        <Input\n          type=\"search\"\n          placeholder={translations.searchPlaceholder}\n          value={queryObject?.query ?? \"\"}\n          onChange={handleQueryChange}\n          onKeyDown={onEnter}\n        />\n        <IconButton\n          variant=\"primary\"\n          aria-label={translations.searchButtonTitle}\n          title={translations.searchButtonTitle}\n          onKeyDown={onEnter}\n          onClick={() => searchImages(queryObject)}\n        >\n          <SearchLine />\n        </IconButton>\n      </InputWrapper>\n      {!!noResultsFound && noResults}\n      <StyledSearchResults>\n        {searchResult?.results.map((image) => (\n          <ImageSearchResult\n            key={image.id}\n            image={image}\n            onImageClick={(image) => setSelectedImage(image)}\n            selectedImage={selectedImage}\n            onSelectImage={onSelectImage}\n            showCheckbox={!!showCheckbox}\n            translations={translations.imagePreview}\n            locale={locale}\n          />\n        ))}\n      </StyledSearchResults>\n      <StyledPaginationRoot\n        page={page ?? 1}\n        onPageChange={(details) => searchImages({ ...queryObject, page: details.page })}\n        translations={translations.paginationTranslations}\n        count={searchResult?.totalCount ?? 0}\n        pageSize={searchResult?.pageSize}\n        hidden={noResultsFound}\n      >\n        <PaginationPrevTrigger asChild>\n          <StyledButton\n            variant=\"tertiary\"\n            aria-label={translations.paginationTranslations?.prevTriggerLabel}\n            title={translations.paginationTranslations?.prevTriggerLabel}\n          >\n            <ArrowLeftShortLine />\n            <span>{translations.paginationTranslations?.prevTriggerLabel}</span>\n          </StyledButton>\n        </PaginationPrevTrigger>\n        <PaginationContext>\n          {(pagination) =>\n            pagination.pages.map((page, index, full) => {\n              // Hide last page to not trigger RESULT_WINDOW_TOO_LARGE error\n              if (index === full.length - 1) return null;\n              return page.type === \"page\" ? (\n                <StyledPaginationItem key={index} {...page} asChild>\n                  <Button variant={page.value === pagination.page ? \"primary\" : \"tertiary\"}>{page.value}</Button>\n                </StyledPaginationItem>\n              ) : (\n                <PaginationEllipsis key={index} index={index} asChild>\n                  <Text asChild consumeCss>\n                    <div>&#8230;</div>\n                  </Text>\n                </PaginationEllipsis>\n              );\n            })\n          }\n        </PaginationContext>\n        <PaginationNextTrigger asChild>\n          <StyledButton\n            variant=\"tertiary\"\n            aria-label={translations.paginationTranslations?.nextTriggerLabel}\n            title={translations.paginationTranslations?.nextTriggerLabel}\n          >\n            <span>{translations.paginationTranslations?.nextTriggerLabel}</span>\n            <ArrowRightShortLine />\n          </StyledButton>\n        </PaginationNextTrigger>\n      </StyledPaginationRoot>\n    </ImageSearchWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AA2BA,MAAM,qBAAqB,OAAO,OAAO,EACvC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,sBAAsB,OAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,qBAAqB;CACrB,SAAS;CACT,cAAc;CACf,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,OAAO,EACjC,MAAM;CACJ,SAAS;CACT,KAAK;CACN,EACF,CAAC;AAEF,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM,EACJ,UAAU,QACX,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,gBAAgB;CACd,eAAe;CACf,UAAU,EACR,SAAS,QACV;CACF,EACF,EACF,CAAC;AAEF,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM,EACJ,gBAAgB;CACd,kBAAkB,EAChB,SAAS,QACV;CACD,uBAAuB,EACrB,SAAS,QACV;CACF,EACF,EACF,CAAC;AAiCF,MAAa,eAAe,EAC1B,eACA,cAAc,QACd,SACA,QACA,WACA,gBACA,cACA,mBACsB;CACtB,MAAM,CAAC,aAAa,kBAAkB,SAA0B;EAC9D,OAAO;EACP,MAAM;EACN,UAAU;EACX,CAAC;CACF,MAAM,CAAC,eAAe,oBAAoB,UAAiD;CAC3F,MAAM,CAAC,WAAW,gBAAgB,SAAkB,MAAM;CAC1D,MAAM,CAAC,cAAc,mBAAmB,UAAyC;CAEjF,MAAM,EAAE,SAAS;CACjB,MAAM,iBAAiB,CAAC,aAAa,cAAc,QAAQ,WAAW;CAEtE,MAAM,iBAAiB,OAA8C,oBAA8B;AACjG,mBAAiB,OAAU;AAC3B,MAAI,CAAC,MAAO;AACZ,gBAAc,MAAM;AACpB,MAAI,gBACF,kBAAiB,MAAM;;CAI3B,MAAM,gBAAgB,gBAAiC;AACrD,eAAa,KAAK;AAClB,SAAO,YAAY,OAAO,YAAY,KAAK,CACxC,MAAM,WAAW;AAChB,kBAAe;IACb,OAAO,YAAY;IACnB,UAAU,OAAO;IACjB,MAAM,YAAY;IACnB,CAAC;AACF,mBAAgB,OAAO;AACvB,gBAAa,MAAM;IACnB,CACD,OAAO,QAAQ;AACd,aAAU,IAAI;AACd,gBAAa,MAAM;IACnB;;CAGN,MAAM,qBAAqB,EAAE,QAAQ,EAAE,cAA6C;AAClF,kBAAgB,eAAe;GAC7B,GAAG;GACH,OAAO;GACR,EAAE;;CAGL,MAAM,WAAW,MAA2D;AAC1E,MAAI,EAAE,QAAQ,QACZ,cAAa,YAAY;;AAI7B,iBAAgB;AACd,eAAa,YAAY;IAExB,EAAE,CAAC;AAEN,QACE,qBAAC;EACC,qBAAC;GAAa,MAAK;cACjB,oBAAC;IACC,MAAK;IACL,aAAa,aAAa;IAC1B,OAAO,aAAa,SAAS;IAC7B,UAAU;IACV,WAAW;KACX,EACF,oBAAC;IACC,SAAQ;IACR,cAAY,aAAa;IACzB,OAAO,aAAa;IACpB,WAAW;IACX,eAAe,aAAa,YAAY;cAExC,oBAAC,eAAa;KACH;IACA;EACd,CAAC,CAAC,kBAAkB;EACrB,oBAAC,iCACE,cAAc,QAAQ,KAAK,UAC1B,oBAAC;GAEQ;GACP,eAAe,UAAU,iBAAiB,MAAM;GACjC;GACA;GACf,cAAc,CAAC,CAAC;GAChB,cAAc,aAAa;GACnB;KAPH,MAAM,GAQX,CACF,GACkB;EACtB,qBAAC;GACC,MAAM,QAAQ;GACd,eAAe,YAAY,aAAa;IAAE,GAAG;IAAa,MAAM,QAAQ;IAAM,CAAC;GAC/E,cAAc,aAAa;GAC3B,OAAO,cAAc,cAAc;GACnC,UAAU,cAAc;GACxB,QAAQ;;IAER,oBAAC;KAAsB;eACrB,qBAAC;MACC,SAAQ;MACR,cAAY,aAAa,wBAAwB;MACjD,OAAO,aAAa,wBAAwB;iBAE5C,oBAAC,uBAAqB,EACtB,oBAAC,oBAAM,aAAa,wBAAwB,mBAAwB;OACvD;MACO;IACxB,oBAAC,gCACG,eACA,WAAW,MAAM,KAAK,MAAM,OAAO,SAAS;AAE1C,SAAI,UAAU,KAAK,SAAS,EAAG,QAAO;AACtC,YAAO,KAAK,SAAS,SACnB,oBAAC;MAAiC,GAAI;MAAM;gBAC1C,oBAAC;OAAO,SAAS,KAAK,UAAU,WAAW,OAAO,YAAY;iBAAa,KAAK;QAAe;QADtE,MAEJ,GAEvB,oBAAC;MAAsC;MAAO;gBAC5C,oBAAC;OAAK;OAAQ;iBACZ,oBAAC,mBAAI,MAAa;QACb;QAHgB,MAIJ;MAEvB,GAEc;IACpB,oBAAC;KAAsB;eACrB,qBAAC;MACC,SAAQ;MACR,cAAY,aAAa,wBAAwB;MACjD,OAAO,aAAa,wBAAwB;iBAE5C,oBAAC,oBAAM,aAAa,wBAAwB,mBAAwB,EACpE,oBAAC,wBAAsB;OACV;MACO;;IACH;KACJ"}
+{"version":3,"file":"ImageSearch.mjs","names":[],"sources":["../src/ImageSearch.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ArrowLeftShortLine, ArrowRightShortLine, SearchLine } from \"@ndla/icons\";\nimport {\n  Button,\n  IconButton,\n  Input,\n  PaginationContext,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationNextTrigger,\n  PaginationPrevTrigger,\n  PaginationRoot,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageMetaInformationV3DTO, SearchResultV3DTO, SearchParamsDTO } from \"@ndla/types-backend/image-api\";\nimport { type ChangeEvent, type ReactNode, type KeyboardEvent, useEffect, useState } from \"react\";\nimport { ImageSearchResult } from \"./ImageSearchResult\";\nimport type { ImageSearchTranslations } from \"./types\";\n\nconst ImageSearchWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"small\",\n  },\n});\n\nconst StyledSearchResults = styled(\"div\", {\n  base: {\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(auto-fit, minmax(200px, 1fr))\",\n    gridGap: \"xsmall\",\n    gridAutoFlow: \"dense\",\n  },\n});\n\nconst InputWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xsmall\",\n  },\n});\n\nconst StyledPaginationRoot = styled(PaginationRoot, {\n  base: {\n    flexWrap: \"wrap\",\n  },\n});\n\nconst StyledButton = styled(Button, {\n  base: {\n    tabletWideDown: {\n      paddingInline: \"xsmall\",\n      \"& span\": {\n        display: \"none\",\n      },\n    },\n  },\n});\n\nconst StyledPaginationItem = styled(PaginationItem, {\n  base: {\n    tabletWideDown: {\n      \"&:nth-child(2)\": {\n        display: \"none\",\n      },\n      \"&:nth-last-child(2)\": {\n        display: \"none\",\n      },\n    },\n  },\n});\n\nexport interface ImageSearchProps {\n  onImageSelect: (image: ImageMetaInformationV3DTO) => void;\n  searchImages: (query: string | undefined, page: number | undefined) => Promise<SearchResultV3DTO>;\n  onError?: (err: any) => void;\n  locale: string;\n  noResults?: ReactNode;\n  checkboxAction?: (image: ImageMetaInformationV3DTO) => void;\n  showCheckbox?: boolean;\n  translations: ImageSearchTranslations;\n}\n\nexport const ImageSearch = ({\n  onImageSelect,\n  searchImages: search,\n  onError,\n  locale,\n  noResults,\n  checkboxAction,\n  showCheckbox,\n  translations,\n}: ImageSearchProps) => {\n  const [queryObject, setQueryObject] = useState<SearchParamsDTO>({\n    query: undefined,\n    page: 1,\n    pageSize: 16,\n  });\n  const [selectedImage, setSelectedImage] = useState<ImageMetaInformationV3DTO | undefined>();\n  const [searching, setSearching] = useState<boolean>(false);\n  const [searchResult, setSearchResult] = useState<SearchResultV3DTO | undefined>();\n\n  const { page } = queryObject;\n  const noResultsFound = !searching && searchResult?.results.length === 0;\n\n  const onSelectImage = (image: ImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => {\n    setSelectedImage(undefined);\n    if (!image) return;\n    onImageSelect(image);\n    if (saveAsMetaImage) {\n      checkboxAction?.(image);\n    }\n  };\n\n  const searchImages = (queryObject: SearchParamsDTO) => {\n    setSearching(true);\n    search(queryObject.query, queryObject.page)\n      .then((result) => {\n        setQueryObject({\n          query: queryObject.query,\n          pageSize: result.pageSize,\n          page: queryObject.page,\n        });\n        setSearchResult(result);\n        setSearching(false);\n      })\n      .catch((err) => {\n        onError?.(err);\n        setSearching(false);\n      });\n  };\n\n  const handleQueryChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {\n    setQueryObject((prevState) => ({\n      ...prevState,\n      query: value,\n    }));\n  };\n\n  const onEnter = (e: KeyboardEvent<HTMLInputElement | HTMLButtonElement>) => {\n    if (e.key === \"Enter\") {\n      searchImages(queryObject);\n    }\n  };\n\n  useEffect(() => {\n    searchImages(queryObject);\n    // oxlint-disable-next-line react/exhaustive-deps\n  }, []);\n\n  return (\n    <ImageSearchWrapper>\n      <InputWrapper role=\"search\">\n        <Input\n          type=\"search\"\n          placeholder={translations.searchPlaceholder}\n          value={queryObject?.query ?? \"\"}\n          onChange={handleQueryChange}\n          onKeyDown={onEnter}\n        />\n        <IconButton\n          variant=\"primary\"\n          aria-label={translations.searchButtonTitle}\n          title={translations.searchButtonTitle}\n          onKeyDown={onEnter}\n          onClick={() => searchImages(queryObject)}\n        >\n          <SearchLine />\n        </IconButton>\n      </InputWrapper>\n      {!!noResultsFound && noResults}\n      <StyledSearchResults>\n        {searchResult?.results.map((image) => (\n          <ImageSearchResult\n            key={image.id}\n            image={image}\n            onImageClick={(image) => setSelectedImage(image)}\n            selectedImage={selectedImage}\n            onSelectImage={onSelectImage}\n            showCheckbox={!!showCheckbox}\n            translations={translations.imagePreview}\n            locale={locale}\n          />\n        ))}\n      </StyledSearchResults>\n      <StyledPaginationRoot\n        page={page ?? 1}\n        onPageChange={(details) => searchImages({ ...queryObject, page: details.page })}\n        translations={translations.paginationTranslations}\n        count={searchResult?.totalCount ?? 0}\n        pageSize={searchResult?.pageSize}\n        hidden={noResultsFound}\n      >\n        <PaginationPrevTrigger asChild>\n          <StyledButton\n            variant=\"tertiary\"\n            aria-label={translations.paginationTranslations?.prevTriggerLabel}\n            title={translations.paginationTranslations?.prevTriggerLabel}\n          >\n            <ArrowLeftShortLine />\n            <span>{translations.paginationTranslations?.prevTriggerLabel}</span>\n          </StyledButton>\n        </PaginationPrevTrigger>\n        <PaginationContext>\n          {(pagination) =>\n            pagination.pages.map((page, index, full) => {\n              // Hide last page to not trigger RESULT_WINDOW_TOO_LARGE error\n              if (index === full.length - 1) return null;\n              return page.type === \"page\" ? (\n                <StyledPaginationItem key={index} {...page} asChild>\n                  <Button variant={page.value === pagination.page ? \"primary\" : \"tertiary\"}>{page.value}</Button>\n                </StyledPaginationItem>\n              ) : (\n                <PaginationEllipsis key={index} index={index} asChild>\n                  <Text asChild consumeCss>\n                    <div>&#8230;</div>\n                  </Text>\n                </PaginationEllipsis>\n              );\n            })\n          }\n        </PaginationContext>\n        <PaginationNextTrigger asChild>\n          <StyledButton\n            variant=\"tertiary\"\n            aria-label={translations.paginationTranslations?.nextTriggerLabel}\n            title={translations.paginationTranslations?.nextTriggerLabel}\n          >\n            <span>{translations.paginationTranslations?.nextTriggerLabel}</span>\n            <ArrowRightShortLine />\n          </StyledButton>\n        </PaginationNextTrigger>\n      </StyledPaginationRoot>\n    </ImageSearchWrapper>\n  );\n};\n"],"mappings":"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"}

package/es/ImageSearchResult.mjs

@@ -3,7 +3,6 @@ import { PreviewImage } from "./PreviewImage.mjs";
 import { Button, Image, Text } from "@ndla/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { styled } from "@ndla/styled-system/jsx";
-
 //#region src/ImageSearchResult.tsx
 /**
 * Copyright (c) 2017-present, NDLA.
@@ -51,7 +50,7 @@ const ImageSearchResult = ({ image, onImageClick, selectedImage, onSelectImage,
 		locale
 	}) : null] });
 };
-
 //#endregion
 export { ImageSearchResult };
+
 //# sourceMappingURL=ImageSearchResult.mjs.map

package/es/ImageSearchResult.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ImageSearchResult.mjs","names":[],"sources":["../src/ImageSearchResult.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Text, Image, Button } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\nimport type { PreviewTranslations } from \"./ImageSearch\";\nimport { PreviewImage } from \"./PreviewImage\";\nimport { getPreviewSrcSets } from \"./util/imageUtil\";\n\nconst StyledButton = styled(Button, {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    borderColor: \"stroke.subtle\",\n  },\n});\n\nconst StyledImage = styled(Image, {\n  base: {\n    maxHeight: \"135px\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    lineClamp: \"3\",\n  },\n});\n\ninterface Props {\n  image: ImageMetaInformationV3DTO;\n  onImageClick: (image: ImageMetaInformationV3DTO) => void;\n  selectedImage?: ImageMetaInformationV3DTO;\n  onSelectImage: (image: ImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => void;\n  showCheckbox: boolean;\n  translations: PreviewTranslations;\n  locale: string;\n}\n\nexport const ImageSearchResult = ({\n  image,\n  onImageClick,\n  selectedImage,\n  onSelectImage,\n  showCheckbox,\n  translations,\n  locale,\n}: Props) => {\n  const isSelectedImage = selectedImage?.id === image.id;\n  return (\n    <>\n      <StyledButton\n        variant={isSelectedImage ? \"secondary\" : \"tertiary\"}\n        data-testid=\"select-image-from-list\"\n        onClick={() => onImageClick(image)}\n        aria-expanded={isSelectedImage}\n        aria-controls={`image-preview-${image.id}`}\n      >\n        <StyledImage\n          alt=\"\"\n          srcSet={getPreviewSrcSets(image.image.imageUrl)}\n          src={image.image.imageUrl}\n          variant=\"rounded\"\n        />\n        <StyledText textStyle=\"label.medium\" asChild consumeCss>\n          <span>\n            {image.title.title.trim() ? image.title.title : (translations.missingTitleFallback ?? `ID: ${image.id}`)}\n          </span>\n        </StyledText>\n      </StyledButton>\n      {isSelectedImage ? (\n        <PreviewImage\n          id={`image-preview-${image.id}`}\n          image={selectedImage}\n          onSelectImage={onSelectImage}\n          translations={translations}\n          showCheckbox={showCheckbox}\n          locale={locale}\n        />\n      ) : null}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,aAAa;CACd,EACF,CAAC;AAEF,MAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ,WAAW;CACX,OAAO;CACP,QAAQ;CACT,EACF,CAAC;AAEF,MAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,EACJ,WAAW,KACZ,EACF,CAAC;AAYF,MAAa,qBAAqB,EAChC,OACA,cACA,eACA,eACA,cACA,cACA,aACW;CACX,MAAM,kBAAkB,eAAe,OAAO,MAAM;AACpD,QACE,4CACE,qBAAC;EACC,SAAS,kBAAkB,cAAc;EACzC,eAAY;EACZ,eAAe,aAAa,MAAM;EAClC,iBAAe;EACf,iBAAe,iBAAiB,MAAM;aAEtC,oBAAC;GACC,KAAI;GACJ,QAAQ,kBAAkB,MAAM,MAAM,SAAS;GAC/C,KAAK,MAAM,MAAM;GACjB,SAAQ;IACR,EACF,oBAAC;GAAW,WAAU;GAAe;GAAQ;aAC3C,oBAAC,oBACE,MAAM,MAAM,MAAM,MAAM,GAAG,MAAM,MAAM,QAAS,aAAa,wBAAwB,OAAO,MAAM,OAC9F;IACI;GACA,EACd,kBACC,oBAAC;EACC,IAAI,iBAAiB,MAAM;EAC3B,OAAO;EACQ;EACD;EACA;EACN;GACR,GACA,QACH"}
+{"version":3,"file":"ImageSearchResult.mjs","names":[],"sources":["../src/ImageSearchResult.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Text, Image, Button } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\nimport { PreviewImage } from \"./PreviewImage\";\nimport type { PreviewTranslations } from \"./types\";\nimport { getPreviewSrcSets } from \"./util/imageUtil\";\n\nconst StyledButton = styled(Button, {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    borderColor: \"stroke.subtle\",\n  },\n});\n\nconst StyledImage = styled(Image, {\n  base: {\n    maxHeight: \"135px\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    lineClamp: \"3\",\n  },\n});\n\ninterface Props {\n  image: ImageMetaInformationV3DTO;\n  onImageClick: (image: ImageMetaInformationV3DTO) => void;\n  selectedImage?: ImageMetaInformationV3DTO;\n  onSelectImage: (image: ImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => void;\n  showCheckbox: boolean;\n  translations: PreviewTranslations;\n  locale: string;\n}\n\nexport const ImageSearchResult = ({\n  image,\n  onImageClick,\n  selectedImage,\n  onSelectImage,\n  showCheckbox,\n  translations,\n  locale,\n}: Props) => {\n  const isSelectedImage = selectedImage?.id === image.id;\n  return (\n    <>\n      <StyledButton\n        variant={isSelectedImage ? \"secondary\" : \"tertiary\"}\n        data-testid=\"select-image-from-list\"\n        onClick={() => onImageClick(image)}\n        aria-expanded={isSelectedImage}\n        aria-controls={`image-preview-${image.id}`}\n      >\n        <StyledImage\n          alt=\"\"\n          srcSet={getPreviewSrcSets(image.image.imageUrl)}\n          src={image.image.imageUrl}\n          variant=\"rounded\"\n        />\n        <StyledText textStyle=\"label.medium\" asChild consumeCss>\n          <span>\n            {image.title.title.trim() ? image.title.title : (translations.missingTitleFallback ?? `ID: ${image.id}`)}\n          </span>\n        </StyledText>\n      </StyledButton>\n      {isSelectedImage ? (\n        <PreviewImage\n          id={`image-preview-${image.id}`}\n          image={selectedImage}\n          onSelectImage={onSelectImage}\n          translations={translations}\n          showCheckbox={showCheckbox}\n          locale={locale}\n        />\n      ) : null}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,aAAa;CACd,EACF,CAAC;AAEF,MAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ,WAAW;CACX,OAAO;CACP,QAAQ;CACT,EACF,CAAC;AAEF,MAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,EACJ,WAAW,KACZ,EACF,CAAC;AAYF,MAAa,qBAAqB,EAChC,OACA,cACA,eACA,eACA,cACA,cACA,aACW;CACX,MAAM,kBAAkB,eAAe,OAAO,MAAM;AACpD,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,cAAD;EACE,SAAS,kBAAkB,cAAc;EACzC,eAAY;EACZ,eAAe,aAAa,MAAM;EAClC,iBAAe;EACf,iBAAe,iBAAiB,MAAM;YALxC,CAOE,oBAAC,aAAD;GACE,KAAI;GACJ,QAAQ,kBAAkB,MAAM,MAAM,SAAS;GAC/C,KAAK,MAAM,MAAM;GACjB,SAAQ;GACR,CAAA,EACF,oBAAC,YAAD;GAAY,WAAU;GAAe,SAAA;GAAQ,YAAA;aAC3C,oBAAC,QAAD,EAAA,UACG,MAAM,MAAM,MAAM,MAAM,GAAG,MAAM,MAAM,QAAS,aAAa,wBAAwB,OAAO,MAAM,MAC9F,CAAA;GACI,CAAA,CACA;KACd,kBACC,oBAAC,cAAD;EACE,IAAI,iBAAiB,MAAM;EAC3B,OAAO;EACQ;EACD;EACA;EACN;EACR,CAAA,GACA,KACH,EAAA,CAAA"}

package/es/PreviewImage.mjs

@@ -6,7 +6,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckLine, CloseLine, HashTag } from "@ndla/icons";
 import { styled } from "@ndla/styled-system/jsx";
 import { getModelReleaseValue } from "@ndla/licenses";
-
 //#region src/PreviewImage.tsx
 /**
 * Copyright (c) 2017-present, NDLA.
@@ -125,7 +124,7 @@ const PreviewImage = ({ id, image, onSelectImage, showCheckbox, translations, lo
 		}) })] })] })]
 	});
 };
-
 //#endregion
 export { PreviewImage };
+
 //# sourceMappingURL=PreviewImage.mjs.map

package/es/PreviewImage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewImage.mjs","names":[],"sources":["../src/PreviewImage.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { CloseLine, HashTag, CheckLine } from \"@ndla/icons\";\nimport { getModelReleaseValue } from \"@ndla/licenses\";\nimport {\n  Button,\n  CheckboxControl,\n  CheckboxHiddenInput,\n  CheckboxIndicator,\n  CheckboxLabel,\n  CheckboxRoot,\n  Text,\n  Image,\n  IconButton,\n  FieldRoot,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\nimport { useState } from \"react\";\nimport { ImageMeta } from \"./ImageMeta\";\nimport type { PreviewTranslations } from \"./ImageSearch\";\nimport { getSrcSets } from \"./util/imageUtil\";\n\nconst ImageContainer = styled(\"div\", {\n  base: {\n    flexShrink: \"0\",\n  },\n});\n\nconst StyledImage = styled(Image, {\n  base: {\n    maxHeight: \"surface.xsmall\",\n  },\n});\n\nconst StyledImageMetadata = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xxsmall\",\n  },\n});\n\nconst HashTagWrapper = styled(\"ul\", {\n  base: {\n    display: \"flex\",\n    gap: \"xxsmall\",\n    flexWrap: \"wrap\",\n  },\n});\n\nconst HashTagGroup = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xxsmall\",\n    flexWrap: \"wrap\",\n  },\n});\n\nconst StyledTagItem = styled(\"li\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n});\n\nconst StyledPreview = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gridColumn: \"1 / -1\",\n    borderColor: \"stroke.default\",\n    border: \"1px solid\",\n    borderRadius: \"xsmall\",\n    gap: \"small\",\n    padding: \"small\",\n    flexWrap: \"wrap\",\n    overflow: \"hidden\",\n  },\n});\n\nconst StyledTopRow = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"medium\",\n    flex: \"2\",\n  },\n});\n\nconst ActionsWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n    marginBlockEnd: \"medium\",\n  },\n});\n\nconst StyledFieldRoot = styled(FieldRoot, {\n  base: { alignSelf: \"center\" },\n});\n\ninterface Props {\n  id: string;\n  image: ImageMetaInformationV3DTO;\n  onSelectImage: (image: ImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => void;\n  showCheckbox: boolean;\n  translations: PreviewTranslations;\n  locale: string;\n}\n\nexport const PreviewImage = ({ id, image, onSelectImage, showCheckbox, translations, locale }: Props) => {\n  const [saveAsMetaImage, setSaveAsMetaImage] = useState(false);\n\n  return (\n    <StyledPreview id={id}>\n      <ImageContainer>\n        <StyledImage\n          alt=\"\"\n          srcSet={getSrcSets(image.image.imageUrl)}\n          sizes=\"(min-width: 800px) 360px, (min-width: 400px) 300px, 100vw\"\n          src={image.image.imageUrl}\n          aria-label={image.title.title}\n          variant=\"rounded\"\n        />\n      </ImageContainer>\n      <ContentWrapper>\n        <StyledImageMetadata>\n          <StyledTopRow>\n            <Text textStyle=\"title.medium\">\n              {image.title.title.trim() ? image.title.title : (translations.missingTitleFallback ?? `ID: ${image.id}`)}\n            </Text>\n            <IconButton\n              variant=\"tertiary\"\n              onClick={() => onSelectImage(undefined)}\n              aria-label={translations.close}\n              title={translations.close}\n            >\n              <CloseLine />\n            </IconButton>\n          </StyledTopRow>\n          {!!image.copyright.creators.length && (\n            <Text>\n              <b>{`${translations.creatorsLabel}: `}</b>\n              {image.copyright.creators.map((creator) => creator.name).join(\", \")}\n            </Text>\n          )}\n          {!!image.copyright.license.description?.trim() && (\n            <Text>\n              <b>{`${translations.license}: `}</b>\n              {image.copyright.license.description}\n            </Text>\n          )}\n          {!!image.caption.caption.trim() && (\n            <Text>\n              <b>{`${translations.caption}: `}</b>\n              {image.caption.caption}\n            </Text>\n          )}\n          {!!image.alttext.alttext.trim() && (\n            <Text>\n              <b>{`${translations.altText}:`}</b> {image.alttext.alttext}\n            </Text>\n          )}\n          {!!image.modelRelease.trim() && (\n            <Text>\n              <b>{`${translations.modelRelease}: `}</b>\n              {getModelReleaseValue(image.modelRelease, locale)}\n            </Text>\n          )}\n          <ImageMeta\n            contentType={image.image.contentType}\n            fileSize={image.image.size}\n            imageDimensions={image.image.dimensions}\n            locale={locale}\n          />\n          {!!image.tags.tags.length && (\n            <HashTagGroup>\n              <Text id=\"tags-title\">\n                <b>{`${translations.tags}: `}</b>\n              </Text>\n              <HashTagWrapper aria-describedby=\"tags-title\">\n                {image.tags.tags.map((tag) => (\n                  <StyledTagItem key={tag}>\n                    <HashTag size=\"small\" />\n                    {tag}\n                  </StyledTagItem>\n                ))}\n              </HashTagWrapper>\n            </HashTagGroup>\n          )}\n        </StyledImageMetadata>\n        <ActionsWrapper>\n          <Button data-testid=\"use-image\" onClick={() => onSelectImage(image, saveAsMetaImage)}>\n            {translations.useImageTitle}\n          </Button>\n          {!!showCheckbox && (\n            <StyledFieldRoot>\n              <CheckboxRoot checked={saveAsMetaImage} onCheckedChange={() => setSaveAsMetaImage((prev) => !prev)}>\n                <CheckboxControl>\n                  <CheckboxIndicator asChild>\n                    <CheckLine />\n                  </CheckboxIndicator>\n                </CheckboxControl>\n                <CheckboxLabel>{translations.checkboxLabel}</CheckboxLabel>\n                <CheckboxHiddenInput />\n              </CheckboxRoot>\n            </StyledFieldRoot>\n          )}\n        </ActionsWrapper>\n      </ContentWrapper>\n    </StyledPreview>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PreviewImage.mjs","names":[],"sources":["../src/PreviewImage.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { CloseLine, HashTag, CheckLine } from \"@ndla/icons\";\nimport { getModelReleaseValue } from \"@ndla/licenses\";\nimport {\n  Button,\n  CheckboxControl,\n  CheckboxHiddenInput,\n  CheckboxIndicator,\n  CheckboxLabel,\n  CheckboxRoot,\n  Text,\n  Image,\n  IconButton,\n  FieldRoot,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\nimport { useState } from \"react\";\nimport { ImageMeta } from \"./ImageMeta\";\nimport type { PreviewTranslations } from \"./types\";\nimport { getSrcSets } from \"./util/imageUtil\";\n\nconst ImageContainer = styled(\"div\", {\n  base: {\n    flexShrink: \"0\",\n  },\n});\n\nconst StyledImage = styled(Image, {\n  base: {\n    maxHeight: \"surface.xsmall\",\n  },\n});\n\nconst StyledImageMetadata = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xxsmall\",\n  },\n});\n\nconst HashTagWrapper = styled(\"ul\", {\n  base: {\n    display: \"flex\",\n    gap: \"xxsmall\",\n    flexWrap: \"wrap\",\n  },\n});\n\nconst HashTagGroup = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xxsmall\",\n    flexWrap: \"wrap\",\n  },\n});\n\nconst StyledTagItem = styled(\"li\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n});\n\nconst StyledPreview = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gridColumn: \"1 / -1\",\n    borderColor: \"stroke.default\",\n    border: \"1px solid\",\n    borderRadius: \"xsmall\",\n    gap: \"small\",\n    padding: \"small\",\n    flexWrap: \"wrap\",\n    overflow: \"hidden\",\n  },\n});\n\nconst StyledTopRow = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"medium\",\n    flex: \"2\",\n  },\n});\n\nconst ActionsWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n    marginBlockEnd: \"medium\",\n  },\n});\n\nconst StyledFieldRoot = styled(FieldRoot, {\n  base: { alignSelf: \"center\" },\n});\n\ninterface Props {\n  id: string;\n  image: ImageMetaInformationV3DTO;\n  onSelectImage: (image: ImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => void;\n  showCheckbox: boolean;\n  translations: PreviewTranslations;\n  locale: string;\n}\n\nexport const PreviewImage = ({ id, image, onSelectImage, showCheckbox, translations, locale }: Props) => {\n  const [saveAsMetaImage, setSaveAsMetaImage] = useState(false);\n\n  return (\n    <StyledPreview id={id}>\n      <ImageContainer>\n        <StyledImage\n          alt=\"\"\n          srcSet={getSrcSets(image.image.imageUrl)}\n          sizes=\"(min-width: 800px) 360px, (min-width: 400px) 300px, 100vw\"\n          src={image.image.imageUrl}\n          aria-label={image.title.title}\n          variant=\"rounded\"\n        />\n      </ImageContainer>\n      <ContentWrapper>\n        <StyledImageMetadata>\n          <StyledTopRow>\n            <Text textStyle=\"title.medium\">\n              {image.title.title.trim() ? image.title.title : (translations.missingTitleFallback ?? `ID: ${image.id}`)}\n            </Text>\n            <IconButton\n              variant=\"tertiary\"\n              onClick={() => onSelectImage(undefined)}\n              aria-label={translations.close}\n              title={translations.close}\n            >\n              <CloseLine />\n            </IconButton>\n          </StyledTopRow>\n          {!!image.copyright.creators.length && (\n            <Text>\n              <b>{`${translations.creatorsLabel}: `}</b>\n              {image.copyright.creators.map((creator) => creator.name).join(\", \")}\n            </Text>\n          )}\n          {!!image.copyright.license.description?.trim() && (\n            <Text>\n              <b>{`${translations.license}: `}</b>\n              {image.copyright.license.description}\n            </Text>\n          )}\n          {!!image.caption.caption.trim() && (\n            <Text>\n              <b>{`${translations.caption}: `}</b>\n              {image.caption.caption}\n            </Text>\n          )}\n          {!!image.alttext.alttext.trim() && (\n            <Text>\n              <b>{`${translations.altText}:`}</b> {image.alttext.alttext}\n            </Text>\n          )}\n          {!!image.modelRelease.trim() && (\n            <Text>\n              <b>{`${translations.modelRelease}: `}</b>\n              {getModelReleaseValue(image.modelRelease, locale)}\n            </Text>\n          )}\n          <ImageMeta\n            contentType={image.image.contentType}\n            fileSize={image.image.size}\n            imageDimensions={image.image.dimensions}\n            locale={locale}\n          />\n          {!!image.tags.tags.length && (\n            <HashTagGroup>\n              <Text id=\"tags-title\">\n                <b>{`${translations.tags}: `}</b>\n              </Text>\n              <HashTagWrapper aria-describedby=\"tags-title\">\n                {image.tags.tags.map((tag) => (\n                  <StyledTagItem key={tag}>\n                    <HashTag size=\"small\" />\n                    {tag}\n                  </StyledTagItem>\n                ))}\n              </HashTagWrapper>\n            </HashTagGroup>\n          )}\n        </StyledImageMetadata>\n        <ActionsWrapper>\n          <Button data-testid=\"use-image\" onClick={() => onSelectImage(image, saveAsMetaImage)}>\n            {translations.useImageTitle}\n          </Button>\n          {!!showCheckbox && (\n            <StyledFieldRoot>\n              <CheckboxRoot checked={saveAsMetaImage} onCheckedChange={() => setSaveAsMetaImage((prev) => !prev)}>\n                <CheckboxControl>\n                  <CheckboxIndicator asChild>\n                    <CheckLine />\n                  </CheckboxIndicator>\n                </CheckboxControl>\n                <CheckboxLabel>{translations.checkboxLabel}</CheckboxLabel>\n                <CheckboxHiddenInput />\n              </CheckboxRoot>\n            </StyledFieldRoot>\n          )}\n        </ActionsWrapper>\n      </ContentWrapper>\n    </StyledPreview>\n  );\n};\n"],"mappings":"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"}

package/es/index.mjs

@@ -1,4 +1,3 @@
 import { ImageMeta } from "./ImageMeta.mjs";
 import { ImageSearch } from "./ImageSearch.mjs";
-
-export { ImageMeta, ImageSearch };
+export { ImageMeta, ImageSearch };

package/es/util/imageUtil.mjs

@@ -21,7 +21,7 @@ const getPreviewSrcSets = (imageUrl) => [
 	`${imageUrl}?width=320 2x`,
 	`${imageUrl}?width=160 1x`
 ].join(", ");
-
 //#endregion
 export { getPreviewSrcSets, getSrcSets };
+
 //# sourceMappingURL=imageUtil.mjs.map

package/lib/ImageMeta.d.ts

@@ -10,7 +10,8 @@ interface Props {
     contentType: string;
     fileSize: number;
     imageDimensions?: ImageDimensionsDTO;
+    originalDate?: string;
     locale: string;
 }
-export declare const ImageMeta: ({ contentType, fileSize, imageDimensions, locale }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageMeta: ({ contentType, fileSize, imageDimensions, originalDate, locale }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/ImageMeta.js

@@ -2,7 +2,6 @@ let _ndla_primitives = require("@ndla/primitives");
 let _ndla_util = require("@ndla/util");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/ImageMeta.tsx
 /**
 * Copyright (c) 2022-present, NDLA.
@@ -11,12 +10,12 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const ImageMeta = ({ contentType, fileSize, imageDimensions, locale }) => {
+const ImageMeta = ({ contentType, fileSize, imageDimensions, originalDate, locale }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Text, { children: `${contentType} - ${(0, react.useMemo)(() => {
 		return (0, _ndla_util.humanFileSize)(fileSize, locale);
-	}, [fileSize, locale])}${imageDimensions ? ` - ${imageDimensions.width}x${imageDimensions.height} px` : ""}` });
+	}, [fileSize, locale])}${imageDimensions ? ` - ${imageDimensions.width}x${imageDimensions.height} px` : ""}${originalDate ? ` - ${originalDate}` : ""}` });
 };
-
 //#endregion
 exports.ImageMeta = ImageMeta;
+
 //# sourceMappingURL=ImageMeta.js.map

package/lib/ImageMeta.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageMeta.js","names":["Text"],"sources":["../src/ImageMeta.tsx"],"sourcesContent":["/**\n * Copyright (c) 2022-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Text } from \"@ndla/primitives\";\nimport type { ImageDimensionsDTO } from \"@ndla/types-backend/image-api\";\nimport { humanFileSize } from \"@ndla/util\";\nimport { useMemo } from \"react\";\n\ninterface Props {\n  contentType: string;\n  fileSize: number;\n  imageDimensions?: ImageDimensionsDTO;\n  locale: string;\n}\n\nexport const ImageMeta = ({ contentType, fileSize, imageDimensions, locale }: Props) => {\n  const prettySize = useMemo(() => {\n    return humanFileSize(fileSize, locale);\n  }, [fileSize, locale]);\n\n  const dimensions = imageDimensions ? ` - ${imageDimensions.width}x${imageDimensions.height} px` : \"\";\n  return <Text>{`${contentType} - ${prettySize}${dimensions}`}</Text>;\n};\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAa,aAAa,EAAE,aAAa,UAAU,iBAAiB,aAAoB;AAMtF,QAAO,2CAACA,mCAAM,GAAG,YAAY,8BALI;AAC/B,uCAAqB,UAAU,OAAO;IACrC,CAAC,UAAU,OAAO,CAAC,GAEH,kBAAkB,MAAM,gBAAgB,MAAM,GAAG,gBAAgB,OAAO,OAAO,OAC/B"}
+{"version":3,"file":"ImageMeta.js","names":["Text"],"sources":["../src/ImageMeta.tsx"],"sourcesContent":["/**\n * Copyright (c) 2022-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Text } from \"@ndla/primitives\";\nimport type { ImageDimensionsDTO } from \"@ndla/types-backend/image-api\";\nimport { humanFileSize } from \"@ndla/util\";\nimport { useMemo } from \"react\";\n\ninterface Props {\n  contentType: string;\n  fileSize: number;\n  imageDimensions?: ImageDimensionsDTO;\n  originalDate?: string;\n  locale: string;\n}\n\nexport const ImageMeta = ({ contentType, fileSize, imageDimensions, originalDate, locale }: Props) => {\n  const prettySize = useMemo(() => {\n    return humanFileSize(fileSize, locale);\n  }, [fileSize, locale]);\n\n  const dimensions = imageDimensions ? ` - ${imageDimensions.width}x${imageDimensions.height} px` : \"\";\n  const date = originalDate ? ` - ${originalDate}` : \"\";\n  return <Text>{`${contentType} - ${prettySize}${dimensions}${date}`}</Text>;\n};\n"],"mappings":";;;;;;;;;;;;AAqBA,MAAa,aAAa,EAAE,aAAa,UAAU,iBAAiB,cAAc,aAAoB;AAOpG,QAAO,iBAAA,GAAA,kBAAA,KAACA,iBAAAA,MAAD,EAAA,UAAO,GAAG,YAAY,MAAA,GAAA,MAAA,eANI;AAC/B,UAAA,GAAA,WAAA,eAAqB,UAAU,OAAO;IACrC,CAAC,UAAU,OAAO,CAAC,GAEH,kBAAkB,MAAM,gBAAgB,MAAM,GAAG,gBAAgB,OAAO,OAAO,KACrF,eAAe,MAAM,iBAAiB,MACuB,CAAA"}

package/lib/ImageSearch.d.ts

@@ -5,27 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { type PaginationRootProps } from "@ndla/primitives";
 import type { ImageMetaInformationV3DTO, SearchResultV3DTO } from "@ndla/types-backend/image-api";
 import { type ReactNode } from "react";
-export interface PreviewTranslations {
-    creatorsLabel: string;
-    license: string;
-    caption: string;
-    altText: string;
-    modelRelease: string;
-    tags: string;
-    close: string;
-    checkboxLabel?: string;
-    missingTitleFallback?: string;
-    useImageTitle: string;
-}
-export interface ImageSearchTranslations {
-    searchPlaceholder: string;
-    searchButtonTitle: string;
-    imagePreview: PreviewTranslations;
-    paginationTranslations: PaginationRootProps["translations"];
-}
+import type { ImageSearchTranslations } from "./types";
 export interface ImageSearchProps {
     onImageSelect: (image: ImageMetaInformationV3DTO) => void;
     searchImages: (query: string | undefined, page: number | undefined) => Promise<SearchResultV3DTO>;

package/lib/ImageSearch.js

@@ -1,10 +1,9 @@
-const require_ImageSearchResult = require('./ImageSearchResult.js');
+const require_ImageSearchResult = require("./ImageSearchResult.js");
 let _ndla_primitives = require("@ndla/primitives");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _ndla_icons = require("@ndla/icons");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
-
 //#region src/ImageSearch.tsx
 /**
 * Copyright (c) 2017-present, NDLA.
@@ -161,7 +160,7 @@ const ImageSearch = ({ onImageSelect, searchImages: search, onError, locale, noR
 		})
 	] });
 };
-
 //#endregion
 exports.ImageSearch = ImageSearch;
+
 //# sourceMappingURL=ImageSearch.js.map

package/lib/ImageSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageSearch.js","names":["PaginationRoot","Button","PaginationItem","Input","IconButton","SearchLine","ImageSearchResult","PaginationPrevTrigger","ArrowLeftShortLine","PaginationContext","PaginationEllipsis","Text","PaginationNextTrigger","ArrowRightShortLine"],"sources":["../src/ImageSearch.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ArrowLeftShortLine, ArrowRightShortLine, SearchLine } from \"@ndla/icons\";\nimport {\n  Button,\n  IconButton,\n  Input,\n  PaginationContext,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationNextTrigger,\n  PaginationPrevTrigger,\n  PaginationRoot,\n  Text,\n  type PaginationRootProps,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageMetaInformationV3DTO, SearchResultV3DTO, SearchParamsDTO } from \"@ndla/types-backend/image-api\";\nimport { type ChangeEvent, type ReactNode, type KeyboardEvent, useEffect, useState } from \"react\";\nimport { ImageSearchResult } from \"./ImageSearchResult\";\n\nconst ImageSearchWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"small\",\n  },\n});\n\nconst StyledSearchResults = styled(\"div\", {\n  base: {\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(auto-fit, minmax(200px, 1fr))\",\n    gridGap: \"xsmall\",\n    gridAutoFlow: \"dense\",\n  },\n});\n\nconst InputWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xsmall\",\n  },\n});\n\nconst StyledPaginationRoot = styled(PaginationRoot, {\n  base: {\n    flexWrap: \"wrap\",\n  },\n});\n\nconst StyledButton = styled(Button, {\n  base: {\n    tabletWideDown: {\n      paddingInline: \"xsmall\",\n      \"& span\": {\n        display: \"none\",\n      },\n    },\n  },\n});\n\nconst StyledPaginationItem = styled(PaginationItem, {\n  base: {\n    tabletWideDown: {\n      \"&:nth-child(2)\": {\n        display: \"none\",\n      },\n      \"&:nth-last-child(2)\": {\n        display: \"none\",\n      },\n    },\n  },\n});\n\nexport interface PreviewTranslations {\n  creatorsLabel: string;\n  license: string;\n  caption: string;\n  altText: string;\n  modelRelease: string;\n  tags: string;\n  close: string;\n  checkboxLabel?: string;\n  missingTitleFallback?: string;\n  useImageTitle: string;\n}\n\nexport interface ImageSearchTranslations {\n  searchPlaceholder: string;\n  searchButtonTitle: string;\n  imagePreview: PreviewTranslations;\n  paginationTranslations: PaginationRootProps[\"translations\"];\n}\n\nexport interface ImageSearchProps {\n  onImageSelect: (image: ImageMetaInformationV3DTO) => void;\n  searchImages: (query: string | undefined, page: number | undefined) => Promise<SearchResultV3DTO>;\n  onError?: (err: any) => void;\n  locale: string;\n  noResults?: ReactNode;\n  checkboxAction?: (image: ImageMetaInformationV3DTO) => void;\n  showCheckbox?: boolean;\n  translations: ImageSearchTranslations;\n}\n\nexport const ImageSearch = ({\n  onImageSelect,\n  searchImages: search,\n  onError,\n  locale,\n  noResults,\n  checkboxAction,\n  showCheckbox,\n  translations,\n}: ImageSearchProps) => {\n  const [queryObject, setQueryObject] = useState<SearchParamsDTO>({\n    query: undefined,\n    page: 1,\n    pageSize: 16,\n  });\n  const [selectedImage, setSelectedImage] = useState<ImageMetaInformationV3DTO | undefined>();\n  const [searching, setSearching] = useState<boolean>(false);\n  const [searchResult, setSearchResult] = useState<SearchResultV3DTO | undefined>();\n\n  const { page } = queryObject;\n  const noResultsFound = !searching && searchResult?.results.length === 0;\n\n  const onSelectImage = (image: ImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => {\n    setSelectedImage(undefined);\n    if (!image) return;\n    onImageSelect(image);\n    if (saveAsMetaImage) {\n      checkboxAction?.(image);\n    }\n  };\n\n  const searchImages = (queryObject: SearchParamsDTO) => {\n    setSearching(true);\n    search(queryObject.query, queryObject.page)\n      .then((result) => {\n        setQueryObject({\n          query: queryObject.query,\n          pageSize: result.pageSize,\n          page: queryObject.page,\n        });\n        setSearchResult(result);\n        setSearching(false);\n      })\n      .catch((err) => {\n        onError?.(err);\n        setSearching(false);\n      });\n  };\n\n  const handleQueryChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {\n    setQueryObject((prevState) => ({\n      ...prevState,\n      query: value,\n    }));\n  };\n\n  const onEnter = (e: KeyboardEvent<HTMLInputElement | HTMLButtonElement>) => {\n    if (e.key === \"Enter\") {\n      searchImages(queryObject);\n    }\n  };\n\n  useEffect(() => {\n    searchImages(queryObject);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <ImageSearchWrapper>\n      <InputWrapper role=\"search\">\n        <Input\n          type=\"search\"\n          placeholder={translations.searchPlaceholder}\n          value={queryObject?.query ?? \"\"}\n          onChange={handleQueryChange}\n          onKeyDown={onEnter}\n        />\n        <IconButton\n          variant=\"primary\"\n          aria-label={translations.searchButtonTitle}\n          title={translations.searchButtonTitle}\n          onKeyDown={onEnter}\n          onClick={() => searchImages(queryObject)}\n        >\n          <SearchLine />\n        </IconButton>\n      </InputWrapper>\n      {!!noResultsFound && noResults}\n      <StyledSearchResults>\n        {searchResult?.results.map((image) => (\n          <ImageSearchResult\n            key={image.id}\n            image={image}\n            onImageClick={(image) => setSelectedImage(image)}\n            selectedImage={selectedImage}\n            onSelectImage={onSelectImage}\n            showCheckbox={!!showCheckbox}\n            translations={translations.imagePreview}\n            locale={locale}\n          />\n        ))}\n      </StyledSearchResults>\n      <StyledPaginationRoot\n        page={page ?? 1}\n        onPageChange={(details) => searchImages({ ...queryObject, page: details.page })}\n        translations={translations.paginationTranslations}\n        count={searchResult?.totalCount ?? 0}\n        pageSize={searchResult?.pageSize}\n        hidden={noResultsFound}\n      >\n        <PaginationPrevTrigger asChild>\n          <StyledButton\n            variant=\"tertiary\"\n            aria-label={translations.paginationTranslations?.prevTriggerLabel}\n            title={translations.paginationTranslations?.prevTriggerLabel}\n          >\n            <ArrowLeftShortLine />\n            <span>{translations.paginationTranslations?.prevTriggerLabel}</span>\n          </StyledButton>\n        </PaginationPrevTrigger>\n        <PaginationContext>\n          {(pagination) =>\n            pagination.pages.map((page, index, full) => {\n              // Hide last page to not trigger RESULT_WINDOW_TOO_LARGE error\n              if (index === full.length - 1) return null;\n              return page.type === \"page\" ? (\n                <StyledPaginationItem key={index} {...page} asChild>\n                  <Button variant={page.value === pagination.page ? \"primary\" : \"tertiary\"}>{page.value}</Button>\n                </StyledPaginationItem>\n              ) : (\n                <PaginationEllipsis key={index} index={index} asChild>\n                  <Text asChild consumeCss>\n                    <div>&#8230;</div>\n                  </Text>\n                </PaginationEllipsis>\n              );\n            })\n          }\n        </PaginationContext>\n        <PaginationNextTrigger asChild>\n          <StyledButton\n            variant=\"tertiary\"\n            aria-label={translations.paginationTranslations?.nextTriggerLabel}\n            title={translations.paginationTranslations?.nextTriggerLabel}\n          >\n            <span>{translations.paginationTranslations?.nextTriggerLabel}</span>\n            <ArrowRightShortLine />\n          </StyledButton>\n        </PaginationNextTrigger>\n      </StyledPaginationRoot>\n    </ImageSearchWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AA2BA,MAAM,yDAA4B,OAAO,EACvC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,0DAA6B,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,qBAAqB;CACrB,SAAS;CACT,cAAc;CACf,EACF,CAAC;AAEF,MAAM,mDAAsB,OAAO,EACjC,MAAM;CACJ,SAAS;CACT,KAAK;CACN,EACF,CAAC;AAEF,MAAM,2DAA8BA,iCAAgB,EAClD,MAAM,EACJ,UAAU,QACX,EACF,CAAC;AAEF,MAAM,mDAAsBC,yBAAQ,EAClC,MAAM,EACJ,gBAAgB;CACd,eAAe;CACf,UAAU,EACR,SAAS,QACV;CACF,EACF,EACF,CAAC;AAEF,MAAM,2DAA8BC,iCAAgB,EAClD,MAAM,EACJ,gBAAgB;CACd,kBAAkB,EAChB,SAAS,QACV;CACD,uBAAuB,EACrB,SAAS,QACV;CACF,EACF,EACF,CAAC;AAiCF,MAAa,eAAe,EAC1B,eACA,cAAc,QACd,SACA,QACA,WACA,gBACA,cACA,mBACsB;CACtB,MAAM,CAAC,aAAa,sCAA4C;EAC9D,OAAO;EACP,MAAM;EACN,UAAU;EACX,CAAC;CACF,MAAM,CAAC,eAAe,yCAAqE;CAC3F,MAAM,CAAC,WAAW,oCAAkC,MAAM;CAC1D,MAAM,CAAC,cAAc,wCAA4D;CAEjF,MAAM,EAAE,SAAS;CACjB,MAAM,iBAAiB,CAAC,aAAa,cAAc,QAAQ,WAAW;CAEtE,MAAM,iBAAiB,OAA8C,oBAA8B;AACjG,mBAAiB,OAAU;AAC3B,MAAI,CAAC,MAAO;AACZ,gBAAc,MAAM;AACpB,MAAI,gBACF,kBAAiB,MAAM;;CAI3B,MAAM,gBAAgB,gBAAiC;AACrD,eAAa,KAAK;AAClB,SAAO,YAAY,OAAO,YAAY,KAAK,CACxC,MAAM,WAAW;AAChB,kBAAe;IACb,OAAO,YAAY;IACnB,UAAU,OAAO;IACjB,MAAM,YAAY;IACnB,CAAC;AACF,mBAAgB,OAAO;AACvB,gBAAa,MAAM;IACnB,CACD,OAAO,QAAQ;AACd,aAAU,IAAI;AACd,gBAAa,MAAM;IACnB;;CAGN,MAAM,qBAAqB,EAAE,QAAQ,EAAE,cAA6C;AAClF,kBAAgB,eAAe;GAC7B,GAAG;GACH,OAAO;GACR,EAAE;;CAGL,MAAM,WAAW,MAA2D;AAC1E,MAAI,EAAE,QAAQ,QACZ,cAAa,YAAY;;AAI7B,4BAAgB;AACd,eAAa,YAAY;IAExB,EAAE,CAAC;AAEN,QACE,4CAAC;EACC,4CAAC;GAAa,MAAK;cACjB,2CAACC;IACC,MAAK;IACL,aAAa,aAAa;IAC1B,OAAO,aAAa,SAAS;IAC7B,UAAU;IACV,WAAW;KACX,EACF,2CAACC;IACC,SAAQ;IACR,cAAY,aAAa;IACzB,OAAO,aAAa;IACpB,WAAW;IACX,eAAe,aAAa,YAAY;cAExC,2CAACC,2BAAa;KACH;IACA;EACd,CAAC,CAAC,kBAAkB;EACrB,2CAAC,iCACE,cAAc,QAAQ,KAAK,UAC1B,2CAACC;GAEQ;GACP,eAAe,UAAU,iBAAiB,MAAM;GACjC;GACA;GACf,cAAc,CAAC,CAAC;GAChB,cAAc,aAAa;GACnB;KAPH,MAAM,GAQX,CACF,GACkB;EACtB,4CAAC;GACC,MAAM,QAAQ;GACd,eAAe,YAAY,aAAa;IAAE,GAAG;IAAa,MAAM,QAAQ;IAAM,CAAC;GAC/E,cAAc,aAAa;GAC3B,OAAO,cAAc,cAAc;GACnC,UAAU,cAAc;GACxB,QAAQ;;IAER,2CAACC;KAAsB;eACrB,4CAAC;MACC,SAAQ;MACR,cAAY,aAAa,wBAAwB;MACjD,OAAO,aAAa,wBAAwB;iBAE5C,2CAACC,mCAAqB,EACtB,2CAAC,oBAAM,aAAa,wBAAwB,mBAAwB;OACvD;MACO;IACxB,2CAACC,iDACG,eACA,WAAW,MAAM,KAAK,MAAM,OAAO,SAAS;AAE1C,SAAI,UAAU,KAAK,SAAS,EAAG,QAAO;AACtC,YAAO,KAAK,SAAS,SACnB,2CAAC;MAAiC,GAAI;MAAM;gBAC1C,2CAACR;OAAO,SAAS,KAAK,UAAU,WAAW,OAAO,YAAY;iBAAa,KAAK;QAAe;QADtE,MAEJ,GAEvB,2CAACS;MAAsC;MAAO;gBAC5C,2CAACC;OAAK;OAAQ;iBACZ,2CAAC,mBAAI,MAAa;QACb;QAHgB,MAIJ;MAEvB,GAEc;IACpB,2CAACC;KAAsB;eACrB,4CAAC;MACC,SAAQ;MACR,cAAY,aAAa,wBAAwB;MACjD,OAAO,aAAa,wBAAwB;iBAE5C,2CAAC,oBAAM,aAAa,wBAAwB,mBAAwB,EACpE,2CAACC,oCAAsB;OACV;MACO;;IACH;KACJ"}
+{"version":3,"file":"ImageSearch.js","names":["PaginationRoot","Button","PaginationItem","Input","IconButton","SearchLine","ImageSearchResult","PaginationPrevTrigger","ArrowLeftShortLine","PaginationContext","PaginationEllipsis","Text","PaginationNextTrigger","ArrowRightShortLine"],"sources":["../src/ImageSearch.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ArrowLeftShortLine, ArrowRightShortLine, SearchLine } from \"@ndla/icons\";\nimport {\n  Button,\n  IconButton,\n  Input,\n  PaginationContext,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationNextTrigger,\n  PaginationPrevTrigger,\n  PaginationRoot,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageMetaInformationV3DTO, SearchResultV3DTO, SearchParamsDTO } from \"@ndla/types-backend/image-api\";\nimport { type ChangeEvent, type ReactNode, type KeyboardEvent, useEffect, useState } from \"react\";\nimport { ImageSearchResult } from \"./ImageSearchResult\";\nimport type { ImageSearchTranslations } from \"./types\";\n\nconst ImageSearchWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"small\",\n  },\n});\n\nconst StyledSearchResults = styled(\"div\", {\n  base: {\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(auto-fit, minmax(200px, 1fr))\",\n    gridGap: \"xsmall\",\n    gridAutoFlow: \"dense\",\n  },\n});\n\nconst InputWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xsmall\",\n  },\n});\n\nconst StyledPaginationRoot = styled(PaginationRoot, {\n  base: {\n    flexWrap: \"wrap\",\n  },\n});\n\nconst StyledButton = styled(Button, {\n  base: {\n    tabletWideDown: {\n      paddingInline: \"xsmall\",\n      \"& span\": {\n        display: \"none\",\n      },\n    },\n  },\n});\n\nconst StyledPaginationItem = styled(PaginationItem, {\n  base: {\n    tabletWideDown: {\n      \"&:nth-child(2)\": {\n        display: \"none\",\n      },\n      \"&:nth-last-child(2)\": {\n        display: \"none\",\n      },\n    },\n  },\n});\n\nexport interface ImageSearchProps {\n  onImageSelect: (image: ImageMetaInformationV3DTO) => void;\n  searchImages: (query: string | undefined, page: number | undefined) => Promise<SearchResultV3DTO>;\n  onError?: (err: any) => void;\n  locale: string;\n  noResults?: ReactNode;\n  checkboxAction?: (image: ImageMetaInformationV3DTO) => void;\n  showCheckbox?: boolean;\n  translations: ImageSearchTranslations;\n}\n\nexport const ImageSearch = ({\n  onImageSelect,\n  searchImages: search,\n  onError,\n  locale,\n  noResults,\n  checkboxAction,\n  showCheckbox,\n  translations,\n}: ImageSearchProps) => {\n  const [queryObject, setQueryObject] = useState<SearchParamsDTO>({\n    query: undefined,\n    page: 1,\n    pageSize: 16,\n  });\n  const [selectedImage, setSelectedImage] = useState<ImageMetaInformationV3DTO | undefined>();\n  const [searching, setSearching] = useState<boolean>(false);\n  const [searchResult, setSearchResult] = useState<SearchResultV3DTO | undefined>();\n\n  const { page } = queryObject;\n  const noResultsFound = !searching && searchResult?.results.length === 0;\n\n  const onSelectImage = (image: ImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => {\n    setSelectedImage(undefined);\n    if (!image) return;\n    onImageSelect(image);\n    if (saveAsMetaImage) {\n      checkboxAction?.(image);\n    }\n  };\n\n  const searchImages = (queryObject: SearchParamsDTO) => {\n    setSearching(true);\n    search(queryObject.query, queryObject.page)\n      .then((result) => {\n        setQueryObject({\n          query: queryObject.query,\n          pageSize: result.pageSize,\n          page: queryObject.page,\n        });\n        setSearchResult(result);\n        setSearching(false);\n      })\n      .catch((err) => {\n        onError?.(err);\n        setSearching(false);\n      });\n  };\n\n  const handleQueryChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {\n    setQueryObject((prevState) => ({\n      ...prevState,\n      query: value,\n    }));\n  };\n\n  const onEnter = (e: KeyboardEvent<HTMLInputElement | HTMLButtonElement>) => {\n    if (e.key === \"Enter\") {\n      searchImages(queryObject);\n    }\n  };\n\n  useEffect(() => {\n    searchImages(queryObject);\n    // oxlint-disable-next-line react/exhaustive-deps\n  }, []);\n\n  return (\n    <ImageSearchWrapper>\n      <InputWrapper role=\"search\">\n        <Input\n          type=\"search\"\n          placeholder={translations.searchPlaceholder}\n          value={queryObject?.query ?? \"\"}\n          onChange={handleQueryChange}\n          onKeyDown={onEnter}\n        />\n        <IconButton\n          variant=\"primary\"\n          aria-label={translations.searchButtonTitle}\n          title={translations.searchButtonTitle}\n          onKeyDown={onEnter}\n          onClick={() => searchImages(queryObject)}\n        >\n          <SearchLine />\n        </IconButton>\n      </InputWrapper>\n      {!!noResultsFound && noResults}\n      <StyledSearchResults>\n        {searchResult?.results.map((image) => (\n          <ImageSearchResult\n            key={image.id}\n            image={image}\n            onImageClick={(image) => setSelectedImage(image)}\n            selectedImage={selectedImage}\n            onSelectImage={onSelectImage}\n            showCheckbox={!!showCheckbox}\n            translations={translations.imagePreview}\n            locale={locale}\n          />\n        ))}\n      </StyledSearchResults>\n      <StyledPaginationRoot\n        page={page ?? 1}\n        onPageChange={(details) => searchImages({ ...queryObject, page: details.page })}\n        translations={translations.paginationTranslations}\n        count={searchResult?.totalCount ?? 0}\n        pageSize={searchResult?.pageSize}\n        hidden={noResultsFound}\n      >\n        <PaginationPrevTrigger asChild>\n          <StyledButton\n            variant=\"tertiary\"\n            aria-label={translations.paginationTranslations?.prevTriggerLabel}\n            title={translations.paginationTranslations?.prevTriggerLabel}\n          >\n            <ArrowLeftShortLine />\n            <span>{translations.paginationTranslations?.prevTriggerLabel}</span>\n          </StyledButton>\n        </PaginationPrevTrigger>\n        <PaginationContext>\n          {(pagination) =>\n            pagination.pages.map((page, index, full) => {\n              // Hide last page to not trigger RESULT_WINDOW_TOO_LARGE error\n              if (index === full.length - 1) return null;\n              return page.type === \"page\" ? (\n                <StyledPaginationItem key={index} {...page} asChild>\n                  <Button variant={page.value === pagination.page ? \"primary\" : \"tertiary\"}>{page.value}</Button>\n                </StyledPaginationItem>\n              ) : (\n                <PaginationEllipsis key={index} index={index} asChild>\n                  <Text asChild consumeCss>\n                    <div>&#8230;</div>\n                  </Text>\n                </PaginationEllipsis>\n              );\n            })\n          }\n        </PaginationContext>\n        <PaginationNextTrigger asChild>\n          <StyledButton\n            variant=\"tertiary\"\n            aria-label={translations.paginationTranslations?.nextTriggerLabel}\n            title={translations.paginationTranslations?.nextTriggerLabel}\n          >\n            <span>{translations.paginationTranslations?.nextTriggerLabel}</span>\n            <ArrowRightShortLine />\n          </StyledButton>\n        </PaginationNextTrigger>\n      </StyledPaginationRoot>\n    </ImageSearchWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAM,sBAAA,GAAA,wBAAA,QAA4B,OAAO,EACvC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,uBAAA,GAAA,wBAAA,QAA6B,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,qBAAqB;CACrB,SAAS;CACT,cAAc;CACf,EACF,CAAC;AAEF,MAAM,gBAAA,GAAA,wBAAA,QAAsB,OAAO,EACjC,MAAM;CACJ,SAAS;CACT,KAAK;CACN,EACF,CAAC;AAEF,MAAM,wBAAA,GAAA,wBAAA,QAA8BA,iBAAAA,gBAAgB,EAClD,MAAM,EACJ,UAAU,QACX,EACF,CAAC;AAEF,MAAM,gBAAA,GAAA,wBAAA,QAAsBC,iBAAAA,QAAQ,EAClC,MAAM,EACJ,gBAAgB;CACd,eAAe;CACf,UAAU,EACR,SAAS,QACV;CACF,EACF,EACF,CAAC;AAEF,MAAM,wBAAA,GAAA,wBAAA,QAA8BC,iBAAAA,gBAAgB,EAClD,MAAM,EACJ,gBAAgB;CACd,kBAAkB,EAChB,SAAS,QACV;CACD,uBAAuB,EACrB,SAAS,QACV;CACF,EACF,EACF,CAAC;AAaF,MAAa,eAAe,EAC1B,eACA,cAAc,QACd,SACA,QACA,WACA,gBACA,cACA,mBACsB;CACtB,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,UAA4C;EAC9D,OAAO,KAAA;EACP,MAAM;EACN,UAAU;EACX,CAAC;CACF,MAAM,CAAC,eAAe,qBAAA,GAAA,MAAA,WAAqE;CAC3F,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,UAAkC,MAAM;CAC1D,MAAM,CAAC,cAAc,oBAAA,GAAA,MAAA,WAA4D;CAEjF,MAAM,EAAE,SAAS;CACjB,MAAM,iBAAiB,CAAC,aAAa,cAAc,QAAQ,WAAW;CAEtE,MAAM,iBAAiB,OAA8C,oBAA8B;AACjG,mBAAiB,KAAA,EAAU;AAC3B,MAAI,CAAC,MAAO;AACZ,gBAAc,MAAM;AACpB,MAAI,gBACF,kBAAiB,MAAM;;CAI3B,MAAM,gBAAgB,gBAAiC;AACrD,eAAa,KAAK;AAClB,SAAO,YAAY,OAAO,YAAY,KAAK,CACxC,MAAM,WAAW;AAChB,kBAAe;IACb,OAAO,YAAY;IACnB,UAAU,OAAO;IACjB,MAAM,YAAY;IACnB,CAAC;AACF,mBAAgB,OAAO;AACvB,gBAAa,MAAM;IACnB,CACD,OAAO,QAAQ;AACd,aAAU,IAAI;AACd,gBAAa,MAAM;IACnB;;CAGN,MAAM,qBAAqB,EAAE,QAAQ,EAAE,cAA6C;AAClF,kBAAgB,eAAe;GAC7B,GAAG;GACH,OAAO;GACR,EAAE;;CAGL,MAAM,WAAW,MAA2D;AAC1E,MAAI,EAAE,QAAQ,QACZ,cAAa,YAAY;;AAI7B,EAAA,GAAA,MAAA,iBAAgB;AACd,eAAa,YAAY;IAExB,EAAE,CAAC;AAEN,QACE,iBAAA,GAAA,kBAAA,MAAC,oBAAD,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;GAAc,MAAK;aAAnB,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,OAAD;IACE,MAAK;IACL,aAAa,aAAa;IAC1B,OAAO,aAAa,SAAS;IAC7B,UAAU;IACV,WAAW;IACX,CAAA,EACF,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,YAAD;IACE,SAAQ;IACR,cAAY,aAAa;IACzB,OAAO,aAAa;IACpB,WAAW;IACX,eAAe,aAAa,YAAY;cAExC,iBAAA,GAAA,kBAAA,KAACC,YAAAA,YAAD,EAAc,CAAA;IACH,CAAA,CACA;;EACd,CAAC,CAAC,kBAAkB;EACrB,iBAAA,GAAA,kBAAA,KAAC,qBAAD,EAAA,UACG,cAAc,QAAQ,KAAK,UAC1B,iBAAA,GAAA,kBAAA,KAACC,0BAAAA,mBAAD;GAES;GACP,eAAe,UAAU,iBAAiB,MAAM;GACjC;GACA;GACf,cAAc,CAAC,CAAC;GAChB,cAAc,aAAa;GACnB;GACR,EARK,MAAM,GAQX,CACF,EACkB,CAAA;EACtB,iBAAA,GAAA,kBAAA,MAAC,sBAAD;GACE,MAAM,QAAQ;GACd,eAAe,YAAY,aAAa;IAAE,GAAG;IAAa,MAAM,QAAQ;IAAM,CAAC;GAC/E,cAAc,aAAa;GAC3B,OAAO,cAAc,cAAc;GACnC,UAAU,cAAc;GACxB,QAAQ;aANV;IAQE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,uBAAD;KAAuB,SAAA;eACrB,iBAAA,GAAA,kBAAA,MAAC,cAAD;MACE,SAAQ;MACR,cAAY,aAAa,wBAAwB;MACjD,OAAO,aAAa,wBAAwB;gBAH9C,CAKE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,oBAAD,EAAsB,CAAA,EACtB,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,aAAa,wBAAwB,kBAAwB,CAAA,CACvD;;KACO,CAAA;IACxB,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,mBAAD,EAAA,WACI,eACA,WAAW,MAAM,KAAK,MAAM,OAAO,SAAS;AAE1C,SAAI,UAAU,KAAK,SAAS,EAAG,QAAO;AACtC,YAAO,KAAK,SAAS,SACnB,iBAAA,GAAA,kBAAA,KAAC,sBAAD;MAAkC,GAAI;MAAM,SAAA;gBAC1C,iBAAA,GAAA,kBAAA,KAACR,iBAAAA,QAAD;OAAQ,SAAS,KAAK,UAAU,WAAW,OAAO,YAAY;iBAAa,KAAK;OAAe,CAAA;MAC1E,EAFI,MAEJ,GAEvB,iBAAA,GAAA,kBAAA,KAACS,iBAAAA,oBAAD;MAAuC;MAAO,SAAA;gBAC5C,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,MAAD;OAAM,SAAA;OAAQ,YAAA;iBACZ,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,UAAK,KAAa,CAAA;OACb,CAAA;MACY,EAJI,MAIJ;MAEvB,EAEc,CAAA;IACpB,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,uBAAD;KAAuB,SAAA;eACrB,iBAAA,GAAA,kBAAA,MAAC,cAAD;MACE,SAAQ;MACR,cAAY,aAAa,wBAAwB;MACjD,OAAO,aAAa,wBAAwB;gBAH9C,CAKE,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,aAAa,wBAAwB,kBAAwB,CAAA,EACpE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,qBAAD,EAAuB,CAAA,CACV;;KACO,CAAA;IACH;;EACJ,EAAA,CAAA"}

package/lib/ImageSearchResult.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import type { ImageMetaInformationV3DTO } from "@ndla/types-backend/image-api";
-import type { PreviewTranslations } from "./ImageSearch";
+import type { PreviewTranslations } from "./types";
 interface Props {
     image: ImageMetaInformationV3DTO;
     onImageClick: (image: ImageMetaInformationV3DTO) => void;

package/lib/ImageSearchResult.js

@@ -1,9 +1,8 @@
-const require_imageUtil = require('./util/imageUtil.js');
-const require_PreviewImage = require('./PreviewImage.js');
+const require_imageUtil = require("./util/imageUtil.js");
+const require_PreviewImage = require("./PreviewImage.js");
 let _ndla_primitives = require("@ndla/primitives");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
-
 //#region src/ImageSearchResult.tsx
 /**
 * Copyright (c) 2017-present, NDLA.
@@ -51,7 +50,7 @@ const ImageSearchResult = ({ image, onImageClick, selectedImage, onSelectImage,
 		locale
 	}) : null] });
 };
-
 //#endregion
 exports.ImageSearchResult = ImageSearchResult;
+
 //# sourceMappingURL=ImageSearchResult.js.map

package/lib/ImageSearchResult.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageSearchResult.js","names":["Button","Image","Text","getPreviewSrcSets","PreviewImage"],"sources":["../src/ImageSearchResult.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Text, Image, Button } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\nimport type { PreviewTranslations } from \"./ImageSearch\";\nimport { PreviewImage } from \"./PreviewImage\";\nimport { getPreviewSrcSets } from \"./util/imageUtil\";\n\nconst StyledButton = styled(Button, {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    borderColor: \"stroke.subtle\",\n  },\n});\n\nconst StyledImage = styled(Image, {\n  base: {\n    maxHeight: \"135px\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    lineClamp: \"3\",\n  },\n});\n\ninterface Props {\n  image: ImageMetaInformationV3DTO;\n  onImageClick: (image: ImageMetaInformationV3DTO) => void;\n  selectedImage?: ImageMetaInformationV3DTO;\n  onSelectImage: (image: ImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => void;\n  showCheckbox: boolean;\n  translations: PreviewTranslations;\n  locale: string;\n}\n\nexport const ImageSearchResult = ({\n  image,\n  onImageClick,\n  selectedImage,\n  onSelectImage,\n  showCheckbox,\n  translations,\n  locale,\n}: Props) => {\n  const isSelectedImage = selectedImage?.id === image.id;\n  return (\n    <>\n      <StyledButton\n        variant={isSelectedImage ? \"secondary\" : \"tertiary\"}\n        data-testid=\"select-image-from-list\"\n        onClick={() => onImageClick(image)}\n        aria-expanded={isSelectedImage}\n        aria-controls={`image-preview-${image.id}`}\n      >\n        <StyledImage\n          alt=\"\"\n          srcSet={getPreviewSrcSets(image.image.imageUrl)}\n          src={image.image.imageUrl}\n          variant=\"rounded\"\n        />\n        <StyledText textStyle=\"label.medium\" asChild consumeCss>\n          <span>\n            {image.title.title.trim() ? image.title.title : (translations.missingTitleFallback ?? `ID: ${image.id}`)}\n          </span>\n        </StyledText>\n      </StyledButton>\n      {isSelectedImage ? (\n        <PreviewImage\n          id={`image-preview-${image.id}`}\n          image={selectedImage}\n          onSelectImage={onSelectImage}\n          translations={translations}\n          showCheckbox={showCheckbox}\n          locale={locale}\n        />\n      ) : null}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,mDAAsBA,yBAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,aAAa;CACd,EACF,CAAC;AAEF,MAAM,kDAAqBC,wBAAO,EAChC,MAAM;CACJ,WAAW;CACX,OAAO;CACP,QAAQ;CACT,EACF,CAAC;AAEF,MAAM,iDAAoBC,uBAAM,EAC9B,MAAM,EACJ,WAAW,KACZ,EACF,CAAC;AAYF,MAAa,qBAAqB,EAChC,OACA,cACA,eACA,eACA,cACA,cACA,aACW;CACX,MAAM,kBAAkB,eAAe,OAAO,MAAM;AACpD,QACE,qFACE,4CAAC;EACC,SAAS,kBAAkB,cAAc;EACzC,eAAY;EACZ,eAAe,aAAa,MAAM;EAClC,iBAAe;EACf,iBAAe,iBAAiB,MAAM;aAEtC,2CAAC;GACC,KAAI;GACJ,QAAQC,oCAAkB,MAAM,MAAM,SAAS;GAC/C,KAAK,MAAM,MAAM;GACjB,SAAQ;IACR,EACF,2CAAC;GAAW,WAAU;GAAe;GAAQ;aAC3C,2CAAC,oBACE,MAAM,MAAM,MAAM,MAAM,GAAG,MAAM,MAAM,QAAS,aAAa,wBAAwB,OAAO,MAAM,OAC9F;IACI;GACA,EACd,kBACC,2CAACC;EACC,IAAI,iBAAiB,MAAM;EAC3B,OAAO;EACQ;EACD;EACA;EACN;GACR,GACA,QACH"}
+{"version":3,"file":"ImageSearchResult.js","names":["Button","Image","Text","getPreviewSrcSets","PreviewImage"],"sources":["../src/ImageSearchResult.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Text, Image, Button } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\nimport { PreviewImage } from \"./PreviewImage\";\nimport type { PreviewTranslations } from \"./types\";\nimport { getPreviewSrcSets } from \"./util/imageUtil\";\n\nconst StyledButton = styled(Button, {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    borderColor: \"stroke.subtle\",\n  },\n});\n\nconst StyledImage = styled(Image, {\n  base: {\n    maxHeight: \"135px\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    lineClamp: \"3\",\n  },\n});\n\ninterface Props {\n  image: ImageMetaInformationV3DTO;\n  onImageClick: (image: ImageMetaInformationV3DTO) => void;\n  selectedImage?: ImageMetaInformationV3DTO;\n  onSelectImage: (image: ImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => void;\n  showCheckbox: boolean;\n  translations: PreviewTranslations;\n  locale: string;\n}\n\nexport const ImageSearchResult = ({\n  image,\n  onImageClick,\n  selectedImage,\n  onSelectImage,\n  showCheckbox,\n  translations,\n  locale,\n}: Props) => {\n  const isSelectedImage = selectedImage?.id === image.id;\n  return (\n    <>\n      <StyledButton\n        variant={isSelectedImage ? \"secondary\" : \"tertiary\"}\n        data-testid=\"select-image-from-list\"\n        onClick={() => onImageClick(image)}\n        aria-expanded={isSelectedImage}\n        aria-controls={`image-preview-${image.id}`}\n      >\n        <StyledImage\n          alt=\"\"\n          srcSet={getPreviewSrcSets(image.image.imageUrl)}\n          src={image.image.imageUrl}\n          variant=\"rounded\"\n        />\n        <StyledText textStyle=\"label.medium\" asChild consumeCss>\n          <span>\n            {image.title.title.trim() ? image.title.title : (translations.missingTitleFallback ?? `ID: ${image.id}`)}\n          </span>\n        </StyledText>\n      </StyledButton>\n      {isSelectedImage ? (\n        <PreviewImage\n          id={`image-preview-${image.id}`}\n          image={selectedImage}\n          onSelectImage={onSelectImage}\n          translations={translations}\n          showCheckbox={showCheckbox}\n          locale={locale}\n        />\n      ) : null}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,gBAAA,GAAA,wBAAA,QAAsBA,iBAAAA,QAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,aAAa;CACd,EACF,CAAC;AAEF,MAAM,eAAA,GAAA,wBAAA,QAAqBC,iBAAAA,OAAO,EAChC,MAAM;CACJ,WAAW;CACX,OAAO;CACP,QAAQ;CACT,EACF,CAAC;AAEF,MAAM,cAAA,GAAA,wBAAA,QAAoBC,iBAAAA,MAAM,EAC9B,MAAM,EACJ,WAAW,KACZ,EACF,CAAC;AAYF,MAAa,qBAAqB,EAChC,OACA,cACA,eACA,eACA,cACA,cACA,aACW;CACX,MAAM,kBAAkB,eAAe,OAAO,MAAM;AACpD,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EACE,SAAS,kBAAkB,cAAc;EACzC,eAAY;EACZ,eAAe,aAAa,MAAM;EAClC,iBAAe;EACf,iBAAe,iBAAiB,MAAM;YALxC,CAOE,iBAAA,GAAA,kBAAA,KAAC,aAAD;GACE,KAAI;GACJ,QAAQC,kBAAAA,kBAAkB,MAAM,MAAM,SAAS;GAC/C,KAAK,MAAM,MAAM;GACjB,SAAQ;GACR,CAAA,EACF,iBAAA,GAAA,kBAAA,KAAC,YAAD;GAAY,WAAU;GAAe,SAAA;GAAQ,YAAA;aAC3C,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UACG,MAAM,MAAM,MAAM,MAAM,GAAG,MAAM,MAAM,QAAS,aAAa,wBAAwB,OAAO,MAAM,MAC9F,CAAA;GACI,CAAA,CACA;KACd,kBACC,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;EACE,IAAI,iBAAiB,MAAM;EAC3B,OAAO;EACQ;EACD;EACA;EACN;EACR,CAAA,GACA,KACH,EAAA,CAAA"}

package/lib/PreviewImage.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import type { ImageMetaInformationV3DTO } from "@ndla/types-backend/image-api";
-import type { PreviewTranslations } from "./ImageSearch";
+import type { PreviewTranslations } from "./types";
 interface Props {
     id: string;
     image: ImageMetaInformationV3DTO;

package/lib/PreviewImage.js

@@ -1,12 +1,11 @@
-const require_ImageMeta = require('./ImageMeta.js');
-const require_imageUtil = require('./util/imageUtil.js');
+const require_ImageMeta = require("./ImageMeta.js");
+const require_imageUtil = require("./util/imageUtil.js");
 let _ndla_primitives = require("@ndla/primitives");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _ndla_icons = require("@ndla/icons");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let _ndla_licenses = require("@ndla/licenses");
-
 //#region src/PreviewImage.tsx
 /**
 * Copyright (c) 2017-present, NDLA.
@@ -125,7 +124,7 @@ const PreviewImage = ({ id, image, onSelectImage, showCheckbox, translations, lo
 		}) })] })] })]
 	});
 };
-
 //#endregion
 exports.PreviewImage = PreviewImage;
+
 //# sourceMappingURL=PreviewImage.js.map

package/lib/PreviewImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewImage.js","names":["Image","FieldRoot","getSrcSets","Text","IconButton","CloseLine","ImageMeta","HashTag","Button","CheckboxRoot","CheckboxControl","CheckboxIndicator","CheckLine","CheckboxLabel","CheckboxHiddenInput"],"sources":["../src/PreviewImage.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { CloseLine, HashTag, CheckLine } from \"@ndla/icons\";\nimport { getModelReleaseValue } from \"@ndla/licenses\";\nimport {\n  Button,\n  CheckboxControl,\n  CheckboxHiddenInput,\n  CheckboxIndicator,\n  CheckboxLabel,\n  CheckboxRoot,\n  Text,\n  Image,\n  IconButton,\n  FieldRoot,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\nimport { useState } from \"react\";\nimport { ImageMeta } from \"./ImageMeta\";\nimport type { PreviewTranslations } from \"./ImageSearch\";\nimport { getSrcSets } from \"./util/imageUtil\";\n\nconst ImageContainer = styled(\"div\", {\n  base: {\n    flexShrink: \"0\",\n  },\n});\n\nconst StyledImage = styled(Image, {\n  base: {\n    maxHeight: \"surface.xsmall\",\n  },\n});\n\nconst StyledImageMetadata = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xxsmall\",\n  },\n});\n\nconst HashTagWrapper = styled(\"ul\", {\n  base: {\n    display: \"flex\",\n    gap: \"xxsmall\",\n    flexWrap: \"wrap\",\n  },\n});\n\nconst HashTagGroup = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xxsmall\",\n    flexWrap: \"wrap\",\n  },\n});\n\nconst StyledTagItem = styled(\"li\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n});\n\nconst StyledPreview = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gridColumn: \"1 / -1\",\n    borderColor: \"stroke.default\",\n    border: \"1px solid\",\n    borderRadius: \"xsmall\",\n    gap: \"small\",\n    padding: \"small\",\n    flexWrap: \"wrap\",\n    overflow: \"hidden\",\n  },\n});\n\nconst StyledTopRow = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"medium\",\n    flex: \"2\",\n  },\n});\n\nconst ActionsWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n    marginBlockEnd: \"medium\",\n  },\n});\n\nconst StyledFieldRoot = styled(FieldRoot, {\n  base: { alignSelf: \"center\" },\n});\n\ninterface Props {\n  id: string;\n  image: ImageMetaInformationV3DTO;\n  onSelectImage: (image: ImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => void;\n  showCheckbox: boolean;\n  translations: PreviewTranslations;\n  locale: string;\n}\n\nexport const PreviewImage = ({ id, image, onSelectImage, showCheckbox, translations, locale }: Props) => {\n  const [saveAsMetaImage, setSaveAsMetaImage] = useState(false);\n\n  return (\n    <StyledPreview id={id}>\n      <ImageContainer>\n        <StyledImage\n          alt=\"\"\n          srcSet={getSrcSets(image.image.imageUrl)}\n          sizes=\"(min-width: 800px) 360px, (min-width: 400px) 300px, 100vw\"\n          src={image.image.imageUrl}\n          aria-label={image.title.title}\n          variant=\"rounded\"\n        />\n      </ImageContainer>\n      <ContentWrapper>\n        <StyledImageMetadata>\n          <StyledTopRow>\n            <Text textStyle=\"title.medium\">\n              {image.title.title.trim() ? image.title.title : (translations.missingTitleFallback ?? `ID: ${image.id}`)}\n            </Text>\n            <IconButton\n              variant=\"tertiary\"\n              onClick={() => onSelectImage(undefined)}\n              aria-label={translations.close}\n              title={translations.close}\n            >\n              <CloseLine />\n            </IconButton>\n          </StyledTopRow>\n          {!!image.copyright.creators.length && (\n            <Text>\n              <b>{`${translations.creatorsLabel}: `}</b>\n              {image.copyright.creators.map((creator) => creator.name).join(\", \")}\n            </Text>\n          )}\n          {!!image.copyright.license.description?.trim() && (\n            <Text>\n              <b>{`${translations.license}: `}</b>\n              {image.copyright.license.description}\n            </Text>\n          )}\n          {!!image.caption.caption.trim() && (\n            <Text>\n              <b>{`${translations.caption}: `}</b>\n              {image.caption.caption}\n            </Text>\n          )}\n          {!!image.alttext.alttext.trim() && (\n            <Text>\n              <b>{`${translations.altText}:`}</b> {image.alttext.alttext}\n            </Text>\n          )}\n          {!!image.modelRelease.trim() && (\n            <Text>\n              <b>{`${translations.modelRelease}: `}</b>\n              {getModelReleaseValue(image.modelRelease, locale)}\n            </Text>\n          )}\n          <ImageMeta\n            contentType={image.image.contentType}\n            fileSize={image.image.size}\n            imageDimensions={image.image.dimensions}\n            locale={locale}\n          />\n          {!!image.tags.tags.length && (\n            <HashTagGroup>\n              <Text id=\"tags-title\">\n                <b>{`${translations.tags}: `}</b>\n              </Text>\n              <HashTagWrapper aria-describedby=\"tags-title\">\n                {image.tags.tags.map((tag) => (\n                  <StyledTagItem key={tag}>\n                    <HashTag size=\"small\" />\n                    {tag}\n                  </StyledTagItem>\n                ))}\n              </HashTagWrapper>\n            </HashTagGroup>\n          )}\n        </StyledImageMetadata>\n        <ActionsWrapper>\n          <Button data-testid=\"use-image\" onClick={() => onSelectImage(image, saveAsMetaImage)}>\n            {translations.useImageTitle}\n          </Button>\n          {!!showCheckbox && (\n            <StyledFieldRoot>\n              <CheckboxRoot checked={saveAsMetaImage} onCheckedChange={() => setSaveAsMetaImage((prev) => !prev)}>\n                <CheckboxControl>\n                  <CheckboxIndicator asChild>\n                    <CheckLine />\n                  </CheckboxIndicator>\n                </CheckboxControl>\n                <CheckboxLabel>{translations.checkboxLabel}</CheckboxLabel>\n                <CheckboxHiddenInput />\n              </CheckboxRoot>\n            </StyledFieldRoot>\n          )}\n        </ActionsWrapper>\n      </ContentWrapper>\n    </StyledPreview>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA6BA,MAAM,qDAAwB,OAAO,EACnC,MAAM,EACJ,YAAY,KACb,EACF,CAAC;AAEF,MAAM,kDAAqBA,wBAAO,EAChC,MAAM,EACJ,WAAW,kBACZ,EACF,CAAC;AAEF,MAAM,0DAA6B,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,qDAAwB,MAAM,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,UAAU;CACX,EACF,CAAC;AAEF,MAAM,mDAAsB,OAAO,EACjC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,UAAU;CACX,EACF,CAAC;AAEF,MAAM,oDAAuB,MAAM,EACjC,MAAM;CACJ,SAAS;CACT,YAAY;CACb,EACF,CAAC;AAEF,MAAM,oDAAuB,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,aAAa;CACb,QAAQ;CACR,cAAc;CACd,KAAK;CACL,SAAS;CACT,UAAU;CACV,UAAU;CACX,EACF,CAAC;AAEF,MAAM,mDAAsB,OAAO,EACjC,MAAM;CACJ,SAAS;CACT,gBAAgB;CACjB,EACF,CAAC;AAEF,MAAM,qDAAwB,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,MAAM;CACP,EACF,CAAC;AAEF,MAAM,qDAAwB,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,gBAAgB;CACjB,EACF,CAAC;AAEF,MAAM,sDAAyBC,4BAAW,EACxC,MAAM,EAAE,WAAW,UAAU,EAC9B,CAAC;AAWF,MAAa,gBAAgB,EAAE,IAAI,OAAO,eAAe,cAAc,cAAc,aAAoB;CACvG,MAAM,CAAC,iBAAiB,0CAA+B,MAAM;AAE7D,QACE,4CAAC;EAAkB;aACjB,2CAAC,4BACC,2CAAC;GACC,KAAI;GACJ,QAAQC,6BAAW,MAAM,MAAM,SAAS;GACxC,OAAM;GACN,KAAK,MAAM,MAAM;GACjB,cAAY,MAAM,MAAM;GACxB,SAAQ;IACR,GACa,EACjB,4CAAC,6BACC,4CAAC;GACC,4CAAC,2BACC,2CAACC;IAAK,WAAU;cACb,MAAM,MAAM,MAAM,MAAM,GAAG,MAAM,MAAM,QAAS,aAAa,wBAAwB,OAAO,MAAM;KAC9F,EACP,2CAACC;IACC,SAAQ;IACR,eAAe,cAAc,OAAU;IACvC,cAAY,aAAa;IACzB,OAAO,aAAa;cAEpB,2CAACC,0BAAY;KACF,IACA;GACd,CAAC,CAAC,MAAM,UAAU,SAAS,UAC1B,4CAACF,oCACC,2CAAC,iBAAG,GAAG,aAAa,cAAc,MAAQ,EACzC,MAAM,UAAU,SAAS,KAAK,YAAY,QAAQ,KAAK,CAAC,KAAK,KAAK,IAC9D;GAER,CAAC,CAAC,MAAM,UAAU,QAAQ,aAAa,MAAM,IAC5C,4CAACA,oCACC,2CAAC,iBAAG,GAAG,aAAa,QAAQ,MAAQ,EACnC,MAAM,UAAU,QAAQ,eACpB;GAER,CAAC,CAAC,MAAM,QAAQ,QAAQ,MAAM,IAC7B,4CAACA,oCACC,2CAAC,iBAAG,GAAG,aAAa,QAAQ,MAAQ,EACnC,MAAM,QAAQ,WACV;GAER,CAAC,CAAC,MAAM,QAAQ,QAAQ,MAAM,IAC7B,4CAACA;IACC,2CAAC,iBAAG,GAAG,aAAa,QAAQ,KAAO;;IAAE,MAAM,QAAQ;OAC9C;GAER,CAAC,CAAC,MAAM,aAAa,MAAM,IAC1B,4CAACA,oCACC,2CAAC,iBAAG,GAAG,aAAa,aAAa,MAAQ,2CACnB,MAAM,cAAc,OAAO,IAC5C;GAET,2CAACG;IACC,aAAa,MAAM,MAAM;IACzB,UAAU,MAAM,MAAM;IACtB,iBAAiB,MAAM,MAAM;IACrB;KACR;GACD,CAAC,CAAC,MAAM,KAAK,KAAK,UACjB,4CAAC,2BACC,2CAACH;IAAK,IAAG;cACP,2CAAC,iBAAG,GAAG,aAAa,KAAK,MAAQ;KAC5B,EACP,2CAAC;IAAe,oBAAiB;cAC9B,MAAM,KAAK,KAAK,KAAK,QACpB,4CAAC,4BACC,2CAACI,uBAAQ,MAAK,UAAU,EACvB,QAFiB,IAGJ,CAChB;KACa,IACJ;MAEG,EACtB,4CAAC,6BACC,2CAACC;GAAO,eAAY;GAAY,eAAe,cAAc,OAAO,gBAAgB;aACjF,aAAa;IACP,EACR,CAAC,CAAC,gBACD,2CAAC,6BACC,4CAACC;GAAa,SAAS;GAAiB,uBAAuB,oBAAoB,SAAS,CAAC,KAAK;;IAChG,2CAACC,8CACC,2CAACC;KAAkB;eACjB,2CAACC,0BAAY;MACK,GACJ;IAClB,2CAACC,4CAAe,aAAa,gBAA8B;IAC3D,2CAACC,yCAAsB;;IACV,GACC,IAEL,IACF;GACH"}
+{"version":3,"file":"PreviewImage.js","names":["Image","FieldRoot","getSrcSets","Text","IconButton","CloseLine","ImageMeta","HashTag","Button","CheckboxRoot","CheckboxControl","CheckboxIndicator","CheckLine","CheckboxLabel","CheckboxHiddenInput"],"sources":["../src/PreviewImage.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { CloseLine, HashTag, CheckLine } from \"@ndla/icons\";\nimport { getModelReleaseValue } from \"@ndla/licenses\";\nimport {\n  Button,\n  CheckboxControl,\n  CheckboxHiddenInput,\n  CheckboxIndicator,\n  CheckboxLabel,\n  CheckboxRoot,\n  Text,\n  Image,\n  IconButton,\n  FieldRoot,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\nimport { useState } from \"react\";\nimport { ImageMeta } from \"./ImageMeta\";\nimport type { PreviewTranslations } from \"./types\";\nimport { getSrcSets } from \"./util/imageUtil\";\n\nconst ImageContainer = styled(\"div\", {\n  base: {\n    flexShrink: \"0\",\n  },\n});\n\nconst StyledImage = styled(Image, {\n  base: {\n    maxHeight: \"surface.xsmall\",\n  },\n});\n\nconst StyledImageMetadata = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xxsmall\",\n  },\n});\n\nconst HashTagWrapper = styled(\"ul\", {\n  base: {\n    display: \"flex\",\n    gap: \"xxsmall\",\n    flexWrap: \"wrap\",\n  },\n});\n\nconst HashTagGroup = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xxsmall\",\n    flexWrap: \"wrap\",\n  },\n});\n\nconst StyledTagItem = styled(\"li\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n});\n\nconst StyledPreview = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gridColumn: \"1 / -1\",\n    borderColor: \"stroke.default\",\n    border: \"1px solid\",\n    borderRadius: \"xsmall\",\n    gap: \"small\",\n    padding: \"small\",\n    flexWrap: \"wrap\",\n    overflow: \"hidden\",\n  },\n});\n\nconst StyledTopRow = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"medium\",\n    flex: \"2\",\n  },\n});\n\nconst ActionsWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n    marginBlockEnd: \"medium\",\n  },\n});\n\nconst StyledFieldRoot = styled(FieldRoot, {\n  base: { alignSelf: \"center\" },\n});\n\ninterface Props {\n  id: string;\n  image: ImageMetaInformationV3DTO;\n  onSelectImage: (image: ImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => void;\n  showCheckbox: boolean;\n  translations: PreviewTranslations;\n  locale: string;\n}\n\nexport const PreviewImage = ({ id, image, onSelectImage, showCheckbox, translations, locale }: Props) => {\n  const [saveAsMetaImage, setSaveAsMetaImage] = useState(false);\n\n  return (\n    <StyledPreview id={id}>\n      <ImageContainer>\n        <StyledImage\n          alt=\"\"\n          srcSet={getSrcSets(image.image.imageUrl)}\n          sizes=\"(min-width: 800px) 360px, (min-width: 400px) 300px, 100vw\"\n          src={image.image.imageUrl}\n          aria-label={image.title.title}\n          variant=\"rounded\"\n        />\n      </ImageContainer>\n      <ContentWrapper>\n        <StyledImageMetadata>\n          <StyledTopRow>\n            <Text textStyle=\"title.medium\">\n              {image.title.title.trim() ? image.title.title : (translations.missingTitleFallback ?? `ID: ${image.id}`)}\n            </Text>\n            <IconButton\n              variant=\"tertiary\"\n              onClick={() => onSelectImage(undefined)}\n              aria-label={translations.close}\n              title={translations.close}\n            >\n              <CloseLine />\n            </IconButton>\n          </StyledTopRow>\n          {!!image.copyright.creators.length && (\n            <Text>\n              <b>{`${translations.creatorsLabel}: `}</b>\n              {image.copyright.creators.map((creator) => creator.name).join(\", \")}\n            </Text>\n          )}\n          {!!image.copyright.license.description?.trim() && (\n            <Text>\n              <b>{`${translations.license}: `}</b>\n              {image.copyright.license.description}\n            </Text>\n          )}\n          {!!image.caption.caption.trim() && (\n            <Text>\n              <b>{`${translations.caption}: `}</b>\n              {image.caption.caption}\n            </Text>\n          )}\n          {!!image.alttext.alttext.trim() && (\n            <Text>\n              <b>{`${translations.altText}:`}</b> {image.alttext.alttext}\n            </Text>\n          )}\n          {!!image.modelRelease.trim() && (\n            <Text>\n              <b>{`${translations.modelRelease}: `}</b>\n              {getModelReleaseValue(image.modelRelease, locale)}\n            </Text>\n          )}\n          <ImageMeta\n            contentType={image.image.contentType}\n            fileSize={image.image.size}\n            imageDimensions={image.image.dimensions}\n            locale={locale}\n          />\n          {!!image.tags.tags.length && (\n            <HashTagGroup>\n              <Text id=\"tags-title\">\n                <b>{`${translations.tags}: `}</b>\n              </Text>\n              <HashTagWrapper aria-describedby=\"tags-title\">\n                {image.tags.tags.map((tag) => (\n                  <StyledTagItem key={tag}>\n                    <HashTag size=\"small\" />\n                    {tag}\n                  </StyledTagItem>\n                ))}\n              </HashTagWrapper>\n            </HashTagGroup>\n          )}\n        </StyledImageMetadata>\n        <ActionsWrapper>\n          <Button data-testid=\"use-image\" onClick={() => onSelectImage(image, saveAsMetaImage)}>\n            {translations.useImageTitle}\n          </Button>\n          {!!showCheckbox && (\n            <StyledFieldRoot>\n              <CheckboxRoot checked={saveAsMetaImage} onCheckedChange={() => setSaveAsMetaImage((prev) => !prev)}>\n                <CheckboxControl>\n                  <CheckboxIndicator asChild>\n                    <CheckLine />\n                  </CheckboxIndicator>\n                </CheckboxControl>\n                <CheckboxLabel>{translations.checkboxLabel}</CheckboxLabel>\n                <CheckboxHiddenInput />\n              </CheckboxRoot>\n            </StyledFieldRoot>\n          )}\n        </ActionsWrapper>\n      </ContentWrapper>\n    </StyledPreview>\n  );\n};\n"],"mappings":"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"}

package/lib/index.js

@@ -1,6 +1,5 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_ImageMeta = require('./ImageMeta.js');
-const require_ImageSearch = require('./ImageSearch.js');
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_ImageMeta = require("./ImageMeta.js");
+const require_ImageSearch = require("./ImageSearch.js");
 exports.ImageMeta = require_ImageMeta.ImageMeta;
-exports.ImageSearch = require_ImageSearch.ImageSearch;
+exports.ImageSearch = require_ImageSearch.ImageSearch;

package/lib/types.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2026-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { PaginationRootProps } from "@ndla/primitives";
+export interface PreviewTranslations {
+    creatorsLabel: string;
+    license: string;
+    caption: string;
+    altText: string;
+    modelRelease: string;
+    tags: string;
+    close: string;
+    checkboxLabel?: string;
+    missingTitleFallback?: string;
+    useImageTitle: string;
+}
+export interface ImageSearchTranslations {
+    searchPlaceholder: string;
+    searchButtonTitle: string;
+    imagePreview: PreviewTranslations;
+    paginationTranslations: PaginationRootProps["translations"];
+}

package/lib/util/imageUtil.js

@@ -1,4 +1,3 @@
-
 //#region src/util/imageUtil.ts
 /**
 * Copyright (c) 2017-present, NDLA.
@@ -22,8 +21,8 @@ const getPreviewSrcSets = (imageUrl) => [
 	`${imageUrl}?width=320 2x`,
 	`${imageUrl}?width=160 1x`
 ].join(", ");
-
 //#endregion
 exports.getPreviewSrcSets = getPreviewSrcSets;
 exports.getSrcSets = getSrcSets;
+
 //# sourceMappingURL=imageUtil.js.map

package/lib/util/imageUtil.js.map

@@ -1 +1 @@
-{"version":3,"file":"imageUtil.js","names":[],"sources":["../../src/util/imageUtil.ts"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\n/* - Source sets for gallery search is retina-display optimized\n   - Based on: https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/ */\n\nexport const getSrcSets = (imageUrl: string) =>\n  [\n    `${imageUrl}?width=1440 1440w`,\n    `${imageUrl}?width=1120 1120w`,\n    `${imageUrl}?width=1000 1000w`,\n    `${imageUrl}?width=960 960w`,\n    `${imageUrl}?width=800 800w`,\n    `${imageUrl}?width=640 640w`,\n    `${imageUrl}?width=480 480w`,\n    `${imageUrl}?width=320 320w`,\n  ].join(\", \");\n\nexport const getPreviewSrcSets = (imageUrl: string) =>\n  [`${imageUrl}?width=480 3x`, `${imageUrl}?width=320 2x`, `${imageUrl}?width=160 1x`].join(\", \");\n"],"mappings":";;;;;;;;;AAWA,MAAa,cAAc,aACzB;CACE,GAAG,SAAS;CACZ,GAAG,SAAS;CACZ,GAAG,SAAS;CACZ,GAAG,SAAS;CACZ,GAAG,SAAS;CACZ,GAAG,SAAS;CACZ,GAAG,SAAS;CACZ,GAAG,SAAS;CACb,CAAC,KAAK,KAAK;AAEd,MAAa,qBAAqB,aAChC;CAAC,GAAG,SAAS;CAAgB,GAAG,SAAS;CAAgB,GAAG,SAAS;CAAe,CAAC,KAAK,KAAK"}
+{"version":3,"file":"imageUtil.js","names":[],"sources":["../../src/util/imageUtil.ts"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\n/* - Source sets for gallery search is retina-display optimized\n   - Based on: https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/ */\n\nexport const getSrcSets = (imageUrl: string) =>\n  [\n    `${imageUrl}?width=1440 1440w`,\n    `${imageUrl}?width=1120 1120w`,\n    `${imageUrl}?width=1000 1000w`,\n    `${imageUrl}?width=960 960w`,\n    `${imageUrl}?width=800 800w`,\n    `${imageUrl}?width=640 640w`,\n    `${imageUrl}?width=480 480w`,\n    `${imageUrl}?width=320 320w`,\n  ].join(\", \");\n\nexport const getPreviewSrcSets = (imageUrl: string) =>\n  [`${imageUrl}?width=480 3x`, `${imageUrl}?width=320 2x`, `${imageUrl}?width=160 1x`].join(\", \");\n"],"mappings":";;;;;;;;AAWA,MAAa,cAAc,aACzB;CACE,GAAG,SAAS;CACZ,GAAG,SAAS;CACZ,GAAG,SAAS;CACZ,GAAG,SAAS;CACZ,GAAG,SAAS;CACZ,GAAG,SAAS;CACZ,GAAG,SAAS;CACZ,GAAG,SAAS;CACb,CAAC,KAAK,KAAK;AAEd,MAAa,qBAAqB,aAChC;CAAC,GAAG,SAAS;CAAgB,GAAG,SAAS;CAAgB,GAAG,SAAS;CAAe,CAAC,KAAK,KAAK"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ndla/image-search",
   "type": "module",
-  "version": "11.0.148-alpha.0",
+  "version": "11.0.150-alpha.0",
   "description": "A simple library for searching images from NDLA",
   "license": "GPL-3.0",
   "exports": {
@@ -30,11 +30,11 @@
     "es"
   ],
   "dependencies": {
-    "@ndla/icons": "^8.0.85-alpha.0",
+    "@ndla/icons": "^8.0.86-alpha.0",
     "@ndla/licenses": "^10.0.11-alpha.0",
-    "@ndla/primitives": "^1.0.124-alpha.0",
+    "@ndla/primitives": "^1.0.125-alpha.0",
     "@ndla/styled-system": "^0.0.47",
-    "@ndla/util": "^5.0.18-alpha.0"
+    "@ndla/util": "^5.0.19-alpha.0"
   },
   "devDependencies": {
     "@ndla/preset-panda": "^0.0.74",
@@ -48,5 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "97e06f805d268321a66a8234195bdc74f820d069"
+  "gitHead": "ea88390746e8683cbc04e3b3f5786dcf1e31d9f2"
 }