From c97ebba4f16a55919833c8e917f608b0c6b0d32e Mon Sep 17 00:00:00 2001 From: Troels Ugilt Jensen <6103205+tuj@users.noreply.github.com> Date: Fri, 23 Sep 2022 12:34:22 +0200 Subject: [PATCH 1/6] AR-849: Added images to text-image --- package-lock.json | 20 ++++ package.json | 1 + src/image-text/image-text.js | 165 +++++++++++++++++++++++++-------- src/image-text/image-text.scss | 17 ++++ src/slides.js | 39 ++++++++ 5 files changed, 201 insertions(+), 41 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0d3b22a1..5e60a1a7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4278,6 +4278,15 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "dom-serializer": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz", @@ -9954,6 +9963,17 @@ } } }, + "react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", diff --git a/package.json b/package.json index 63791bb6..b60d657b 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "react-router-dom": "^6.0.2", "react-svg-loader": "^3.0.3", "react-test-renderer": "^17.0.2", + "react-transition-group": "^4.4.5", "sass": "^1.42.1", "sass-loader": "^12.1.0", "style-loader": "^2.0.0", diff --git a/src/image-text/image-text.js b/src/image-text/image-text.js index bfbd1a49..af9a37ce 100644 --- a/src/image-text/image-text.js +++ b/src/image-text/image-text.js @@ -1,9 +1,10 @@ -import React, { useEffect } from "react"; +import React, { createRef, useEffect, useRef, useState } from "react"; import parse from "html-react-parser"; import DOMPurify from "dompurify"; import PropTypes from "prop-types"; +import { CSSTransition, TransitionGroup } from "react-transition-group"; import BaseSlideExecution from "../base-slide-execution"; -import { getFirstMediaUrlFromField, ThemeStyles } from "../slide-util"; +import { getAllMediaUrlsFromField, ThemeStyles } from "../slide-util"; import "../global-styles.css"; import "./image-text.scss"; @@ -19,6 +20,20 @@ import "./image-text.scss"; * @returns {object} The component. */ function ImageText({ slide, content, run, slideDone, executionId }) { + const imageTimeoutRef = useRef(); + const [images, setImages] = useState([]); + const [currentImage, setCurrentImage] = useState(); + const [rootClasses, setRootClasses] = useState([]); + + const [themeCss, setThemeCss] = useState(null); + + // Set theme styles. + useEffect(() => { + if (slide?.themeData?.css) { + setThemeCss(); + } + }, [slide]); + // Styling from content const { separator, @@ -29,8 +44,8 @@ function ImageText({ slide, content, run, slideDone, executionId }) { fontSize, shadow, } = content || {}; + let boxClasses = "box"; - const rootClasses = ["template-image-text", fontSize]; // Styling objects const rootStyle = {}; @@ -51,24 +66,21 @@ function ImageText({ slide, content, run, slideDone, executionId }) { // Display separator depends on whether the slide is reversed. const displaySeparator = separator && !reversed; - /** Setup slide run function. */ - const slideExecution = new BaseSlideExecution(slide, slideDone); - useEffect(() => { - if (run) { - slideExecution.start(duration); - } - - return function cleanup() { - slideExecution.stop(); - }; - }, [run]); + const changeImage = (newIndex) => { + if (newIndex < images.length) { + setCurrentImage(images[newIndex]); - const imageUrl = getFirstMediaUrlFromField(slide.mediaData, content.image); + if (newIndex < images.length - 1) { + imageTimeoutRef.current = setTimeout( + () => changeImage(newIndex + 1), + duration / images.length + ); + } + } + }; // Set background image. - if (imageUrl) { - rootStyle.backgroundImage = `url("${imageUrl}")`; - } else { + if (!(images?.length > 0)) { boxClasses = `${boxClasses} full-screen`; } @@ -85,32 +97,103 @@ function ImageText({ slide, content, run, slideDone, executionId }) { imageTextStyle.color = textColor; } - // Position text-box. - if (boxAlign === "left" || boxAlign === "right") { - rootClasses.push("column"); - } - if (boxAlign === "bottom" || boxAlign === "right") { - rootClasses.push("flex-end"); - } - if (reversed) { - rootClasses.push("reversed"); - } - if (boxMargin || reversed) { - rootClasses.push("box-margin"); - } - if (halfSize && !reversed) { - rootClasses.push("half-size"); - } - if (separator && !reversed) { - rootClasses.push("animated-header"); - } - if (shadow) { - rootClasses.push("shadow"); - } + useEffect(() => { + const newRootClasses = ["template-image-text", fontSize]; + + // Position text-box. + if (boxAlign === "left" || boxAlign === "right") { + newRootClasses.push("column"); + } + if (boxAlign === "bottom" || boxAlign === "right") { + newRootClasses.push("flex-end"); + } + if (reversed) { + newRootClasses.push("reversed"); + } + if (boxMargin || reversed) { + newRootClasses.push("box-margin"); + } + if (halfSize && !reversed) { + newRootClasses.push("half-size"); + } + if (separator && !reversed) { + newRootClasses.push("animated-header"); + } + if (shadow) { + newRootClasses.push("shadow"); + } + + setRootClasses(newRootClasses); + }, []); + + /** Setup slide run function. */ + const slideExecution = new BaseSlideExecution(slide, slideDone); + useEffect(() => { + if (run) { + const imageUrls = getAllMediaUrlsFromField( + slide.mediaData, + content.image + ); + + if (imageUrls?.length > 0) { + const newImages = imageUrls.map((url) => { + return { + url, + nodeRef: createRef(), + }; + }); + + setImages(newImages); + setCurrentImage(newImages[0]); + + // If more than one image, start image changes. + if (newImages?.length > 1) { + imageTimeoutRef.current = setTimeout( + () => changeImage(1), + duration / imageUrls.length - 250 + ); + } + } + + slideExecution.start(duration); + } + + return function cleanup() { + slideExecution.stop(); + + if (imageTimeoutRef.current) { + clearTimeout(imageTimeoutRef.current); + } + }; + }, [run]); + + const imageStyles = (url) => { + return { + backgroundImage: url ? `url("${url}")` : "", + }; + }; return ( <>
+
+ + {currentImage && ( + +
+ + )} + +
{(title || text) && (
{title && ( @@ -129,7 +212,7 @@ function ImageText({ slide, content, run, slideDone, executionId }) {
)}
- + {themeCss} ); } diff --git a/src/image-text/image-text.scss b/src/image-text/image-text.scss index f4c2d725..a5009cff 100644 --- a/src/image-text/image-text.scss +++ b/src/image-text/image-text.scss @@ -150,6 +150,23 @@ font-size: var(--font-size-h1); } } + + .background-image { + z-index: -1; + position: absolute; + background-size: cover; + top: 0; + left: 0; + right: 0; + bottom: 0; + } + .background-image-exit { + opacity: 1; + } + .background-image-exit-active { + opacity: 0; + transition: opacity 1000ms linear; + } } @keyframes h1-underline { diff --git a/src/slides.js b/src/slides.js index 1d6a1dee..cb747b94 100644 --- a/src/slides.js +++ b/src/slides.js @@ -735,6 +735,45 @@ const slides = [ image: ["/v1/media/00000000000000000000000001"], }, }, + { + id: "slide14-image-text-multiple-images", + type: "image-text", + themeFile: "themes/dokk1.css", + mediaData: { + "/v1/media/00000000000000000000000001": { + assets: { + uri: "/fixtures/images/mountain1.jpeg", + }, + }, + "/v1/media/00000000000000000000000002": { + assets: { + uri: "/fixtures/images/mountain2.jpeg", + }, + }, + "/v1/media/00000000000000000000000003": { + assets: { + uri: "/fixtures/images/mountain3.jpeg", + }, + }, + }, + content: { + duration: 15000, + title: "Slide 14", + text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", + image: [ + "/v1/media/00000000000000000000000001", + "/v1/media/00000000000000000000000002", + "/v1/media/00000000000000000000000003", + ], + boxAlign: "right", + boxMargin: false, + shadow: true, + separator: true, + halfSize: true, + reversed: false, + fontSize: "font-size-m", + }, + }, ]; export default slides; From 87b841ebaf2043d6c2de7c41473dabd76d93723c Mon Sep 17 00:00:00 2001 From: Troels Ugilt Jensen <6103205+tuj@users.noreply.github.com> Date: Fri, 23 Sep 2022 12:40:58 +0200 Subject: [PATCH 2/6] AR-849: Fixed separator being themeable --- src/image-text/image-text.js | 23 +++++++++-------------- src/image-text/image-text.scss | 4 ++++ 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/src/image-text/image-text.js b/src/image-text/image-text.js index af9a37ce..74a90a8e 100644 --- a/src/image-text/image-text.js +++ b/src/image-text/image-text.js @@ -167,12 +167,6 @@ function ImageText({ slide, content, run, slideDone, executionId }) { }; }, [run]); - const imageStyles = (url) => { - return { - backgroundImage: url ? `url("${url}")` : "", - }; - }; - return ( <>
@@ -186,7 +180,11 @@ function ImageText({ slide, content, run, slideDone, executionId }) { classNames="background-image" >
@@ -200,15 +198,12 @@ function ImageText({ slide, content, run, slideDone, executionId }) {

{title} {/* Todo theme the color of the below */} - {displaySeparator && ( -
- )} + {displaySeparator &&
}

)} - {text &&
{parse(sanitizedText)}
} + {sanitizedText && ( +
{parse(sanitizedText)}
+ )}
)}
diff --git a/src/image-text/image-text.scss b/src/image-text/image-text.scss index a5009cff..09f74dcf 100644 --- a/src/image-text/image-text.scss +++ b/src/image-text/image-text.scss @@ -167,6 +167,10 @@ opacity: 0; transition: opacity 1000ms linear; } + + .separator { + background-color: #ee0043; + } } @keyframes h1-underline { From 0fc92f4ea32fd494872974b422577aa379ad30ef Mon Sep 17 00:00:00 2001 From: Troels Ugilt Jensen <6103205+tuj@users.noreply.github.com> Date: Fri, 23 Sep 2022 12:51:16 +0200 Subject: [PATCH 3/6] AR-849: Built image-text --- build/image-text-config-develop.json | 4 ++-- build/image-text-config-main.json | 4 ++-- build/image-text.js | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/build/image-text-config-develop.json b/build/image-text-config-develop.json index cc4fcfff..ebe767c3 100644 --- a/build/image-text-config-develop.json +++ b/build/image-text-config-develop.json @@ -4,8 +4,8 @@ "id": "01FP2SNGFN0BZQH03KCBXHKYHG", "description": "Mulighed for at sætte billede og tekst, med forskellige visninger.", "resources": { - "component": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/image-text.js?ts=1663582803896", - "admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/image-text-admin.json?ts=1663582803896", + "component": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/image-text.js?ts=1663930206017", + "admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/image-text-admin.json?ts=1663930206017", "schema": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/image-text-schema.json", "assets": [], "options": {}, diff --git a/build/image-text-config-main.json b/build/image-text-config-main.json index 01699911..c10d40ba 100644 --- a/build/image-text-config-main.json +++ b/build/image-text-config-main.json @@ -4,8 +4,8 @@ "id": "01FP2SNGFN0BZQH03KCBXHKYHG", "description": "Mulighed for at sætte billede og tekst, med forskellige visninger.", "resources": { - "component": "https://raw.githubusercontent.com/os2display/display-templates/main/build/image-text.js?ts=1663582803896", - "admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/image-text-admin.json?ts=1663582803896", + "component": "https://raw.githubusercontent.com/os2display/display-templates/main/build/image-text.js?ts=1663930206017", + "admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/image-text-admin.json?ts=1663930206017", "schema": "https://raw.githubusercontent.com/os2display/display-templates/main/build/image-text-schema.json", "assets": [], "options": {}, diff --git a/build/image-text.js b/build/image-text.js index c56e1454..68191b6a 100644 --- a/build/image-text.js +++ b/build/image-text.js @@ -1,2 +1,2 @@ /*! For license information please see image-text.js.LICENSE.txt */ -(()=>{var e={6215:(e,t,r)=>{"use strict";r.d(t,{Z:()=>i});var n=r(3645),o=r.n(n)()((function(e){return e[1]}));o.push([e.id,'.slide{--color-white: #fff;--color-grey-100: hsl(0deg 0% 95%);--color-grey-200: hsl(0deg 0% 85%);--color-grey-300: hsl(0deg 0% 80%);--color-grey-400: hsl(0deg 0% 75%);--color-grey-500: hsl(0deg 0% 70%);--color-grey-600: hsl(0deg 0% 40%);--color-grey-700: hsl(0deg 0% 30%);--color-grey-800: hsl(0deg 0% 20%);--color-grey-900: hsl(0deg 0% 10%);--color-black: #000;--color-blue: hsl(219deg 89% 57%);--color-indigo: indigo;--color-purple: purple;--color-pink: pink;--color-red: red;--color-orange: orange;--color-yellow: yellow;--color-green: green;--color-teal: teal;--color-cyan: cyan;--color-gray: var(--color-grey-500);--color-gray-dark: var(--color-grey-900);--color-primary: var(--color-blue);--color-secondary: var(--color-orange);--color-success: var(--color-green);--color-info: var(--color-teal);--color-warning: var(--color-yellow);--color-danger: var(--color-red);--color-light: var(--color-white);--color-dark: var(--color-black);--bg-light: var(--color-light);--bg-dark: var(--color-dark);--bg-primary: var(--color-primary);--bg-secondary: var(--color-secondary);--bg-transparent: transparent;--text-light: var(--color-light);--text-dark: var(--color-dark);--font-family-base: system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-bold: 700;--line-height-base: 1.5;--line-height-sm: 1.25;--line-height-lg: 2;--font-size-base: 1rem;--font-size-multiplier-050: 0.5;--font-size-multiplier-075: 0.75;--font-size-multiplier-090: 0.9;--font-size-multiplier-125: 1.25;--font-size-multiplier-150: 1.5;--font-size-multiplier-175: 1.75;--font-size-multiplier-200: 2;--font-size-multiplier-250: 2.5;--font-size-xs: calc(var(--font-size-base) * var(--font-size-multiplier-050));--font-size-sm: calc(var(--font-size-base) * var(--font-size-multiplier-075));--font-size-m: calc(var(--font-size-base) * 1);--font-size-lg: calc(var(--font-size-base) * var(--font-size-multiplier-125));--font-size-xl: calc(var(--font-size-base) * var(--font-size-multiplier-150));--h1-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-250));--h2-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-200));--h3-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-175));--h4-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-150));--h5-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-125));--h6-font-size: calc(var(--font-size-base));--spacer: 12px;--margin-size-base: calc(var(--spacer) * 3);--padding-size-base: calc(var(--spacer) * 3);--box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);--box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);--box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);--border-size: 1px;--border-style: solid;--border-color: var(--color-grey-900);--border: var(--border-size) var(--border-style) var(--border-color);--background-color: var(--bg-light, hsl(0deg, 0%, 100%));--background-color-secondary: var(--color-grey-100, hsl(0deg, 0%, 95%));--text-color: var(--text-dark, hsl(0deg, 0%, 0%))}*,*::before,*::after{box-sizing:border-box}html{font-size:1.125rem;height:100%;background-color:var(--background-color);color:var(--text-color)}body{margin:0;height:100%}@keyframes h1-underline{0%{opacity:0;width:100%}40%{opacity:1;width:100%;margin-top:.938em;height:.375em}70%{opacity:1;width:100%;margin-top:.625em;height:.2em}100%{opacity:1;width:5em;margin-top:.625em}}.color-scheme-dark .slide{--background-color: var(--bg-dark, hsl(0deg, 0%, 10%));--background-color-secondary: var(--bg-dark-secondary, hsl(0deg, 0%, 20%));--text-color: var(--text-light, hsl(0deg, 0%, 100%));--border-color: var(--color-light);--color-grey-100: hsl(0deg 0% 10%);--color-grey-200: hsl(0deg 0% 15%);--color-grey-300: hsl(0deg 0% 20%);--color-grey-400: hsl(0deg 0% 25%);--color-grey-500: hsl(0deg 0% 30%);--color-grey-600: hsl(0deg 0% 45%);--color-grey-700: hsl(0deg 0% 60%);--color-grey-800: hsl(0deg 0% 75%);--color-grey-900: hsl(0deg 0% 90%)}@media screen and (min-width: 1921px)and (orientation: landscape){.slide{--font-size-base: 2rem}}@media screen and (min-width: 1081px)and (orientation: portrait){.slide{--font-size-base: 2rem}}.slide .font-size-xs{--font-size-base: var(--font-size-xs);--h1-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-250));--h2-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-200));--h3-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-175));--h4-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-150));--h5-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-125))}.slide .font-size-s{--font-size-base: var(--font-size-sm);--h1-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-250));--h2-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-200));--h3-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-175));--h4-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-150));--h5-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-125))}.slide .font-size-m{--font-size-base: var(--font-size-m);--h1-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-250));--h2-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-200));--h3-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-175));--h4-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-150));--h5-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-125))}.slide .font-size-lg{--font-size-base: var(--font-size-lg);--h1-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-250));--h2-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-200));--h3-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-175));--h4-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-150));--h5-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-125))}.slide .font-size-xl{--font-size-base: var(--font-size-xl);--h1-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-250));--h2-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-200));--h3-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-175));--h4-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-150));--h5-font-size: calc(var(--font-size-base) * var(--font-size-multiplier-125))}',""]);const i=o},1523:(e,t,r)=>{"use strict";r.d(t,{Z:()=>i});var n=r(3645),o=r.n(n)()((function(e){return e[1]}));o.push([e.id,".template-image-text{height:100%;width:100%;overflow:hidden;background-size:cover;background-position:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-content:stretch;align-items:flex-start;font-size:var(--font-size-base)}.template-image-text .box{padding:2%;order:0;flex:1 0 auto;align-self:auto;background-color:var(--background-color);color:var(--text-color);width:40%}.template-image-text .box .text{margin-top:var(--spacer)}.template-image-text .box.full-screen{width:100%;height:100%}.template-image-text .box.xs{font-size:var(--font-size-xs)}.template-image-text .box.s{font-size:var(--font-size-sm)}.template-image-text .box.m{font-size:var(--font-size-base)}.template-image-text .box.l{font-size:var(--font-size-lg)}.template-image-text .box.xl{font-size:var(--font-size-xl)}.template-image-text .box h1{margin-top:0}.template-image-text.box-margin .box{margin:5%}.template-image-text.flex-end .box{align-self:flex-end}.template-image-text.column{flex-direction:column}.template-image-text.half-size .box{flex:none}.template-image-text.shadow .box{box-shadow:var(--box-shadow-lg)}.template-image-text.animated-header .box{box-shadow:var(--box-shadow-lg);display:flex;flex-direction:column}.template-image-text.animated-header h1{position:relative;display:inline-block;padding-bottom:2%}.template-image-text.animated-header h1 .separator{opacity:0;margin-top:5px !important;position:absolute;height:.2em;width:100%;transition:width .3s ease-out;animation:.7s normal .5s forwards 1 h1-underline ease-out}.template-image-text.reversed{display:flex}.template-image-text.reversed .text{order:1}.template-image-text.reversed .box{flex-direction:column;padding:0;height:90%;justify-content:space-between;background-color:transparent;font-size:var(--font-size-h2);display:flex}.template-image-text.reversed h1{order:2;font-size:var(--font-size-h1)}@keyframes h1-underline{0%{opacity:0;width:100%}40%{opacity:1;width:100%;margin-top:.938em;height:.375em}70%{opacity:1;width:100%;margin-top:.625em;height:.2em}100%{opacity:1;width:5em;margin-top:.625em}}",""]);const i=o},3645:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var r=e(t);return t[2]?"@media ".concat(t[2]," {").concat(r,"}"):r})).join("")},t.i=function(e,r,n){"string"==typeof e&&(e=[[null,e,""]]);var o={};if(n)for(var i=0;i{"use strict";var r;Object.defineProperty(t,"__esModule",{value:!0}),t.Doctype=t.CDATA=t.Tag=t.Style=t.Script=t.Comment=t.Directive=t.Text=t.Root=t.isTag=t.ElementType=void 0,function(e){e.Root="root",e.Text="text",e.Directive="directive",e.Comment="comment",e.Script="script",e.Style="style",e.Tag="tag",e.CDATA="cdata",e.Doctype="doctype"}(r=t.ElementType||(t.ElementType={})),t.isTag=function(e){return e.type===r.Tag||e.type===r.Script||e.type===r.Style},t.Root=r.Root,t.Text=r.Text,t.Directive=r.Directive,t.Comment=r.Comment,t.Script=r.Script,t.Style=r.Style,t.Tag=r.Tag,t.CDATA=r.CDATA,t.Doctype=r.Doctype},7790:function(e,t,r){"use strict";var n,o=this&&this.__extends||(n=function(e,t){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},n(e,t)},function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}),i=this&&this.__assign||function(){return i=Object.assign||function(e){for(var t,r=1,n=arguments.length;r0?this.children[this.children.length-1]:null},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"childNodes",{get:function(){return this.children},set:function(e){this.children=e},enumerable:!1,configurable:!0}),t}(l);t.NodeWithChildren=p;var m=function(e){function t(t){return e.call(this,a.ElementType.Root,t)||this}return o(t,e),t}(p);t.Document=m;var h=function(e){function t(t,r,n,o){void 0===n&&(n=[]),void 0===o&&(o="script"===t?a.ElementType.Script:"style"===t?a.ElementType.Style:a.ElementType.Tag);var i=e.call(this,o,n)||this;return i.name=t,i.attribs=r,i}return o(t,e),Object.defineProperty(t.prototype,"tagName",{get:function(){return this.name},set:function(e){this.name=e},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"attributes",{get:function(){var e=this;return Object.keys(this.attribs).map((function(t){var r,n;return{name:t,value:e.attribs[t],namespace:null===(r=e["x-attribsNamespace"])||void 0===r?void 0:r[t],prefix:null===(n=e["x-attribsPrefix"])||void 0===n?void 0:n[t]}}))},enumerable:!1,configurable:!0}),t}(p);function g(e){return(0,a.isTag)(e)}function y(e){return e.type===a.ElementType.CDATA}function v(e){return e.type===a.ElementType.Text}function b(e){return e.type===a.ElementType.Comment}function x(e){return e.type===a.ElementType.Directive}function w(e){return e.type===a.ElementType.Root}function k(e,t){var r;if(void 0===t&&(t=!1),v(e))r=new u(e.data);else if(b(e))r=new f(e.data);else if(g(e)){var n=t?S(e.children):[],o=new h(e.name,i({},e.attribs),n);n.forEach((function(e){return e.parent=o})),e["x-attribsNamespace"]&&(o["x-attribsNamespace"]=i({},e["x-attribsNamespace"])),e["x-attribsPrefix"]&&(o["x-attribsPrefix"]=i({},e["x-attribsPrefix"])),r=o}else if(y(e)){n=t?S(e.children):[];var s=new p(a.ElementType.CDATA,n);n.forEach((function(e){return e.parent=s})),r=s}else if(w(e)){n=t?S(e.children):[];var l=new m(n);n.forEach((function(e){return e.parent=l})),e["x-mode"]&&(l["x-mode"]=e["x-mode"]),r=l}else{if(!x(e))throw new Error("Not implemented yet: "+e.type);var c=new d(e.name,e.data);null!=e["x-name"]&&(c["x-name"]=e["x-name"],c["x-publicId"]=e["x-publicId"],c["x-systemId"]=e["x-systemId"]),r=c}return r.startIndex=e.startIndex,r.endIndex=e.endIndex,r}function S(e){for(var t=e.map((function(e){return k(e,!0)})),r=1;r1?r-1:0),o=1;o/gm),F=a(/^data-[\-\w.\u00B7-\uFFFF]/),H=a(/^aria-[\-\w]+$/),B=a(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i),U=a(/^(?:\w+script|data):/i),$=a(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g),G="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};function W(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t0&&void 0!==arguments[0]?arguments[0]:q(),r=function(t){return e(t)};if(r.version="2.3.3",r.removed=[],!t||!t.document||9!==t.document.nodeType)return r.isSupported=!1,r;var n=t.document,o=t.document,a=t.DocumentFragment,s=t.HTMLTemplateElement,l=t.Node,c=t.Element,u=t.NodeFilter,f=t.NamedNodeMap,k=void 0===f?t.NamedNodeMap||t.MozNamedAttrMap:f,Y=t.Text,X=t.Comment,Z=t.DOMParser,K=t.trustedTypes,J=c.prototype,Q=T(J,"cloneNode"),ee=T(J,"nextSibling"),te=T(J,"childNodes"),re=T(J,"parentNode");if("function"==typeof s){var ne=o.createElement("template");ne.content&&ne.content.ownerDocument&&(o=ne.content.ownerDocument)}var oe=V(K,n),ie=oe&&Le?oe.createHTML(""):"",ae=o,se=ae.implementation,le=ae.createNodeIterator,ce=ae.createDocumentFragment,ue=ae.getElementsByTagName,fe=n.importNode,de={};try{de=A(o).documentMode?o.documentMode:{}}catch(e){}var pe={};r.isSupported="function"==typeof re&&se&&void 0!==se.createHTMLDocument&&9!==de;var me=L,he=j,ge=F,ye=H,ve=U,be=$,xe=B,we=null,ke=S({},[].concat(W(C),W(E),W(z),W(R),W(I))),Se=null,Ae=S({},[].concat(W(_),W(N),W(D),W(M))),Te=null,Ce=null,Ee=!0,ze=!0,Oe=!1,Re=!1,Pe=!1,Ie=!1,_e=!1,Ne=!1,De=!1,Me=!0,Le=!1,je=!0,Fe=!0,He=!1,Be={},Ue=null,$e=S({},["annotation-xml","audio","colgroup","desc","foreignobject","head","iframe","math","mi","mn","mo","ms","mtext","noembed","noframes","noscript","plaintext","script","style","svg","template","thead","title","video","xmp"]),Ge=null,We=S({},["audio","video","img","source","image","track"]),qe=null,Ve=S({},["alt","class","for","id","label","name","pattern","placeholder","role","summary","title","value","style","xmlns"]),Ye="http://www.w3.org/1998/Math/MathML",Xe="http://www.w3.org/2000/svg",Ze="http://www.w3.org/1999/xhtml",Ke=Ze,Je=!1,Qe=void 0,et=["application/xhtml+xml","text/html"],tt="text/html",rt=void 0,nt=null,ot=o.createElement("form"),it=function(e){nt&&nt===e||(e&&"object"===(void 0===e?"undefined":G(e))||(e={}),e=A(e),we="ALLOWED_TAGS"in e?S({},e.ALLOWED_TAGS):ke,Se="ALLOWED_ATTR"in e?S({},e.ALLOWED_ATTR):Ae,qe="ADD_URI_SAFE_ATTR"in e?S(A(Ve),e.ADD_URI_SAFE_ATTR):Ve,Ge="ADD_DATA_URI_TAGS"in e?S(A(We),e.ADD_DATA_URI_TAGS):We,Ue="FORBID_CONTENTS"in e?S({},e.FORBID_CONTENTS):$e,Te="FORBID_TAGS"in e?S({},e.FORBID_TAGS):{},Ce="FORBID_ATTR"in e?S({},e.FORBID_ATTR):{},Be="USE_PROFILES"in e&&e.USE_PROFILES,Ee=!1!==e.ALLOW_ARIA_ATTR,ze=!1!==e.ALLOW_DATA_ATTR,Oe=e.ALLOW_UNKNOWN_PROTOCOLS||!1,Re=e.SAFE_FOR_TEMPLATES||!1,Pe=e.WHOLE_DOCUMENT||!1,Ne=e.RETURN_DOM||!1,De=e.RETURN_DOM_FRAGMENT||!1,Me=!1!==e.RETURN_DOM_IMPORT,Le=e.RETURN_TRUSTED_TYPE||!1,_e=e.FORCE_BODY||!1,je=!1!==e.SANITIZE_DOM,Fe=!1!==e.KEEP_CONTENT,He=e.IN_PLACE||!1,xe=e.ALLOWED_URI_REGEXP||xe,Ke=e.NAMESPACE||Ze,Qe=Qe=-1===et.indexOf(e.PARSER_MEDIA_TYPE)?tt:e.PARSER_MEDIA_TYPE,rt="application/xhtml+xml"===Qe?function(e){return e}:h,Re&&(ze=!1),De&&(Ne=!0),Be&&(we=S({},[].concat(W(I))),Se=[],!0===Be.html&&(S(we,C),S(Se,_)),!0===Be.svg&&(S(we,E),S(Se,N),S(Se,M)),!0===Be.svgFilters&&(S(we,z),S(Se,N),S(Se,M)),!0===Be.mathMl&&(S(we,R),S(Se,D),S(Se,M))),e.ADD_TAGS&&(we===ke&&(we=A(we)),S(we,e.ADD_TAGS)),e.ADD_ATTR&&(Se===Ae&&(Se=A(Se)),S(Se,e.ADD_ATTR)),e.ADD_URI_SAFE_ATTR&&S(qe,e.ADD_URI_SAFE_ATTR),e.FORBID_CONTENTS&&(Ue===$e&&(Ue=A(Ue)),S(Ue,e.FORBID_CONTENTS)),Fe&&(we["#text"]=!0),Pe&&S(we,["html","head","body"]),we.table&&(S(we,["tbody"]),delete Te.tbody),i&&i(e),nt=e)},at=S({},["mi","mo","mn","ms","mtext"]),st=S({},["foreignobject","desc","title","annotation-xml"]),lt=S({},E);S(lt,z),S(lt,O);var ct=S({},R);S(ct,P);var ut=function(e){var t=re(e);t&&t.tagName||(t={namespaceURI:Ze,tagName:"template"});var r=h(e.tagName),n=h(t.tagName);if(e.namespaceURI===Xe)return t.namespaceURI===Ze?"svg"===r:t.namespaceURI===Ye?"svg"===r&&("annotation-xml"===n||at[n]):Boolean(lt[r]);if(e.namespaceURI===Ye)return t.namespaceURI===Ze?"math"===r:t.namespaceURI===Xe?"math"===r&&st[n]:Boolean(ct[r]);if(e.namespaceURI===Ze){if(t.namespaceURI===Xe&&!st[n])return!1;if(t.namespaceURI===Ye&&!at[n])return!1;var o=S({},["title","style","font","a","script"]);return!ct[r]&&(o[r]||!lt[r])}return!1},ft=function(e){m(r.removed,{element:e});try{e.parentNode.removeChild(e)}catch(t){try{e.outerHTML=ie}catch(t){e.remove()}}},dt=function(e,t){try{m(r.removed,{attribute:t.getAttributeNode(e),from:t})}catch(e){m(r.removed,{attribute:null,from:t})}if(t.removeAttribute(e),"is"===e&&!Se[e])if(Ne||De)try{ft(t)}catch(e){}else try{t.setAttribute(e,"")}catch(e){}},pt=function(e){var t=void 0,r=void 0;if(_e)e=""+e;else{var n=g(e,/^[\r\n\t ]+/);r=n&&n[0]}"application/xhtml+xml"===Qe&&(e=''+e+"");var i=oe?oe.createHTML(e):e;if(Ke===Ze)try{t=(new Z).parseFromString(i,Qe)}catch(e){}if(!t||!t.documentElement){t=se.createDocument(Ke,"template",null);try{t.documentElement.innerHTML=Je?"":i}catch(e){}}var a=t.body||t.documentElement;return e&&r&&a.insertBefore(o.createTextNode(r),a.childNodes[0]||null),Ke===Ze?ue.call(t,Pe?"html":"body")[0]:Pe?t.documentElement:a},mt=function(e){return le.call(e.ownerDocument||e,e,u.SHOW_ELEMENT|u.SHOW_COMMENT|u.SHOW_TEXT,null,!1)},ht=function(e){return!(e instanceof Y||e instanceof X||"string"==typeof e.nodeName&&"string"==typeof e.textContent&&"function"==typeof e.removeChild&&e.attributes instanceof k&&"function"==typeof e.removeAttribute&&"function"==typeof e.setAttribute&&"string"==typeof e.namespaceURI&&"function"==typeof e.insertBefore)},gt=function(e){return"object"===(void 0===l?"undefined":G(l))?e instanceof l:e&&"object"===(void 0===e?"undefined":G(e))&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName},yt=function(e,t,n){pe[e]&&d(pe[e],(function(e){e.call(r,t,n,nt)}))},vt=function(e){var t=void 0;if(yt("beforeSanitizeElements",e,null),ht(e))return ft(e),!0;if(g(e.nodeName,/[\u0080-\uFFFF]/))return ft(e),!0;var n=rt(e.nodeName);if(yt("uponSanitizeElement",e,{tagName:n,allowedTags:we}),!gt(e.firstElementChild)&&(!gt(e.content)||!gt(e.content.firstElementChild))&&x(/<[/\w]/g,e.innerHTML)&&x(/<[/\w]/g,e.textContent))return ft(e),!0;if("select"===n&&x(/