@ndla/ui 56.0.122-alpha.0 → 56.0.124-alpha.0

package/es/Embed/FootnoteEmbed.js

@@ -0,0 +1,27 @@
+import { styled } from "@ndla/styled-system/jsx";
+import { useTranslation } from "react-i18next";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Embed/FootnoteEmbed.tsx
+const StyledSup = styled("sup", { base: { "& a": {
+	textStyle: "label.xsmall",
+	marginInlineStart: "1"
+} } });
+const FootnoteEmbed = ({ embed }) => {
+	const { t } = useTranslation();
+	if (embed.status === "error") return /* @__PURE__ */ jsx("div", { children: t("error") });
+	return /* @__PURE__ */ jsx("span", {
+		id: `ref${embed.data.entryNum}`,
+		"data-embed-type": "footnote",
+		children: /* @__PURE__ */ jsx(StyledSup, { children: /* @__PURE__ */ jsx("a", {
+			href: `#note${embed.data.entryNum}`,
+			target: "_self",
+			children: `[${embed.data.entryNum}]`
+		}) })
+	});
+};
+var FootnoteEmbed_default = FootnoteEmbed;
+
+//#endregion
+export { FootnoteEmbed_default };
+//# sourceMappingURL=FootnoteEmbed.js.map

package/es/Embed/FootnoteEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FootnoteEmbed.js","names":[],"sources":["../../src/Embed/FootnoteEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { useTranslation } from \"react-i18next\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { FootnoteMetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n  embed: FootnoteMetaData;\n}\n\nconst StyledSup = styled(\"sup\", {\n  base: {\n    \"& a\": {\n      textStyle: \"label.xsmall\",\n      marginInlineStart: \"1\",\n    },\n  },\n});\n\nconst FootnoteEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  if (embed.status === \"error\") {\n    return <div>{t(\"error\")}</div>;\n  }\n\n  return (\n    <span id={`ref${embed.data.entryNum}`} data-embed-type=\"footnote\">\n      <StyledSup>\n        <a href={`#note${embed.data.entryNum}`} target=\"_self\">{`[${embed.data.entryNum}]`}</a>\n      </StyledSup>\n    </span>\n  );\n};\n\nexport default FootnoteEmbed;\n"],"mappings":";;;;;AAgBA,MAAM,YAAY,OAAO,OAAO,EAC9B,MAAM,EACJ,OAAO;CACL,WAAW;CACX,mBAAmB;AACpB,EACF,EACF,EAAC;AAEF,MAAM,gBAAgB,CAAC,EAAE,OAAc,KAAK;CAC1C,MAAM,EAAE,GAAG,GAAG,gBAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,wBAAO,IAAC,mBAAK,EAAE,QAAQ,GAAO;AAGhC,wBACE,IAAC;EAAK,KAAK,KAAK,MAAM,KAAK,SAAS;EAAG,mBAAgB;4BACrD,IAAC,uCACC,IAAC;GAAE,OAAO,OAAO,MAAM,KAAK,SAAS;GAAG,QAAO;cAAU,GAAG,MAAM,KAAK,SAAS;IAAO,GAC7E;GACP;AAEV;AAED,4BAAe"}

package/es/Embed/GlossEmbed.js

@@ -0,0 +1,52 @@
+import { EmbedErrorPlaceholder_default } from "./EmbedErrorPlaceholder.js";
+import { ConceptInlineTriggerButton } from "./ConceptInlineTriggerButton.js";
+import { Gloss_default } from "../Gloss/Gloss.js";
+import { useRef } from "react";
+import { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Portal } from "@ark-ui/react";
+
+//#region src/Embed/GlossEmbed.tsx
+const StyledPopoverContent = styled(PopoverContent, { base: { width: "surface.xlarge" } });
+const GlossEmbed = ({ embed }) => {
+	const contentRef = useRef(null);
+	if (embed.status === "error" && embed.embedData.type === "inline") return /* @__PURE__ */ jsx("span", { children: embed.embedData.linkText });
+	if (embed.status === "error" || !embed.data.concept.glossData) return /* @__PURE__ */ jsx(EmbedErrorPlaceholder_default, { type: "gloss" });
+	const { concept, visualElement } = embed.data;
+	const audio = visualElement?.status === "success" && visualElement.resource === "audio" ? {
+		src: visualElement.data.audioFile.url,
+		title: visualElement.data.title.title
+	} : void 0;
+	if (embed.embedData.type === "inline") return /* @__PURE__ */ jsxs(PopoverRoot, {
+		initialFocusEl: () => contentRef.current,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ConceptInlineTriggerButton, { children: embed.embedData.linkText })
+		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(StyledPopoverContent, {
+			ref: contentRef,
+			children: /* @__PURE__ */ jsx(Figure, { children: /* @__PURE__ */ jsx(Gloss_default, {
+				glossData: concept.glossData,
+				title: concept.title,
+				audio,
+				exampleIds: embed.embedData.exampleIds,
+				exampleLangs: embed.embedData.exampleLangs
+			}) })
+		}) })]
+	});
+	return /* @__PURE__ */ jsx(Figure, {
+		"data-embed-type": "gloss",
+		children: /* @__PURE__ */ jsx(Gloss_default, {
+			glossData: concept.glossData,
+			title: concept.title,
+			audio,
+			exampleIds: embed.embedData.exampleIds,
+			exampleLangs: embed.embedData.exampleLangs,
+			variant: "bordered"
+		})
+	});
+};
+
+//#endregion
+export { GlossEmbed };
+//# sourceMappingURL=GlossEmbed.js.map

package/es/Embed/GlossEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlossEmbed.js","names":["EmbedErrorPlaceholder","Gloss"],"sources":["../../src/Embed/GlossEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 { useRef } from \"react\";\nimport { Portal } from \"@ark-ui/react\";\nimport { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport { Gloss } from \"../Gloss\";\n\ninterface Props {\n  embed: ConceptMetaData;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    width: \"surface.xlarge\",\n  },\n});\n\nexport const GlossEmbed = ({ embed }: Props) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n    return <span>{embed.embedData.linkText}</span>;\n  }\n  if (embed.status === \"error\" || !embed.data.concept.glossData) {\n    return <EmbedErrorPlaceholder type=\"gloss\" />;\n  }\n\n  const { concept, visualElement } = embed.data;\n\n  const audio =\n    visualElement?.status === \"success\" && visualElement.resource === \"audio\"\n      ? {\n          src: visualElement.data.audioFile.url,\n          title: visualElement.data.title.title,\n        }\n      : undefined;\n\n  if (embed.embedData.type === \"inline\") {\n    return (\n      <PopoverRoot initialFocusEl={() => contentRef.current}>\n        <PopoverTrigger asChild>\n          <ConceptInlineTriggerButton>{embed.embedData.linkText}</ConceptInlineTriggerButton>\n        </PopoverTrigger>\n        <Portal>\n          <StyledPopoverContent ref={contentRef}>\n            <Figure>\n              <Gloss\n                glossData={concept.glossData}\n                title={concept.title}\n                audio={audio}\n                exampleIds={embed.embedData.exampleIds}\n                exampleLangs={embed.embedData.exampleLangs}\n              />\n            </Figure>\n          </StyledPopoverContent>\n        </Portal>\n      </PopoverRoot>\n    );\n  }\n\n  return (\n    <Figure data-embed-type=\"gloss\">\n      <Gloss\n        glossData={concept.glossData}\n        title={concept.title}\n        audio={audio}\n        exampleIds={embed.embedData.exampleIds}\n        exampleLangs={embed.embedData.exampleLangs}\n        variant=\"bordered\"\n      />\n    </Figure>\n  );\n};\n"],"mappings":";;;;;;;;;;AAqBA,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM,EACJ,OAAO,iBACR,EACF,EAAC;AAEF,MAAa,aAAa,CAAC,EAAE,OAAc,KAAK;CAC9C,MAAM,aAAa,OAAuB,KAAK;AAC/C,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,wBAAO,IAAC,oBAAM,MAAM,UAAU,WAAgB;AAEhD,KAAI,MAAM,WAAW,YAAY,MAAM,KAAK,QAAQ,UAClD,wBAAO,IAACA,iCAAsB,MAAK,UAAU;CAG/C,MAAM,EAAE,SAAS,eAAe,GAAG,MAAM;CAEzC,MAAM,QACJ,eAAe,WAAW,aAAa,cAAc,aAAa,UAC9D;EACE,KAAK,cAAc,KAAK,UAAU;EAClC,OAAO,cAAc,KAAK,MAAM;CACjC;AAGP,KAAI,MAAM,UAAU,SAAS,SAC3B,wBACE,KAAC;EAAY,gBAAgB,MAAM,WAAW;6BAC5C,IAAC;GAAe;6BACd,IAAC,wCAA4B,MAAM,UAAU,WAAsC;IACpE,kBACjB,IAAC,oCACC,IAAC;GAAqB,KAAK;6BACzB,IAAC,oCACC,IAACC;IACC,WAAW,QAAQ;IACnB,OAAO,QAAQ;IACR;IACP,YAAY,MAAM,UAAU;IAC5B,cAAc,MAAM,UAAU;KAC9B,GACK;IACY,GAChB;GACG;AAIlB,wBACE,IAAC;EAAO,mBAAgB;4BACtB,IAACA;GACC,WAAW,QAAQ;GACnB,OAAO,QAAQ;GACR;GACP,YAAY,MAAM,UAAU;GAC5B,cAAc,MAAM,UAAU;GAC9B,SAAQ;IACR;GACK;AAEZ"}

package/es/Embed/H5pEmbed.js

@@ -0,0 +1,38 @@
+import { EmbedErrorPlaceholder_default } from "./EmbedErrorPlaceholder.js";
+import { Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { useTranslation } from "react-i18next";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Embed/H5pEmbed.tsx
+const StyledFigure = styled(Figure, { base: { "& iframe": {
+	height: "auto",
+	width: "100%"
+} } });
+const FigureOembed = styled(Figure, { base: {
+	width: "100%",
+	"& iframe": { width: "100%" }
+} });
+const H5pEmbed = ({ embed }) => {
+	const { t } = useTranslation();
+	if (embed.status === "error") return /* @__PURE__ */ jsx(EmbedErrorPlaceholder_default, { type: "h5p" });
+	if (embed.data.oembed) return /* @__PURE__ */ jsx(FigureOembed, {
+		"data-embed-type": "h5p",
+		dangerouslySetInnerHTML: { __html: embed.data.oembed.html ?? "" }
+	});
+	const title = embed.embedData.title?.trim() ? embed.embedData.title : embed.data.h5pLicenseInformation?.h5p.title?.trim() ? embed.data.h5pLicenseInformation.h5p.title : embed.embedData.url;
+	const titleWithPrefix = `${t("embed.type.h5p")}: ${title}`;
+	return /* @__PURE__ */ jsx(StyledFigure, {
+		"data-embed-type": "h5p",
+		children: /* @__PURE__ */ jsx("iframe", {
+			title: titleWithPrefix,
+			"aria-label": titleWithPrefix,
+			src: embed.embedData.url
+		})
+	});
+};
+var H5pEmbed_default = H5pEmbed;
+
+//#endregion
+export { H5pEmbed_default };
+//# sourceMappingURL=H5pEmbed.js.map

package/es/Embed/H5pEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"H5pEmbed.js","names":["EmbedErrorPlaceholder"],"sources":["../../src/Embed/H5pEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { useTranslation } from \"react-i18next\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { H5pMetaData } from \"@ndla/types-embed\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n  embed: H5pMetaData;\n}\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    \"& iframe\": {\n      height: \"auto\",\n      width: \"100%\",\n    },\n  },\n});\n\nconst FigureOembed = styled(Figure, {\n  base: {\n    width: \"100%\",\n    \"& iframe\": {\n      width: \"100%\",\n    },\n  },\n});\n\nconst H5pEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type=\"h5p\" />;\n  }\n\n  if (embed.data.oembed) {\n    return <FigureOembed data-embed-type=\"h5p\" dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? \"\" }} />;\n  }\n\n  const title = embed.embedData.title?.trim()\n    ? embed.embedData.title\n    : embed.data.h5pLicenseInformation?.h5p.title?.trim()\n      ? embed.data.h5pLicenseInformation.h5p.title\n      : embed.embedData.url;\n\n  const titleWithPrefix = `${t(\"embed.type.h5p\")}: ${title}`;\n\n  return (\n    <StyledFigure data-embed-type=\"h5p\">\n      <iframe title={titleWithPrefix} aria-label={titleWithPrefix} src={embed.embedData.url} />\n    </StyledFigure>\n  );\n};\n\nexport default H5pEmbed;\n"],"mappings":";;;;;;;AAkBA,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,YAAY;CACV,QAAQ;CACR,OAAO;AACR,EACF,EACF,EAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ,OAAO;CACP,YAAY,EACV,OAAO,OACR;AACF,EACF,EAAC;AAEF,MAAM,WAAW,CAAC,EAAE,OAAc,KAAK;CACrC,MAAM,EAAE,GAAG,GAAG,gBAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,wBAAO,IAACA,iCAAsB,MAAK,QAAQ;AAG7C,KAAI,MAAM,KAAK,OACb,wBAAO,IAAC;EAAa,mBAAgB;EAAM,yBAAyB,EAAE,QAAQ,MAAM,KAAK,OAAO,QAAQ,GAAI;GAAI;CAGlH,MAAM,QAAQ,MAAM,UAAU,OAAO,MAAM,GACvC,MAAM,UAAU,QAChB,MAAM,KAAK,uBAAuB,IAAI,OAAO,MAAM,GACjD,MAAM,KAAK,sBAAsB,IAAI,QACrC,MAAM,UAAU;CAEtB,MAAM,mBAAmB,EAAE,EAAE,iBAAiB,CAAC,IAAI,MAAM;AAEzD,wBACE,IAAC;EAAa,mBAAgB;4BAC5B,IAAC;GAAO,OAAO;GAAiB,cAAY;GAAiB,KAAK,MAAM,UAAU;IAAO;GAC5E;AAElB;AAED,uBAAe"}

package/es/Embed/IframeEmbed.js

@@ -0,0 +1,69 @@
+import { EmbedErrorPlaceholder_default } from "./EmbedErrorPlaceholder.js";
+import { ResourceBox_default } from "../ResourceBox/ResourceBox.js";
+import { useEffect, useRef } from "react";
+import { Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { useTranslation } from "react-i18next";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Embed/IframeEmbed.tsx
+const StyledIframe = styled("iframe", { base: {
+	width: "100%",
+	border: 0
+} });
+const StyledFigure = styled(Figure, { base: { clear: "both" } });
+const IframeEmbed = ({ embed }) => {
+	const { t } = useTranslation();
+	const iframeRef = useRef(null);
+	useEffect(() => {
+		const iframe = iframeRef.current;
+		if (iframe) {
+			const [width$1, height$1] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];
+			iframe.style.aspectRatio = `${width$1 ? width$1 : 16}/${height$1 ? height$1 : 9}`;
+			iframe.width = "";
+			iframe.height = "";
+		}
+	}, []);
+	if (embed.status === "error") return /* @__PURE__ */ jsx(EmbedErrorPlaceholder_default, { type: "external" });
+	const { embedData, data } = embed;
+	if (embedData.type === "fullscreen") {
+		const iframeImage = embed.status === "success" ? data.iframeImage : void 0;
+		const alt = embedData.alt !== void 0 ? embedData.alt : iframeImage?.alttext.alttext;
+		const image = {
+			src: iframeImage?.image.imageUrl,
+			alt: alt ?? ""
+		};
+		return /* @__PURE__ */ jsx(StyledFigure, {
+			"data-embed-type": "iframe",
+			children: /* @__PURE__ */ jsx(ResourceBox_default, {
+				image,
+				title: embedData.title ?? "",
+				url: embedData.url,
+				caption: embedData.caption ?? "",
+				buttonText: t("license.other.itemImage.ariaLabel")
+			})
+		});
+	}
+	const { width, height, url } = embedData;
+	const strippedWidth = typeof width === "number" ? width : width?.replace(/\s*px/, "");
+	const strippedHeight = typeof height === "number" ? height : height?.replace(/\s*px/, "");
+	const title = `${t("embed.type.external")}: ${embedData.title?.trim() ? embedData.title : url}`;
+	return /* @__PURE__ */ jsx(StyledFigure, {
+		"data-embed-type": "iframe",
+		children: /* @__PURE__ */ jsx(StyledIframe, {
+			ref: iframeRef,
+			title,
+			"aria-label": title,
+			src: url,
+			width: strippedWidth,
+			height: strippedHeight,
+			allow: "fullscreen; encrypted-media",
+			loading: "lazy"
+		})
+	});
+};
+var IframeEmbed_default = IframeEmbed;
+
+//#endregion
+export { IframeEmbed_default };
+//# sourceMappingURL=IframeEmbed.js.map

package/es/Embed/IframeEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IframeEmbed.js","names":["width","height","EmbedErrorPlaceholder","ResourceBox"],"sources":["../../src/Embed/IframeEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { IframeMetaData } from \"@ndla/types-embed\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport { ResourceBox } from \"../ResourceBox\";\n\ninterface Props {\n  embed: IframeMetaData;\n}\n\nconst StyledIframe = styled(\"iframe\", {\n  base: {\n    width: \"100%\",\n    border: 0,\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    clear: \"both\",\n  },\n});\n\nconst IframeEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n\n  useEffect(() => {\n    const iframe = iframeRef.current;\n    if (iframe) {\n      const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];\n      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;\n      iframe.width = \"\";\n      iframe.height = \"\";\n    }\n  }, []);\n\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type=\"external\" />;\n  }\n\n  const { embedData, data } = embed;\n\n  if (embedData.type === \"fullscreen\") {\n    const iframeImage = embed.status === \"success\" ? data.iframeImage : undefined;\n    const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;\n    const image = { src: iframeImage?.image.imageUrl, alt: alt ?? \"\" };\n    return (\n      <StyledFigure data-embed-type=\"iframe\">\n        <ResourceBox\n          image={image}\n          title={embedData.title ?? \"\"}\n          url={embedData.url}\n          caption={embedData.caption ?? \"\"}\n          buttonText={t(\"license.other.itemImage.ariaLabel\")}\n        />\n      </StyledFigure>\n    );\n  }\n\n  const { width, height, url } = embedData;\n\n  const strippedWidth = typeof width === \"number\" ? width : width?.replace(/\\s*px/, \"\");\n  const strippedHeight = typeof height === \"number\" ? height : height?.replace(/\\s*px/, \"\");\n  const title = `${t(\"embed.type.external\")}: ${embedData.title?.trim() ? embedData.title : url}`;\n\n  return (\n    <StyledFigure data-embed-type=\"iframe\">\n      <StyledIframe\n        ref={iframeRef}\n        title={title}\n        aria-label={title}\n        src={url}\n        width={strippedWidth}\n        height={strippedHeight}\n        allow=\"fullscreen; encrypted-media\"\n        loading=\"lazy\"\n      />\n    </StyledFigure>\n  );\n};\n\nexport default IframeEmbed;\n"],"mappings":";;;;;;;;;AAoBA,MAAM,eAAe,OAAO,UAAU,EACpC,MAAM;CACJ,OAAO;CACP,QAAQ;AACT,EACF,EAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,OAAO,OACR,EACF,EAAC;AAEF,MAAM,cAAc,CAAC,EAAE,OAAc,KAAK;CACxC,MAAM,EAAE,GAAG,GAAG,gBAAgB;CAC9B,MAAM,YAAY,OAA0B,KAAK;AAEjD,WAAU,MAAM;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,QAAQ;GACV,MAAM,CAACA,SAAOC,SAAO,GAAG,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,AAAC;AACvF,UAAO,MAAM,eAAe,EAAED,UAAQA,UAAQ,GAAG,GAAGC,WAASA,WAAS,EAAE;AACxE,UAAO,QAAQ;AACf,UAAO,SAAS;EACjB;CACF,GAAE,CAAE,EAAC;AAEN,KAAI,MAAM,WAAW,QACnB,wBAAO,IAACC,iCAAsB,MAAK,aAAa;CAGlD,MAAM,EAAE,WAAW,MAAM,GAAG;AAE5B,KAAI,UAAU,SAAS,cAAc;EACnC,MAAM,cAAc,MAAM,WAAW,YAAY,KAAK;EACtD,MAAM,MAAM,UAAU,iBAAoB,UAAU,MAAM,aAAa,QAAQ;EAC/E,MAAM,QAAQ;GAAE,KAAK,aAAa,MAAM;GAAU,KAAK,OAAO;EAAI;AAClE,yBACE,IAAC;GAAa,mBAAgB;6BAC5B,IAACC;IACQ;IACP,OAAO,UAAU,SAAS;IAC1B,KAAK,UAAU;IACf,SAAS,UAAU,WAAW;IAC9B,YAAY,EAAE,oCAAoC;KAClD;IACW;CAElB;CAED,MAAM,EAAE,OAAO,QAAQ,KAAK,GAAG;CAE/B,MAAM,uBAAuB,UAAU,WAAW,QAAQ,OAAO,QAAQ,SAAS,GAAG;CACrF,MAAM,wBAAwB,WAAW,WAAW,SAAS,QAAQ,QAAQ,SAAS,GAAG;CACzF,MAAM,SAAS,EAAE,EAAE,sBAAsB,CAAC,IAAI,UAAU,OAAO,MAAM,GAAG,UAAU,QAAQ,IAAI;AAE9F,wBACE,IAAC;EAAa,mBAAgB;4BAC5B,IAAC;GACC,KAAK;GACE;GACP,cAAY;GACZ,KAAK;GACL,OAAO;GACP,QAAQ;GACR,OAAM;GACN,SAAQ;IACR;GACW;AAElB;AAED,0BAAe"}

package/es/Embed/ImageEmbed.js

@@ -0,0 +1,180 @@
+import { EmbedByline } from "../LicenseByline/EmbedByline.js";
+import { EmbedErrorPlaceholder_default } from "./EmbedErrorPlaceholder.js";
+import { licenseAttributes } from "../utils/licenseAttributes.js";
+import { useMemo, useState } from "react";
+import { Figure, Image } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import parse from "html-react-parser";
+import { useTranslation } from "react-i18next";
+import { AddLine } from "@ndla/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/Embed/ImageEmbed.tsx
+const getFigureProps = (size, float) => {
+	const actualFloat = float === "left" ? "left" : float === "right" ? "right" : void 0;
+	const replacedSize = size?.replace("-hide-byline", "") ?? "full";
+	const actualSize = replacedSize === "fullwidth" ? "full" : replacedSize;
+	return {
+		float: actualFloat,
+		size: actualSize === "full" && float ? "medium" : actualSize
+	};
+};
+const getSizes = (size, align) => {
+	if (align && size === "full") return "(min-width: 1024px) 512px, (min-width: 768px) 350px, 100vw";
+	if (align && size === "small") return "(min-width: 1024px) 350px, (min-width: 768px) 180px, 100vw";
+	if (align && size === "xsmall") return "(min-width: 1024px) 180px, (min-width: 768px) 180px, 100vw";
+	return "(min-width: 1024px) 1024px, 100vw";
+};
+const getFocalPoint = (data) => {
+	const focalX = Number.parseFloat(data.focalX ?? "");
+	const focalY = Number.parseFloat(data.focalY ?? "");
+	if (!Number.isNaN(focalX) && !Number.isNaN(focalY)) return {
+		x: focalX,
+		y: focalY
+	};
+	return void 0;
+};
+const getCrop = (data) => {
+	const lowerRightX = Number.parseFloat(data.lowerRightX ?? "");
+	const lowerRightY = Number.parseFloat(data.lowerRightY ?? "");
+	const upperLeftX = Number.parseFloat(data.upperLeftX ?? "");
+	const upperLeftY = Number.parseFloat(data.upperLeftY ?? "");
+	if (!Number.isNaN(lowerRightX) && !Number.isNaN(lowerRightY) && !Number.isNaN(upperLeftX) && !Number.isNaN(upperLeftY)) return {
+		startX: lowerRightX,
+		startY: lowerRightY,
+		endX: upperLeftX,
+		endY: upperLeftY
+	};
+	return void 0;
+};
+const expandedSizes = "(min-width: 1024px) 1024px, 100vw";
+const ImageWrapper = styled("div", {
+	base: {
+		overflow: "hidden",
+		position: "relative",
+		width: "100%",
+		"& img": { width: "100%" }
+	},
+	variants: {
+		svg: {
+			true: {
+				display: "flex",
+				justifyContent: "center"
+			},
+			false: {}
+		},
+		border: {
+			true: {
+				border: "1px solid",
+				borderColor: "stroke.subtle",
+				borderRadius: "xsmall",
+				"& img": { borderRadius: "0" }
+			},
+			false: {}
+		},
+		expandable: {
+			true: { cursor: "pointer" },
+			false: {}
+		}
+	}
+});
+const StyledFigure = styled(Figure, { base: {
+	zIndex: "docked",
+	_hover: {
+		"& [data-byline-button]": { background: "background.default" },
+		"& button[data-expanded]": { transform: "scale(1.2)" }
+	},
+	"& button[data-expanded='true']": { "& svg": { transform: "rotate(-45deg)" } }
+} });
+const ExpandButton = styled("button", { base: {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	cursor: "pointer",
+	position: "absolute",
+	padding: "0",
+	top: "xsmall",
+	right: "xsmall",
+	width: "medium",
+	height: "medium",
+	border: "2px solid",
+	borderColor: "background.default",
+	transitionProperty: "transform, background-color, color",
+	transitionDuration: "normal",
+	transitionTimingFunction: "ease-out",
+	color: "background.default",
+	backgroundColor: "surface.action",
+	borderRadius: "large",
+	"& svg": {
+		transitionProperty: "transform",
+		transitionDuration: "normal",
+		transitionTimingFunction: "ease-out"
+	},
+	tabletDown: { display: "none" }
+} }, { defaultProps: { type: "button" } });
+const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", children }) => {
+	const [imageSizes, setImageSizes] = useState(void 0);
+	const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);
+	const { t } = useTranslation();
+	const parsedDescription = useMemo(() => {
+		if (embed.embedData.caption || renderContext === "article") return embed.embedData.caption ? parse(embed.embedData.caption) : void 0;
+		if (embed.status === "success" && embed.data.caption.caption) return parse(embed.data.caption.caption);
+	}, [embed, renderContext]);
+	if (embed.status === "error") return /* @__PURE__ */ jsx(EmbedErrorPlaceholder_default, {
+		type: "image",
+		figureType: figureProps?.size,
+		float: figureProps?.float
+	});
+	const { data, embedData } = embed;
+	const altText = embedData.alt || "";
+	const sizes = getSizes(embedData.size, embedData.align);
+	const focalPoint = getFocalPoint(embedData);
+	const crop = getCrop(embedData);
+	const toggleImageSize = () => {
+		setImageSizes((sizes$1) => !sizes$1 ? expandedSizes : void 0);
+	};
+	const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);
+	const figureSize = figureProps?.float ? figureProps?.size ?? "medium" : "full";
+	return /* @__PURE__ */ jsxs(StyledFigure, {
+		float: figureProps?.float,
+		size: imageSizes ? "full" : figureSize,
+		"data-embed-type": "image",
+		...licenseProps,
+		children: [
+			children,
+			/* @__PURE__ */ jsxs(ImageWrapper, {
+				border: embedData.border === "true",
+				expandable: !!figureProps?.float,
+				children: [/* @__PURE__ */ jsx(Image, {
+					focalPoint,
+					contentType: data.image.contentType,
+					crop,
+					sizes: imageSizes ?? sizes,
+					alt: altText,
+					src: data.image.imageUrl,
+					lang,
+					onClick: figureProps?.float ? toggleImageSize : void 0,
+					variant: "rounded"
+				}), (embedData.align === "right" || embedData.align === "left") && /* @__PURE__ */ jsx(ExpandButton, {
+					"aria-label": t(`license.images.itemImage.zoom${imageSizes ? "Out" : ""}ImageButtonLabel`),
+					onClick: toggleImageSize,
+					"data-expanded": !!imageSizes,
+					children: /* @__PURE__ */ jsx(AddLine, {})
+				})]
+			}),
+			/* @__PURE__ */ jsx(EmbedByline, {
+				type: "image",
+				copyright: data.copyright,
+				description: parsedDescription,
+				hideDescription: embedData.hideCaption === "true",
+				hideCopyright: embedData.hideByline === "true",
+				visibleAlt: previewAlt ? embed.embedData.alt : ""
+			})
+		]
+	});
+};
+var ImageEmbed_default = ImageEmbed;
+
+//#endregion
+export { ImageEmbed_default, getCrop, getFocalPoint };
+//# sourceMappingURL=ImageEmbed.js.map

package/es/Embed/ImageEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEmbed.js","names":["size?: string","float?: string","actualSize: FigureSize","align?: string","data: ImageEmbedData","EmbedErrorPlaceholder","sizes"],"sources":["../../src/Embed/ImageEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 parse from \"html-react-parser\";\nimport { type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AddLine } from \"@ndla/icons\";\nimport { Figure, type FigureSize, type FigureVariantProps, Image } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageEmbedData, ImageMetaData } from \"@ndla/types-embed\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport type { RenderContext } from \"./types\";\nimport { EmbedByline } from \"../LicenseByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\ninterface Props {\n  embed: ImageMetaData;\n  previewAlt?: boolean;\n  lang?: string;\n  renderContext?: RenderContext;\n  children?: ReactNode;\n}\n\nexport interface Author {\n  name: string;\n  type: string;\n}\n\nexport const getLicenseCredits = (copyright?: {\n  creators?: Author[];\n  rightsholders?: Author[];\n  processors?: Author[];\n}) => {\n  return {\n    creators: copyright?.creators ?? [],\n    rightsholders: copyright?.rightsholders ?? [],\n    processors: copyright?.processors ?? [],\n  };\n};\n\nconst getFigureProps = (size?: string, float?: string): FigureVariantProps => {\n  const actualFloat = float === \"left\" ? \"left\" : float === \"right\" ? \"right\" : undefined;\n  const replacedSize = size?.replace(\"-hide-byline\", \"\") ?? \"full\";\n  const actualSize: FigureSize = (replacedSize === \"fullwidth\" ? \"full\" : replacedSize) as FigureSize;\n  return {\n    float: actualFloat,\n    // Figure expects you to set a size when floating. If you don't, the figure will simply take up the available width. Fallback to medium in those cases.\n    size: actualSize === \"full\" && float ? \"medium\" : actualSize,\n  };\n};\n\nconst getSizes = (size?: string, align?: string) => {\n  if (align && size === \"full\") {\n    return \"(min-width: 1024px) 512px, (min-width: 768px) 350px, 100vw\";\n  }\n  if (align && size === \"small\") {\n    return \"(min-width: 1024px) 350px, (min-width: 768px) 180px, 100vw\";\n  }\n  if (align && size === \"xsmall\") {\n    return \"(min-width: 1024px) 180px, (min-width: 768px) 180px, 100vw\";\n  }\n  return \"(min-width: 1024px) 1024px, 100vw\";\n};\n\nexport const getFocalPoint = (data: ImageEmbedData) => {\n  const focalX = Number.parseFloat(data.focalX ?? \"\");\n  const focalY = Number.parseFloat(data.focalY ?? \"\");\n  if (!Number.isNaN(focalX) && !Number.isNaN(focalY)) {\n    return { x: focalX, y: focalY };\n  }\n  return undefined;\n};\n\nexport const getCrop = (data: ImageEmbedData) => {\n  const lowerRightX = Number.parseFloat(data.lowerRightX ?? \"\");\n  const lowerRightY = Number.parseFloat(data.lowerRightY ?? \"\");\n  const upperLeftX = Number.parseFloat(data.upperLeftX ?? \"\");\n  const upperLeftY = Number.parseFloat(data.upperLeftY ?? \"\");\n  if (\n    !Number.isNaN(lowerRightX) &&\n    !Number.isNaN(lowerRightY) &&\n    !Number.isNaN(upperLeftX) &&\n    !Number.isNaN(upperLeftY)\n  ) {\n    return {\n      startX: lowerRightX,\n      startY: lowerRightY,\n      endX: upperLeftX,\n      endY: upperLeftY,\n    };\n  }\n  return undefined;\n};\n\nconst expandedSizes = \"(min-width: 1024px) 1024px, 100vw\";\n\nconst ImageWrapper = styled(\"div\", {\n  base: {\n    overflow: \"hidden\",\n    position: \"relative\",\n    width: \"100%\",\n    \"& img\": {\n      width: \"100%\",\n    },\n  },\n  variants: {\n    svg: {\n      true: {\n        display: \"flex\",\n        justifyContent: \"center\",\n      },\n      false: {},\n    },\n    border: {\n      true: {\n        border: \"1px solid\",\n        borderColor: \"stroke.subtle\",\n        borderRadius: \"xsmall\",\n        \"& img\": {\n          borderRadius: \"0\",\n        },\n      },\n      false: {},\n    },\n    expandable: {\n      true: {\n        cursor: \"pointer\",\n      },\n      false: {},\n    },\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    zIndex: \"docked\",\n    _hover: {\n      \"& [data-byline-button]\": {\n        background: \"background.default\",\n      },\n      \"& button[data-expanded]\": {\n        transform: \"scale(1.2)\",\n      },\n    },\n    \"& button[data-expanded='true']\": {\n      \"& svg\": {\n        transform: \"rotate(-45deg)\",\n      },\n    },\n  },\n});\n\nconst ExpandButton = styled(\n  \"button\",\n  {\n    base: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      cursor: \"pointer\",\n      position: \"absolute\",\n      padding: \"0\",\n      top: \"xsmall\",\n      right: \"xsmall\",\n      width: \"medium\",\n      height: \"medium\",\n      border: \"2px solid\",\n      borderColor: \"background.default\",\n      transitionProperty: \"transform, background-color, color\",\n      transitionDuration: \"normal\",\n      transitionTimingFunction: \"ease-out\",\n      color: \"background.default\",\n      backgroundColor: \"surface.action\",\n      borderRadius: \"large\",\n      \"& svg\": {\n        transitionProperty: \"transform\",\n        transitionDuration: \"normal\",\n        transitionTimingFunction: \"ease-out\",\n      },\n      tabletDown: {\n        display: \"none\",\n      },\n    },\n  },\n  { defaultProps: { type: \"button\" } },\n);\n\nconst ImageEmbed = ({ embed, previewAlt, lang, renderContext = \"article\", children }: Props) => {\n  const [imageSizes, setImageSizes] = useState<string | undefined>(undefined);\n  const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);\n  const { t } = useTranslation();\n\n  const parsedDescription = useMemo(() => {\n    if (embed.embedData.caption || renderContext === \"article\") {\n      return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;\n    }\n    if (embed.status === \"success\" && embed.data.caption.caption) {\n      return parse(embed.data.caption.caption);\n    }\n  }, [embed, renderContext]);\n\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type={\"image\"} figureType={figureProps?.size} float={figureProps?.float} />;\n  }\n\n  const { data, embedData } = embed;\n\n  const altText = embedData.alt || \"\";\n\n  const sizes = getSizes(embedData.size, embedData.align);\n\n  const focalPoint = getFocalPoint(embedData);\n  const crop = getCrop(embedData);\n\n  const toggleImageSize = () => {\n    setImageSizes((sizes) => (!sizes ? expandedSizes : undefined));\n  };\n\n  const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n  const figureSize = figureProps?.float ? (figureProps?.size ?? \"medium\") : \"full\";\n\n  return (\n    <StyledFigure\n      float={figureProps?.float}\n      size={imageSizes ? \"full\" : figureSize}\n      data-embed-type=\"image\"\n      {...licenseProps}\n    >\n      {children}\n      <ImageWrapper border={embedData.border === \"true\"} expandable={!!figureProps?.float}>\n        <Image\n          focalPoint={focalPoint}\n          contentType={data.image.contentType}\n          crop={crop}\n          sizes={imageSizes ?? sizes}\n          alt={altText}\n          src={data.image.imageUrl}\n          lang={lang}\n          onClick={figureProps?.float ? toggleImageSize : undefined}\n          variant=\"rounded\"\n        />\n        {(embedData.align === \"right\" || embedData.align === \"left\") && (\n          <ExpandButton\n            aria-label={t(`license.images.itemImage.zoom${imageSizes ? \"Out\" : \"\"}ImageButtonLabel`)}\n            onClick={toggleImageSize}\n            data-expanded={!!imageSizes}\n          >\n            <AddLine />\n          </ExpandButton>\n        )}\n      </ImageWrapper>\n      <EmbedByline\n        type=\"image\"\n        copyright={data.copyright}\n        description={parsedDescription}\n        hideDescription={embedData.hideCaption === \"true\"}\n        hideCopyright={embedData.hideByline === \"true\"}\n        visibleAlt={previewAlt ? embed.embedData.alt : \"\"}\n      />\n    </StyledFigure>\n  );\n};\n\nexport default ImageEmbed;\n"],"mappings":"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"}

package/es/Embed/InlineTriggerButton.js

@@ -0,0 +1,25 @@
+import { forwardRef, useCallback, useRef } from "react";
+import { styled } from "@ndla/styled-system/jsx";
+import { jsx } from "react/jsx-runtime";
+import { composeRefs } from "@ndla/util";
+
+//#region src/Embed/InlineTriggerButton.tsx
+const StyledSpan = styled("span", { base: {} });
+const InlineTriggerButton = forwardRef(({ onClick,...props }, ref) => {
+	const spanRef = useRef(null);
+	const onKeyboardEvent = useCallback((event) => {
+		if (event.key === "Enter" || event.key === " ") spanRef.current?.click();
+	}, []);
+	return /* @__PURE__ */ jsx(StyledSpan, {
+		ref: composeRefs(spanRef, ref),
+		onKeyUp: onKeyboardEvent,
+		onClick,
+		role: "button",
+		tabIndex: 0,
+		...props
+	});
+});
+
+//#endregion
+export { InlineTriggerButton };
+//# sourceMappingURL=InlineTriggerButton.js.map

package/es/Embed/InlineTriggerButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineTriggerButton.js","names":["event: KeyboardEvent<HTMLSpanElement>"],"sources":["../../src/Embed/InlineTriggerButton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 ComponentPropsWithRef, type KeyboardEvent, forwardRef, useCallback, useRef } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { composeRefs } from \"@ndla/util\";\n\nconst StyledSpan = styled(\"span\", { base: {} });\n\nexport const InlineTriggerButton = forwardRef<HTMLSpanElement, ComponentPropsWithRef<\"span\">>(\n  ({ onClick, ...props }, ref) => {\n    const spanRef = useRef<HTMLSpanElement>(null);\n\n    // Emulate a button click when pressing Enter or Space\n    const onKeyboardEvent = useCallback((event: KeyboardEvent<HTMLSpanElement>) => {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        spanRef.current?.click();\n      }\n    }, []);\n\n    return (\n      <StyledSpan\n        ref={composeRefs(spanRef, ref)}\n        onKeyUp={onKeyboardEvent}\n        onClick={onClick}\n        role=\"button\"\n        tabIndex={0}\n        {...props}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;AAYA,MAAM,aAAa,OAAO,QAAQ,EAAE,MAAM,CAAE,EAAE,EAAC;AAE/C,MAAa,sBAAsB,WACjC,CAAC,EAAE,QAAS,GAAG,OAAO,EAAE,QAAQ;CAC9B,MAAM,UAAU,OAAwB,KAAK;CAG7C,MAAM,kBAAkB,YAAY,CAACA,UAA0C;AAC7E,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,SAAQ,SAAS,OAAO;CAE3B,GAAE,CAAE,EAAC;AAEN,wBACE,IAAC;EACC,KAAK,YAAY,SAAS,IAAI;EAC9B,SAAS;EACA;EACT,MAAK;EACL,UAAU;EACV,GAAI;GACJ;AAEL,EACF"}

package/es/Embed/RelatedContentEmbed.js

@@ -0,0 +1,38 @@
+import { contentTypeMapping } from "../model/ContentType.js";
+import { RelatedArticle } from "../RelatedArticleList/RelatedArticleList.js";
+import { useTranslation } from "react-i18next";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Embed/RelatedContentEmbed.tsx
+const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }) => {
+	const { t } = useTranslation();
+	if (embed.status === "error") return null;
+	const { data, embedData } = embed;
+	if (embedData.articleId && data) {
+		const typeId = data.resource?.resourceTypes.find((rt) => contentTypeMapping[rt.id])?.id;
+		const type = typeId ? contentTypeMapping[typeId] : void 0;
+		const context = data.resource?.contexts.find((c) => c.rootId === subject);
+		const url = context?.url ?? data.resource?.url ?? `/article/${embedData.articleId}`;
+		return /* @__PURE__ */ jsx(RelatedArticle, {
+			title: data.article.title?.title ?? "",
+			introduction: data.article.metaDescription?.metaDescription ?? "",
+			target: isOembed ? "_blank" : void 0,
+			to: `${ndlaFrontendDomain ?? ""}${url ?? ""}`,
+			type
+		});
+	}
+	if (typeof embedData.url === "string") return /* @__PURE__ */ jsx(RelatedArticle, {
+		title: embedData.title ?? "",
+		introduction: "",
+		to: embedData.url,
+		target: "_blank",
+		type: "external",
+		linkInfo: `${t("related.linkInfo")} ${embedData.urlDomain}`
+	});
+	return null;
+};
+var RelatedContentEmbed_default = RelatedContentEmbed;
+
+//#endregion
+export { RelatedContentEmbed_default };
+//# sourceMappingURL=RelatedContentEmbed.js.map

package/es/Embed/RelatedContentEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelatedContentEmbed.js","names":[],"sources":["../../src/Embed/RelatedContentEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { useTranslation } from \"react-i18next\";\nimport type { RelatedContentMetaData } from \"@ndla/types-embed\";\nimport { contentTypeMapping } from \"../model/ContentType\";\nimport { RelatedArticle } from \"../RelatedArticleList/RelatedArticleList\";\n\ninterface Props {\n  embed: RelatedContentMetaData;\n  isOembed?: boolean;\n  subject?: string;\n  ndlaFrontendDomain?: string;\n}\n\nconst RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: Props) => {\n  const { t } = useTranslation();\n  if (embed.status === \"error\") {\n    return null;\n  }\n\n  const { data, embedData } = embed;\n\n  if (embedData.articleId && data) {\n    const typeId = data.resource?.resourceTypes.find((rt) => contentTypeMapping[rt.id])?.id;\n    const type = typeId ? contentTypeMapping[typeId] : undefined;\n    const context = data.resource?.contexts.find((c) => c.rootId === subject);\n    const url = context?.url ?? data.resource?.url ?? `/article/${embedData.articleId}`;\n    return (\n      <RelatedArticle\n        title={data.article.title?.title ?? \"\"}\n        introduction={data.article.metaDescription?.metaDescription ?? \"\"}\n        target={isOembed ? \"_blank\" : undefined}\n        to={`${ndlaFrontendDomain ?? \"\"}${url ?? \"\"}`}\n        type={type}\n      />\n    );\n  }\n  if (typeof embedData.url === \"string\") {\n    return (\n      <RelatedArticle\n        title={embedData.title ?? \"\"}\n        introduction=\"\"\n        to={embedData.url}\n        target=\"_blank\"\n        type=\"external\"\n        linkInfo={`${t(\"related.linkInfo\")} ${embedData.urlDomain}`}\n      />\n    );\n  }\n  return null;\n};\n\nexport default RelatedContentEmbed;\n"],"mappings":";;;;;;AAoBA,MAAM,sBAAsB,CAAC,EAAE,OAAO,UAAU,SAAS,oBAA2B,KAAK;CACvF,MAAM,EAAE,GAAG,GAAG,gBAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO;CAGT,MAAM,EAAE,MAAM,WAAW,GAAG;AAE5B,KAAI,UAAU,aAAa,MAAM;EAC/B,MAAM,SAAS,KAAK,UAAU,cAAc,KAAK,CAAC,OAAO,mBAAmB,GAAG,IAAI,EAAE;EACrF,MAAM,OAAO,SAAS,mBAAmB;EACzC,MAAM,UAAU,KAAK,UAAU,SAAS,KAAK,CAAC,MAAM,EAAE,WAAW,QAAQ;EACzE,MAAM,MAAM,SAAS,OAAO,KAAK,UAAU,QAAQ,WAAW,UAAU,UAAU;AAClF,yBACE,IAAC;GACC,OAAO,KAAK,QAAQ,OAAO,SAAS;GACpC,cAAc,KAAK,QAAQ,iBAAiB,mBAAmB;GAC/D,QAAQ,WAAW;GACnB,KAAK,EAAE,sBAAsB,GAAG,EAAE,OAAO,GAAG;GACtC;IACN;CAEL;AACD,YAAW,UAAU,QAAQ,SAC3B,wBACE,IAAC;EACC,OAAO,UAAU,SAAS;EAC1B,cAAa;EACb,IAAI,UAAU;EACd,QAAO;EACP,MAAK;EACL,WAAW,EAAE,EAAE,mBAAmB,CAAC,GAAG,UAAU,UAAU;GAC1D;AAGN,QAAO;AACR;AAED,kCAAe"}

package/es/Embed/UnknownEmbed.js

@@ -0,0 +1,20 @@
+import { Text } from "@ndla/primitives";
+import { useTranslation } from "react-i18next";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Embed/UnknownEmbed.tsx
+const UnknownEmbed = ({ embed }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsx(Text, {
+		color: "text.error",
+		asChild: true,
+		consumeCss: true,
+		"data-embed-type": "unknown",
+		children: /* @__PURE__ */ jsx("span", { children: t("embed.unsupported", { type: embed.resource }) })
+	});
+};
+var UnknownEmbed_default = UnknownEmbed;
+
+//#endregion
+export { UnknownEmbed_default };
+//# sourceMappingURL=UnknownEmbed.js.map

package/es/Embed/UnknownEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnknownEmbed.js","names":[],"sources":["../../src/Embed/UnknownEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { useTranslation } from \"react-i18next\";\nimport { Text } from \"@ndla/primitives\";\nimport type { MetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n  embed: MetaData<any, any>;\n}\n\nconst UnknownEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  return (\n    <Text color=\"text.error\" asChild consumeCss data-embed-type=\"unknown\">\n      <span>{t(\"embed.unsupported\", { type: embed.resource })}</span>\n    </Text>\n  );\n};\n\nexport default UnknownEmbed;\n"],"mappings":";;;;;AAgBA,MAAM,eAAe,CAAC,EAAE,OAAc,KAAK;CACzC,MAAM,EAAE,GAAG,GAAG,gBAAgB;AAC9B,wBACE,IAAC;EAAK,OAAM;EAAa;EAAQ;EAAW,mBAAgB;4BAC1D,IAAC,oBAAM,EAAE,qBAAqB,EAAE,MAAM,MAAM,SAAU,EAAC,GAAQ;GAC1D;AAEV;AAED,2BAAe"}

package/es/Embed/UuDisclaimerEmbed.js

@@ -0,0 +1,54 @@
+import "react";
+import { IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { useTranslation } from "react-i18next";
+import { AccessibilityFill, ErrorWarningFill } from "@ndla/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Portal } from "@ark-ui/react";
+
+//#region src/Embed/UuDisclaimerEmbed.tsx
+const DisclaimerWrapper = styled("div", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "3xsmall",
+	clear: "both"
+} });
+const StyledIconButton = styled(IconButton, { base: { alignSelf: "flex-end" } });
+const StyledErrorWarningFill = styled(ErrorWarningFill, { base: {
+	alignSelf: "flex-end",
+	fill: "icon.subtle"
+} });
+const StyledPopoverContent = styled(PopoverContent, { base: {
+	width: "surface.xlarge",
+	maxHeight: "50vh",
+	overflowY: "auto"
+} });
+const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }) => {
+	const { t } = useTranslation();
+	if (embed.status === "error") return /* @__PURE__ */ jsxs(DisclaimerWrapper, { children: [/* @__PURE__ */ jsx(StyledErrorWarningFill, {
+		"aria-label": t("embed.embedError", { type: t("embed.type.disclaimer") }),
+		title: t("embed.embedError", { type: t("embed.type.disclaimer") })
+	}), children] });
+	return /* @__PURE__ */ jsxs(DisclaimerWrapper, {
+		role: "region",
+		"data-embed-type": "uu-disclaimer",
+		children: [/* @__PURE__ */ jsxs(PopoverRoot, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(StyledIconButton, {
+				size: "small",
+				variant: "secondary",
+				"aria-label": t("uuDisclaimer.title"),
+				title: t("uuDisclaimer.title"),
+				children: /* @__PURE__ */ jsx(AccessibilityFill, {})
+			})
+		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(StyledPopoverContent, { children: /* @__PURE__ */ jsx("div", { children: transformedDisclaimer }) }) })] }), /* @__PURE__ */ jsx("div", {
+			"data-uu-content": "",
+			children
+		})]
+	});
+};
+var UuDisclaimerEmbed_default = UuDisclaimerEmbed;
+
+//#endregion
+export { UuDisclaimerEmbed_default };
+//# sourceMappingURL=UuDisclaimerEmbed.js.map

package/es/Embed/UuDisclaimerEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UuDisclaimerEmbed.js","names":[],"sources":["../../src/Embed/UuDisclaimerEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Portal } from \"@ark-ui/react\";\nimport { AccessibilityFill, ErrorWarningFill } from \"@ndla/icons\";\nimport { IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { UuDisclaimerMetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n  embed: UuDisclaimerMetaData;\n  transformedDisclaimer: ReactNode;\n  children?: ReactNode;\n}\n\nconst DisclaimerWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"3xsmall\",\n    clear: \"both\",\n  },\n});\n\nconst StyledIconButton = styled(IconButton, {\n  base: {\n    alignSelf: \"flex-end\",\n  },\n});\n\nconst StyledErrorWarningFill = styled(ErrorWarningFill, {\n  base: {\n    alignSelf: \"flex-end\",\n    fill: \"icon.subtle\",\n  },\n});\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    width: \"surface.xlarge\",\n    maxHeight: \"50vh\",\n    overflowY: \"auto\",\n  },\n});\n\nconst UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }: Props) => {\n  const { t } = useTranslation();\n  if (embed.status === \"error\") {\n    return (\n      <DisclaimerWrapper>\n        <StyledErrorWarningFill\n          aria-label={t(\"embed.embedError\", { type: t(\"embed.type.disclaimer\") })}\n          title={t(\"embed.embedError\", { type: t(\"embed.type.disclaimer\") })}\n        />\n        {children}\n      </DisclaimerWrapper>\n    );\n  }\n\n  return (\n    <DisclaimerWrapper role=\"region\" data-embed-type=\"uu-disclaimer\">\n      <PopoverRoot>\n        <PopoverTrigger asChild>\n          <StyledIconButton\n            size=\"small\"\n            variant=\"secondary\"\n            aria-label={t(\"uuDisclaimer.title\")}\n            title={t(\"uuDisclaimer.title\")}\n          >\n            <AccessibilityFill />\n          </StyledIconButton>\n        </PopoverTrigger>\n        <Portal>\n          <StyledPopoverContent>\n            <div>{transformedDisclaimer}</div>\n          </StyledPopoverContent>\n        </Portal>\n      </PopoverRoot>\n      <div data-uu-content=\"\">{children}</div>\n    </DisclaimerWrapper>\n  );\n};\n\nexport default UuDisclaimerEmbed;\n"],"mappings":";;;;;;;;;AAsBA,MAAM,oBAAoB,OAAO,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;AACR,EACF,EAAC;AAEF,MAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,EACJ,WAAW,WACZ,EACF,EAAC;AAEF,MAAM,yBAAyB,OAAO,kBAAkB,EACtD,MAAM;CACJ,WAAW;CACX,MAAM;AACP,EACF,EAAC;AAEF,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;AACZ,EACF,EAAC;AAEF,MAAM,oBAAoB,CAAC,EAAE,OAAO,uBAAuB,UAAiB,KAAK;CAC/E,MAAM,EAAE,GAAG,GAAG,gBAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,wBACE,KAAC,gDACC,IAAC;EACC,cAAY,EAAE,oBAAoB,EAAE,MAAM,EAAE,wBAAwB,CAAE,EAAC;EACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,EAAE,wBAAwB,CAAE,EAAC;GAClE,EACD,YACiB;AAIxB,wBACE,KAAC;EAAkB,MAAK;EAAS,mBAAgB;6BAC/C,KAAC,0CACC,IAAC;GAAe;6BACd,IAAC;IACC,MAAK;IACL,SAAQ;IACR,cAAY,EAAE,qBAAqB;IACnC,OAAO,EAAE,qBAAqB;8BAE9B,IAAC,sBAAoB;KACJ;IACJ,kBACjB,IAAC,oCACC,IAAC,kDACC,IAAC,mBAAK,wBAA4B,GACb,GAChB,IACG,kBACd,IAAC;GAAI,mBAAgB;GAAI;IAAe;GACtB;AAEvB;AAED,gCAAe"}