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

package/es/Embed/GlossEmbed.js

@@ -1,80 +1,52 @@
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
+import { EmbedErrorPlaceholder_default } from "./EmbedErrorPlaceholder.js";
+import { ConceptInlineTriggerButton } from "./ConceptInlineTriggerButton.js";
+import { Gloss_default } from "../Gloss/Gloss.js";
 import { useRef } from "react";
-import { Portal } from "@ark-ui/react";
 import { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import { ConceptInlineTriggerButton } from "./ConceptInlineTriggerButton";
-import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { Gloss } from "../Gloss";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledPopoverContent = styled(PopoverContent, {
-  base: {
-    width: "surface.xlarge"
-  }
-});
-export const GlossEmbed = _ref => {
-  let {
-    embed
-  } = _ref;
-  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, {
-      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
-  } : undefined;
-  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, {
-              glossData: concept.glossData,
-              title: concept.title,
-              audio: audio,
-              exampleIds: embed.embedData.exampleIds,
-              exampleLangs: embed.embedData.exampleLangs
-            })
-          })
-        })
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsx(Figure, {
-    "data-embed-type": "gloss",
-    children: /*#__PURE__*/_jsx(Gloss, {
-      glossData: concept.glossData,
-      title: concept.title,
-      audio: audio,
-      exampleIds: embed.embedData.exampleIds,
-      exampleLangs: embed.embedData.exampleLangs,
-      variant: "bordered"
-    })
-  });
-};
+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

@@ -1,61 +1,38 @@
-/**
- * Copyright (c) 2023-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { useTranslation } from "react-i18next";
+import { EmbedErrorPlaceholder_default } from "./EmbedErrorPlaceholder.js";
 import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledFigure = styled(Figure, {
-  base: {
-    "& iframe": {
-      height: "auto",
-      width: "100%"
-    }
-  }
-});
-const FigureOembed = styled(Figure, {
-  base: {
-    width: "100%",
-    "& iframe": {
-      width: "100%"
-    }
-  }
-});
-const H5pEmbed = _ref => {
-  let {
-    embed
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  if (embed.status === "error") {
-    return /*#__PURE__*/_jsx(EmbedErrorPlaceholder, {
-      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
-    })
-  });
+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
+		})
+	});
 };
-export default H5pEmbed;
+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

@@ -1,93 +1,69 @@
-/**
- * Copyright (c) 2023-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
+import { EmbedErrorPlaceholder_default } from "./EmbedErrorPlaceholder.js";
+import { ResourceBox_default } from "../ResourceBox/ResourceBox.js";
 import { useEffect, useRef } from "react";
-import { useTranslation } from "react-i18next";
 import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { ResourceBox } from "../ResourceBox";
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledIframe = styled("iframe", {
-  base: {
-    width: "100%",
-    border: 0
-  }
-});
-const StyledFigure = styled(Figure, {
-  base: {
-    clear: "both"
-  }
-});
-const IframeEmbed = _ref => {
-  let {
-    embed
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  const iframeRef = useRef(null);
-  useEffect(() => {
-    const iframe = iframeRef.current;
-    if (iframe) {
-      const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];
-      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;
-      iframe.width = "";
-      iframe.height = "";
-    }
-  }, []);
-  if (embed.status === "error") {
-    return /*#__PURE__*/_jsx(EmbedErrorPlaceholder, {
-      type: "external"
-    });
-  }
-  const {
-    embedData,
-    data
-  } = embed;
-  if (embedData.type === "fullscreen") {
-    const iframeImage = embed.status === "success" ? data.iframeImage : undefined;
-    const alt = embedData.alt !== undefined ? 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, {
-        image: 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: title,
-      "aria-label": title,
-      src: url,
-      width: strippedWidth,
-      height: strippedHeight,
-      allow: "fullscreen; encrypted-media",
-      loading: "lazy"
-    })
-  });
+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"
+		})
+	});
 };
-export default IframeEmbed;
+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"}