@ndla/ui 56.0.128-alpha.0 → 56.0.129-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/Article/Article.js +1 -0
- package/es/Article/Article.js.map +1 -1
- package/es/Article/ArticleByline.js +14 -28
- package/es/Article/ArticleByline.js.map +1 -1
- package/es/AudioPlayer/AudioPlayer.js +1 -1
- package/es/AudioPlayer/index.js +1 -1
- package/es/Breadcrumb/Breadcrumb.js +1 -1
- package/es/Breadcrumb/HomeBreadcrumb.js +1 -1
- package/es/Breadcrumb/index.js +1 -1
- package/es/CopyParagraphButton/CopyParagraphButton.js +1 -1
- package/es/CopyParagraphButton/index.js +1 -1
- package/es/ErrorMessage/ErrorMessage.js +1 -1
- package/es/ErrorMessage/index.js +1 -1
- package/es/FactBox/FactBox.js +1 -1
- package/es/FactBox/index.js +1 -1
- package/es/locale/messages-en.js +10 -5
- package/es/locale/messages-en.js.map +1 -1
- package/es/locale/messages-nb.js +10 -5
- package/es/locale/messages-nb.js.map +1 -1
- package/es/locale/messages-nn.js +10 -5
- package/es/locale/messages-nn.js.map +1 -1
- package/es/locale/messages-se.js +10 -5
- package/es/locale/messages-se.js.map +1 -1
- package/lib/Article/Article.js +5 -4
- package/lib/Article/Article.js.map +1 -1
- package/lib/Article/ArticleByline.d.ts +3 -1
- package/lib/Article/ArticleByline.js +16 -30
- package/lib/Article/ArticleByline.js.map +1 -1
- package/lib/AudioPlayer/AudioPlayer.js +5 -5
- package/lib/AudioPlayer/index.js +2 -2
- package/lib/Breadcrumb/Breadcrumb.js +3 -3
- package/lib/Breadcrumb/HomeBreadcrumb.js +2 -2
- package/lib/Breadcrumb/index.js +3 -3
- package/lib/CampaignBlock/CampaignBlock.js +2 -2
- package/lib/CampaignBlock/CampaignBlock.js.map +1 -1
- package/lib/Concept/Concept.js +11 -11
- package/lib/Concept/Concept.js.map +1 -1
- package/lib/ContactBlock/ContactBlock.js +2 -2
- package/lib/ContentTypeBadge/ContentTypeBadge.js +20 -20
- package/lib/ContentTypeBadge/ContentTypeBadge.js.map +1 -1
- package/lib/ContentTypeHero/ContentTypeHero.js +20 -20
- package/lib/ContentTypeHero/ContentTypeHero.js.map +1 -1
- package/lib/CopyParagraphButton/CopyParagraphButton.js +1 -1
- package/lib/CopyParagraphButton/index.js +2 -2
- package/lib/Embed/AudioEmbed.js +9 -9
- package/lib/Embed/AudioEmbed.js.map +1 -1
- package/lib/Embed/BrightcoveEmbed.js +6 -6
- package/lib/Embed/BrightcoveEmbed.js.map +1 -1
- package/lib/Embed/CodeEmbed.js +6 -6
- package/lib/Embed/CodeEmbed.js.map +1 -1
- package/lib/Embed/ConceptEmbed.js +9 -9
- package/lib/Embed/ConceptEmbed.js.map +1 -1
- package/lib/Embed/ConceptInlineTriggerButton.js +2 -2
- package/lib/Embed/ConceptInlineTriggerButton.js.map +1 -1
- package/lib/Embed/CopyrightEmbed.js +2 -2
- package/lib/Embed/EmbedErrorPlaceholder.js +2 -2
- package/lib/Embed/ExternalEmbed.js +4 -4
- package/lib/Embed/ExternalEmbed.js.map +1 -1
- package/lib/Embed/GlossEmbed.js +7 -7
- package/lib/Embed/GlossEmbed.js.map +1 -1
- package/lib/Embed/H5pEmbed.js +2 -2
- package/lib/Embed/H5pEmbed.js.map +1 -1
- package/lib/Embed/IframeEmbed.js +4 -4
- package/lib/Embed/IframeEmbed.js.map +1 -1
- package/lib/Embed/ImageEmbed.js +6 -6
- package/lib/Embed/ImageEmbed.js.map +1 -1
- package/lib/Embed/RelatedContentEmbed.js +6 -6
- package/lib/Embed/RelatedContentEmbed.js.map +1 -1
- package/lib/ErrorMessage/ErrorMessage.js +1 -1
- package/lib/ErrorMessage/index.js +2 -2
- package/lib/FactBox/FactBox.js +1 -1
- package/lib/FactBox/index.js +2 -2
- package/lib/FileList/File.js +2 -2
- package/lib/FileList/File.js.map +1 -1
- package/lib/Gloss/Gloss.js +4 -4
- package/lib/LicenseByline/EmbedByline.js +2 -2
- package/lib/LinkBlock/LinkBlock.js +2 -2
- package/lib/LinkBlock/LinkBlock.js.map +1 -1
- package/lib/Pitch/Pitch.js +2 -2
- package/lib/Pitch/Pitch.js.map +1 -1
- package/lib/RelatedArticleList/RelatedArticleList.js +4 -4
- package/lib/RelatedArticleList/RelatedArticleList.js.map +1 -1
- package/lib/RelatedArticleList/index.js +2 -2
- package/lib/i18n/i18n.js +8 -8
- package/lib/i18n/i18n.js.map +1 -1
- package/lib/index.js +156 -156
- package/lib/locale/messages-en.d.ts +12 -5
- package/lib/locale/messages-en.js +12 -7
- package/lib/locale/messages-en.js.map +1 -1
- package/lib/locale/messages-nb.d.ts +12 -5
- package/lib/locale/messages-nb.js +12 -7
- package/lib/locale/messages-nb.js.map +1 -1
- package/lib/locale/messages-nn.d.ts +12 -5
- package/lib/locale/messages-nn.js +12 -7
- package/lib/locale/messages-nn.js.map +1 -1
- package/lib/locale/messages-se.d.ts +12 -5
- package/lib/locale/messages-se.js +12 -7
- package/lib/locale/messages-se.js.map +1 -1
- package/lib/model/index.js +10 -10
- package/lib/utils/relativeUrl.js +2 -2
- package/lib/utils/relativeUrl.js.map +1 -1
- package/package.json +2 -2
- package/src/Article/Article.tsx +1 -0
- package/src/Article/ArticleByline.stories.tsx +25 -0
- package/src/Article/ArticleByline.tsx +15 -35
- package/src/locale/messages-en.ts +12 -5
- package/src/locale/messages-nb.ts +12 -5
- package/src/locale/messages-nn.ts +12 -5
- package/src/locale/messages-se.ts +12 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConceptEmbed.js","names":["PopoverContent","EmbedErrorPlaceholder","GlossEmbed","PopoverRoot","PopoverTrigger","ConceptInlineTriggerButton","Portal","Concept"],"sources":["../../src/Embed/ConceptEmbed.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 parse from \"html-react-parser\";\nimport { forwardRef, useMemo, useRef } from \"react\";\nimport { Portal } from \"@ark-ui/react\";\nimport { 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 { GlossEmbed } from \"./GlossEmbed\";\nimport type { RenderContext } from \"./types\";\nimport { Concept, type ConceptProps } from \"../Concept/Concept\";\n\ninterface BaseProps {\n renderContext?: RenderContext;\n lang?: string;\n previewAlt?: boolean;\n}\n\ninterface Props extends BaseProps {\n embed: ConceptMetaData;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n base: {\n width: \"surface.xlarge\",\n maxHeight: \"50vh\",\n overflowY: \"auto\",\n },\n});\n\nexport const ConceptEmbed = ({ embed, renderContext, lang, previewAlt }: Props) => {\n const parsedContent = useMemo(() => {\n if (embed.status === \"error\" || !embed.data.concept.content) return undefined;\n return parse(embed.data.concept.content.htmlContent);\n }, [embed]);\n\n const parsedTitle = useMemo(\n () => (embed.status === \"success\" ? parse(embed.data.concept.title.htmlTitle) : undefined),\n [embed],\n );\n\n if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n return <span>{embed.embedData.linkText}</span>;\n }\n if (embed.status === \"error\") {\n // TODO: This could be either concept or gloss. We don't know if it errors out. :)\n return <EmbedErrorPlaceholder type=\"gloss\" />;\n }\n\n const { concept, visualElement } = embed.data;\n\n // TODO: Consider whether we should do this in article-converter instead.\n if (embed.data.concept.glossData) {\n return <GlossEmbed embed={embed} />;\n }\n\n if (embed.embedData.type === \"inline\") {\n return (\n <InlineConcept\n previewAlt={previewAlt}\n linkText={embed.embedData.linkText}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </InlineConcept>\n );\n }\n\n return (\n <BlockConcept\n previewAlt={previewAlt}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={renderContext === \"embed\" ? undefined : parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </BlockConcept>\n );\n};\n\nexport interface InlineConceptProps extends ConceptProps, BaseProps {\n linkText?: string;\n source?: string;\n}\n\nexport const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(\n ({ linkText, copyright, visualElement, previewAlt, lang, children, title, source, ...rest }, ref) => {\n const contentRef = useRef<HTMLDivElement>(null);\n return (\n <PopoverRoot initialFocusEl={() => contentRef.current}>\n {/* @ts-expect-error placing ref and rest on popover trigger somehow removes a bug where the popover target becomes a bit bigger */}\n <PopoverTrigger asChild ref={ref} {...rest}>\n <ConceptInlineTriggerButton>{linkText}</ConceptInlineTriggerButton>\n </PopoverTrigger>\n <Portal>\n <StyledPopoverContent ref={contentRef}>\n <Concept\n copyright={copyright}\n visualElement={visualElement}\n title={title}\n lang={lang}\n source={source}\n previewAlt={previewAlt}\n >\n {children}\n </Concept>\n </StyledPopoverContent>\n </Portal>\n </PopoverRoot>\n );\n },\n);\n\nexport interface BlockConceptProps extends ConceptProps {}\n\nexport const BlockConcept = forwardRef<HTMLElement, BlockConceptProps>((props, ref) => (\n <Concept {...props} data-embed-type=\"concept\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;AA8BA,MAAM,uBAAuB,qCAAOA,kCAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;AACZ,EACF,EAAC;AAEF,MAAa,eAAe,CAAC,EAAE,OAAO,eAAe,MAAM,YAAmB,KAAK;CACjF,MAAM,gBAAgB,mBAAQ,MAAM;AAClC,MAAI,MAAM,WAAW,YAAY,MAAM,KAAK,QAAQ,QAAS;AAC7D,SAAO,+BAAM,MAAM,KAAK,QAAQ,QAAQ,YAAY;CACrD,GAAE,CAAC,KAAM,EAAC;CAEX,MAAM,cAAc,mBAClB,MAAO,MAAM,WAAW,YAAY,+BAAM,MAAM,KAAK,QAAQ,MAAM,UAAU,WAC7E,CAAC,KAAM,EACR;AAED,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,wBAAO,2BAAC,oBAAM,MAAM,UAAU,WAAgB;AAEhD,KAAI,MAAM,WAAW,QAEnB,wBAAO,2BAACC
|
|
1
|
+
{"version":3,"file":"ConceptEmbed.js","names":["PopoverContent","EmbedErrorPlaceholder","GlossEmbed","PopoverRoot","PopoverTrigger","ConceptInlineTriggerButton","Portal","Concept"],"sources":["../../src/Embed/ConceptEmbed.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 parse from \"html-react-parser\";\nimport { forwardRef, useMemo, useRef } from \"react\";\nimport { Portal } from \"@ark-ui/react\";\nimport { 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 { GlossEmbed } from \"./GlossEmbed\";\nimport type { RenderContext } from \"./types\";\nimport { Concept, type ConceptProps } from \"../Concept/Concept\";\n\ninterface BaseProps {\n renderContext?: RenderContext;\n lang?: string;\n previewAlt?: boolean;\n}\n\ninterface Props extends BaseProps {\n embed: ConceptMetaData;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n base: {\n width: \"surface.xlarge\",\n maxHeight: \"50vh\",\n overflowY: \"auto\",\n },\n});\n\nexport const ConceptEmbed = ({ embed, renderContext, lang, previewAlt }: Props) => {\n const parsedContent = useMemo(() => {\n if (embed.status === \"error\" || !embed.data.concept.content) return undefined;\n return parse(embed.data.concept.content.htmlContent);\n }, [embed]);\n\n const parsedTitle = useMemo(\n () => (embed.status === \"success\" ? parse(embed.data.concept.title.htmlTitle) : undefined),\n [embed],\n );\n\n if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n return <span>{embed.embedData.linkText}</span>;\n }\n if (embed.status === \"error\") {\n // TODO: This could be either concept or gloss. We don't know if it errors out. :)\n return <EmbedErrorPlaceholder type=\"gloss\" />;\n }\n\n const { concept, visualElement } = embed.data;\n\n // TODO: Consider whether we should do this in article-converter instead.\n if (embed.data.concept.glossData) {\n return <GlossEmbed embed={embed} />;\n }\n\n if (embed.embedData.type === \"inline\") {\n return (\n <InlineConcept\n previewAlt={previewAlt}\n linkText={embed.embedData.linkText}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </InlineConcept>\n );\n }\n\n return (\n <BlockConcept\n previewAlt={previewAlt}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={renderContext === \"embed\" ? undefined : parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </BlockConcept>\n );\n};\n\nexport interface InlineConceptProps extends ConceptProps, BaseProps {\n linkText?: string;\n source?: string;\n}\n\nexport const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(\n ({ linkText, copyright, visualElement, previewAlt, lang, children, title, source, ...rest }, ref) => {\n const contentRef = useRef<HTMLDivElement>(null);\n return (\n <PopoverRoot initialFocusEl={() => contentRef.current}>\n {/* @ts-expect-error placing ref and rest on popover trigger somehow removes a bug where the popover target becomes a bit bigger */}\n <PopoverTrigger asChild ref={ref} {...rest}>\n <ConceptInlineTriggerButton>{linkText}</ConceptInlineTriggerButton>\n </PopoverTrigger>\n <Portal>\n <StyledPopoverContent ref={contentRef}>\n <Concept\n copyright={copyright}\n visualElement={visualElement}\n title={title}\n lang={lang}\n source={source}\n previewAlt={previewAlt}\n >\n {children}\n </Concept>\n </StyledPopoverContent>\n </Portal>\n </PopoverRoot>\n );\n },\n);\n\nexport interface BlockConceptProps extends ConceptProps {}\n\nexport const BlockConcept = forwardRef<HTMLElement, BlockConceptProps>((props, ref) => (\n <Concept {...props} data-embed-type=\"concept\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;AA8BA,MAAM,uBAAuB,qCAAOA,kCAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;AACZ,EACF,EAAC;AAEF,MAAa,eAAe,CAAC,EAAE,OAAO,eAAe,MAAM,YAAmB,KAAK;CACjF,MAAM,gBAAgB,mBAAQ,MAAM;AAClC,MAAI,MAAM,WAAW,YAAY,MAAM,KAAK,QAAQ,QAAS;AAC7D,SAAO,+BAAM,MAAM,KAAK,QAAQ,QAAQ,YAAY;CACrD,GAAE,CAAC,KAAM,EAAC;CAEX,MAAM,cAAc,mBAClB,MAAO,MAAM,WAAW,YAAY,+BAAM,MAAM,KAAK,QAAQ,MAAM,UAAU,WAC7E,CAAC,KAAM,EACR;AAED,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,wBAAO,2BAAC,oBAAM,MAAM,UAAU,WAAgB;AAEhD,KAAI,MAAM,WAAW,QAEnB,wBAAO,2BAACC,mIAAsB,MAAK,UAAU;CAG/C,MAAM,EAAE,SAAS,eAAe,GAAG,MAAM;AAGzC,KAAI,MAAM,KAAK,QAAQ,UACrB,wBAAO,2BAACC,qGAAkB,QAAS;AAGrC,KAAI,MAAM,UAAU,SAAS,SAC3B,wBACE,2BAAC;EACa;EACZ,UAAU,MAAM,UAAU;EAC1B,WAAW,QAAQ;EACJ;EACT;EACN,OAAO;EACP,QAAQ,QAAQ;YAEf;GACa;AAIpB,wBACE,2BAAC;EACa;EACZ,WAAW,QAAQ;EACJ;EACT;EACN,OAAO,kBAAkB,mBAAsB;EAC/C,QAAQ,QAAQ;YAEf;GACY;AAElB;AAOD,MAAa,gBAAgB,sBAC3B,CAAC,EAAE,UAAU,WAAW,eAAe,YAAY,MAAM,UAAU,OAAO,OAAQ,GAAG,MAAM,EAAE,QAAQ;CACnG,MAAM,aAAa,kBAAuB,KAAK;AAC/C,wBACE,4BAACC;EAAY,gBAAgB,MAAM,WAAW;6BAE5C,2BAACC;GAAe;GAAa;GAAK,GAAI;6BACpC,2BAACC,+IAA4B,WAAsC;IACpD,kBACjB,2BAACC,mDACC,2BAAC;GAAqB,KAAK;6BACzB,2BAACC;IACY;IACI;IACR;IACD;IACE;IACI;IAEX;KACO;IACW,GAChB;GACG;AAEjB,EACF;AAID,MAAa,eAAe,sBAA2C,CAAC,OAAO,wBAC7E,2BAACA;CAAQ,GAAI;CAAO,mBAAgB;CAAe;EAAO,CAC1D"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_InlineTriggerButton = require('./InlineTriggerButton.js');
|
|
3
3
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
4
4
|
|
|
5
5
|
//#region src/Embed/ConceptInlineTriggerButton.tsx
|
|
6
|
-
const ConceptInlineTriggerButton = (0, __ndla_styled_system_jsx.styled)(
|
|
6
|
+
const ConceptInlineTriggerButton = (0, __ndla_styled_system_jsx.styled)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_InlineTriggerButton.InlineTriggerButton, { base: {
|
|
7
7
|
position: "relative",
|
|
8
8
|
overflow: "visible",
|
|
9
9
|
borderBottom: "1px solid",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConceptInlineTriggerButton.js","names":["InlineTriggerButton"],"sources":["../../src/Embed/ConceptInlineTriggerButton.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 { styled } from \"@ndla/styled-system/jsx\";\nimport { InlineTriggerButton } from \"./InlineTriggerButton\";\n\nexport const ConceptInlineTriggerButton = styled(InlineTriggerButton, {\n base: {\n position: \"relative\",\n overflow: \"visible\",\n borderBottom: \"1px solid\",\n borderStyle: \"dashed\",\n borderColor: \"stroke.hover\",\n paddingBlockStart: \"5xsmall\",\n width: \"fit-content\",\n cursor: \"pointer\",\n _hover: {\n borderColor: \"text.link\",\n background: \"surface.actionSubtle.hover\",\n },\n _active: {\n borderColor: \"text.link\",\n background: \"surface.actionSubtle.active\",\n },\n // The global focus ring forces the border-radius to be xsmall, causing the dashed border to be cut off. This is a workaround.\n _focusVisible: {\n outline: \"none\",\n borderRadius: \"0\",\n _after: {\n content: '\"\"',\n position: \"absolute\",\n inset: \"0\",\n outline: \"3px\",\n borderRadius: \"xsmall\",\n outlineColor: \"stroke.default\",\n outlineOffset: \"3px\",\n outlineStyle: \"solid\",\n },\n },\n },\n});\n"],"mappings":";;;;;AAWA,MAAa,6BAA6B,qCAAOA,
|
|
1
|
+
{"version":3,"file":"ConceptInlineTriggerButton.js","names":["InlineTriggerButton"],"sources":["../../src/Embed/ConceptInlineTriggerButton.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 { styled } from \"@ndla/styled-system/jsx\";\nimport { InlineTriggerButton } from \"./InlineTriggerButton\";\n\nexport const ConceptInlineTriggerButton = styled(InlineTriggerButton, {\n base: {\n position: \"relative\",\n overflow: \"visible\",\n borderBottom: \"1px solid\",\n borderStyle: \"dashed\",\n borderColor: \"stroke.hover\",\n paddingBlockStart: \"5xsmall\",\n width: \"fit-content\",\n cursor: \"pointer\",\n _hover: {\n borderColor: \"text.link\",\n background: \"surface.actionSubtle.hover\",\n },\n _active: {\n borderColor: \"text.link\",\n background: \"surface.actionSubtle.active\",\n },\n // The global focus ring forces the border-radius to be xsmall, causing the dashed border to be cut off. This is a workaround.\n _focusVisible: {\n outline: \"none\",\n borderRadius: \"0\",\n _after: {\n content: '\"\"',\n position: \"absolute\",\n inset: \"0\",\n outline: \"3px\",\n borderRadius: \"xsmall\",\n outlineColor: \"stroke.default\",\n outlineOffset: \"3px\",\n outlineStyle: \"solid\",\n },\n },\n },\n});\n"],"mappings":";;;;;AAWA,MAAa,6BAA6B,qCAAOA,qHAAqB,EACpE,MAAM;CACJ,UAAU;CACV,UAAU;CACV,cAAc;CACd,aAAa;CACb,aAAa;CACb,mBAAmB;CACnB,OAAO;CACP,QAAQ;CACR,QAAQ;EACN,aAAa;EACb,YAAY;CACb;CACD,SAAS;EACP,aAAa;EACb,YAAY;CACb;CAED,eAAe;EACb,SAAS;EACT,cAAc;EACd,QAAQ;GACN,SAAS;GACT,UAAU;GACV,OAAO;GACP,SAAS;GACT,cAAc;GACd,cAAc;GACd,eAAe;GACf,cAAc;EACf;CACF;AACF,EACF,EAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline = require('../LicenseByline/EmbedByline.js');
|
|
3
3
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
4
4
|
const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
|
|
5
5
|
|
|
@@ -11,7 +11,7 @@ const CopyrightEmbed = ({ embed, children }) => {
|
|
|
11
11
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCopyrightContent, {
|
|
12
12
|
"data-copyright-content": "",
|
|
13
13
|
children
|
|
14
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
14
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline.EmbedByline, {
|
|
15
15
|
type: "copyright",
|
|
16
16
|
copyright: embed.embedData.copyright
|
|
17
17
|
})]
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline = require('../LicenseByline/EmbedByline.js');
|
|
3
3
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
4
4
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
5
5
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -31,7 +31,7 @@ const EmbedErrorPlaceholder = ({ type, children, figureType, float }) => {
|
|
|
31
31
|
children: [children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorPlaceholder, {
|
|
32
32
|
"data-embed-type": type,
|
|
33
33
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ErrorWarningLine, {})
|
|
34
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
34
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline.EmbedByline, {
|
|
35
35
|
error: true,
|
|
36
36
|
type
|
|
37
37
|
})]
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
3
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
|
|
3
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_ResourceBox_ResourceBox = require('../ResourceBox/ResourceBox.js');
|
|
4
4
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
5
5
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
6
6
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -24,7 +24,7 @@ const ExternalEmbed = ({ embed }) => {
|
|
|
24
24
|
iframe.height = "";
|
|
25
25
|
}
|
|
26
26
|
}, []);
|
|
27
|
-
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
27
|
+
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, { type: "external" });
|
|
28
28
|
const { embedData, data } = embed;
|
|
29
29
|
if (embedData.type === "fullscreen") {
|
|
30
30
|
const image = {
|
|
@@ -33,7 +33,7 @@ const ExternalEmbed = ({ embed }) => {
|
|
|
33
33
|
};
|
|
34
34
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Figure, {
|
|
35
35
|
"data-embed-type": "external",
|
|
36
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
36
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_ResourceBox_ResourceBox.ResourceBox_default, {
|
|
37
37
|
image,
|
|
38
38
|
title: embedData.title ?? "",
|
|
39
39
|
url: embedData.url,
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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,mIAAsB,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/GlossEmbed.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
|
|
3
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_ConceptInlineTriggerButton = require('./ConceptInlineTriggerButton.js');
|
|
4
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Gloss_Gloss = require('../Gloss/Gloss.js');
|
|
5
5
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
6
6
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
7
7
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -13,7 +13,7 @@ const StyledPopoverContent = (0, __ndla_styled_system_jsx.styled)(__ndla_primiti
|
|
|
13
13
|
const GlossEmbed = ({ embed }) => {
|
|
14
14
|
const contentRef = (0, react.useRef)(null);
|
|
15
15
|
if (embed.status === "error" && embed.embedData.type === "inline") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: embed.embedData.linkText });
|
|
16
|
-
if (embed.status === "error" || !embed.data.concept.glossData) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
16
|
+
if (embed.status === "error" || !embed.data.concept.glossData) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, { type: "gloss" });
|
|
17
17
|
const { concept, visualElement } = embed.data;
|
|
18
18
|
const audio = visualElement?.status === "success" && visualElement.resource === "audio" ? {
|
|
19
19
|
src: visualElement.data.audioFile.url,
|
|
@@ -23,10 +23,10 @@ const GlossEmbed = ({ embed }) => {
|
|
|
23
23
|
initialFocusEl: () => contentRef.current,
|
|
24
24
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.PopoverTrigger, {
|
|
25
25
|
asChild: true,
|
|
26
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
26
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_ConceptInlineTriggerButton.ConceptInlineTriggerButton, { children: embed.embedData.linkText })
|
|
27
27
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPopoverContent, {
|
|
28
28
|
ref: contentRef,
|
|
29
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Figure, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
29
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Figure, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Gloss_Gloss.Gloss_default, {
|
|
30
30
|
glossData: concept.glossData,
|
|
31
31
|
title: concept.title,
|
|
32
32
|
audio,
|
|
@@ -37,7 +37,7 @@ const GlossEmbed = ({ embed }) => {
|
|
|
37
37
|
});
|
|
38
38
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Figure, {
|
|
39
39
|
"data-embed-type": "gloss",
|
|
40
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
40
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Gloss_Gloss.Gloss_default, {
|
|
41
41
|
glossData: concept.glossData,
|
|
42
42
|
title: concept.title,
|
|
43
43
|
audio,
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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,mIAAsB,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,+IAA4B,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
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
|
|
3
3
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
4
4
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
5
5
|
const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
|
|
@@ -16,7 +16,7 @@ const FigureOembed = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figu
|
|
|
16
16
|
} });
|
|
17
17
|
const H5pEmbed = ({ embed }) => {
|
|
18
18
|
const { t } = (0, react_i18next.useTranslation)();
|
|
19
|
-
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
19
|
+
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, { type: "h5p" });
|
|
20
20
|
if (embed.data.oembed) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FigureOembed, {
|
|
21
21
|
"data-embed-type": "h5p",
|
|
22
22
|
dangerouslySetInnerHTML: { __html: embed.data.oembed.html ?? "" }
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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,mIAAsB,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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
3
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
|
|
3
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_ResourceBox_ResourceBox = require('../ResourceBox/ResourceBox.js');
|
|
4
4
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
5
5
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
6
6
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -25,7 +25,7 @@ const IframeEmbed = ({ embed }) => {
|
|
|
25
25
|
iframe.height = "";
|
|
26
26
|
}
|
|
27
27
|
}, []);
|
|
28
|
-
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
28
|
+
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, { type: "external" });
|
|
29
29
|
const { embedData, data } = embed;
|
|
30
30
|
if (embedData.type === "fullscreen") {
|
|
31
31
|
const iframeImage = embed.status === "success" ? data.iframeImage : void 0;
|
|
@@ -36,7 +36,7 @@ const IframeEmbed = ({ embed }) => {
|
|
|
36
36
|
};
|
|
37
37
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFigure, {
|
|
38
38
|
"data-embed-type": "iframe",
|
|
39
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
39
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_ResourceBox_ResourceBox.ResourceBox_default, {
|
|
40
40
|
image,
|
|
41
41
|
title: embedData.title ?? "",
|
|
42
42
|
url: embedData.url,
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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,mIAAsB,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
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline = require('../LicenseByline/EmbedByline.js');
|
|
3
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
|
|
4
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_utils_licenseAttributes = require('../utils/licenseAttributes.js');
|
|
5
5
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
6
6
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
7
7
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -121,7 +121,7 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
|
|
|
121
121
|
if (embed.embedData.caption || renderContext === "article") return embed.embedData.caption ? (0, html_react_parser.default)(embed.embedData.caption) : void 0;
|
|
122
122
|
if (embed.status === "success" && embed.data.caption.caption) return (0, html_react_parser.default)(embed.data.caption.caption);
|
|
123
123
|
}, [embed, renderContext]);
|
|
124
|
-
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
124
|
+
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, {
|
|
125
125
|
type: "image",
|
|
126
126
|
figureType: figureProps?.size,
|
|
127
127
|
float: figureProps?.float
|
|
@@ -134,7 +134,7 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
|
|
|
134
134
|
const toggleImageSize = () => {
|
|
135
135
|
setImageSizes((sizes$1) => !sizes$1 ? expandedSizes : void 0);
|
|
136
136
|
};
|
|
137
|
-
const licenseProps =
|
|
137
|
+
const licenseProps = require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_utils_licenseAttributes.licenseAttributes(data.copyright.license.license, lang, embedData.url);
|
|
138
138
|
const figureSize = figureProps?.float ? figureProps?.size ?? "medium" : "full";
|
|
139
139
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledFigure, {
|
|
140
140
|
float: figureProps?.float,
|
|
@@ -163,7 +163,7 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
|
|
|
163
163
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.AddLine, {})
|
|
164
164
|
})]
|
|
165
165
|
}),
|
|
166
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
166
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline.EmbedByline, {
|
|
167
167
|
type: "image",
|
|
168
168
|
copyright: data.copyright,
|
|
169
169
|
description: parsedDescription,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageEmbed.js","names":["size?: string","float?: string","actualSize: FigureSize","align?: string","data: ImageEmbedData","Figure","EmbedErrorPlaceholder","sizes","Image","AddLine","EmbedByline"],"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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"}
|
|
1
|
+
{"version":3,"file":"ImageEmbed.js","names":["size?: string","float?: string","actualSize: FigureSize","align?: string","data: ImageEmbedData","Figure","EmbedErrorPlaceholder","sizes","Image","AddLine","EmbedByline"],"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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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
3
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType = require('../model/ContentType.js');
|
|
3
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_RelatedArticleList_RelatedArticleList = require('../RelatedArticleList/RelatedArticleList.js');
|
|
4
4
|
const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
|
|
5
5
|
const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
|
|
6
6
|
|
|
@@ -10,11 +10,11 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }) =
|
|
|
10
10
|
if (embed.status === "error") return null;
|
|
11
11
|
const { data, embedData } = embed;
|
|
12
12
|
if (embedData.articleId && data) {
|
|
13
|
-
const typeId = data.resource?.resourceTypes.find((rt) =>
|
|
14
|
-
const type = typeId ?
|
|
13
|
+
const typeId = data.resource?.resourceTypes.find((rt) => require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.contentTypeMapping[rt.id])?.id;
|
|
14
|
+
const type = typeId ? require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.contentTypeMapping[typeId] : void 0;
|
|
15
15
|
const context = data.resource?.contexts.find((c) => c.rootId === subject);
|
|
16
16
|
const url = context?.url ?? data.resource?.url ?? `/article/${embedData.articleId}`;
|
|
17
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
17
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_RelatedArticleList_RelatedArticleList.RelatedArticle, {
|
|
18
18
|
title: data.article.title?.title ?? "",
|
|
19
19
|
introduction: data.article.metaDescription?.metaDescription ?? "",
|
|
20
20
|
target: isOembed ? "_blank" : void 0,
|
|
@@ -22,7 +22,7 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }) =
|
|
|
22
22
|
type
|
|
23
23
|
});
|
|
24
24
|
}
|
|
25
|
-
if (typeof embedData.url === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
25
|
+
if (typeof embedData.url === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_RelatedArticleList_RelatedArticleList.RelatedArticle, {
|
|
26
26
|
title: embedData.title ?? "",
|
|
27
27
|
introduction: "",
|
|
28
28
|
to: embedData.url,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RelatedContentEmbed.js","names":["contentTypeMapping","RelatedArticle"],"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,mCAAgB;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,OAAOA,
|
|
1
|
+
{"version":3,"file":"RelatedContentEmbed.js","names":["contentTypeMapping","RelatedArticle"],"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,mCAAgB;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,OAAOA,2GAAmB,GAAG,IAAI,EAAE;EACrF,MAAM,OAAO,SAASA,2GAAmB;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,2BAACC;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,2BAACA;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"}
|
|
@@ -51,5 +51,5 @@ const ErrorMessage = ({ children, messages, illustration, illustrationElement, c
|
|
|
51
51
|
var ErrorMessage_default = ErrorMessage;
|
|
52
52
|
|
|
53
53
|
//#endregion
|
|
54
|
-
exports.ErrorMessage_default = ErrorMessage_default;
|
|
54
|
+
exports.ErrorMessage_default$1 = ErrorMessage_default;
|
|
55
55
|
//# sourceMappingURL=ErrorMessage.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
const
|
|
1
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_ErrorMessage_ErrorMessage = require('./ErrorMessage.js');
|
|
2
2
|
|
|
3
3
|
//#region src/ErrorMessage/index.ts
|
|
4
|
-
var ErrorMessage_default$1 =
|
|
4
|
+
var ErrorMessage_default$1 = require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_ErrorMessage_ErrorMessage.ErrorMessage_default$1;
|
|
5
5
|
|
|
6
6
|
//#endregion
|
|
7
7
|
exports.ErrorMessage_default = ErrorMessage_default$1;
|
package/lib/FactBox/FactBox.js
CHANGED
|
@@ -118,5 +118,5 @@ const FactBox = (0, react.forwardRef)(({ children, open, onOpenChange, defaultOp
|
|
|
118
118
|
var FactBox_default = FactBox;
|
|
119
119
|
|
|
120
120
|
//#endregion
|
|
121
|
-
exports.FactBox_default = FactBox_default;
|
|
121
|
+
exports.FactBox_default$1 = FactBox_default;
|
|
122
122
|
//# sourceMappingURL=FactBox.js.map
|
package/lib/FactBox/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
const
|
|
1
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_FactBox_FactBox = require('./FactBox.js');
|
|
2
2
|
|
|
3
3
|
//#region src/FactBox/index.ts
|
|
4
|
-
var FactBox_default$1 =
|
|
4
|
+
var FactBox_default$1 = require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_FactBox_FactBox.FactBox_default$1;
|
|
5
5
|
|
|
6
6
|
//#endregion
|
|
7
7
|
exports.FactBox_default = FactBox_default$1;
|
package/lib/FileList/File.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_FileList_FileList = require('./FileList.js');
|
|
3
3
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
4
4
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
5
5
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -64,7 +64,7 @@ const File = (0, react.forwardRef)(({ title, url, fileExists, fileType, fileSize
|
|
|
64
64
|
})]
|
|
65
65
|
});
|
|
66
66
|
});
|
|
67
|
-
const FileListElement = ({ title, url, fileExists, fileType, fileSize }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
67
|
+
const FileListElement = ({ title, url, fileExists, fileType, fileSize }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_FileList_FileList.FileListItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(File, {
|
|
68
68
|
title,
|
|
69
69
|
url,
|
|
70
70
|
fileExists,
|
package/lib/FileList/File.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"File.js","names":["SafeLink","HStack","DownloadLine","Text","FileListItem"],"sources":["../../src/FileList/File.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 ComponentPropsWithRef, forwardRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { DownloadLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { HStack, styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { FileListItem } from \".\";\n\nexport interface FileProps extends ComponentPropsWithRef<\"div\"> {\n title: string;\n url: string;\n fileExists: boolean;\n fileType: string;\n fileSize?: string;\n}\n\nexport interface FileType {\n title: string;\n formats: FileFormat[];\n fileExists?: boolean;\n}\n\nexport interface FileFormat {\n url: string;\n fileType: string;\n tooltip: string;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n base: {\n textUnderlineOffset: \"2px\",\n textDecoration: \"underline\",\n _hover: {\n textDecoration: \"none\",\n },\n },\n});\n\nconst StyledHStack = styled(HStack, {\n base: {\n position: \"relative\",\n paddingBlock: \"small\",\n paddingInlineEnd: \"medium\",\n paddingInlineStart: \"small\",\n width: \"100%\",\n },\n});\n\nexport const File = forwardRef<HTMLDivElement, FileProps>(\n ({ title, url, fileExists, fileType, fileSize, ...rest }, ref) => {\n const { t } = useTranslation();\n const filename = `${title}-${url.split(\"/\").pop() ?? \"\"}`;\n const downloadUrl = `${url}?download=${filename}`;\n const tooltip = `${t(\"download\")} ${filename}`;\n\n return (\n <StyledHStack justify=\"space-between\" ref={ref} {...rest}>\n <HStack gap=\"xxsmall\">\n <DownloadLine />\n {fileExists ? (\n <StyledSafeLink unstyled css={linkOverlay.raw()} to={downloadUrl} title={tooltip}>\n {title}\n </StyledSafeLink>\n ) : (\n <Text textStyle=\"label.medium\">{title}</Text>\n )}\n <Text textStyle=\"label.large\" asChild consumeCss>\n <span>({fileType?.toUpperCase()})</span>\n </Text>\n </HStack>\n <Text textStyle=\"label.large\" asChild consumeCss>\n <span>{fileSize}</span>\n </Text>\n </StyledHStack>\n );\n },\n);\n\nexport const FileListElement = ({ title, url, fileExists, fileType, fileSize }: FileProps) => (\n <FileListItem>\n <File title={title} url={url} fileExists={fileExists} fileType={fileType} fileSize={fileSize} />\n </FileListItem>\n);\n"],"mappings":";;;;;;;;;;;;AAqCA,MAAM,iBAAiB,qCAAOA,0BAAU,EACtC,MAAM;CACJ,qBAAqB;CACrB,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,OACjB;AACF,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOC,iCAAQ,EAClC,MAAM;CACJ,UAAU;CACV,cAAc;CACd,kBAAkB;CAClB,oBAAoB;CACpB,OAAO;AACR,EACF,EAAC;AAEF,MAAa,OAAO,sBAClB,CAAC,EAAE,OAAO,KAAK,YAAY,UAAU,SAAU,GAAG,MAAM,EAAE,QAAQ;CAChE,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,YAAY,EAAE,MAAM,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,IAAI,GAAG;CACxD,MAAM,eAAe,EAAE,IAAI,YAAY,SAAS;CAChD,MAAM,WAAW,EAAE,EAAE,WAAW,CAAC,GAAG,SAAS;AAE7C,wBACE,4BAAC;EAAa,SAAQ;EAAqB;EAAK,GAAI;6BAClD,4BAACA;GAAO,KAAI;;oBACV,2BAACC,8BAAe;IACf,6BACC,2BAAC;KAAe;KAAS,KAAK,0CAAY,KAAK;KAAE,IAAI;KAAa,OAAO;eACtE;MACc,mBAEjB,2BAACC;KAAK,WAAU;eAAgB;MAAa;oBAE/C,2BAACA;KAAK,WAAU;KAAc;KAAQ;+BACpC,4BAAC;MAAK;MAAE,UAAU,aAAa;MAAC;SAAQ;MACnC;;IACA,kBACT,2BAACA;GAAK,WAAU;GAAc;GAAQ;6BACpC,2BAAC,oBAAM,WAAgB;IAClB;GACM;AAElB,EACF;AAED,MAAa,kBAAkB,CAAC,EAAE,OAAO,KAAK,YAAY,UAAU,UAAqB,qBACvF,2BAACC,
|
|
1
|
+
{"version":3,"file":"File.js","names":["SafeLink","HStack","DownloadLine","Text","FileListItem"],"sources":["../../src/FileList/File.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 ComponentPropsWithRef, forwardRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { DownloadLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { HStack, styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { FileListItem } from \".\";\n\nexport interface FileProps extends ComponentPropsWithRef<\"div\"> {\n title: string;\n url: string;\n fileExists: boolean;\n fileType: string;\n fileSize?: string;\n}\n\nexport interface FileType {\n title: string;\n formats: FileFormat[];\n fileExists?: boolean;\n}\n\nexport interface FileFormat {\n url: string;\n fileType: string;\n tooltip: string;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n base: {\n textUnderlineOffset: \"2px\",\n textDecoration: \"underline\",\n _hover: {\n textDecoration: \"none\",\n },\n },\n});\n\nconst StyledHStack = styled(HStack, {\n base: {\n position: \"relative\",\n paddingBlock: \"small\",\n paddingInlineEnd: \"medium\",\n paddingInlineStart: \"small\",\n width: \"100%\",\n },\n});\n\nexport const File = forwardRef<HTMLDivElement, FileProps>(\n ({ title, url, fileExists, fileType, fileSize, ...rest }, ref) => {\n const { t } = useTranslation();\n const filename = `${title}-${url.split(\"/\").pop() ?? \"\"}`;\n const downloadUrl = `${url}?download=${filename}`;\n const tooltip = `${t(\"download\")} ${filename}`;\n\n return (\n <StyledHStack justify=\"space-between\" ref={ref} {...rest}>\n <HStack gap=\"xxsmall\">\n <DownloadLine />\n {fileExists ? (\n <StyledSafeLink unstyled css={linkOverlay.raw()} to={downloadUrl} title={tooltip}>\n {title}\n </StyledSafeLink>\n ) : (\n <Text textStyle=\"label.medium\">{title}</Text>\n )}\n <Text textStyle=\"label.large\" asChild consumeCss>\n <span>({fileType?.toUpperCase()})</span>\n </Text>\n </HStack>\n <Text textStyle=\"label.large\" asChild consumeCss>\n <span>{fileSize}</span>\n </Text>\n </StyledHStack>\n );\n },\n);\n\nexport const FileListElement = ({ title, url, fileExists, fileType, fileSize }: FileProps) => (\n <FileListItem>\n <File title={title} url={url} fileExists={fileExists} fileType={fileType} fileSize={fileSize} />\n </FileListItem>\n);\n"],"mappings":";;;;;;;;;;;;AAqCA,MAAM,iBAAiB,qCAAOA,0BAAU,EACtC,MAAM;CACJ,qBAAqB;CACrB,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,OACjB;AACF,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOC,iCAAQ,EAClC,MAAM;CACJ,UAAU;CACV,cAAc;CACd,kBAAkB;CAClB,oBAAoB;CACpB,OAAO;AACR,EACF,EAAC;AAEF,MAAa,OAAO,sBAClB,CAAC,EAAE,OAAO,KAAK,YAAY,UAAU,SAAU,GAAG,MAAM,EAAE,QAAQ;CAChE,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,YAAY,EAAE,MAAM,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,IAAI,GAAG;CACxD,MAAM,eAAe,EAAE,IAAI,YAAY,SAAS;CAChD,MAAM,WAAW,EAAE,EAAE,WAAW,CAAC,GAAG,SAAS;AAE7C,wBACE,4BAAC;EAAa,SAAQ;EAAqB;EAAK,GAAI;6BAClD,4BAACA;GAAO,KAAI;;oBACV,2BAACC,8BAAe;IACf,6BACC,2BAAC;KAAe;KAAS,KAAK,0CAAY,KAAK;KAAE,IAAI;KAAa,OAAO;eACtE;MACc,mBAEjB,2BAACC;KAAK,WAAU;eAAgB;MAAa;oBAE/C,2BAACA;KAAK,WAAU;KAAc;KAAQ;+BACpC,4BAAC;MAAK;MAAE,UAAU,aAAa;MAAC;SAAQ;MACnC;;IACA,kBACT,2BAACA;GAAK,WAAU;GAAc;GAAQ;6BACpC,2BAAC,oBAAM,WAAgB;IAClB;GACM;AAElB,EACF;AAED,MAAa,kBAAkB,CAAC,EAAE,OAAO,KAAK,YAAY,UAAU,UAAqB,qBACvF,2BAACC,kIACC,2BAAC;CAAY;CAAY;CAAiB;CAAsB;CAAoB;EAAY,GACnF"}
|
package/lib/Gloss/Gloss.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
3
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_AudioPlayer_SpeechControl = require('../AudioPlayer/SpeechControl.js');
|
|
3
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Gloss_GlossExample = require('./GlossExample.js');
|
|
4
4
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
5
5
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
6
6
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -105,7 +105,7 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }) =
|
|
|
105
105
|
children: t(`wordClass.${glossData.wordClass}`).toLowerCase()
|
|
106
106
|
})
|
|
107
107
|
})
|
|
108
|
-
] }), !!audio?.src && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
108
|
+
] }), !!audio?.src && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_AudioPlayer_SpeechControl.SpeechControl_default, {
|
|
109
109
|
src: audio.src,
|
|
110
110
|
title: audio.title,
|
|
111
111
|
type: "gloss"
|
|
@@ -130,7 +130,7 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }) =
|
|
|
130
130
|
})
|
|
131
131
|
})
|
|
132
132
|
})] }),
|
|
133
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAccordionItemContent, { children: filteredExamples.map((examples, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
133
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAccordionItemContent, { children: filteredExamples.map((examples, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Gloss_GlossExample.GlossExample_default, {
|
|
134
134
|
examples,
|
|
135
135
|
originalLanguage: glossData.originalLanguage
|
|
136
136
|
}, `gloss-example-${index}`)) })
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_LicenseLink = require('./LicenseLink.js');
|
|
3
3
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
4
4
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
5
5
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -110,7 +110,7 @@ const LicenseContainerContent = ({ children, copyright, type }) => {
|
|
|
110
110
|
children,
|
|
111
111
|
` ${t(`embed.type.${type}`)}${captionAuthors.length ? ": " : ""}`,
|
|
112
112
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: captionAuthors.map((author) => author.name).join(", ") }),
|
|
113
|
-
license ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [" / ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
113
|
+
license ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [" / ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_LicenseLink.LicenseLink, {
|
|
114
114
|
license,
|
|
115
115
|
hideLink: !isOpen && !!children
|
|
116
116
|
})] }) : null
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_utils_relativeUrl = require('../utils/relativeUrl.js');
|
|
3
3
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
4
4
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
5
5
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -44,7 +44,7 @@ const StyledDateContainer = (0, __ndla_styled_system_jsx.styled)("div", { base:
|
|
|
44
44
|
} });
|
|
45
45
|
const StyledCalendarEd = (0, __ndla_styled_system_jsx.styled)(__ndla_icons.CalendarLine, { base: { color: "icon.strong" } });
|
|
46
46
|
const LinkBlock = ({ title, articleLanguage, date, url, path }) => {
|
|
47
|
-
const href =
|
|
47
|
+
const href = require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_utils_relativeUrl.getPossiblyRelativeUrl(url, path);
|
|
48
48
|
const formattedDate = (0, react.useMemo)(() => {
|
|
49
49
|
if (!date) return null;
|
|
50
50
|
return new Intl.DateTimeFormat(articleLanguage, {
|