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

package/lib/Embed/ContentLinkEmbed.js

@@ -0,0 +1,32 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/Embed/ContentLinkEmbed.tsx
+const ContentLinkEmbed = ({ embed, isOembed, children }) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+		color: "text.error",
+		asChild: true,
+		consumeCss: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: `${t("embed.linkError")}: ` }), children] })
+	});
+	const { embedData, data } = embed;
+	if (embedData.openIn === "new-context" || isOembed) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		href: data.path,
+		"data-embed-type": "content-link",
+		target: "_blank",
+		rel: "noopener noreferrer",
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		href: data.path,
+		children
+	});
+};
+var ContentLinkEmbed_default = ContentLinkEmbed;
+
+//#endregion
+exports.ContentLinkEmbed_default = ContentLinkEmbed_default;
+//# sourceMappingURL=ContentLinkEmbed.js.map

package/lib/Embed/ContentLinkEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentLinkEmbed.js","names":["Text"],"sources":["../../src/Embed/ContentLinkEmbed.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 type { ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Text } from \"@ndla/primitives\";\nimport type { ContentLinkMetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n  embed: ContentLinkMetaData;\n  isOembed?: boolean;\n  children?: ReactNode;\n}\n\nconst ContentLinkEmbed = ({ embed, isOembed, children }: Props) => {\n  const { t } = useTranslation();\n  if (embed.status === \"error\") {\n    return (\n      <Text color=\"text.error\" asChild consumeCss>\n        <span>\n          <span>{`${t(\"embed.linkError\")}: `}</span>\n          {children}\n        </span>\n      </Text>\n    );\n  }\n\n  const { embedData, data } = embed;\n\n  if (embedData.openIn === \"new-context\" || isOembed) {\n    return (\n      <a href={data.path} data-embed-type=\"content-link\" target=\"_blank\" rel=\"noopener noreferrer\">\n        {children}\n      </a>\n    );\n  }\n\n  return <a href={data.path}>{children}</a>;\n};\n\nexport default ContentLinkEmbed;\n"],"mappings":";;;;;;AAmBA,MAAM,mBAAmB,CAAC,EAAE,OAAO,UAAU,UAAiB,KAAK;CACjE,MAAM,EAAE,GAAG,GAAG,mCAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,wBACE,2BAACA;EAAK,OAAM;EAAa;EAAQ;4BAC/B,4BAAC,qCACC,2BAAC,qBAAO,EAAE,EAAE,kBAAkB,CAAC,MAAW,EACzC,YACI;GACF;CAIX,MAAM,EAAE,WAAW,MAAM,GAAG;AAE5B,KAAI,UAAU,WAAW,iBAAiB,SACxC,wBACE,2BAAC;EAAE,MAAM,KAAK;EAAM,mBAAgB;EAAe,QAAO;EAAS,KAAI;EACpE;GACC;AAIR,wBAAO,2BAAC;EAAE,MAAM,KAAK;EAAO;GAAa;AAC1C;AAED,+BAAe"}

package/lib/Embed/CopyrightEmbed.js

@@ -0,0 +1,24 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_EmbedByline = require('../LicenseByline/EmbedByline.js');
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/Embed/CopyrightEmbed.tsx
+const StyledCopyrightContent = (0, __ndla_styled_system_jsx.styled)("div", { base: { marginBlockEnd: "xsmall" } });
+const CopyrightEmbed = ({ embed, children }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("figure", {
+		"data-embed-type": "copyright",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCopyrightContent, {
+			"data-copyright-content": "",
+			children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedByline.EmbedByline, {
+			type: "copyright",
+			copyright: embed.embedData.copyright
+		})]
+	});
+};
+var CopyrightEmbed_default = CopyrightEmbed;
+
+//#endregion
+exports.CopyrightEmbed_default = CopyrightEmbed_default;
+//# sourceMappingURL=CopyrightEmbed.js.map

package/lib/Embed/CopyrightEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyrightEmbed.js","names":["EmbedByline"],"sources":["../../src/Embed/CopyrightEmbed.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 { styled } from \"@ndla/styled-system/jsx\";\nimport type { CopyrightMetaData } from \"@ndla/types-embed\";\nimport { EmbedByline } from \"../LicenseByline\";\n\ninterface Props {\n  embed: CopyrightMetaData;\n  children?: ReactNode;\n}\n\nconst StyledCopyrightContent = styled(\"div\", {\n  base: {\n    marginBlockEnd: \"xsmall\",\n  },\n});\n\nconst CopyrightEmbed = ({ embed, children }: Props) => {\n  return (\n    <figure data-embed-type=\"copyright\">\n      <StyledCopyrightContent data-copyright-content=\"\">{children}</StyledCopyrightContent>\n      <EmbedByline type=\"copyright\" copyright={embed.embedData.copyright} />\n    </figure>\n  );\n};\n\nexport default CopyrightEmbed;\n"],"mappings":";;;;;;AAkBA,MAAM,yBAAyB,qCAAO,OAAO,EAC3C,MAAM,EACJ,gBAAgB,SACjB,EACF,EAAC;AAEF,MAAM,iBAAiB,CAAC,EAAE,OAAO,UAAiB,KAAK;AACrD,wBACE,4BAAC;EAAO,mBAAgB;6BACtB,2BAAC;GAAuB,0BAAuB;GAAI;IAAkC,kBACrF,2BAACA;GAAY,MAAK;GAAY,WAAW,MAAM,UAAU;IAAa;GAC/D;AAEZ;AAED,6BAAe"}

package/lib/Embed/EmbedErrorPlaceholder.js

@@ -0,0 +1,44 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_EmbedByline = require('../LicenseByline/EmbedByline.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/Embed/EmbedErrorPlaceholder.tsx
+const ErrorPlaceholder = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	background: "background.subtle",
+	height: "surface.xsmall",
+	border: "1px solid",
+	borderColor: "stroke.default",
+	borderRadius: "xsmall",
+	"& svg": {
+		height: "5xlarge",
+		width: "5xlarge",
+		fill: "stroke.default"
+	}
+} });
+const StyledFigure = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figure, { base: { "& > *:not(:first-child)": { marginBlockStart: "3xsmall" } } });
+const EmbedErrorPlaceholder = ({ type, children, figureType, float }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledFigure, {
+		size: figureType,
+		float,
+		"data-embed-type": type,
+		children: [children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorPlaceholder, {
+			"data-embed-type": type,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ErrorWarningLine, {})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedByline.EmbedByline, {
+			error: true,
+			type
+		})]
+	});
+};
+var EmbedErrorPlaceholder_default = EmbedErrorPlaceholder;
+
+//#endregion
+exports.EmbedErrorPlaceholder_default = EmbedErrorPlaceholder_default;
+//# sourceMappingURL=EmbedErrorPlaceholder.js.map

package/lib/Embed/EmbedErrorPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmbedErrorPlaceholder.js","names":["Figure","ErrorWarningLine","EmbedByline"],"sources":["../../src/Embed/EmbedErrorPlaceholder.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 { type ReactNode } from \"react\";\nimport { ErrorWarningLine } from \"@ndla/icons\";\nimport { Figure, type FigureFloat, type FigureSize } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { EmbedByline } from \"../LicenseByline\";\nimport { type EmbedBylineErrorProps } from \"../LicenseByline/EmbedByline\";\n\ninterface Props {\n  type: EmbedBylineErrorProps[\"type\"];\n  figureType?: FigureSize;\n  float?: FigureFloat;\n  children?: ReactNode;\n}\n\nconst ErrorPlaceholder = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    background: \"background.subtle\",\n    height: \"surface.xsmall\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderRadius: \"xsmall\",\n    \"& svg\": {\n      height: \"5xlarge\",\n      width: \"5xlarge\",\n      fill: \"stroke.default\",\n    },\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    \"& > *:not(:first-child)\": {\n      marginBlockStart: \"3xsmall\",\n    },\n  },\n});\n\nconst EmbedErrorPlaceholder = ({ type, children, figureType, float }: Props) => {\n  return (\n    <StyledFigure size={figureType} float={float} data-embed-type={type}>\n      {children ?? (\n        <ErrorPlaceholder data-embed-type={type}>\n          <ErrorWarningLine />\n        </ErrorPlaceholder>\n      )}\n      <EmbedByline error type={type} />\n    </StyledFigure>\n  );\n};\n\nexport default EmbedErrorPlaceholder;\n"],"mappings":";;;;;;;;;AAsBA,MAAM,mBAAmB,qCAAO,OAAO,EACrC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACZ,QAAQ;CACR,QAAQ;CACR,aAAa;CACb,cAAc;CACd,SAAS;EACP,QAAQ;EACR,OAAO;EACP,MAAM;CACP;AACF,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM,EACJ,2BAA2B,EACzB,kBAAkB,UACnB,EACF,EACF,EAAC;AAEF,MAAM,wBAAwB,CAAC,EAAE,MAAM,UAAU,YAAY,OAAc,KAAK;AAC9E,wBACE,4BAAC;EAAa,MAAM;EAAmB;EAAO,mBAAiB;aAC5D,4BACC,2BAAC;GAAiB,mBAAiB;6BACjC,2BAACC,kCAAmB;IACH,kBAErB,2BAACC;GAAY;GAAY;IAAQ;GACpB;AAElB;AAED,oCAAe"}

package/lib/Embed/EmbedWrapper.js

@@ -0,0 +1,27 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const __ark_ui_react = require_rolldown_runtime.__toESM(require("@ark-ui/react"));
+const __ndla_styled_system_css = require_rolldown_runtime.__toESM(require("@ndla/styled-system/css"));
+
+//#region src/Embed/EmbedWrapper.tsx
+const embedWrapperRecipe = (0, __ndla_styled_system_css.cva)({
+	base: { position: "relative" },
+	defaultVariants: { noClear: false },
+	variants: { noClear: {
+		true: { "& + [data-embed-wrapper]": { clear: "both" } },
+		false: { clear: "both" }
+	} }
+});
+const StyledEmbedWrapper = (0, __ndla_styled_system_jsx.styled)(__ark_ui_react.ark.div, {}, { baseComponent: true });
+const EmbedWrapper = (0, react.forwardRef)(({ noClear, css: cssProp,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledEmbedWrapper, {
+	css: __ndla_styled_system_css.css.raw(embedWrapperRecipe.raw({ noClear }), cssProp),
+	"data-embed-wrapper": "",
+	...props,
+	ref
+}));
+
+//#endregion
+exports.EmbedWrapper = EmbedWrapper;
+//# sourceMappingURL=EmbedWrapper.js.map

package/lib/Embed/EmbedWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmbedWrapper.js","names":["ark"],"sources":["../../src/Embed/EmbedWrapper.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 { forwardRef } from \"react\";\nimport { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { JsxStyleProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\n\nconst embedWrapperRecipe = cva({\n  base: {\n    position: \"relative\",\n  },\n  defaultVariants: {\n    noClear: false,\n  },\n  variants: {\n    noClear: {\n      true: {\n        \"& + [data-embed-wrapper]\": {\n          clear: \"both\",\n        },\n      },\n      false: {\n        clear: \"both\",\n      },\n    },\n  },\n});\n\nexport type EmbedWrapperVariantProps = RecipeVariantProps<typeof embedWrapperRecipe>;\n\nexport type EmbedWrapperProps = HTMLArkProps<\"div\"> & JsxStyleProps & EmbedWrapperVariantProps;\n\nconst StyledEmbedWrapper = styled(ark.div, {}, { baseComponent: true });\n\nexport const EmbedWrapper = forwardRef<HTMLDivElement, EmbedWrapperProps>(\n  ({ noClear, css: cssProp, ...props }, ref) => (\n    <StyledEmbedWrapper\n      css={css.raw(embedWrapperRecipe.raw({ noClear }), cssProp)}\n      data-embed-wrapper=\"\"\n      {...props}\n      ref={ref}\n    />\n  ),\n);\n"],"mappings":";;;;;;;;AAcA,MAAM,qBAAqB,kCAAI;CAC7B,MAAM,EACJ,UAAU,WACX;CACD,iBAAiB,EACf,SAAS,MACV;CACD,UAAU,EACR,SAAS;EACP,MAAM,EACJ,4BAA4B,EAC1B,OAAO,OACR,EACF;EACD,OAAO,EACL,OAAO,OACR;CACF,EACF;AACF,EAAC;AAMF,MAAM,qBAAqB,qCAAOA,mBAAI,KAAK,CAAE,GAAE,EAAE,eAAe,KAAM,EAAC;AAEvE,MAAa,eAAe,sBAC1B,CAAC,EAAE,SAAS,KAAK,QAAS,GAAG,OAAO,EAAE,wBACpC,2BAAC;CACC,KAAK,6BAAI,IAAI,mBAAmB,IAAI,EAAE,QAAS,EAAC,EAAE,QAAQ;CAC1D,sBAAmB;CACnB,GAAI;CACC;EACL,CAEL"}

package/lib/Embed/ExternalEmbed.js

@@ -0,0 +1,55 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
+const require_ResourceBox = require('../ResourceBox/ResourceBox.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/Embed/ExternalEmbed.tsx
+const StyledFigure = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figure, { base: { "& iframe": {
+	height: "auto",
+	width: "100%"
+} } });
+const ExternalEmbed = ({ embed }) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	const figRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		const iframe = figRef.current?.querySelector("iframe");
+		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__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, { type: "external" });
+	const { embedData, data } = embed;
+	if (embedData.type === "fullscreen") {
+		const image = {
+			src: data.iframeImage?.image.imageUrl,
+			alt: embedData.alt !== void 0 ? embedData.alt : data.iframeImage?.alttext?.alttext ?? ""
+		};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Figure, {
+			"data-embed-type": "external",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ResourceBox.ResourceBox_default, {
+				image,
+				title: embedData.title ?? "",
+				url: embedData.url,
+				caption: embedData.caption ?? "",
+				buttonText: t("license.other.itemImage.ariaLabel")
+			})
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFigure, {
+		"data-embed-type": "external",
+		ref: figRef,
+		dangerouslySetInnerHTML: { __html: data?.oembed?.html ?? "" }
+	});
+};
+var ExternalEmbed_default = ExternalEmbed;
+
+//#endregion
+exports.ExternalEmbed_default = ExternalEmbed_default;
+//# sourceMappingURL=ExternalEmbed.js.map

package/lib/Embed/ExternalEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalEmbed.js","names":["Figure","EmbedErrorPlaceholder","ResourceBox"],"sources":["../../src/Embed/ExternalEmbed.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 { OembedMetaData } from \"@ndla/types-embed\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport { ResourceBox } from \"../ResourceBox\";\n\ninterface Props {\n  embed: OembedMetaData;\n}\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    \"& iframe\": {\n      height: \"auto\",\n      width: \"100%\",\n    },\n  },\n});\n\nconst ExternalEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  const figRef = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    const iframe = figRef.current?.querySelector(\"iframe\");\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 image = {\n      src: data.iframeImage?.image.imageUrl,\n      alt: embedData.alt !== undefined ? embedData.alt : (data.iframeImage?.alttext?.alttext ?? \"\"),\n    };\n    return (\n      <Figure data-embed-type=\"external\">\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      </Figure>\n    );\n  }\n\n  return (\n    <StyledFigure\n      data-embed-type=\"external\"\n      ref={figRef}\n      dangerouslySetInnerHTML={{ __html: data?.oembed?.html ?? \"\" }}\n    />\n  );\n};\nexport default ExternalEmbed;\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM,EACJ,YAAY;CACV,QAAQ;CACR,OAAO;AACR,EACF,EACF,EAAC;AAEF,MAAM,gBAAgB,CAAC,EAAE,OAAc,KAAK;CAC1C,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,SAAS,kBAAoB,KAAK;AAExC,sBAAU,MAAM;EACd,MAAM,SAAS,OAAO,SAAS,cAAc,SAAS;AACtD,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,OAAO,GAAG,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,AAAC;AACvF,UAAO,MAAM,eAAe,EAAE,QAAQ,QAAQ,GAAG,GAAG,SAAS,SAAS,EAAE;AACxE,UAAO,QAAQ;AACf,UAAO,SAAS;EACjB;CACF,GAAE,CAAE,EAAC;AAEN,KAAI,MAAM,WAAW,QACnB,wBAAO,2BAACC,+DAAsB,MAAK,aAAa;CAGlD,MAAM,EAAE,WAAW,MAAM,GAAG;AAE5B,KAAI,UAAU,SAAS,cAAc;EACnC,MAAM,QAAQ;GACZ,KAAK,KAAK,aAAa,MAAM;GAC7B,KAAK,UAAU,iBAAoB,UAAU,MAAO,KAAK,aAAa,SAAS,WAAW;EAC3F;AACD,yBACE,2BAACD;GAAO,mBAAgB;6BACtB,2BAACE;IACQ;IACP,OAAO,UAAU,SAAS;IAC1B,KAAK,UAAU;IACf,SAAS,UAAU,WAAW;IAC9B,YAAY,EAAE,oCAAoC;KAClD;IACK;CAEZ;AAED,wBACE,2BAAC;EACC,mBAAgB;EAChB,KAAK;EACL,yBAAyB,EAAE,QAAQ,MAAM,QAAQ,QAAQ,GAAI;GAC7D;AAEL;AACD,4BAAe"}

package/lib/Embed/FootnoteEmbed.js

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

package/lib/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,qCAAO,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,mCAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,wBAAO,2BAAC,mBAAK,EAAE,QAAQ,GAAO;AAGhC,wBACE,2BAAC;EAAK,KAAK,KAAK,MAAM,KAAK,SAAS;EAAG,mBAAgB;4BACrD,2BAAC,uCACC,2BAAC;GAAE,OAAO,OAAO,MAAM,KAAK,SAAS;GAAG,QAAO;cAAU,GAAG,MAAM,KAAK,SAAS;IAAO,GAC7E;GACP;AAEV;AAED,4BAAe"}

package/lib/Embed/GlossEmbed.js

@@ -0,0 +1,53 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
+const require_ConceptInlineTriggerButton = require('./ConceptInlineTriggerButton.js');
+const require_Gloss = require('../Gloss/Gloss.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const __ark_ui_react = require_rolldown_runtime.__toESM(require("@ark-ui/react"));
+
+//#region src/Embed/GlossEmbed.tsx
+const StyledPopoverContent = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.PopoverContent, { base: { width: "surface.xlarge" } });
+const GlossEmbed = ({ embed }) => {
+	const contentRef = (0, react.useRef)(null);
+	if (embed.status === "error" && embed.embedData.type === "inline") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: embed.embedData.linkText });
+	if (embed.status === "error" || !embed.data.concept.glossData) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.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__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.PopoverRoot, {
+		initialFocusEl: () => contentRef.current,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ConceptInlineTriggerButton.ConceptInlineTriggerButton, { children: embed.embedData.linkText })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPopoverContent, {
+			ref: contentRef,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Figure, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Gloss.Gloss_default, {
+				glossData: concept.glossData,
+				title: concept.title,
+				audio,
+				exampleIds: embed.embedData.exampleIds,
+				exampleLangs: embed.embedData.exampleLangs
+			}) })
+		}) })]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Figure, {
+		"data-embed-type": "gloss",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Gloss.Gloss_default, {
+			glossData: concept.glossData,
+			title: concept.title,
+			audio,
+			exampleIds: embed.embedData.exampleIds,
+			exampleLangs: embed.embedData.exampleLangs,
+			variant: "bordered"
+		})
+	});
+};
+
+//#endregion
+exports.GlossEmbed = GlossEmbed;
+//# sourceMappingURL=GlossEmbed.js.map

package/lib/Embed/GlossEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlossEmbed.js","names":["PopoverContent","EmbedErrorPlaceholder","PopoverRoot","PopoverTrigger","ConceptInlineTriggerButton","Portal","Figure","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,qCAAOA,kCAAgB,EAClD,MAAM,EACJ,OAAO,iBACR,EACF,EAAC;AAEF,MAAa,aAAa,CAAC,EAAE,OAAc,KAAK;CAC9C,MAAM,aAAa,kBAAuB,KAAK;AAC/C,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,wBAAO,2BAAC,oBAAM,MAAM,UAAU,WAAgB;AAEhD,KAAI,MAAM,WAAW,YAAY,MAAM,KAAK,QAAQ,UAClD,wBAAO,2BAACC,+DAAsB,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,4BAACC;EAAY,gBAAgB,MAAM,WAAW;6BAC5C,2BAACC;GAAe;6BACd,2BAACC,2EAA4B,MAAM,UAAU,WAAsC;IACpE,kBACjB,2BAACC,mDACC,2BAAC;GAAqB,KAAK;6BACzB,2BAACC,sDACC,2BAACC;IACC,WAAW,QAAQ;IACnB,OAAO,QAAQ;IACR;IACP,YAAY,MAAM,UAAU;IAC5B,cAAc,MAAM,UAAU;KAC9B,GACK;IACY,GAChB;GACG;AAIlB,wBACE,2BAACD;EAAO,mBAAgB;4BACtB,2BAACC;GACC,WAAW,QAAQ;GACnB,OAAO,QAAQ;GACR;GACP,YAAY,MAAM,UAAU;GAC5B,cAAc,MAAM,UAAU;GAC9B,SAAQ;IACR;GACK;AAEZ"}

package/lib/Embed/H5pEmbed.js

@@ -0,0 +1,39 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/Embed/H5pEmbed.tsx
+const StyledFigure = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figure, { base: { "& iframe": {
+	height: "auto",
+	width: "100%"
+} } });
+const FigureOembed = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figure, { base: {
+	width: "100%",
+	"& iframe": { width: "100%" }
+} });
+const H5pEmbed = ({ embed }) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, { type: "h5p" });
+	if (embed.data.oembed) return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(StyledFigure, {
+		"data-embed-type": "h5p",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+			title: titleWithPrefix,
+			"aria-label": titleWithPrefix,
+			src: embed.embedData.url
+		})
+	});
+};
+var H5pEmbed_default = H5pEmbed;
+
+//#endregion
+exports.H5pEmbed_default = H5pEmbed_default;
+//# sourceMappingURL=H5pEmbed.js.map

package/lib/Embed/H5pEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"H5pEmbed.js","names":["Figure","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,qCAAOA,0BAAQ,EAClC,MAAM,EACJ,YAAY;CACV,QAAQ;CACR,OAAO;AACR,EACF,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM;CACJ,OAAO;CACP,YAAY,EACV,OAAO,OACR;AACF,EACF,EAAC;AAEF,MAAM,WAAW,CAAC,EAAE,OAAc,KAAK;CACrC,MAAM,EAAE,GAAG,GAAG,mCAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,wBAAO,2BAACC,+DAAsB,MAAK,QAAQ;AAG7C,KAAI,MAAM,KAAK,OACb,wBAAO,2BAAC;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,2BAAC;EAAa,mBAAgB;4BAC5B,2BAAC;GAAO,OAAO;GAAiB,cAAY;GAAiB,KAAK,MAAM,UAAU;IAAO;GAC5E;AAElB;AAED,uBAAe"}

package/lib/Embed/IframeEmbed.js

@@ -0,0 +1,70 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
+const require_ResourceBox = require('../ResourceBox/ResourceBox.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/Embed/IframeEmbed.tsx
+const StyledIframe = (0, __ndla_styled_system_jsx.styled)("iframe", { base: {
+	width: "100%",
+	border: 0
+} });
+const StyledFigure = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figure, { base: { clear: "both" } });
+const IframeEmbed = ({ embed }) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	const iframeRef = (0, react.useRef)(null);
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.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__ */ (0, react_jsx_runtime.jsx)(StyledFigure, {
+			"data-embed-type": "iframe",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ResourceBox.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__ */ (0, react_jsx_runtime.jsx)(StyledFigure, {
+		"data-embed-type": "iframe",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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
+exports.IframeEmbed_default = IframeEmbed_default;
+//# sourceMappingURL=IframeEmbed.js.map

package/lib/Embed/IframeEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IframeEmbed.js","names":["Figure","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,qCAAO,UAAU,EACpC,MAAM;CACJ,OAAO;CACP,QAAQ;AACT,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM,EACJ,OAAO,OACR,EACF,EAAC;AAEF,MAAM,cAAc,CAAC,EAAE,OAAc,KAAK;CACxC,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,YAAY,kBAA0B,KAAK;AAEjD,sBAAU,MAAM;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,QAAQ;GACV,MAAM,CAACC,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,2BAACC,+DAAsB,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,2BAAC;GAAa,mBAAgB;6BAC5B,2BAACC;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,2BAAC;EAAa,mBAAgB;4BAC5B,2BAAC;GACC,KAAK;GACE;GACP,cAAY;GACZ,KAAK;GACL,OAAO;GACP,QAAQ;GACR,OAAM;GACN,SAAQ;IACR;GACW;AAElB;AAED,0BAAe"}

package/lib/Embed/ImageEmbed.js

@@ -0,0 +1,183 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_EmbedByline = require('../LicenseByline/EmbedByline.js');
+const require_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
+const require_licenseAttributes = require('../utils/licenseAttributes.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const html_react_parser = require_rolldown_runtime.__toESM(require("html-react-parser"));
+const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
+const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("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 = (0, __ndla_styled_system_jsx.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 = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.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 = (0, __ndla_styled_system_jsx.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] = (0, react.useState)(void 0);
+	const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);
+	const { t } = (0, react_i18next.useTranslation)();
+	const parsedDescription = (0, react.useMemo)(() => {
+		if (embed.embedData.caption || renderContext === "article") return embed.embedData.caption ? (0, html_react_parser.default)(embed.embedData.caption) : void 0;
+		if (embed.status === "success" && embed.data.caption.caption) return (0, html_react_parser.default)(embed.data.caption.caption);
+	}, [embed, renderContext]);
+	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.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 = require_licenseAttributes.licenseAttributes(data.copyright.license.license, lang, embedData.url);
+	const figureSize = figureProps?.float ? figureProps?.size ?? "medium" : "full";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledFigure, {
+		float: figureProps?.float,
+		size: imageSizes ? "full" : figureSize,
+		"data-embed-type": "image",
+		...licenseProps,
+		children: [
+			children,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ImageWrapper, {
+				border: embedData.border === "true",
+				expandable: !!figureProps?.float,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.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__ */ (0, react_jsx_runtime.jsx)(ExpandButton, {
+					"aria-label": t(`license.images.itemImage.zoom${imageSizes ? "Out" : ""}ImageButtonLabel`),
+					onClick: toggleImageSize,
+					"data-expanded": !!imageSizes,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.AddLine, {})
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedByline.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
+exports.ImageEmbed_default = ImageEmbed_default;
+exports.getCrop = getCrop;
+exports.getFocalPoint = getFocalPoint;
+//# sourceMappingURL=ImageEmbed.js.map