@ndla/image-search 11.0.102-alpha.0 → 11.0.104-alpha.0

package/es/ImageMeta.js

@@ -0,0 +1,18 @@
+import { useMemo } from "react";
+import { Text } from "@ndla/primitives";
+import { humanFileSize } from "@ndla/util";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/ImageMeta.tsx
+const ImageMeta = ({ contentType, fileSize, imageDimensions, locale }) => {
+	const prettySize = useMemo(() => {
+		return humanFileSize(fileSize, locale);
+	}, [fileSize, locale]);
+	const dimensions = imageDimensions ? ` - ${imageDimensions.width}x${imageDimensions.height} px` : "";
+	return /* @__PURE__ */ jsx(Text, { children: `${contentType} - ${prettySize}${dimensions}` });
+};
+var ImageMeta_default = ImageMeta;
+
+//#endregion
+export { ImageMeta_default };
+//# sourceMappingURL=ImageMeta.js.map

package/es/ImageMeta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageMeta.js","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 { useMemo } from \"react\";\nimport { Text } from \"@ndla/primitives\";\nimport type { IImageDimensionsDTO } from \"@ndla/types-backend/image-api\";\nimport { humanFileSize } from \"@ndla/util\";\n\ninterface Props {\n  contentType: string;\n  fileSize: number;\n  imageDimensions?: IImageDimensionsDTO;\n  locale: string;\n}\n\nconst 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\nexport default ImageMeta;\n"],"mappings":";;;;;;AAoBA,MAAM,YAAY,CAAC,EAAE,aAAa,UAAU,iBAAiB,QAAe,KAAK;CAC/E,MAAM,aAAa,QAAQ,MAAM;AAC/B,SAAO,cAAc,UAAU,OAAO;CACvC,GAAE,CAAC,UAAU,MAAO,EAAC;CAEtB,MAAM,aAAa,mBAAmB,KAAK,gBAAgB,MAAM,GAAG,gBAAgB,OAAO,OAAO;AAClG,wBAAO,IAAC,mBAAO,EAAE,YAAY,KAAK,WAAW,EAAE,WAAW,IAAS;AACpE;AAED,wBAAe"}

package/es/ImageSearch.js

@@ -0,0 +1,161 @@
+import { ImageSearchResult } from "./ImageSearchResult.js";
+import { useEffect, useState } from "react";
+import { Button, IconButton, Input, PaginationContext, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, Text } from "@ndla/primitives";
+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
+const ImageSearchWrapper = styled("div", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "small"
+} });
+const StyledSearchResults = styled("div", { base: {
+	display: "grid",
+	gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+	gridGap: "xsmall",
+	gridAutoFlow: "dense"
+} });
+const InputWrapper = styled("div", { base: {
+	display: "flex",
+	gap: "xsmall"
+} });
+const StyledPaginationRoot = styled(PaginationRoot, { base: { flexWrap: "wrap" } });
+const StyledButton = styled(Button, { base: { tabletWideDown: {
+	paddingInline: "xsmall",
+	"& span": { display: "none" }
+} } });
+const StyledPaginationItem = styled(PaginationItem, { base: { tabletWideDown: {
+	"&:nth-child(2)": { display: "none" },
+	"&:nth-last-child(2)": { display: "none" }
+} } });
+const ImageSearch = ({ onImageSelect, searchImages: search, onError, locale, noResults, checkboxAction, showCheckbox, translations }) => {
+	const [queryObject, setQueryObject] = useState({
+		query: void 0,
+		page: 1,
+		pageSize: 16
+	});
+	const [selectedImage, setSelectedImage] = useState();
+	const [searching, setSearching] = useState(false);
+	const [searchResult, setSearchResult] = useState();
+	const { page } = queryObject;
+	const noResultsFound = !searching && searchResult?.results.length === 0;
+	const onSelectImage = (image, saveAsMetaImage) => {
+		setSelectedImage(void 0);
+		if (!image) return;
+		onImageSelect(image);
+		if (saveAsMetaImage) checkboxAction?.(image);
+	};
+	const searchImages = (queryObject$1) => {
+		setSearching(true);
+		search(queryObject$1.query, queryObject$1.page).then((result) => {
+			setQueryObject({
+				query: queryObject$1.query,
+				pageSize: result.pageSize,
+				page: queryObject$1.page
+			});
+			setSearchResult(result);
+			setSearching(false);
+		}).catch((err) => {
+			onError?.(err);
+			setSearching(false);
+		});
+	};
+	const handleQueryChange = ({ target: { value } }) => {
+		setQueryObject((prevState) => ({
+			...prevState,
+			query: value
+		}));
+	};
+	const onEnter = (e) => {
+		if (e.key === "Enter") searchImages(queryObject);
+	};
+	useEffect(() => {
+		searchImages(queryObject);
+	}, []);
+	return /* @__PURE__ */ jsxs(ImageSearchWrapper, { children: [
+		/* @__PURE__ */ jsxs(InputWrapper, {
+			role: "search",
+			children: [/* @__PURE__ */ jsx(Input, {
+				type: "search",
+				placeholder: translations.searchPlaceholder,
+				value: queryObject?.query ?? "",
+				onChange: handleQueryChange,
+				onKeyDown: onEnter
+			}), /* @__PURE__ */ jsx(IconButton, {
+				variant: "primary",
+				"aria-label": translations.searchButtonTitle,
+				title: translations.searchButtonTitle,
+				onKeyDown: onEnter,
+				onClick: () => searchImages(queryObject),
+				children: /* @__PURE__ */ jsx(SearchLine, {})
+			})]
+		}),
+		!!noResultsFound && noResults,
+		/* @__PURE__ */ jsx(StyledSearchResults, { children: searchResult?.results.map((image) => /* @__PURE__ */ jsx(ImageSearchResult, {
+			image,
+			onImageClick: (image$1) => setSelectedImage(image$1),
+			selectedImage,
+			onSelectImage,
+			showCheckbox: !!showCheckbox,
+			translations: translations.imagePreview,
+			locale
+		}, image.id)) }),
+		/* @__PURE__ */ jsxs(StyledPaginationRoot, {
+			page: page ?? 1,
+			onPageChange: (details) => searchImages({
+				...queryObject,
+				page: details.page
+			}),
+			translations: translations.paginationTranslations,
+			count: searchResult?.totalCount ?? 0,
+			pageSize: searchResult?.pageSize,
+			hidden: noResultsFound,
+			children: [
+				/* @__PURE__ */ jsx(PaginationPrevTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs(StyledButton, {
+						variant: "tertiary",
+						"aria-label": translations.paginationTranslations?.prevTriggerLabel,
+						title: translations.paginationTranslations?.prevTriggerLabel,
+						children: [/* @__PURE__ */ jsx(ArrowLeftShortLine, {}), /* @__PURE__ */ jsx("span", { children: translations.paginationTranslations?.prevTriggerLabel })]
+					})
+				}),
+				/* @__PURE__ */ jsx(PaginationContext, { children: (pagination) => pagination.pages.map((page$1, index, full) => {
+					if (index === full.length - 1) return null;
+					return page$1.type === "page" ? /* @__PURE__ */ jsx(StyledPaginationItem, {
+						...page$1,
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: page$1.value === pagination.page ? "primary" : "tertiary",
+							children: page$1.value
+						})
+					}, index) : /* @__PURE__ */ jsx(PaginationEllipsis, {
+						index,
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Text, {
+							asChild: true,
+							consumeCss: true,
+							children: /* @__PURE__ */ jsx("div", { children: "…" })
+						})
+					}, index);
+				}) }),
+				/* @__PURE__ */ jsx(PaginationNextTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs(StyledButton, {
+						variant: "tertiary",
+						"aria-label": translations.paginationTranslations?.nextTriggerLabel,
+						title: translations.paginationTranslations?.nextTriggerLabel,
+						children: [/* @__PURE__ */ jsx("span", { children: translations.paginationTranslations?.nextTriggerLabel }), /* @__PURE__ */ jsx(ArrowRightShortLine, {})]
+					})
+				})
+			]
+		})
+	] });
+};
+var ImageSearch_default = ImageSearch;
+
+//#endregion
+export { ImageSearch_default };
+//# sourceMappingURL=ImageSearch.js.map

package/es/ImageSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSearch.js","names":["image: IImageMetaInformationV3DTO | undefined","saveAsMetaImage?: boolean","queryObject: ISearchParamsDTO","queryObject","e: KeyboardEvent<HTMLInputElement | HTMLButtonElement>","image","page"],"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 { type ChangeEvent, type ReactNode, type KeyboardEvent, useEffect, useState } from \"react\";\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 { IImageMetaInformationV3DTO, ISearchResultV3DTO, ISearchParamsDTO } from \"@ndla/types-backend/image-api\";\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: IImageMetaInformationV3DTO) => void;\n  searchImages: (query: string | undefined, page: number | undefined) => Promise<ISearchResultV3DTO>;\n  onError?: (err: any) => void;\n  locale: string;\n  noResults?: ReactNode;\n  checkboxAction?: (image: IImageMetaInformationV3DTO) => void;\n  showCheckbox?: boolean;\n  translations: ImageSearchTranslations;\n}\n\nconst 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<ISearchParamsDTO>({\n    query: undefined,\n    page: 1,\n    pageSize: 16,\n  });\n  const [selectedImage, setSelectedImage] = useState<IImageMetaInformationV3DTO | undefined>();\n  const [searching, setSearching] = useState<boolean>(false);\n  const [searchResult, setSearchResult] = useState<ISearchResultV3DTO | undefined>();\n\n  const { page } = queryObject;\n  const noResultsFound = !searching && searchResult?.results.length === 0;\n\n  const onSelectImage = (image: IImageMetaInformationV3DTO | 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: ISearchParamsDTO) => {\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\nexport default ImageSearch;\n"],"mappings":"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"}

package/es/ImageSearchResult.js

@@ -0,0 +1,50 @@
+import { getPreviewSrcSets } from "./util/imageUtil.js";
+import { PreviewImage_default } from "./PreviewImage.js";
+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
+const StyledButton = styled(Button, { base: {
+	display: "flex",
+	flexDirection: "column",
+	borderColor: "stroke.subtle"
+} });
+const StyledImage = styled(Image, { base: {
+	maxHeight: "135px",
+	width: "100%",
+	height: "100%"
+} });
+const StyledText = styled(Text, { base: { lineClamp: "3" } });
+function ImageSearchResult({ image, onImageClick, selectedImage, onSelectImage, showCheckbox, translations, locale }) {
+	const isSelectedImage = selectedImage?.id === image.id;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(StyledButton, {
+		variant: isSelectedImage ? "secondary" : "tertiary",
+		"data-testid": "select-image-from-list",
+		onClick: () => onImageClick(image),
+		"aria-expanded": isSelectedImage,
+		"aria-controls": `image-preview-${image.id}`,
+		children: [/* @__PURE__ */ jsx(StyledImage, {
+			alt: "",
+			srcSet: getPreviewSrcSets(image.image.imageUrl),
+			src: image.image.imageUrl,
+			variant: "rounded"
+		}), /* @__PURE__ */ jsx(StyledText, {
+			textStyle: "label.medium",
+			asChild: true,
+			consumeCss: true,
+			children: /* @__PURE__ */ jsx("span", { children: image.title.title.trim() ? image.title.title : translations.missingTitleFallback ?? `ID: ${image.id}` })
+		})]
+	}), isSelectedImage ? /* @__PURE__ */ jsx(PreviewImage_default, {
+		id: `image-preview-${image.id}`,
+		image: selectedImage,
+		onSelectImage,
+		translations,
+		showCheckbox,
+		locale
+	}) : null] });
+}
+
+//#endregion
+export { ImageSearchResult };
+//# sourceMappingURL=ImageSearchResult.js.map

package/es/ImageSearchResult.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSearchResult.js","names":["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 { IImageMetaInformationV3DTO } 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: IImageMetaInformationV3DTO;\n  onImageClick: (image: IImageMetaInformationV3DTO) => void;\n  selectedImage?: IImageMetaInformationV3DTO;\n  onSelectImage: (image: IImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => void;\n  showCheckbox: boolean;\n  translations: PreviewTranslations;\n  locale: string;\n}\n\nexport default function 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;AACd,EACF,EAAC;AAEF,MAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ,WAAW;CACX,OAAO;CACP,QAAQ;AACT,EACF,EAAC;AAEF,MAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,EACJ,WAAW,IACZ,EACF,EAAC;AAYF,SAAwB,kBAAkB,EACxC,OACA,cACA,eACA,eACA,cACA,cACA,QACM,EAAE;CACR,MAAM,kBAAkB,eAAe,OAAO,MAAM;AACpD,wBACE,4CACE,KAAC;EACC,SAAS,kBAAkB,cAAc;EACzC,eAAY;EACZ,SAAS,MAAM,aAAa,MAAM;EAClC,iBAAe;EACf,kBAAgB,gBAAgB,MAAM,GAAG;6BAEzC,IAAC;GACC,KAAI;GACJ,QAAQ,kBAAkB,MAAM,MAAM,SAAS;GAC/C,KAAK,MAAM,MAAM;GACjB,SAAQ;IACR,kBACF,IAAC;GAAW,WAAU;GAAe;GAAQ;6BAC3C,IAAC,oBACE,MAAM,MAAM,MAAM,MAAM,GAAG,MAAM,MAAM,QAAS,aAAa,yBAAyB,MAAM,MAAM,GAAG,IACjG;IACI;GACA,EACd,kCACC,IAACA;EACC,KAAK,gBAAgB,MAAM,GAAG;EAC9B,OAAO;EACQ;EACD;EACA;EACN;GACR,GACA,QACH;AAEN"}

package/es/PreviewImage.js

@@ -0,0 +1,125 @@
+import { ImageMeta_default } from "./ImageMeta.js";
+import { getSrcSets } from "./util/imageUtil.js";
+import { useState } from "react";
+import { Button, CheckboxControl, CheckboxHiddenInput, CheckboxIndicator, CheckboxLabel, CheckboxRoot, FieldRoot, IconButton, Image, Text } from "@ndla/primitives";
+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
+const ImageContainer = styled("div", { base: { flexShrink: "0" } });
+const StyledImage = styled(Image, { base: { maxHeight: "surface.xsmall" } });
+const StyledImageMetadata = styled("div", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xxsmall"
+} });
+const HashTagWrapper = styled("ul", { base: {
+	display: "flex",
+	gap: "xxsmall",
+	flexWrap: "wrap"
+} });
+const HashTagGroup = styled("div", { base: {
+	display: "flex",
+	gap: "xxsmall",
+	flexWrap: "wrap"
+} });
+const StyledTagItem = styled("li", { base: {
+	display: "flex",
+	alignItems: "center"
+} });
+const StyledPreview = styled("div", { base: {
+	display: "flex",
+	gridColumn: "1 / -1",
+	borderColor: "stroke.default",
+	border: "1px solid",
+	borderRadius: "xsmall",
+	gap: "small",
+	padding: "small",
+	flexWrap: "wrap",
+	overflow: "hidden"
+} });
+const StyledTopRow = styled("div", { base: {
+	display: "flex",
+	justifyContent: "space-between"
+} });
+const ContentWrapper = styled("div", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "medium",
+	flex: "2"
+} });
+const ActionsWrapper = styled("div", { base: {
+	display: "flex",
+	gap: "small",
+	marginBlockEnd: "medium"
+} });
+const StyledFieldRoot = styled(FieldRoot, { base: { alignSelf: "center" } });
+const PreviewImage = ({ id, image, onSelectImage, showCheckbox, translations, locale }) => {
+	const [saveAsMetaImage, setSaveAsMetaImage] = useState(false);
+	return /* @__PURE__ */ jsxs(StyledPreview, {
+		id,
+		children: [/* @__PURE__ */ jsx(ImageContainer, { children: /* @__PURE__ */ jsx(StyledImage, {
+			alt: "",
+			srcSet: getSrcSets(image.image.imageUrl),
+			sizes: "(min-width: 800px) 360px, (min-width: 400px) 300px, 100vw",
+			src: image.image.imageUrl,
+			"aria-label": image.title.title,
+			variant: "rounded"
+		}) }), /* @__PURE__ */ jsxs(ContentWrapper, { children: [/* @__PURE__ */ jsxs(StyledImageMetadata, { children: [
+			/* @__PURE__ */ jsxs(StyledTopRow, { children: [/* @__PURE__ */ jsx(Text, {
+				textStyle: "title.medium",
+				children: image.title.title.trim() ? image.title.title : translations.missingTitleFallback ?? `ID: ${image.id}`
+			}), /* @__PURE__ */ jsx(IconButton, {
+				variant: "tertiary",
+				onClick: () => onSelectImage(void 0),
+				"aria-label": translations.close,
+				title: translations.close,
+				children: /* @__PURE__ */ jsx(CloseLine, {})
+			})] }),
+			!!image.copyright.creators.length && /* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx("b", { children: `${translations.creatorsLabel}: ` }), image.copyright.creators.map((creator) => creator.name).join(", ")] }),
+			!!image.copyright.license.description?.trim() && /* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx("b", { children: `${translations.license}: ` }), image.copyright.license.description] }),
+			!!image.caption.caption.trim() && /* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx("b", { children: `${translations.caption}: ` }), image.caption.caption] }),
+			!!image.alttext.alttext.trim() && /* @__PURE__ */ jsxs(Text, { children: [
+				/* @__PURE__ */ jsx("b", { children: `${translations.altText}:` }),
+				" ",
+				image.alttext.alttext
+			] }),
+			!!image.modelRelease.trim() && /* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx("b", { children: `${translations.modelRelease}: ` }), getModelReleaseValue(image.modelRelease, locale)] }),
+			/* @__PURE__ */ jsx(ImageMeta_default, {
+				contentType: image.image.contentType,
+				fileSize: image.image.size,
+				imageDimensions: image.image.dimensions,
+				locale
+			}),
+			!!image.tags.tags.length && /* @__PURE__ */ jsxs(HashTagGroup, { children: [/* @__PURE__ */ jsx(Text, {
+				id: "tags-title",
+				children: /* @__PURE__ */ jsx("b", { children: `${translations.tags}: ` })
+			}), /* @__PURE__ */ jsx(HashTagWrapper, {
+				"aria-describedby": "tags-title",
+				children: image.tags.tags.map((tag) => /* @__PURE__ */ jsxs(StyledTagItem, { children: [/* @__PURE__ */ jsx(HashTag, { size: "small" }), tag] }, tag))
+			})] })
+		] }), /* @__PURE__ */ jsxs(ActionsWrapper, { children: [/* @__PURE__ */ jsx(Button, {
+			"data-testid": "use-image",
+			onClick: () => onSelectImage(image, saveAsMetaImage),
+			children: translations.useImageTitle
+		}), !!showCheckbox && /* @__PURE__ */ jsx(StyledFieldRoot, { children: /* @__PURE__ */ jsxs(CheckboxRoot, {
+			checked: saveAsMetaImage,
+			onCheckedChange: () => setSaveAsMetaImage((prev) => !prev),
+			children: [
+				/* @__PURE__ */ jsx(CheckboxControl, { children: /* @__PURE__ */ jsx(CheckboxIndicator, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(CheckLine, {})
+				}) }),
+				/* @__PURE__ */ jsx(CheckboxLabel, { children: translations.checkboxLabel }),
+				/* @__PURE__ */ jsx(CheckboxHiddenInput, {})
+			]
+		}) })] })] })]
+	});
+};
+var PreviewImage_default = PreviewImage;
+
+//#endregion
+export { PreviewImage_default };
+//# sourceMappingURL=PreviewImage.js.map

package/es/PreviewImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewImage.js","names":["ImageMeta"],"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 { useState } from \"react\";\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 { IImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\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: IImageMetaInformationV3DTO;\n  onSelectImage: (image: IImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => void;\n  showCheckbox: boolean;\n  translations: PreviewTranslations;\n  locale: string;\n}\n\nconst 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\nexport default PreviewImage;\n"],"mappings":"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"}

package/es/index.js

@@ -0,0 +1,4 @@
+import { ImageMeta_default } from "./ImageMeta.js";
+import { ImageSearch_default } from "./ImageSearch.js";
+
+export { ImageMeta_default as ImageMeta, ImageSearch_default as ImageSearch };

package/es/util/imageUtil.js

@@ -0,0 +1,27 @@
+//#region src/util/imageUtil.ts
+/**
+* Copyright (c) 2017-present, NDLA.
+*
+* This source code is licensed under the GPLv3 license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
+const getSrcSets = (imageUrl) => [
+	`${imageUrl}?width=1440 1440w`,
+	`${imageUrl}?width=1120 1120w`,
+	`${imageUrl}?width=1000 1000w`,
+	`${imageUrl}?width=960 960w`,
+	`${imageUrl}?width=800 800w`,
+	`${imageUrl}?width=640 640w`,
+	`${imageUrl}?width=480 480w`,
+	`${imageUrl}?width=320 320w`
+].join(", ");
+const getPreviewSrcSets = (imageUrl) => [
+	`${imageUrl}?width=480 3x`,
+	`${imageUrl}?width=320 2x`,
+	`${imageUrl}?width=160 1x`
+].join(", ");
+
+//#endregion
+export { getPreviewSrcSets, getSrcSets };
+//# sourceMappingURL=imageUtil.js.map

package/es/util/imageUtil.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageUtil.js","names":["imageUrl: string"],"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,aAAa,CAACA,aACzB;EACG,EAAE,SAAS;EACX,EAAE,SAAS;EACX,EAAE,SAAS;EACX,EAAE,SAAS;EACX,EAAE,SAAS;EACX,EAAE,SAAS;EACX,EAAE,SAAS;EACX,EAAE,SAAS;AACb,EAAC,KAAK,KAAK;AAEd,MAAa,oBAAoB,CAACA,aAChC;EAAE,EAAE,SAAS;EAAiB,EAAE,SAAS;EAAiB,EAAE,SAAS;AAAe,EAAC,KAAK,KAAK"}

package/lib/ImageMeta.js

@@ -0,0 +1,19 @@
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const __ndla_util = require_rolldown_runtime.__toESM(require("@ndla/util"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/ImageMeta.tsx
+const ImageMeta = ({ contentType, fileSize, imageDimensions, locale }) => {
+	const prettySize = (0, react.useMemo)(() => {
+		return (0, __ndla_util.humanFileSize)(fileSize, locale);
+	}, [fileSize, locale]);
+	const dimensions = imageDimensions ? ` - ${imageDimensions.width}x${imageDimensions.height} px` : "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, { children: `${contentType} - ${prettySize}${dimensions}` });
+};
+var ImageMeta_default = ImageMeta;
+
+//#endregion
+exports.ImageMeta_default = ImageMeta_default;
+//# sourceMappingURL=ImageMeta.js.map

package/lib/ImageMeta.js.map

@@ -0,0 +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 { useMemo } from \"react\";\nimport { Text } from \"@ndla/primitives\";\nimport type { IImageDimensionsDTO } from \"@ndla/types-backend/image-api\";\nimport { humanFileSize } from \"@ndla/util\";\n\ninterface Props {\n  contentType: string;\n  fileSize: number;\n  imageDimensions?: IImageDimensionsDTO;\n  locale: string;\n}\n\nconst 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\nexport default ImageMeta;\n"],"mappings":";;;;;;;AAoBA,MAAM,YAAY,CAAC,EAAE,aAAa,UAAU,iBAAiB,QAAe,KAAK;CAC/E,MAAM,aAAa,mBAAQ,MAAM;AAC/B,SAAO,+BAAc,UAAU,OAAO;CACvC,GAAE,CAAC,UAAU,MAAO,EAAC;CAEtB,MAAM,aAAa,mBAAmB,KAAK,gBAAgB,MAAM,GAAG,gBAAgB,OAAO,OAAO;AAClG,wBAAO,2BAACA,qCAAO,EAAE,YAAY,KAAK,WAAW,EAAE,WAAW,IAAS;AACpE;AAED,wBAAe"}

package/lib/ImageSearch.js

@@ -0,0 +1,162 @@
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.js');
+const require_ImageSearchResult = require('./ImageSearchResult.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+
+//#region src/ImageSearch.tsx
+const ImageSearchWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "small"
+} });
+const StyledSearchResults = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "grid",
+	gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+	gridGap: "xsmall",
+	gridAutoFlow: "dense"
+} });
+const InputWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	gap: "xsmall"
+} });
+const StyledPaginationRoot = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.PaginationRoot, { base: { flexWrap: "wrap" } });
+const StyledButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Button, { base: { tabletWideDown: {
+	paddingInline: "xsmall",
+	"& span": { display: "none" }
+} } });
+const StyledPaginationItem = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.PaginationItem, { base: { tabletWideDown: {
+	"&:nth-child(2)": { display: "none" },
+	"&:nth-last-child(2)": { display: "none" }
+} } });
+const ImageSearch = ({ onImageSelect, searchImages: search, onError, locale, noResults, checkboxAction, showCheckbox, translations }) => {
+	const [queryObject, setQueryObject] = (0, react.useState)({
+		query: void 0,
+		page: 1,
+		pageSize: 16
+	});
+	const [selectedImage, setSelectedImage] = (0, react.useState)();
+	const [searching, setSearching] = (0, react.useState)(false);
+	const [searchResult, setSearchResult] = (0, react.useState)();
+	const { page } = queryObject;
+	const noResultsFound = !searching && searchResult?.results.length === 0;
+	const onSelectImage = (image, saveAsMetaImage) => {
+		setSelectedImage(void 0);
+		if (!image) return;
+		onImageSelect(image);
+		if (saveAsMetaImage) checkboxAction?.(image);
+	};
+	const searchImages = (queryObject$1) => {
+		setSearching(true);
+		search(queryObject$1.query, queryObject$1.page).then((result) => {
+			setQueryObject({
+				query: queryObject$1.query,
+				pageSize: result.pageSize,
+				page: queryObject$1.page
+			});
+			setSearchResult(result);
+			setSearching(false);
+		}).catch((err) => {
+			onError?.(err);
+			setSearching(false);
+		});
+	};
+	const handleQueryChange = ({ target: { value } }) => {
+		setQueryObject((prevState) => ({
+			...prevState,
+			query: value
+		}));
+	};
+	const onEnter = (e) => {
+		if (e.key === "Enter") searchImages(queryObject);
+	};
+	(0, react.useEffect)(() => {
+		searchImages(queryObject);
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ImageSearchWrapper, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InputWrapper, {
+			role: "search",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Input, {
+				type: "search",
+				placeholder: translations.searchPlaceholder,
+				value: queryObject?.query ?? "",
+				onChange: handleQueryChange,
+				onKeyDown: onEnter
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.IconButton, {
+				variant: "primary",
+				"aria-label": translations.searchButtonTitle,
+				title: translations.searchButtonTitle,
+				onKeyDown: onEnter,
+				onClick: () => searchImages(queryObject),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.SearchLine, {})
+			})]
+		}),
+		!!noResultsFound && noResults,
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSearchResults, { children: searchResult?.results.map((image) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ImageSearchResult.ImageSearchResult, {
+			image,
+			onImageClick: (image$1) => setSelectedImage(image$1),
+			selectedImage,
+			onSelectImage,
+			showCheckbox: !!showCheckbox,
+			translations: translations.imagePreview,
+			locale
+		}, image.id)) }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledPaginationRoot, {
+			page: page ?? 1,
+			onPageChange: (details) => searchImages({
+				...queryObject,
+				page: details.page
+			}),
+			translations: translations.paginationTranslations,
+			count: searchResult?.totalCount ?? 0,
+			pageSize: searchResult?.pageSize,
+			hidden: noResultsFound,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.PaginationPrevTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledButton, {
+						variant: "tertiary",
+						"aria-label": translations.paginationTranslations?.prevTriggerLabel,
+						title: translations.paginationTranslations?.prevTriggerLabel,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ArrowLeftShortLine, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: translations.paginationTranslations?.prevTriggerLabel })]
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.PaginationContext, { children: (pagination) => pagination.pages.map((page$1, index, full) => {
+					if (index === full.length - 1) return null;
+					return page$1.type === "page" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPaginationItem, {
+						...page$1,
+						asChild: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Button, {
+							variant: page$1.value === pagination.page ? "primary" : "tertiary",
+							children: page$1.value
+						})
+					}, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.PaginationEllipsis, {
+						index,
+						asChild: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+							asChild: true,
+							consumeCss: true,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: "…" })
+						})
+					}, index);
+				}) }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.PaginationNextTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledButton, {
+						variant: "tertiary",
+						"aria-label": translations.paginationTranslations?.nextTriggerLabel,
+						title: translations.paginationTranslations?.nextTriggerLabel,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: translations.paginationTranslations?.nextTriggerLabel }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ArrowRightShortLine, {})]
+					})
+				})
+			]
+		})
+	] });
+};
+var ImageSearch_default = ImageSearch;
+
+//#endregion
+exports.ImageSearch_default = ImageSearch_default;
+//# sourceMappingURL=ImageSearch.js.map

package/lib/ImageSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSearch.js","names":["PaginationRoot","Button","PaginationItem","image: IImageMetaInformationV3DTO | undefined","saveAsMetaImage?: boolean","queryObject: ISearchParamsDTO","queryObject","e: KeyboardEvent<HTMLInputElement | HTMLButtonElement>","Input","IconButton","SearchLine","ImageSearchResult","image","PaginationPrevTrigger","ArrowLeftShortLine","PaginationContext","page","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 { type ChangeEvent, type ReactNode, type KeyboardEvent, useEffect, useState } from \"react\";\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 { IImageMetaInformationV3DTO, ISearchResultV3DTO, ISearchParamsDTO } from \"@ndla/types-backend/image-api\";\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: IImageMetaInformationV3DTO) => void;\n  searchImages: (query: string | undefined, page: number | undefined) => Promise<ISearchResultV3DTO>;\n  onError?: (err: any) => void;\n  locale: string;\n  noResults?: ReactNode;\n  checkboxAction?: (image: IImageMetaInformationV3DTO) => void;\n  showCheckbox?: boolean;\n  translations: ImageSearchTranslations;\n}\n\nconst 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<ISearchParamsDTO>({\n    query: undefined,\n    page: 1,\n    pageSize: 16,\n  });\n  const [selectedImage, setSelectedImage] = useState<IImageMetaInformationV3DTO | undefined>();\n  const [searching, setSearching] = useState<boolean>(false);\n  const [searchResult, setSearchResult] = useState<ISearchResultV3DTO | undefined>();\n\n  const { page } = queryObject;\n  const noResultsFound = !searching && searchResult?.results.length === 0;\n\n  const onSelectImage = (image: IImageMetaInformationV3DTO | 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: ISearchParamsDTO) => {\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\nexport default ImageSearch;\n"],"mappings":"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"}

package/lib/ImageSearchResult.js

@@ -0,0 +1,51 @@
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.js');
+const require_imageUtil = require('./util/imageUtil.js');
+const require_PreviewImage = require('./PreviewImage.js');
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+
+//#region src/ImageSearchResult.tsx
+const StyledButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Button, { base: {
+	display: "flex",
+	flexDirection: "column",
+	borderColor: "stroke.subtle"
+} });
+const StyledImage = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Image, { base: {
+	maxHeight: "135px",
+	width: "100%",
+	height: "100%"
+} });
+const StyledText = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Text, { base: { lineClamp: "3" } });
+function ImageSearchResult({ image, onImageClick, selectedImage, onSelectImage, showCheckbox, translations, locale }) {
+	const isSelectedImage = selectedImage?.id === image.id;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledButton, {
+		variant: isSelectedImage ? "secondary" : "tertiary",
+		"data-testid": "select-image-from-list",
+		onClick: () => onImageClick(image),
+		"aria-expanded": isSelectedImage,
+		"aria-controls": `image-preview-${image.id}`,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledImage, {
+			alt: "",
+			srcSet: require_imageUtil.getPreviewSrcSets(image.image.imageUrl),
+			src: image.image.imageUrl,
+			variant: "rounded"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledText, {
+			textStyle: "label.medium",
+			asChild: true,
+			consumeCss: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: image.title.title.trim() ? image.title.title : translations.missingTitleFallback ?? `ID: ${image.id}` })
+		})]
+	}), isSelectedImage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PreviewImage.PreviewImage_default, {
+		id: `image-preview-${image.id}`,
+		image: selectedImage,
+		onSelectImage,
+		translations,
+		showCheckbox,
+		locale
+	}) : null] });
+}
+
+//#endregion
+exports.ImageSearchResult = ImageSearchResult;
+//# sourceMappingURL=ImageSearchResult.js.map

package/lib/ImageSearchResult.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSearchResult.js","names":["Button","Image","Text","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 { IImageMetaInformationV3DTO } 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: IImageMetaInformationV3DTO;\n  onImageClick: (image: IImageMetaInformationV3DTO) => void;\n  selectedImage?: IImageMetaInformationV3DTO;\n  onSelectImage: (image: IImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => void;\n  showCheckbox: boolean;\n  translations: PreviewTranslations;\n  locale: string;\n}\n\nexport default function 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,qCAAOA,0BAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,aAAa;AACd,EACF,EAAC;AAEF,MAAM,cAAc,qCAAOC,yBAAO,EAChC,MAAM;CACJ,WAAW;CACX,OAAO;CACP,QAAQ;AACT,EACF,EAAC;AAEF,MAAM,aAAa,qCAAOC,wBAAM,EAC9B,MAAM,EACJ,WAAW,IACZ,EACF,EAAC;AAYF,SAAwB,kBAAkB,EACxC,OACA,cACA,eACA,eACA,cACA,cACA,QACM,EAAE;CACR,MAAM,kBAAkB,eAAe,OAAO,MAAM;AACpD,wBACE,qFACE,4BAAC;EACC,SAAS,kBAAkB,cAAc;EACzC,eAAY;EACZ,SAAS,MAAM,aAAa,MAAM;EAClC,iBAAe;EACf,kBAAgB,gBAAgB,MAAM,GAAG;6BAEzC,2BAAC;GACC,KAAI;GACJ,QAAQ,oCAAkB,MAAM,MAAM,SAAS;GAC/C,KAAK,MAAM,MAAM;GACjB,SAAQ;IACR,kBACF,2BAAC;GAAW,WAAU;GAAe;GAAQ;6BAC3C,2BAAC,oBACE,MAAM,MAAM,MAAM,MAAM,GAAG,MAAM,MAAM,QAAS,aAAa,yBAAyB,MAAM,MAAM,GAAG,IACjG;IACI;GACA,EACd,kCACC,2BAACC;EACC,KAAK,gBAAgB,MAAM,GAAG;EAC9B,OAAO;EACQ;EACD;EACA;EACN;GACR,GACA,QACH;AAEN"}

package/lib/PreviewImage.js

@@ -0,0 +1,126 @@
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.js');
+const require_ImageMeta = require('./ImageMeta.js');
+const require_imageUtil = require('./util/imageUtil.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const __ndla_licenses = require_rolldown_runtime.__toESM(require("@ndla/licenses"));
+
+//#region src/PreviewImage.tsx
+const ImageContainer = (0, __ndla_styled_system_jsx.styled)("div", { base: { flexShrink: "0" } });
+const StyledImage = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Image, { base: { maxHeight: "surface.xsmall" } });
+const StyledImageMetadata = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xxsmall"
+} });
+const HashTagWrapper = (0, __ndla_styled_system_jsx.styled)("ul", { base: {
+	display: "flex",
+	gap: "xxsmall",
+	flexWrap: "wrap"
+} });
+const HashTagGroup = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	gap: "xxsmall",
+	flexWrap: "wrap"
+} });
+const StyledTagItem = (0, __ndla_styled_system_jsx.styled)("li", { base: {
+	display: "flex",
+	alignItems: "center"
+} });
+const StyledPreview = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	gridColumn: "1 / -1",
+	borderColor: "stroke.default",
+	border: "1px solid",
+	borderRadius: "xsmall",
+	gap: "small",
+	padding: "small",
+	flexWrap: "wrap",
+	overflow: "hidden"
+} });
+const StyledTopRow = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	justifyContent: "space-between"
+} });
+const ContentWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "medium",
+	flex: "2"
+} });
+const ActionsWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	gap: "small",
+	marginBlockEnd: "medium"
+} });
+const StyledFieldRoot = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.FieldRoot, { base: { alignSelf: "center" } });
+const PreviewImage = ({ id, image, onSelectImage, showCheckbox, translations, locale }) => {
+	const [saveAsMetaImage, setSaveAsMetaImage] = (0, react.useState)(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledPreview, {
+		id,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledImage, {
+			alt: "",
+			srcSet: require_imageUtil.getSrcSets(image.image.imageUrl),
+			sizes: "(min-width: 800px) 360px, (min-width: 400px) 300px, 100vw",
+			src: image.image.imageUrl,
+			"aria-label": image.title.title,
+			variant: "rounded"
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ContentWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledImageMetadata, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledTopRow, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+				textStyle: "title.medium",
+				children: image.title.title.trim() ? image.title.title : translations.missingTitleFallback ?? `ID: ${image.id}`
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.IconButton, {
+				variant: "tertiary",
+				onClick: () => onSelectImage(void 0),
+				"aria-label": translations.close,
+				title: translations.close,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.CloseLine, {})
+			})] }),
+			!!image.copyright.creators.length && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.Text, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: `${translations.creatorsLabel}: ` }), image.copyright.creators.map((creator) => creator.name).join(", ")] }),
+			!!image.copyright.license.description?.trim() && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.Text, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: `${translations.license}: ` }), image.copyright.license.description] }),
+			!!image.caption.caption.trim() && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.Text, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: `${translations.caption}: ` }), image.caption.caption] }),
+			!!image.alttext.alttext.trim() && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.Text, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: `${translations.altText}:` }),
+				" ",
+				image.alttext.alttext
+			] }),
+			!!image.modelRelease.trim() && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.Text, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: `${translations.modelRelease}: ` }), (0, __ndla_licenses.getModelReleaseValue)(image.modelRelease, locale)] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ImageMeta.ImageMeta_default, {
+				contentType: image.image.contentType,
+				fileSize: image.image.size,
+				imageDimensions: image.image.dimensions,
+				locale
+			}),
+			!!image.tags.tags.length && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HashTagGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+				id: "tags-title",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: `${translations.tags}: ` })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HashTagWrapper, {
+				"aria-describedby": "tags-title",
+				children: image.tags.tags.map((tag) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledTagItem, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.HashTag, { size: "small" }), tag] }, tag))
+			})] })
+		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ActionsWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Button, {
+			"data-testid": "use-image",
+			onClick: () => onSelectImage(image, saveAsMetaImage),
+			children: translations.useImageTitle
+		}), !!showCheckbox && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFieldRoot, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.CheckboxRoot, {
+			checked: saveAsMetaImage,
+			onCheckedChange: () => setSaveAsMetaImage((prev) => !prev),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.CheckboxControl, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.CheckboxIndicator, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.CheckLine, {})
+				}) }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.CheckboxLabel, { children: translations.checkboxLabel }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.CheckboxHiddenInput, {})
+			]
+		}) })] })] })]
+	});
+};
+var PreviewImage_default = PreviewImage;
+
+//#endregion
+exports.PreviewImage_default = PreviewImage_default;
+//# sourceMappingURL=PreviewImage.js.map

package/lib/PreviewImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewImage.js","names":["Image","FieldRoot","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 { useState } from \"react\";\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 { IImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\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: IImageMetaInformationV3DTO;\n  onSelectImage: (image: IImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => void;\n  showCheckbox: boolean;\n  translations: PreviewTranslations;\n  locale: string;\n}\n\nconst 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\nexport default PreviewImage;\n"],"mappings":"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"}

package/lib/_virtual/rolldown_runtime.js

@@ -0,0 +1,30 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+
+Object.defineProperty(exports, '__toESM', {
+  enumerable: true,
+  get: function () {
+    return __toESM;
+  }
+});

package/lib/index.js

@@ -0,0 +1,5 @@
+const require_ImageMeta = require('./ImageMeta.js');
+const require_ImageSearch = require('./ImageSearch.js');
+
+exports.ImageMeta = require_ImageMeta.ImageMeta_default;
+exports.ImageSearch = require_ImageSearch.ImageSearch_default;

package/lib/util/imageUtil.js

@@ -0,0 +1,29 @@
+
+//#region src/util/imageUtil.ts
+/**
+* Copyright (c) 2017-present, NDLA.
+*
+* This source code is licensed under the GPLv3 license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
+const getSrcSets = (imageUrl) => [
+	`${imageUrl}?width=1440 1440w`,
+	`${imageUrl}?width=1120 1120w`,
+	`${imageUrl}?width=1000 1000w`,
+	`${imageUrl}?width=960 960w`,
+	`${imageUrl}?width=800 800w`,
+	`${imageUrl}?width=640 640w`,
+	`${imageUrl}?width=480 480w`,
+	`${imageUrl}?width=320 320w`
+].join(", ");
+const getPreviewSrcSets = (imageUrl) => [
+	`${imageUrl}?width=480 3x`,
+	`${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

@@ -0,0 +1 @@
+{"version":3,"file":"imageUtil.js","names":["imageUrl: string"],"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,aAAa,CAACA,aACzB;EACG,EAAE,SAAS;EACX,EAAE,SAAS;EACX,EAAE,SAAS;EACX,EAAE,SAAS;EACX,EAAE,SAAS;EACX,EAAE,SAAS;EACX,EAAE,SAAS;EACX,EAAE,SAAS;AACb,EAAC,KAAK,KAAK;AAEd,MAAa,oBAAoB,CAACA,aAChC;EAAE,EAAE,SAAS;EAAiB,EAAE,SAAS;EAAiB,EAAE,SAAS;AAAe,EAAC,KAAK,KAAK"}

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@ndla/image-search",
-  "version": "11.0.102-alpha.0",
+  "version": "11.0.104-alpha.0",
   "description": "A simple library for searching images from NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
-    "build": "node ../../scripts/build.js package",
+    "build": "tsdown",
+    "dev": "tsdown --watch ./src",
     "build:types": "tsc -p tsconfig.build.json",
     "prepublish": "concurrently 'yarn build:types' 'mkdir -p dist' 'panda cssgen --minimal --outfile dist/styles.css' 'panda ship --outfile dist/panda.buildinfo.json'"
   },
@@ -26,14 +27,14 @@
     "es"
   ],
   "dependencies": {
-    "@ndla/icons": "^8.0.58-alpha.0",
-    "@ndla/licenses": "^9.0.1",
-    "@ndla/primitives": "^1.0.88-alpha.0",
-    "@ndla/styled-system": "^0.0.34",
-    "@ndla/util": "^5.0.8-alpha.0"
+    "@ndla/icons": "^8.0.59-alpha.0",
+    "@ndla/licenses": "^9.0.2",
+    "@ndla/primitives": "^1.0.90-alpha.0",
+    "@ndla/styled-system": "^0.0.35",
+    "@ndla/util": "^5.0.9-alpha.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.54",
+    "@ndla/preset-panda": "^0.0.55",
     "@ndla/types-backend": "^1.0.40",
     "@pandacss/dev": "^0.53.6"
   },
@@ -44,5 +45,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "52adafa4348c1c02ebc4da28317aa5270cbe2a80"
+  "gitHead": "70b2b4e3d374545b5245a63ea7644c3b9356c74f"
 }