npm - @ndla/image-search - Versions diffs - 11.0.156-alpha.0 → 11.0.157-alpha.0 - Mend

@ndla/image-search 11.0.156-alpha.0 → 11.0.157-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/es/ImageMeta.mjs.map +1 -1
package/es/ImageSearch.mjs.map +1 -1
package/es/ImageSearchResult.mjs.map +1 -1
package/es/PreviewImage.mjs.map +1 -1
package/es/util/imageUtil.mjs.map +1 -1
package/lib/ImageMeta.js.map +1 -1
package/lib/ImageSearch.js.map +1 -1
package/lib/ImageSearchResult.js.map +1 -1
package/lib/PreviewImage.js.map +1 -1
package/lib/util/imageUtil.js.map +1 -1
package/package.json +3 -3

package/es/ImageMeta.mjs.map CHANGED Viewed

	@@ -1 +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 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~~,CAIuB,~~GAFzB~~,kBAAkB,MAAM,gBAAgB,MAAM,GAAG,gBAAgB,OAAO,OAAO,KACrF,eAAe,MAAM,iBAAiB,~~MACuB~~,CAAA"}
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 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;CAOpG,OAAO,oBAAC,MAAD,EAAA,UAAO,GAAG,YAAY,KANV,cAAc;EAC/B,OAAO,cAAc,UAAU,MAAM;CACvC,GAAG,CAAC,UAAU,MAAM,CAIuB,IAFxB,kBAAkB,MAAM,gBAAgB,MAAM,GAAG,gBAAgB,OAAO,OAAO,KACrF,eAAe,MAAM,iBAAiB,KACsB,CAAA;AAC3E"}

package/es/ImageSearch.mjs.map CHANGED Viewed

	@@ -1 +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} 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>…</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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"}
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} 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 {/* oxlint-disable-next-line jsx-a11y/prefer-tag-over-role - the search element isn't supported well enough */}\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>…</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;AACP,EACF,CAAC;AAED,MAAM,sBAAsB,OAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,qBAAqB;CACrB,SAAS;CACT,cAAc;AAChB,EACF,CAAC;AAED,MAAM,eAAe,OAAO,OAAO,EACjC,MAAM;CACJ,SAAS;CACT,KAAK;AACP,EACF,CAAC;AAED,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM,EACJ,UAAU,OACZ,EACF,CAAC;AAED,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,gBAAgB;CACd,eAAe;CACf,UAAU,EACR,SAAS,OACX;AACF,EACF,EACF,CAAC;AAED,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM,EACJ,gBAAgB;CACd,kBAAkB,EAChB,SAAS,OACX;CACA,uBAAuB,EACrB,SAAS,OACX;AACF,EACF,EACF,CAAC;AAaD,MAAa,eAAe,EAC1B,eACA,cAAc,QACd,SACA,QACA,WACA,gBACA,cACA,mBACsB;CACtB,MAAM,CAAC,aAAa,kBAAkB,SAA0B;EAC9D,OAAO,KAAA;EACP,MAAM;EACN,UAAU;CACZ,CAAC;CACD,MAAM,CAAC,eAAe,oBAAoB,SAAgD;CAC1F,MAAM,CAAC,WAAW,gBAAgB,SAAkB,KAAK;CACzD,MAAM,CAAC,cAAc,mBAAmB,SAAwC;CAEhF,MAAM,EAAE,SAAS;CACjB,MAAM,iBAAiB,CAAC,aAAa,cAAc,QAAQ,WAAW;CAEtE,MAAM,iBAAiB,OAA8C,oBAA8B;EACjG,iBAAiB,KAAA,CAAS;EAC1B,IAAI,CAAC,OAAO;EACZ,cAAc,KAAK;EACnB,IAAI,iBACF,iBAAiB,KAAK;CAE1B;CAEA,MAAM,gBAAgB,gBAAiC;EACrD,aAAa,IAAI;EACjB,OAAO,YAAY,OAAO,YAAY,IAAI,EACvC,MAAM,WAAW;GAChB,eAAe;IACb,OAAO,YAAY;IACnB,UAAU,OAAO;IACjB,MAAM,YAAY;GACpB,CAAC;GACD,gBAAgB,MAAM;GACtB,aAAa,KAAK;EACpB,CAAC,EACA,OAAO,QAAQ;GACd,UAAU,GAAG;GACb,aAAa,KAAK;EACpB,CAAC;CACL;CAEA,MAAM,qBAAqB,EAAE,QAAQ,EAAE,cAA6C;EAClF,gBAAgB,eAAe;GAC7B,GAAG;GACH,OAAO;EACT,EAAE;CACJ;CAEA,MAAM,WAAW,MAA2D;EAC1E,IAAI,EAAE,QAAQ,SACZ,aAAa,WAAW;CAE5B;CAEA,gBAAgB;EACd,aAAa,WAAW;CAE1B,GAAG,CAAC,CAAC;CAEL,OACE,qBAAC,oBAAD,EAAA,UAAA;EAEE,qBAAC,cAAD;GAAc,MAAK;aAAnB,CACE,oBAAC,OAAD;IACE,MAAK;IACL,aAAa,aAAa;IAC1B,OAAO,aAAa,SAAS;IAC7B,UAAU;IACV,WAAW;GACZ,CAAA,GACD,oBAAC,YAAD;IACE,SAAQ;IACR,cAAY,aAAa;IACzB,OAAO,aAAa;IACpB,WAAW;IACX,eAAe,aAAa,WAAW;cAEvC,oBAAC,YAAD,CAAa,CAAA;GACH,CAAA,CACA;;EACb,CAAC,CAAC,kBAAkB;EACrB,oBAAC,qBAAD,EAAA,UACG,cAAc,QAAQ,KAAK,UAC1B,oBAAC,mBAAD;GAES;GACP,eAAe,UAAU,iBAAiB,KAAK;GAChC;GACA;GACf,cAAc,CAAC,CAAC;GAChB,cAAc,aAAa;GACnB;EACT,GARM,MAAM,EAQZ,CACF,EACkB,CAAA;EACrB,qBAAC,sBAAD;GACE,MAAM,QAAQ;GACd,eAAe,YAAY,aAAa;IAAE,GAAG;IAAa,MAAM,QAAQ;GAAK,CAAC;GAC9E,cAAc,aAAa;GAC3B,OAAO,cAAc,cAAc;GACnC,UAAU,cAAc;GACxB,QAAQ;aANV;IAQE,oBAAC,uBAAD;KAAuB,SAAA;eACrB,qBAAC,cAAD;MACE,SAAQ;MACR,cAAY,aAAa,wBAAwB;MACjD,OAAO,aAAa,wBAAwB;gBAH9C,CAKE,oBAAC,oBAAD,CAAqB,CAAA,GACrB,oBAAC,QAAD,EAAA,UAAO,aAAa,wBAAwB,iBAAuB,CAAA,CACvD;;IACO,CAAA;IACvB,oBAAC,mBAAD,EAAA,WACI,eACA,WAAW,MAAM,KAAK,MAAM,OAAO,SAAS;KAE1C,IAAI,UAAU,KAAK,SAAS,GAAG,OAAO;KACtC,OAAO,KAAK,SAAS,SACnB,oBAAC,sBAAD;MAAkC,GAAI;MAAM,SAAA;gBAC1C,oBAAC,QAAD;OAAQ,SAAS,KAAK,UAAU,WAAW,OAAO,YAAY;iBAAa,KAAK;MAAc,CAAA;KAC1E,GAFK,KAEL,IAEtB,oBAAC,oBAAD;MAAuC;MAAO,SAAA;gBAC5C,oBAAC,MAAD;OAAM,SAAA;OAAQ,YAAA;iBACZ,oBAAC,OAAD,EAAA,UAAK,IAAY,CAAA;MACb,CAAA;KACY,GAJK,KAIL;IAExB,CAAC,EAEc,CAAA;IACnB,oBAAC,uBAAD;KAAuB,SAAA;eACrB,qBAAC,cAAD;MACE,SAAQ;MACR,cAAY,aAAa,wBAAwB;MACjD,OAAO,aAAa,wBAAwB;gBAH9C,CAKE,oBAAC,QAAD,EAAA,UAAO,aAAa,wBAAwB,iBAAuB,CAAA,GACnE,oBAAC,qBAAD,CAAsB,CAAA,CACV;;IACO,CAAA;GACH;;CACJ,EAAA,CAAA;AAExB"}

package/es/ImageSearchResult.mjs.map CHANGED Viewed

	@@ -1 +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 { 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"}
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 { 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;AACf,EACF,CAAC;AAED,MAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ,WAAW;CACX,OAAO;CACP,QAAQ;AACV,EACF,CAAC;AAED,MAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,EACJ,WAAW,IACb,EACF,CAAC;AAYD,MAAa,qBAAqB,EAChC,OACA,cACA,eACA,eACA,cACA,cACA,aACW;CACX,MAAM,kBAAkB,eAAe,OAAO,MAAM;CACpD,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,cAAD;EACE,SAAS,kBAAkB,cAAc;EACzC,eAAY;EACZ,eAAe,aAAa,KAAK;EACjC,iBAAe;EACf,iBAAe,iBAAiB,MAAM;YALxC,CAOE,oBAAC,aAAD;GACE,KAAI;GACJ,QAAQ,kBAAkB,MAAM,MAAM,QAAQ;GAC9C,KAAK,MAAM,MAAM;GACjB,SAAQ;EACT,CAAA,GACD,oBAAC,YAAD;GAAY,WAAU;GAAe,SAAA;GAAQ,YAAA;aAC3C,oBAAC,QAAD,EAAA,UACG,MAAM,MAAM,MAAM,KAAK,IAAI,MAAM,MAAM,QAAS,aAAa,wBAAwB,OAAO,MAAM,KAC/F,CAAA;EACI,CAAA,CACA;KACb,kBACC,oBAAC,cAAD;EACE,IAAI,iBAAiB,MAAM;EAC3B,OAAO;EACQ;EACD;EACA;EACN;CACT,CAAA,IACC,IACJ,EAAA,CAAA;AAEN"}

package/es/PreviewImage.mjs.map CHANGED Viewed

	@@ -1 +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 \"./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":";;;;;;;;;;;;;;;;AA6BA,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM,EACJ,YAAY,~~KACb~~,EACF,CAAC;~~AAEF~~,MAAM,cAAc,OAAO,OAAO,EAChC,MAAM,EACJ,WAAW,~~kBACZ~~,EACF,CAAC;~~AAEF~~,MAAM,sBAAsB,OAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;~~CACN~~,EACF,CAAC;~~AAEF~~,MAAM,iBAAiB,OAAO,MAAM,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,UAAU;~~CACX~~,EACF,CAAC;~~AAEF~~,MAAM,eAAe,OAAO,OAAO,EACjC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,UAAU;~~CACX~~,EACF,CAAC;~~AAEF~~,MAAM,gBAAgB,OAAO,MAAM,EACjC,MAAM;CACJ,SAAS;CACT,YAAY;~~CACb~~,EACF,CAAC;~~AAEF~~,MAAM,gBAAgB,OAAO,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,eAAe,OAAO,OAAO,EACjC,MAAM;CACJ,SAAS;CACT,gBAAgB;~~CACjB~~,EACF,CAAC;~~AAEF~~,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,MAAM;~~CACP~~,EACF,CAAC;~~AAEF~~,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,gBAAgB;~~CACjB~~,EACF,CAAC;~~AAEF~~,MAAM,kBAAkB,OAAO,WAAW,EACxC,MAAM,EAAE,WAAW,~~UAAU~~,EAC9B,CAAC;~~AAWF~~,MAAa,gBAAgB,EAAE,IAAI,OAAO,eAAe,cAAc,cAAc,aAAoB;CACvG,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,~~MAAM~~;~~AAE7D~~,~~QACE~~,qBAAC,eAAD;EAAmB;YAAnB,CACE,oBAAC,gBAAD,EAAA,UACE,oBAAC,aAAD;GACE,KAAI;GACJ,QAAQ,WAAW,MAAM,MAAM,~~SAAS~~;~~GACxC~~,OAAM;GACN,KAAK,MAAM,MAAM;GACjB,cAAY,MAAM,MAAM;GACxB,SAAQ;~~GACR~~,CAAA,EACa,CAAA,~~EACjB~~,qBAAC,gBAAD,EAAA,UAAA,CACE,qBAAC,qBAAD,EAAA,UAAA;GACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,MAAD;IAAM,WAAU;cACb,MAAM,MAAM,MAAM,~~MAAM~~,~~GAAG~~,MAAM,MAAM,QAAS,aAAa,wBAAwB,OAAO,MAAM;~~IAC9F~~,CAAA,~~EACP~~,oBAAC,YAAD;IACE,SAAQ;IACR,eAAe,cAAc,KAAA,~~EAAU~~;~~IACvC~~,cAAY,aAAa;IACzB,OAAO,aAAa;cAEpB,oBAAC,WAAD,~~EAAa~~,CAAA;~~IACF~~,CAAA,CACA,EAAA,CAAA;~~GACd~~,CAAC,CAAC,MAAM,UAAU,SAAS,UAC1B,qBAAC,MAAD,EAAA,UAAA,CACE,oBAAC,KAAD,EAAA,UAAI,GAAG,aAAa,cAAc,~~KAAQ~~,CAAA,~~EACzC~~,MAAM,UAAU,SAAS,KAAK,YAAY,QAAQ,~~KAAK~~,~~CAAC~~,KAAK,~~KAAK~~,CAC9D,EAAA,CAAA;~~GAER~~,CAAC,CAAC,MAAM,UAAU,QAAQ,aAAa,~~MAAM~~,~~IAC5C~~,qBAAC,MAAD,EAAA,UAAA,CACE,oBAAC,KAAD,EAAA,UAAI,GAAG,aAAa,QAAQ,~~KAAQ~~,CAAA,~~EACnC~~,MAAM,UAAU,QAAQ,~~YACpB~~,EAAA,CAAA;~~GAER~~,CAAC,CAAC,MAAM,QAAQ,QAAQ,~~MAAM~~,~~IAC7B~~,qBAAC,MAAD,EAAA,UAAA,CACE,oBAAC,KAAD,EAAA,UAAI,GAAG,aAAa,QAAQ,~~KAAQ~~,CAAA,~~EACnC~~,MAAM,QAAQ,~~QACV~~,EAAA,CAAA;~~GAER~~,CAAC,CAAC,MAAM,QAAQ,QAAQ,~~MAAM~~,~~IAC7B~~,qBAAC,MAAD,EAAA,UAAA;IACE,oBAAC,KAAD,EAAA,UAAI,GAAG,aAAa,QAAQ,~~IAAO~~,CAAA;;IAAE,MAAM,QAAQ;~~IAC9C~~,EAAA,CAAA;~~GAER~~,CAAC,CAAC,MAAM,aAAa,~~MAAM~~,~~IAC1B~~,qBAAC,MAAD,EAAA,UAAA,CACE,oBAAC,KAAD,EAAA,UAAI,GAAG,aAAa,aAAa,~~KAAQ~~,CAAA,~~EACxC~~,qBAAqB,MAAM,cAAc,~~OAAO~~,CAC5C,EAAA,CAAA;~~GAET~~,oBAAC,WAAD;IACE,aAAa,MAAM,MAAM;IACzB,UAAU,MAAM,MAAM;IACtB,iBAAiB,MAAM,MAAM;IACrB;~~IACR~~,CAAA;~~GACD~~,CAAC,CAAC,MAAM,KAAK,KAAK,UACjB,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,MAAD;IAAM,IAAG;cACP,oBAAC,KAAD,EAAA,UAAI,GAAG,aAAa,KAAK,~~KAAQ~~,CAAA;~~IAC5B~~,CAAA,~~EACP~~,oBAAC,gBAAD;IAAgB,oBAAiB;cAC9B,MAAM,KAAK,KAAK,KAAK,QACpB,qBAAC,eAAD,EAAA,UAAA,CACE,oBAAC,SAAD,EAAS,MAAK,~~SAAU~~,CAAA,~~EACvB~~,~~IACa~~,EAAA,~~EAHI~~,~~IAGJ~~,CAChB;~~IACa~~,CAAA,CACJ,EAAA,CAAA;~~GAEG~~,EAAA,CAAA,~~EACtB~~,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,QAAD;GAAQ,eAAY;GAAY,eAAe,cAAc,OAAO,~~gBAAgB~~;~~aACjF~~,aAAa;~~GACP~~,CAAA,~~EACR~~,CAAC,CAAC,gBACD,oBAAC,iBAAD,EAAA,UACE,qBAAC,cAAD;GAAc,SAAS;GAAiB,uBAAuB,oBAAoB,SAAS,CAAC,~~KAAK~~;~~aAAlG~~;IACE,oBAAC,iBAAD,EAAA,UACE,oBAAC,mBAAD;KAAmB,SAAA;eACjB,oBAAC,WAAD,~~EAAa~~,CAAA;~~KACK~~,CAAA,EACJ,CAAA;~~IAClB~~,oBAAC,eAAD,EAAA,UAAgB,aAAa,~~eAA8B~~,CAAA;~~IAC3D~~,oBAAC,qBAAD,~~EAAuB~~,CAAA;~~IACV~~;~~MACC~~,CAAA,CAEL,EAAA,CAAA,CACF,EAAA,CAAA,CACH"}
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 \"./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/util/imageUtil.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"imageUtil.mjs","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~~"}
1	+ {"version":3,"file":"imageUtil.mjs","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;AACd,EAAE,KAAK,IAAI;AAEb,MAAa,qBAAqB,aAChC;CAAC,GAAG,SAAS;CAAgB,GAAG,SAAS;CAAgB,GAAG,SAAS;AAAc,EAAE,KAAK,IAAI"}

package/lib/ImageMeta.js.map CHANGED Viewed

	@@ -1 +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 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~~,CAIuB,~~GAFzB~~,kBAAkB,MAAM,gBAAgB,MAAM,GAAG,gBAAgB,OAAO,OAAO,KACrF,eAAe,MAAM,iBAAiB,~~MACuB~~,CAAA"}
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 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;CAOpG,OAAO,iBAAA,GAAA,kBAAA,KAACA,iBAAAA,MAAD,EAAA,UAAO,GAAG,YAAY,MAAA,GAAA,MAAA,eANI;EAC/B,QAAA,GAAA,WAAA,eAAqB,UAAU,MAAM;CACvC,GAAG,CAAC,UAAU,MAAM,CAIuB,IAFxB,kBAAkB,MAAM,gBAAgB,MAAM,GAAG,gBAAgB,OAAO,OAAO,KACrF,eAAe,MAAM,iBAAiB,KACsB,CAAA;AAC3E"}

package/lib/ImageSearch.js.map CHANGED Viewed

	@@ -1 +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} 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>…</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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"}
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} 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 {/* oxlint-disable-next-line jsx-a11y/prefer-tag-over-role - the search element isn't supported well enough */}\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>…</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/lib/ImageSearchResult.js.map CHANGED Viewed

	@@ -1 +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 { 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"}
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 { 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;AACf,EACF,CAAC;AAED,MAAM,eAAA,GAAA,wBAAA,QAAqBC,iBAAAA,OAAO,EAChC,MAAM;CACJ,WAAW;CACX,OAAO;CACP,QAAQ;AACV,EACF,CAAC;AAED,MAAM,cAAA,GAAA,wBAAA,QAAoBC,iBAAAA,MAAM,EAC9B,MAAM,EACJ,WAAW,IACb,EACF,CAAC;AAYD,MAAa,qBAAqB,EAChC,OACA,cACA,eACA,eACA,cACA,cACA,aACW;CACX,MAAM,kBAAkB,eAAe,OAAO,MAAM;CACpD,OACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EACE,SAAS,kBAAkB,cAAc;EACzC,eAAY;EACZ,eAAe,aAAa,KAAK;EACjC,iBAAe;EACf,iBAAe,iBAAiB,MAAM;YALxC,CAOE,iBAAA,GAAA,kBAAA,KAAC,aAAD;GACE,KAAI;GACJ,QAAQC,kBAAAA,kBAAkB,MAAM,MAAM,QAAQ;GAC9C,KAAK,MAAM,MAAM;GACjB,SAAQ;EACT,CAAA,GACD,iBAAA,GAAA,kBAAA,KAAC,YAAD;GAAY,WAAU;GAAe,SAAA;GAAQ,YAAA;aAC3C,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UACG,MAAM,MAAM,MAAM,KAAK,IAAI,MAAM,MAAM,QAAS,aAAa,wBAAwB,OAAO,MAAM,KAC/F,CAAA;EACI,CAAA,CACA;KACb,kBACC,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;EACE,IAAI,iBAAiB,MAAM;EAC3B,OAAO;EACQ;EACD;EACA;EACN;CACT,CAAA,IACC,IACJ,EAAA,CAAA;AAEN"}

package/lib/PreviewImage.js.map CHANGED Viewed

	@@ -1 +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 \"./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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"}
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 \"./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/util/imageUtil.js.map CHANGED Viewed

	@@ -1 +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~~"}
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;AACd,EAAE,KAAK,IAAI;AAEb,MAAa,qBAAqB,aAChC;CAAC,GAAG,SAAS;CAAgB,GAAG,SAAS;CAAgB,GAAG,SAAS;AAAc,EAAE,KAAK,IAAI"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@ndla/image-search",
   "type": "module",
-  "version": "11.0.156-alpha.0",
+  "version": "11.0.157-alpha.0",
   "description": "A simple library for searching images from NDLA",
   "license": "GPL-3.0",
   "exports": {
@@ -32,7 +32,7 @@
   "dependencies": {
     "@ndla/icons": "^8.0.89-alpha.0",
     "@ndla/licenses": "^10.0.12-alpha.0",
-    "@ndla/primitives": "^1.0.129-alpha.0",
+    "@ndla/primitives": "^1.0.130-alpha.0",
     "@ndla/styled-system": "^0.0.49",
     "@ndla/util": "^5.0.21-alpha.0"
   },
@@ -48,5 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "471ee3863b03f1cc6a48d09ab624fbd1a5613c6e"
+  "gitHead": "609d5d044ece059de95a3142847ad9ab8737f468"
 }