diff --git a/express/blocks/browse-by-category/browse-by-category.css b/express/blocks/browse-by-category/browse-by-category.css index 53fa46c1..7df56017 100644 --- a/express/blocks/browse-by-category/browse-by-category.css +++ b/express/blocks/browse-by-category/browse-by-category.css @@ -4,25 +4,25 @@ margin: auto; } -.browse-by-category { +main .browse-by-category { max-width: max-content; } -.browse-by-category .carousel-container .carousel-platform { +main .browse-by-category .carousel-container .carousel-platform { align-items: start; } -.browse-by-category.card .carousel-container .carousel-platform { +main .browse-by-category.card .carousel-container .carousel-platform { gap: 14px; margin: 6px 0 0 0; } -.browse-by-category .carousel-container .button.carousel-arrow { +main .browse-by-category .carousel-container .button.carousel-arrow { position: absolute; top: 46px; } -.browse-by-category .browse-by-category-heading-section { +main .browse-by-category .browse-by-category-heading-section { display: flex; justify-content: space-between; flex-direction: column; @@ -31,13 +31,13 @@ margin-bottom: 10px; } -.browse-by-category .browse-by-category-heading-section .browse-by-category-heading { +main .browse-by-category .browse-by-category-heading-section .browse-by-category-heading { text-align: left; font-size: 28px; line-height: 30px; } -.browse-by-category .browse-by-category-sub-heading { +main .browse-by-category .browse-by-category-sub-heading { text-align: left; font-size: 16px; line-height: 30px; @@ -45,11 +45,11 @@ padding-left: 2px; } -.browse-by-category .browse-by-category-heading-section .browse-by-category-link-wrapper { +main .browse-by-category .browse-by-category-heading-section .browse-by-category-link-wrapper { margin: 8px 0 0; } -.browse-by-category .browse-by-category-link { +main .browse-by-category .browse-by-category-link { font-size: 16px; line-height: 22px; display: flex; @@ -58,7 +58,7 @@ width: max-content; } -.browse-by-category .browse-by-category-link::after { +main .browse-by-category .browse-by-category-link::after { display: flex; width: 6px; height: 6px; @@ -76,7 +76,7 @@ margin-right: 2.25px; } -.browse-by-category:not(.card) .browse-by-category-card { +main .browse-by-category:not(.card) .browse-by-category-card { position: relative; display: flex; gap: 8px; @@ -87,27 +87,27 @@ padding: 10px 8px 0 8px; } -.browse-by-category.card .browse-by-category-card { +main .browse-by-category.card .browse-by-category-card { position: relative; display: flex; flex-direction: column; } -.browse-by-category .browse-by-category-card-link { +main .browse-by-category .browse-by-category-card-link { position: absolute; height: 100%; width: 100%; } -.browse-by-category:not(.card) .browse-by-category-card-link:hover ~ .browse-by-category-image-wrapper img { +main .browse-by-category:not(.card) .browse-by-category-card-link:hover ~ .browse-by-category-image-wrapper img { transform: scale(1.1) matrix(1, -0.07, 0.05, 1, 0, 0); } -.browse-by-category.card .browse-by-category-card-link:hover ~ .browse-by-category-image-wrapper img { +main .browse-by-category.card .browse-by-category-card-link:hover ~ .browse-by-category-image-wrapper img { transform: scale(1.1) matrix(1, -0.01, 0.01, 1, 0, 0); } -.browse-by-category .browse-by-category-image-wrapper { +main .browse-by-category .browse-by-category-image-wrapper { background-color: var(--color-gray-200); min-height: 90px; width: 148px; @@ -118,7 +118,7 @@ pointer-events: none; } -.browse-by-category:not(.card) .browse-by-category-image-wrapper img { +main .browse-by-category:not(.card) .browse-by-category-image-wrapper img { display: block; object-fit: cover; width: 80px; @@ -130,7 +130,7 @@ transition: transform 0.2s ease-in-out; } -.browse-by-category .browse-by-category-image-wrapper .browse-by-category-image-shadow { +main .browse-by-category .browse-by-category-image-wrapper .browse-by-category-image-shadow { position: absolute; width: 76px; height: 76px; @@ -140,7 +140,7 @@ opacity: 1; } -.browse-by-category.card .browse-by-category-image-shadow-wrapper { +main .browse-by-category.card .browse-by-category-image-shadow-wrapper { display: block; object-fit: cover; transform: matrix(1, -0.07, 0.07, 1, 0, 0); @@ -150,7 +150,7 @@ transition: transform 0.2s ease-in-out; } -.browse-by-category.card .browse-by-category-image-wrapper { +main .browse-by-category.card .browse-by-category-image-wrapper { background-color: #f8f8f8; min-height: 90px; height: 116px; @@ -162,7 +162,7 @@ pointer-events: none; } -.browse-by-category.card .browse-by-category-image-wrapper img { +main .browse-by-category.card .browse-by-category-image-wrapper img { display: block; object-fit: contain; max-width: 110px; @@ -174,7 +174,7 @@ transition: transform 0.2s ease-in-out; } -.browse-by-category.card .browse-by-category-image-wrapper .browse-by-category-image-shadow { +main .browse-by-category.card .browse-by-category-image-wrapper .browse-by-category-image-shadow { position: absolute; width: 100%; height: 100%; @@ -182,7 +182,7 @@ background: #d6d6d6e5; } -.browse-by-category:not(.card) .browse-by-category-card-title { +main .browse-by-category:not(.card) .browse-by-category-card-title { margin: 0; font-size: 18px; line-height: 24px; @@ -190,7 +190,7 @@ max-width: 148px; } -.browse-by-category.card .browse-by-category-card-title { +main .browse-by-category.card .browse-by-category-card-title { margin: 6px 0; font-size: 16px; line-height: 24px; @@ -199,7 +199,7 @@ } @media (min-width: 900px) { - .browse-by-category .browse-by-category-heading-section { + main .browse-by-category .browse-by-category-heading-section { flex-direction: row; padding: 0 0 0 20px; } diff --git a/express/blocks/browse-by-category/browse-by-category.js b/express/blocks/browse-by-category/browse-by-category.js index 6f3ee054..b8e9384c 100644 --- a/express/blocks/browse-by-category/browse-by-category.js +++ b/express/blocks/browse-by-category/browse-by-category.js @@ -21,8 +21,14 @@ export function decorateHeading(block, payload) { viewAllButton.textContent = payload.viewAllLink.text; viewAllButtonWrapper.append(viewAllButton); } - - heading.textContent = payload.heading; + if (payload.heading === 'null' + || payload.heading === '' + || payload.heading === 'undefined' + || payload.heading === null) { + heading.textContent = ''; + } else { + heading.textContent = payload?.heading; + } headingSection.append(heading); const headingContainer = createTag('div'); headingContainer.append(heading); @@ -45,6 +51,7 @@ export function decorateCategories(block, payload) { const categoryAnchor = createTag('a', { class: 'browse-by-category-card-link' }); categoryTitle.textContent = categoryCard.text; + categoryAnchor.title = categoryCard.text; categoryAnchor.href = categoryCard.link; categoryImageShadowWrapper.append(categoryImageShadow, categoryImage); diff --git a/express/blocks/long-text/long-text.css b/express/blocks/long-text/long-text.css new file mode 100644 index 00000000..e682e220 --- /dev/null +++ b/express/blocks/long-text/long-text.css @@ -0,0 +1,81 @@ +/* to remove after wrapper deprecation */ +main .section div.long-text-wrapper { + max-width: none; + padding: 0; +} + +main .section div.long-text-wrapper.plain { + max-width: 1200px; +} + +main .long-text { + margin: 0 28px; + padding: 28px; + background-color: var(--color-gray-100); + border-radius: 20px; +} + +main .long-text.plain { + margin: unset; + background-color: initial; + border-radius: unset; +} + +main .long-text * { + text-align: left; +} + +main .long-text.center * { + text-align: center; +} + +main .long-text h2 { + font-size: var(--heading-font-size-l); +} + +main .long-text.plain h1 { + font-size: var(--heading-font-size-l); + margin-bottom: 40px; +} + +main .long-text.plain h2 { + font-size: var(--heading-font-size-m); + margin-bottom: 24px; +} + +main .long-text.plain h3 { + font-size: var(--heading-font-size-s); + margin-bottom: 16px; +} + +main .long-text p { + font-size: var(--body-font-size-s); +} + +main .long-text.plain p { + margin-top: 0; + margin-bottom: 80px; + font-size: var(--body-font-size-l); +} + +@media (min-width: 900px) { + main .long-text:not(.plain) { + margin: 0 60px; + padding: 28px; + } + + main .long-text.plain h1 { + font-size: var(--heading-font-size-xl); + margin-bottom: 40px; + } + + main .long-text.plain h2 { + font-size: var(--heading-font-size-l); + margin-bottom: 24px; + } + + main .long-text.plain h3 { + font-size: var(--heading-font-size-s); + margin-bottom: 16px; + } +} diff --git a/express/blocks/long-text/long-text.js b/express/blocks/long-text/long-text.js new file mode 100644 index 00000000..46b4994b --- /dev/null +++ b/express/blocks/long-text/long-text.js @@ -0,0 +1,23 @@ +import { addTempWrapperDeprecated } from '../../scripts/utils/decorate.js'; + +export default function decorate(block) { + if (!block.parentElement.classList.contains('long-text-wrapper')) { + addTempWrapperDeprecated(block, 'long-text'); + } + + if (block.classList.contains('plain')) { + block.parentElement.classList.add('plain'); + } + + if (block.textContent.trim() === '') { + if (block.parentElement.classList.contains('long-text-wrapper')) { + block.parentElement.remove(); + } else { + block.remove(); + } + } + if (block.querySelector('p').textContent === 'null' + || block.querySelector('p').textContent === null) { + block.querySelector('p').remove(); + } +} diff --git a/express/blocks/search-marquee/search-marquee.css b/express/blocks/search-marquee/search-marquee.css index cf8b31a0..140a767c 100755 --- a/express/blocks/search-marquee/search-marquee.css +++ b/express/blocks/search-marquee/search-marquee.css @@ -21,6 +21,11 @@ flex-direction: column; align-items: center; } +.search-marquee .express-logo { + width: unset; + height: 30px; + padding-bottom: 8px; +} .search-marquee .express-logo { width: unset; @@ -35,6 +40,8 @@ .search-marquee > div:first-of-type p { font-size: var(--body-font-size-m); max-width: 640px; + margin-left: auto; + margin-right: auto; } .search-marquee .search-marquee-bg { diff --git a/express/blocks/search-marquee/search-marquee.js b/express/blocks/search-marquee/search-marquee.js index 7ebbd1a7..3b9f43a6 100755 --- a/express/blocks/search-marquee/search-marquee.js +++ b/express/blocks/search-marquee/search-marquee.js @@ -2,10 +2,10 @@ import { getLibs } from '../../scripts/utils.js'; import { decorateButtonsDeprecated, addTempWrapperDeprecated } from '../../scripts/utils/decorate.js'; import { getIconElementDeprecated } from '../../scripts/utils/icons.js'; import { buildFreePlanWidget } from '../../scripts/widgets/free-plan.js'; -import { trackSearch, updateImpressionCache } from '../../template-x/template-search-api-v3.js'; import buildCarousel from '../../scripts/widgets/carousel.js'; import fetchAllTemplatesMetadata from '../../scripts/utils/all-templates-metadata.js'; import BlockMediator from '../../scripts/block-mediator.min.js'; +import { trackSearch, updateImpressionCache } from '../../template-x/template-search-api-v3.js'; const imports = await Promise.all([import(`${getLibs()}/features/placeholders.js`), import(`${getLibs()}/utils/utils.js`)]); const { replaceKey } = imports[0]; @@ -154,12 +154,16 @@ function initSearchFunction(block) { const searchUrlTemplate = `/express/templates/search?tasks=${currentTasks.xCore}&tasksx=${currentTasks.content}&phformat=${format}&topics=${searchInput || "''"}&q=${searchBar.value || "''"}&searchId=${searchId || ''}`; targetLocation = `${window.location.origin}${prefix}${searchUrlTemplate}`; } - window.location.assign(targetLocation); }; const onSearchSubmit = async () => { + const { sampleRUM } = await import(`${getLibs()}/utils/samplerum.js`); searchBar.disabled = true; + sampleRUM('search', { + source: block.dataset.blockName, + target: searchBar.value, + }, 1); await redirectSearch(); }; @@ -235,7 +239,6 @@ function initSearchFunction(block) { suggestionsList.append(li); }); - const suggestListString = suggestions.map((s) => s.query).join(','); updateImpressionCache({ prefix_query: searchBarVal, @@ -382,6 +385,8 @@ export default async function decorate(block) { if (['on', 'yes'].includes(getMetadata('marquee-inject-logo')?.toLowerCase())) { const logo = getIconElementDeprecated('adobe-express-logo'); logo.classList.add('express-logo'); + logo.width = 164; + logo.height = 38; block.prepend(logo); } await decorateSearchFunctions(block); diff --git a/express/blocks/seo-nav/seo-nav.css b/express/blocks/seo-nav/seo-nav.css new file mode 100644 index 00000000..54f687ad --- /dev/null +++ b/express/blocks/seo-nav/seo-nav.css @@ -0,0 +1,137 @@ +main .seo-nav-wrapper, +main .seo-nav-center-container > div { + max-width: 1200px; +} + +main .seo-nav-center-container .carousel-platform { + padding-top: 6px; +} + +main .seo-nav { + display: block; + overflow: hidden; + margin: auto; + text-align: left; + padding: 30px 28px 40px 28px; + background-color: var(--color-gray-100); + border-radius: 20px; +} + +main .seo-nav h2, +main .seo-nav h3, +main .seo-nav h4 { + text-align: left; +} + +main .seo-nav.center { + width: fit-content; + max-width: 100%; +} + +main .seo-nav h3 { + font-size: var(--heading-font-size-m); + margin-bottom: 20px; +} + +main .seo-nav p { + margin: 0 5px 12px; + line-height: 0; +} + +main .seo-nav p.current { + pointer-events: none; +} + +main .seo-nav p.current > a { + color: var(--color-white); + background-color: var(--color-black); + border-color: var(--color-black); +} + +main .seo-nav a.button.secondary { + margin: 6px 0; +} + +main .seo-nav p.seo-paragraph { + font-size: 14px; + line-height: 21px; + margin: 0 0 21px; +} + +main .seo-nav .carousel-container .carousel-fader-left, +main .seo-nav .carousel-container .carousel-fader-right { + width: 50px; + pointer-events: none; + top: -10px; +} + +@media (min-width: 900px) { + main .seo-nav-wrapper, + main .seo-nav-center-container > div { + padding: 0 50px; + } + + main .seo-nav { + text-align: left; + } + + main .seo-nav h2, + main .seo-nav h3, + main .seo-nav h4 { + text-align: left; + } + + main .seo-nav .carousel-container .carousel-fader-left, + main .seo-nav .carousel-container .carousel-fader-right { + width: 150px; + } +} + +@media (min-width: 1200px) { + main .seo-nav-wrapper, + main .seo-nav-center-container > div { + padding: 0 55px; + } +} + +/* Carousel styles (Link-list specific) */ + +/* Remove max-width on mobile breakpoints */ +main .section.seo-nav-container, +main .seo-nav-wrapper, +main .section.seo-nav-container .seo-nav > div { + max-width: none; + padding-left: 0; + padding-right: 0; +} + +main .seo-nav-wrapper { + margin: 40px 28px; +} + +main .seo-nav .carousel-container { + margin-left: 0; + margin-right: 0; + margin-bottom: 0; +} + +main .seo-nav div:nth-of-type(2) > div { + min-height: 64px; +} + +@media (min-width: 900px) { + main .seo-nav .carousel-platform { + scroll-padding: 0; + } + + main .seo-nav-wrapper, main .seo-nav-center-container > div { + padding: 0 28px; + } +} + +@media (min-width: 1200px) { + main .seo-nav-wrapper, + main .section.seo-nav-center-container > div { + padding: 0 28px; + } +} diff --git a/express/blocks/seo-nav/seo-nav.js b/express/blocks/seo-nav/seo-nav.js new file mode 100644 index 00000000..36196d67 --- /dev/null +++ b/express/blocks/seo-nav/seo-nav.js @@ -0,0 +1,55 @@ +import buildCarousel from '../../scripts/widgets/carousel.js'; +import { addTempWrapperDeprecated } from '../../scripts/utils/decorate.js'; + +function decorateCarousel(links, container) { + links.forEach((p) => { + const link = p.querySelector('a'); + link.classList.add('button', 'small', 'secondary', 'fill'); + link.classList.remove('accent'); + }); + buildCarousel('p', container); +} + +export function updatePillsByCKG(block, carouselDiv) { + return (mutationList, observer) => { + for (const mutation of mutationList) { + if (mutation.type === 'childList') { + if (carouselDiv.querySelector('.carousel-container')) { + observer.disconnect(); + return; + } + + const newLinks = [...block.querySelectorAll('p')]; + if (!newLinks.length) { + carouselDiv.style.display = 'none'; + } + decorateCarousel(newLinks, carouselDiv); + observer.disconnect(); + return; + } + } + }; +} + +export default function decorate(block) { + addTempWrapperDeprecated(block, 'seo-nav'); + + const links = [...block.querySelectorAll('p')]; + const seoCopy = block.querySelectorAll('div')[block.querySelectorAll('div').length - 1]; + const carouselDiv = block.querySelector('div:nth-of-type(2) > div'); + if (links.length) { + decorateCarousel(links, carouselDiv); + } + + if (seoCopy && seoCopy.innerText !== 'null') { + const $paragraphs = seoCopy.querySelectorAll('p'); + for (let i = 0; i < $paragraphs.length; i += 1) { + $paragraphs[i].classList.add('seo-paragraph'); + } + } else { + seoCopy.style.display = 'none'; + } + + const observer = new MutationObserver(updatePillsByCKG(block, carouselDiv)); + observer.observe(carouselDiv, { childList: true }); +} diff --git a/express/blocks/template-x/template-rendering.js b/express/blocks/template-x/template-rendering.js new file mode 100755 index 00000000..e180de1c --- /dev/null +++ b/express/blocks/template-x/template-rendering.js @@ -0,0 +1,474 @@ +/* eslint-disable no-underscore-dangle */ +import { getLibs } from '../../scripts/utils.js'; +import { getIconElementDeprecated } from '../../scripts/utils/icons.js'; +import { trackSearch, updateImpressionCache } from '../../template-x/template-search-api-v3.js'; +import BlockMediator from '../../scripts/block-mediator.min.js'; + +const imports = await Promise.all([import(`${getLibs()}/features/placeholders.js`), import(`${getLibs()}/utils/utils.js`)]); +const { replaceKey } = imports[0]; +const { createTag, getMetadata, getConfig } = imports[1]; + +function containsVideo(pages) { + return pages.some((page) => !!page?.rendition?.video?.thumbnail?.componentId); +} + +function isVideo(iterator) { + return iterator.current().rendition?.video?.thumbnail?.componentId; +} + +function getTemplateTitle(template) { + if (template['dc:title']?.['i-default']) { + return template['dc:title']['i-default']; + } + + if (template.moods?.length && template.task?.name) { + return `${template.moods.join(', ')} ${template.task.name}`; + } + + if (getMetadata('tasks-x')?.trim() && getMetadata('topics-x')?.trim()) { + return `${getMetadata('topics-x').trim()} ${getMetadata('tasks-x').trim()}`; + } + + return ''; +} + +function extractRenditionLinkHref(template) { + return template._links?.['http://ns.adobe.com/adobecloud/rel/rendition']?.href; +} + +function extractComponentLinkHref(template) { + return template._links?.['http://ns.adobe.com/adobecloud/rel/component']?.href; +} + +function extractImageThumbnail(page) { + return page.rendition.image?.thumbnail; +} + +function getImageThumbnailSrc(renditionLinkHref, componentLinkHref, page) { + const thumbnail = extractImageThumbnail(page); + const { + mediaType, + componentId, + width, + height, + hzRevision, + } = thumbnail; + if (mediaType === 'image/webp') { + // webp only supported by componentLink + return componentLinkHref.replace( + '{&revision,component_id}', + `&revision=${hzRevision || 0}&component_id=${componentId}`, + ); + } + + return renditionLinkHref.replace( + '{&page,size,type,fragment}', + `&size=${Math.max(width, height)}&type=${mediaType}&fragment=id=${componentId}`, + ); +} + +const videoMetadataType = 'application/vnd.adobe.ccv.videometadata'; + +async function getVideoUrls(renditionLinkHref, componentLinkHref, page) { + const videoThumbnail = page.rendition?.video?.thumbnail; + const { componentId } = videoThumbnail; + const preLink = renditionLinkHref.replace( + '{&page,size,type,fragment}', + `&type=${videoMetadataType}&fragment=id=${componentId}`, + ); + const backupPosterSrc = getImageThumbnailSrc(renditionLinkHref, componentLinkHref, page); + try { + const response = await fetch(preLink); + if (!response.ok) { + throw new Error(response.statusText); + } + const { renditionsStatus: { state }, posterframe, renditions } = await response.json(); + if (state !== 'COMPLETED') throw new Error('Video not ready'); + + const mp4Rendition = renditions.find((r) => r.videoContainer === 'MP4'); + if (!mp4Rendition?.url) throw new Error('No MP4 rendition found'); + + return { src: mp4Rendition.url, poster: posterframe?.url || backupPosterSrc }; + } catch (err) { + // use componentLink as backup + return { + src: componentLinkHref.replace( + '{&revision,component_id}', + `&revision=0&component_id=${componentId}`, + ), + poster: backupPosterSrc, + }; + } +} + +async function share(branchUrl, tooltip, timeoutId) { + await navigator.clipboard.writeText(branchUrl); + tooltip.classList.add('display-tooltip'); + + const rect = tooltip.getBoundingClientRect(); + const tooltipRightEdgePos = rect.left + rect.width; + if (tooltipRightEdgePos > window.innerWidth) { + tooltip.classList.add('flipped'); + } + + clearTimeout(timeoutId); + return setTimeout(() => { + tooltip.classList.remove('display-tooltip'); + tooltip.classList.remove('flipped'); + }, 2500); +} + +async function renderShareWrapper(branchUrl) { + const tagCopied = await replaceKey('tag-copied', getConfig()); + const text = tagCopied === 'tag copied' ? 'Copied to clipboard' : tagCopied; + const wrapper = createTag('div', { class: 'share-icon-wrapper' }); + const shareIcon = getIconElementDeprecated('share-arrow'); + shareIcon.setAttribute('tabindex', 0); + const tooltip = createTag('div', { + class: 'shared-tooltip', + 'aria-label': text, + role: 'tooltip', + tabindex: '-1', + }); + let timeoutId = null; + shareIcon.addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + timeoutId = share(branchUrl, tooltip, timeoutId); + }); + + shareIcon.addEventListener('keypress', (e) => { + if (e.key !== 'Enter') { + return; + } + timeoutId = share(branchUrl, tooltip, timeoutId); + }); + const checkmarkIcon = getIconElementDeprecated('checkmark-green'); + tooltip.append(checkmarkIcon); + tooltip.append(text); + wrapper.append(shareIcon); + wrapper.append(tooltip); + return wrapper; +} + +async function renderCTA(branchUrl) { + const editThisTemplate = await replaceKey('edit-this-template', getConfig()); + const btnTitle = editThisTemplate === 'edit this template' ? 'Edit this template' : editThisTemplate; + const btnEl = createTag('a', { + href: branchUrl, + title: btnTitle, + class: 'button accent small', + }); + btnEl.textContent = btnTitle; + return btnEl; +} + +function renderCTALink(branchUrl) { + const linkEl = createTag('a', { + href: branchUrl, + class: 'cta-link', + tabindex: '-1', + }); + return linkEl; +} + +function getPageIterator(pages) { + return { + i: 0, + next() { + this.i = (this.i + 1) % pages.length; + }, + reset() { + this.i = 0; + }, + current() { + return pages[this.i]; + }, + all() { + return pages; + }, + }; +} +async function renderRotatingMedias( + wrapper, + pages, + { templateTitle, renditionLinkHref, componentLinkHref }, +) { + const pageIterator = getPageIterator(pages); + let imgTimeoutId; + + const constructVideo = async () => { + if (!containsVideo(pages)) return null; + const { src, poster } = await getVideoUrls( + renditionLinkHref, + componentLinkHref, + pageIterator.current(), + ); + const video = createTag('video', { + muted: true, + playsinline: '', + title: templateTitle, + poster, + class: 'unloaded hidden', + }); + const videoSource = createTag('source', { + src, + type: 'video/mp4', + }); + + video.append(videoSource); + + return video; + }; + + const constructImg = () => createTag('img', { + src: '', + alt: templateTitle, + class: 'hidden', + }); + + const img = constructImg(); + if (img) wrapper.prepend(img); + + const video = await constructVideo(); + if (video) wrapper.prepend(video); + + const dispatchImgEndEvent = () => { + img.dispatchEvent(new CustomEvent('imgended', { detail: this })); + }; + + const playImage = () => { + img.classList.remove('hidden'); + img.src = getImageThumbnailSrc(renditionLinkHref, componentLinkHref, pageIterator.current()); + + imgTimeoutId = setTimeout(dispatchImgEndEvent, 2000); + }; + + const playVideo = async () => { + if (video) { + const videoSource = video.querySelector('source'); + video.classList.remove('hidden'); + const { src, poster } = await getVideoUrls( + renditionLinkHref, + componentLinkHref, + pageIterator.current(), + ); + video.poster = poster; + videoSource.src = src; + video.load(); + video.muted = true; + const playPromise = video.play(); + if (playPromise !== undefined) { + playPromise.catch(() => { + // ignore + }); + } + } + }; + + const playMedia = () => { + if (isVideo(pageIterator)) { + if (img) img.classList.add('hidden'); + playVideo(); + } else { + if (video) video.classList.add('hidden'); + playImage(); + } + }; + + const cleanup = () => { + if (video) { + video.pause(); + video.currentTime = 0; + } + + if (imgTimeoutId) { + clearTimeout(imgTimeoutId); + } + + pageIterator.reset(); + }; + + if (video) { + video.addEventListener('ended', () => { + if (pageIterator.all().length > 1) { + pageIterator.next(); + playMedia(); + } + }); + } + + if (img) { + img.addEventListener('imgended', () => { + if (pageIterator.all().length > 1) { + pageIterator.next(); + playMedia(); + } + }); + } + + return { cleanup, hover: playMedia }; +} + +let currentHoveredElement; + +function renderMediaWrapper(template) { + const mediaWrapper = createTag('div', { class: 'media-wrapper' }); + + // TODO: reduce memory with LRU cache or memoization with ttl + let renderedMedia = null; + + const templateTitle = getTemplateTitle(template); + const renditionLinkHref = extractRenditionLinkHref(template); + const componentLinkHref = extractComponentLinkHref(template); + const { branchUrl } = template.customLinks; + const templateInfo = { + templateTitle, + branchUrl, + renditionLinkHref, + componentLinkHref, + }; + + const enterHandler = async (e) => { + e.preventDefault(); + e.stopPropagation(); + if (!renderedMedia) { + renderedMedia = await renderRotatingMedias(mediaWrapper, template.pages, templateInfo); + const shareWrapper = await renderShareWrapper(branchUrl); + mediaWrapper.append(shareWrapper); + } + renderedMedia.hover(); + currentHoveredElement?.classList.remove('singleton-hover'); + currentHoveredElement = e.target; + currentHoveredElement?.classList.add('singleton-hover'); + document.activeElement.blur(); + }; + + const leaveHandler = () => { + if (renderedMedia) renderedMedia.cleanup(); + }; + + const focusHandler = async (e) => { + e.preventDefault(); + e.stopPropagation(); + if (!renderedMedia) { + renderedMedia = await renderRotatingMedias(mediaWrapper, template.pages, templateInfo); + const shareWrapper = await renderShareWrapper(branchUrl); + mediaWrapper.append(shareWrapper); + renderedMedia.hover(); + } + currentHoveredElement?.classList.remove('singleton-hover'); + currentHoveredElement = e.target; + currentHoveredElement?.classList.add('singleton-hover'); + }; + + return { mediaWrapper, enterHandler, leaveHandler, focusHandler }; +} + +async function renderHoverWrapper(template) { + const btnContainer = createTag('div', { class: 'button-container' }); + + const { + mediaWrapper, + enterHandler, + leaveHandler, + focusHandler, + } = renderMediaWrapper(template); + + const cta = await renderCTA(template.customLinks.branchUrl); + const ctaLink = renderCTALink(template.customLinks.branchUrl); + + ctaLink.append(mediaWrapper); + + btnContainer.append(cta); + btnContainer.append(ctaLink); + btnContainer.addEventListener('mouseenter', enterHandler); + btnContainer.addEventListener('mouseleave', leaveHandler); + + cta.addEventListener('focusin', focusHandler); + const ctaClickHandler = () => { + updateImpressionCache({ + content_id: template.id, + status: template.licensingCategory, + task: getMetadata('tasksx') || getMetadata('tasks') || '', + search_keyword: getMetadata('q') || getMetadata('topics') || '', + collection: getMetadata('tasksx') || getMetadata('tasks') || '', + collection_path: window.location.pathname, + }); + trackSearch('select-template', BlockMediator.get('templateSearchSpecs')?.search_id); + }; + + cta.addEventListener('click', ctaClickHandler, { passive: true }); + ctaLink.addEventListener('click', ctaClickHandler, { passive: true }); + return btnContainer; +} + +async function getStillWrapperIcons(template) { + let planIcon = null; + if (template.licensingCategory === 'free') { + planIcon = createTag('span', { class: 'free-tag' }); + const free = await replaceKey('free', getConfig()); + planIcon.append(free === 'free' ? 'Free' : free); + } else { + planIcon = getIconElementDeprecated('premium'); + } + let videoIcon = ''; + if (!containsVideo(template.pages) && template.pages.length > 1) { + videoIcon = getIconElementDeprecated('multipage-static-badge'); + } + + if (containsVideo(template.pages) && template.pages.length === 1) { + videoIcon = getIconElementDeprecated('video-badge'); + } + + if (containsVideo(template.pages) && template.pages.length > 1) { + videoIcon = getIconElementDeprecated('multipage-video-badge'); + } + if (videoIcon) videoIcon.classList.add('media-type-icon'); + return { planIcon, videoIcon }; +} + +async function renderStillWrapper(template) { + const stillWrapper = createTag('div', { class: 'still-wrapper' }); + + const templateTitle = getTemplateTitle(template); + const renditionLinkHref = extractRenditionLinkHref(template); + const componentLinkHref = extractComponentLinkHref(template); + + const thumbnailImageHref = getImageThumbnailSrc( + renditionLinkHref, + componentLinkHref, + template.pages[0], + ); + + const imgWrapper = createTag('div', { class: 'image-wrapper' }); + + const img = createTag('img', { + src: thumbnailImageHref, + alt: templateTitle, + }); + imgWrapper.append(img); + + const { planIcon, videoIcon } = await getStillWrapperIcons(template); + // console.log('theOtherVideoIcon'); + // console.log(videoIcon); + img.onload = (e) => { + if (e.eventPhase >= Event.AT_TARGET) { + imgWrapper.append(planIcon); + imgWrapper.append(videoIcon); + } + }; + + stillWrapper.append(imgWrapper); + return stillWrapper; +} + +export default async function renderTemplate(template) { + const tmpltEl = createTag('div'); + const stillWrapper = await renderStillWrapper(template); + tmpltEl.append(stillWrapper); + const hoverWrapper = await renderHoverWrapper(template); + tmpltEl.append(hoverWrapper); + + return tmpltEl; +} diff --git a/express/blocks/template-x/template-x.css b/express/blocks/template-x/template-x.css new file mode 100755 index 00000000..5a00e50f --- /dev/null +++ b/express/blocks/template-x/template-x.css @@ -0,0 +1,2837 @@ +/* templates pages spacial styling */ +div[class='section section-wrapper template-x-container'], +div[class='section section-wrapper browse-by-category-card-fullwidth-container template-x-container'], +div[data-audience="mobile"].section.section-wrapper.template-x-container { + padding-top: 0; +} + +/* holiday special positioning */ +main.with-holiday-templates-banner > div[class='section section-wrapper template-x-container'] { + position: absolute; + top: 0; + left: 0; + height: 72px; + width: 100%; +} + +[data-block-name="template-x"] { + margin: 0 auto; +} +.template-x.fullwidth { + max-width: none; + padding: 0; +} + +.template-x > .default-content-wrapper { + padding: 0 15px; +} + +.template-x.top-padding { + padding-top: 40px; +} + +.template-x.bottom-padding { + padding-bottom: 40px; +} + +.template-x .default-content-wrapper h2, +.template-x .default-content-wrapper p { + margin: 0; + text-align: left; +} + +.template-x-horizontal-fullwidth-mini-spreadsheet-powered-container h2 { + margin: 20px 12px 0 12px; + text-align: left; +} + +.template-x-horizontal-fullwidth-mini-spreadsheet-powered-container p { + font-weight: 800; + font-size: var(--body-font-size-m); + margin: 16px 12px 12px 12px; + text-align: left; +} + +.template-x.template-x-complete .template-x-inner-wrapper { + min-height: unset; +} + +.template-x-horizontal-fullwidth-collaboration-container .default-content-wrapper h2, +.template-x-horizontal-fullwidth-collaboration-container .default-content-wrapper h3, +.template-x-horizontal-fullwidth-collaboration-container .default-content-wrapper p { + text-align: left; + padding: 0 28px; + margin: 12px 0; +} + +.template-x-horizontal-fullwidth-collaboration-container .default-content-wrapper p { + font-size: var(--body-font-size-m); + line-height: 24px; +} + +.template-x.horizontal .template-tabs { + margin-top: 24px; + display: flex; + overflow: auto; + max-width: 100%; +} + +.template-x.horizontal .template-tabs button.template-tab-button { + background: none; + border: none; + padding: 8px 4px 6px 4px; + margin: 0 16px; + font-family: var(--body-font-family); + cursor: pointer; + font-size: var(--body-font-size-s); + border-bottom: 2px solid transparent; + white-space: nowrap; +} + +main .template-x.sixcols .masonry-col, main .template-x.fullwidth .masonry-col { + max-width: 175px; +} + +.template-x.horizontal .template-tabs button.template-tab-button:first-of-type { + margin-left: 0; +} + +.template-x.horizontal .template-tabs button.template-tab-button.active, +.template-x.horizontal .template-tabs button.template-tab-button:hover { + border-bottom: 2px solid var(--color-black); +} + +.template-x.horizontal .template-tabs button.template-tab-button.active { + font-weight: 700; +} + +.template-x .template-title.horizontal .text-wrapper * { + text-align: left; +} + +.template-x .template-title.horizontal .text-wrapper p { + margin-bottom: 0; +} + +.template-x.tabbed .template-title.horizontal .text-wrapper > div { + width: 100%; +} + +.template-x-inner-wrapper { + display: flex; + justify-content: center; + margin: 20px auto 0 auto; + font-size: var(--body-font-size-m); + font-weight: var(--body-font-weight); + text-align: left; +} + +.template-x.sixcols .template-x-inner-wrapper, +.template-x.fullwidth .template-x-inner-wrapper { + flex-direction: row; + justify-content: center; +} + +.template-x.horizontal .template-x-inner-wrapper { + margin-top: 0; + transition: opacity 0.2s; +} + +.template-x.fullwidth.holiday .template-x-inner-wrapper { + max-height: 0; + position: relative; + transition: max-height 0.5s, padding-top 0.5s; + overflow: hidden; + margin-right: 56px; + margin-left: 56px; +} + +.template-x.fullwidth.holiday.expanded .template-x-inner-wrapper { + max-height: 300px; + margin-left: 56px; + margin-right: 56px; +} + +.template-x.fullwidth.holiday.animated video { + position: absolute; + top: 0; + left: 0; + object-fit: cover; + height: 100%; + width: 100vw; + z-index: -1; + pointer-events: none; + transition: opacity 0.2s; +} + +.template-x.fullwidth.holiday.expanded.animated video { + transition: opacity 1s; + padding: 0; +} + +.template-x.fullwidth.sm-view .template-x-inner-wrapper, +.template-x.fullwidth.md-view .template-x-inner-wrapper, +.template-x.fullwidth.lg-view .template-x-inner-wrapper { + padding: 0; +} + +.template-x.with-categories-list .template-x-inner-wrapper { + min-height: 700px; +} + +.template-x.fullwidth.lg-view > .template-x-inner-wrapper > .masonry-col { + max-width: 352px; + text-align: center; +} + +.template-x .template-title { + margin: 0 12px 20px 12px; +} + +.template-x .template-title.with-link > div { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + align-items: flex-start; +} + +.template-x .template-title.horizontal > div > * { + text-align: left; + margin: 0; +} + +.template-x .template-title.horizontal h2 { + font-size: var(--heading-font-size-m); +} + +.template-x .template-title.horizontal.holiday .template-title, +.template-x .template-title.horizontal.holiday picture, +.template-x .template-title.horizontal.holiday a, +.template-x .template-title.horizontal.holiday h4, +.template-x .template-title.horizontal.holiday p { + z-index: 1; +} + +.template-x .template-title.horizontal p { + margin-top: 8px; + width: fit-content; + font-size: var(--body-font-size-m); +} + +.template-x.horizontal.mini .template-title.horizontal p { + margin-bottom: 0; +} + +.template-x .template-link, +.template-x .template-title-link { + text-decoration: none; + padding-left: 16px; + padding-top: 6px; + display: flex; +} + +.template-x .toggle-button { + display: flex; +} + +.holiday.template-x .toggle-button-chev { + display: flex; + width: 6px; + height: 6px; + border-top-width: 0; + border-left-width: 0; + border-bottom-width: 2px; + border-right-width: 2px; + border-style: solid; + border-color: var(--color-info-accent); + transform-origin: 75% 75%; + transform: rotate( -45deg ); + content: ""; + margin: none; + transition: transform 0.2s; +} + +.template-x.horizontal.holiday.expanded .toggle-button .toggle-button-chev { + transform: rotate(-135deg); +} + +.template-x .template-title-link { + padding: 0; + white-space: nowrap; +} + +.template-x .template p { + margin: 0; +} + +.template-x .template { + display: flex; + flex-direction: column; + width: 240px; + margin: 0 0 32px 0; + justify-content: flex-end; + -webkit-column-break-inside: avoid; + page-break-inside: avoid; + break-inside: avoid; + text-decoration: unset; + position: relative; + border-radius: 14px; +} + +.template-x .template:focus { + outline: none; + box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-info-accent); +} + + +.template-x .template > div:first-child > a:any-link { + padding-left: 0; +} + +.template-x .template img, .template-x .template video { + border-radius: 12px; +} + +.template-x .template img:not(.icon), +.template-x .template video { + width: 100%; + height: 100%; + pointer-events: none; + object-fit: cover; + display: block; +} + +.template-x .template .media-wrapper img.hidden, +.template-x .template .media-wrapper video.hidden { + opacity: 0; + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; + z-index: -1; +} + +.template-x .template .media-wrapper video { + clip-path: inset(0 0 3px 0); +} + +.template-x.large .template { + width: 100%; + margin: 0; + border: 0; +} + +.template-x.large .template > div { + margin: 0; +} + +.template-x.large .template img { + width: 100%; +} + +.template-x + .button-container > a { + margin: 0; +} + +.template-x .template:not(.placeholder) .icon-free-badge { + height: 24px; + display: flex; + border-radius: 1000px; + align-items: center; + font-weight: 500; + width: max-content; + top: 8px; + right: 8px; + color: var(--color-white); + font-size: var(--body-font-size-xs); + line-height: 16px; + padding: 0 12px; + background: #000000B3; +} + +/* horizontal template-x */ +.template-x-horizontal > div, +.template-x-horizontal-fullwidth-collaboration-container > div { + max-width: none; + padding: 0; +} + +.template-x.horizontal { + display: block; + margin-left: auto; + margin-right: auto; + min-height: 220px; +} + +main.with-holiday-templates-banner { + padding-top: 72px; + position: relative; +} + +.template-x.horizontal.fullwidth:not(.holiday) { + max-width: none; + display: block; + margin-left: auto; +} + +.template-x.horizontal.fullwidth.tabbed { + max-width: 1440px; + margin: auto; +} + +.template-x.horizontal.fullwidth.mini { + + padding: unset; +} + +.template-x.horizontal .template { + min-height: 200px; + width: max-content; + margin: 24px 12px; +} + +.button-container:focus-within{ + visibility: visible; + opacity: 20 !important; +} + +.template-x.horizontal .template .still-wrapper img, +.template-x.horizontal .template .still-wrapper video { + height: 200px; + width: auto; +} + +.template-x .template-title.horizontal h4 { + font-size: var(--heading-font-size-s); + line-height: 26px; +} + +.template-x.holiday .template-title.horizontal h4 { + text-align: left; + margin-top: 14px; + margin-bottom: 14px; + font-size: var(--body-font-size-m); +} + +.template-x .template-title.horizontal .template:not(.placeholder) .template-link { + display: none; +} + +.template-x.horizontal.mini .template { + min-height: unset; + min-width: 80px; + max-height: 100px; + max-width: 200px; + margin: 0 4px; +} + +.template-x.horizontal.mini .template:nth-of-type(2):not(.placeholder) .button-container { + left: calc(50% + 16px); +} + +.template-x.horizontal.mini a.template.placeholder { + height: 100px; + width: 60px; + margin: 0 12px 0 4px; +} + +.template-x.horizontal.mini a.template.placeholder svg { + height: 18px; + width: 18px; +} + +.template-x.horizontal.mini a.template.placeholder .template-link { + font-size: var(--body-font-size-xs); +} + +.template-x.horizontal.mini .template .still-wrapper img:not(.icon), +.template-x.horizontal.mini .template .still-wrapper video { + object-fit: cover; + height: 100px; + width: 100%; +} + +.template-x.horizontal.mini .template .icon-free-badge { + height: 14px; + font-size: 8px; + padding: 0 5px; + right: 4px; + top: 4px; +} + +.template-x.sixcols:not(.horizontal) .template, +.template-x.fullwidth .template { + position: relative; + display: inline-flex; + width: 165px; + margin: 5px; +} + +.template-x.fullwidth.lg-view .template, +.template-x.fullwidth.md-view .template, +.template-x.fullwidth.sm-view .template { + width: 92%; +} + +.template-x.horizontal.fullwidth .template { + width: auto; +} + +.template-x.horizontal .template:not(.placeholder) img, +.template-x.horizontal .template:not(.placeholder) video, +.template-x.sixcols:not(.horizontal) .template:not(.placeholder) img, +.template-x.sixcols:not(.horizontal) .template:not(.placeholder) video, +.template-x.fullwidth .template:not(.placeholder) img, +.template-x.fullwidth .template:not(.placeholder) video { + transition: transform .3s ease-in-out; + will-change: transform; +} + +.template-x .template:not(.placeholder) .button-container, +.template-x.sixcols:not(.horizontal) .template:not(.placeholder) .button-container, +.template-x.fullwidth .template:not(.placeholder) .button-container { + position: absolute; + width: 120%; + max-width: 90vw; + border-radius: 20px; + min-height: 120%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + opacity: 0; + text-align: center; + transition: opacity .3s ease-in-out; + will-change: opacity; + pointer-events: none; + z-index: 1; + display: flex; + flex-direction: column-reverse; +} + +.template-x.horizontal .template:not(.placeholder) .button-container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + opacity: 0; + text-align: center; + transition: opacity .3s ease-in-out; + will-change: opacity; + border-radius: 12px; + min-height: unset; + box-sizing: border-box; + height: calc(100% + 40px); + width: calc(100% + 24px); +} + +.template-x.horizontal.mini .template:not(.placeholder) .button-container { + height: calc(100% + 56px); + width: calc(100% + 40px); +} + +.template-x.horizontal .template:not(.placeholder) .template-link, +.template-x.sixcols:not(.horizontal) .template:not(.placeholder) .template-link, +.template-x.fullwidth .template:not(.placeholder) .template-link { + opacity: 0; + transition: opacity .4s ease-in-out .2s; + will-change: opacity; +} + +.template-x .template:hover:not(.placeholder) .button-container, +.template-x.horizontal .template:hover:not(.placeholder) .button-container, +.template-x.horizontal .template:hover:not(.placeholder) .template-link, +.template-x.sixcols:not(.horizontal) .template:hover:not(.placeholder) .button-container, +.template-x.sixcols:not(.horizontal) .template:hover:not(.placeholder) .template-link, +.template-x.fullwidth .template:hover:not(.placeholder) .button-container, +.template-x.fullwidth .template:hover:not(.placeholder) .template-link { + opacity: 1; + pointer-events: initial; + z-index: 2; +} + +.template-x .template:hover:not(.placeholder) .button-container:not(.singleton-hover), +.template-x.horizontal .template:hover:not(.placeholder) .button-container:not(.singleton-hover), +.template-x.horizontal .template:hover:not(.placeholder) .template-link, +.template-x.sixcols .template:hover:not(.placeholder) .button-container:not(.singleton-hover), +.template-x.sixcols .template:hover:not(.placeholder) .template-link, +.template-x.fullwidth .template:hover:not(.placeholder) .button-container:not(.singleton-hover), +.template-x.fullwidth .template:hover:not(.placeholder) .template-link { + opacity: 0; + pointer-events: initial; + z-index: 2; +} + +.template-x.horizontal .template:not(.placeholder) .template-link, +.template-x.sixcols:not(.horizontal) .template:not(.placeholder) .template-link, +.template-x.fullwidth .template:not(.placeholder) .template-link { + text-decoration: none; + border-radius: 18px; + padding: 5px 1.2em 6px 1.2em; + text-align: center; + font-size: var(--body-font-size-s); + font-style: normal; + font-weight: 600; + line-height: var(--body-line-height); + cursor: pointer; + color: var(--color-black); + background-color: var(--color-white); + margin: 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + height: fit-content; +} + +.template-x.horizontal.mini .template:not(.placeholder) .template-link { + padding: 2px 4px; + font-size: 8px; +} + +.template-x.horizontal .template:not(.placeholder) .template-link::after, +.template-x.sixcols:not(.horizontal) .template:not(.placeholder) .template-link::after, +.template-x.fullwidth .template:not(.placeholder) .template-link::after { + display: none; +} + +.template-x .template.placeholder { + box-sizing: border-box; + display: flex; + position: relative; + justify-content: flex-start; + align-items: center; + border-radius: 14px; + border: 2px dashed var(--color-gray-300); + height: 242px; + width: 200px; + margin: 21px auto 53px; + padding: 0; +} + +.template-x.horizontal .template.placeholder, +.template-x.horizontal.fullwidth .template.placeholder { + margin: 0 11px; +} + +.template-x.fullwidth.lg-view .template.placeholder, +.template-x.fullwidth.md-view .template.placeholder, +.template-x.fullwidth.sm-view .template.placeholder { + margin: 21px auto; + max-width: 80%; + max-height: 30vh; + z-index: 0; +} + +.template-x.fullwidth.lg-view .template.placeholder { + width: 335px; +} + +.template-x.fullwidth.md-view .template.placeholder { + width: 165.5px; +} + +.template-x.fullwidth.sm-view .template.placeholder { + width: 106.33px; +} + +.template-x .template.placeholder div:nth-of-type(2) { + position: absolute; + padding-top: 10px; + max-width: 64%; + bottom: 10%; + min-height: 28px; + background: linear-gradient(rgb(255 255 255 / 0%) 0%, rgb(255 255 255) 24%); +} + +.template-x .template.placeholder .template-link { + display: block; + font-size: var(--body-font-size-s); + color: currentColor; + text-align: center; + line-height: 1; + padding: 0; + width: fit-content; +} + +.template-x .template.placeholder > div:first-of-type { + width: 100%; + height: 80%; + display: flex; + justify-content: center; + align-items: center; +} + +.template-x .wide.template.placeholder.short > div:first-of-type{ + display: none; +} + +.template-x .wide.template.placeholder.short > div:nth-of-type(2){ + margin: auto; + text-align: center; + position: initial; + background: none; + bottom: 0; + padding: 0; +} + +.template-x.sm-view .template.placeholder > div:first-of-type { + height: 60%; +} + +.template-x .template.placeholder > div:first-of-type > img, +.template-x .template.placeholder > div:first-of-type > svg { + width: 44px; + height: 44px; +} + +.template-x.holiday.light-text svg { + fill: var(--color-white); +} + +.template-x.holiday.dark-text svg { + fill: var(--color-gray-800); +} + +.template-x.fullwidth.sm-view .template.placeholder > div:first-of-type > img, +.template-x.fullwidth.sm-view .template.placeholder > div:first-of-type > svg { + width: 22px; + height: 22px; +} + +.template-x .template.placeholder .template-link::after { + display: none; +} + +.template-x .template.placeholder.wide > div:first-of-type { + height: 65%; +} + +.template-x .template.placeholder.wide > div:first-of-type > img, +.template-x .template.placeholder.wide > div:first-of-type > svg { + width: 24px; + height: 24px; +} + +.template-x-inner-wrapper.flex-masonry .template { + opacity: 0; + transition: opacity .3s; +} + +.template-x-inner-wrapper.flex-masonry .template.appear { + opacity: 1; +} + +.template-x { + position: relative; +} + +.template-x .load-more { + position: absolute; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + bottom: 0; + width: 100vw; + left: 50%; + transform: translateX(-50%); + height: 240px; + background: linear-gradient(#ffffff00, #ffffff, #ffffff); +} + +.template-x.horizontal .load-more { + display: none; +} + +.template-x .load-more-button { + width: 88px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + background-color: var(--color-black); + color: var(--color-white); + font-size: 36px; + border-radius: 36px; + border: none; + transition: background-color 0.2s; +} + +.template-x .load-more-button:hover { + background-color: var(--color-gray-700); +} + +.template-x .load-more-button.disabled { + pointer-events: none; + opacity: 0.5; +} + +.template-x .load-more-button > .icon-plus-icon { + height: 22px; + width: 22px; +} + +.template-x .load-more-text { + margin-top: 8px; + font-weight: 700; + font-size: 18px; +} + +.template-x.fullwidth.lg-view > .template-x-inner-wrapper > .masonry-col { + max-width: 335px; + text-align: center; +} + +.template-x.fullwidth.md-view > .template-x-inner-wrapper > .masonry-col { + max-width: 156px; + text-align: center; +} + +.template-x.fullwidth.sm-view > .template-x-inner-wrapper > .masonry-col { + max-width: 100px; + text-align: center; +} + +.template-x .toolbar-wrapper { + padding: 0; + background: var(--color-gray-100); + position: sticky; + z-index: 1; + top: 0; +} + +.template-x .api-templates-toolbar { + position: relative; + z-index: 1; + margin: 16px 0 28px 0; + padding: 16px; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + transition: box-shadow 0.2s, margin 0.2s; + gap: 16px; +} + +.template-x .toolbar-wrapper.with-box-shadow { + box-shadow: 0 4px 8px 2px rgb(102 102 102 / 10%); +} + +.template-x .api-templates-toolbar .wrapper-content-search { + display: flex; + align-items: center; + gap: 16px; + position: relative; + flex-basis: 100%; +} + +.template-x .api-templates-toolbar h2 { + font-size: 18px; + line-height: 24px; + margin-top: 0; +} + +.template-x .search-dropdown-container { + background: #FFFFFF; + top: calc(100% + 6px); + border-radius: 12px; + box-shadow: 0 0 20px #00000029; + position: absolute; + width: 100%; + box-sizing: border-box; + left: 0; + z-index: 3; +} + +main .template-x .search-dropdown-container .dropdown-title { + margin: 0; + font-size: 14px; + color: var(--color-gray-500); +} + +main .template-x .search-dropdown-container .trends-container, +main .template-x .search-dropdown-container .suggestions-container { + padding: 20px 28px 0; + text-align: left; +} + +main .template-x .search-dropdown-container .trends-container .from-scratch-link { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 16px; +} + +main .template-x .search-dropdown-container .trends-container ul { + padding-left: 0; + list-style: none; + max-height: 216px; + overflow: auto; +} + +main .template-x .search-dropdown-container .suggestions-container ul { + padding-left: 0; + list-style: none; + max-height: 216px; + overflow: auto; + margin: 0 0 16px -8px; +} + +main .template-x .search-dropdown-container .trends-container .trends-wrapper li, +main .template-x .search-dropdown-container .suggestions-container li { + margin-bottom: 16px; +} + +main .template-x .search-dropdown-container .suggestions-container li { + cursor: pointer; + margin: 0 8px 0 0; + padding: 8px; +} + +main .template-x .search-dropdown-container .suggestions-container li:hover, +main .template-x .search-dropdown-container .suggestions-container li:focus-visible { + background: var(--color-gray-200); + outline: none; + border-radius: 8px; +} + +main .template-x .search-dropdown-container .trends-container .trends-wrapper li a { + color: var(--color-black); +} + +main .template-x .search-dropdown-container .suggestions-container { + min-width: 300px; +} + +main .template-x .search-dropdown-container .free-plans-container .free-plan-widget { + width: 100%; + border-radius: 0 0 12px 12px; + flex-direction: row; + align-items: center; + gap: 10px; + margin: 0; + justify-content: center; +} + +main .template-x .search-bar-wrapper { + position: absolute; + left: 0; + width: 100%; + max-width: 560px; + margin: 0; + height: max-content; + transition: max-width 0.5s; +} + +.template-x .search-bar-wrapper .search-bar { + box-sizing: border-box; + margin: 0; + font-family: var(--body-font-family); + font-weight: 400; + font-size: 16px; + padding: 10px 40px; + border: var(--color-gray-200) 2px solid; + border-radius: 100px; + max-width: 560px; + width: 100%; + height: 41px; + transition: max-width 0.5s, padding-right 0.5s, padding-left 0.5s; +} + +.template-x .search-bar-wrapper .search-bar::placeholder { + transition: color 0.5s; +} + +.template-x .search-bar-wrapper .search-bar:focus-visible, +.template-x .search-bar-wrapper .search-bar:focus { + border: #444444 2px solid; + outline: none; +} + +main .template-x .search-bar-wrapper .search-bar:disabled { + background-color: var(--color-gray-100); +} + +main .template-x .search-bar-wrapper .icon.icon-search { + position: absolute; + z-index: 1; + height: 16px; + width: 16px; + pointer-events: none; + top: 50%; + transform: translateY(-50%); + transition: left 0.5s; + left: 16px; +} + +.template-x .search-bar-wrapper .icon.icon-search-clear { + position: absolute; + z-index: 1; + height: 16px; + width: 16px; + cursor: pointer; + top: 50%; + transform: translateY(-50%); + right: 40px; +} + +main .template-x .api-templates-toolbar .search-bar-wrapper { + display: none; +} + +.template-x .api-templates-toolbar .search-bar-wrapper.show { + display: block; +} + +.template-x .api-templates-toolbar .search-bar-wrapper.collapsed .icon-search { + left: 12px; +} + +.template-x .api-templates-toolbar .search-bar-wrapper .icon-search-clear { + right: 12px; +} + +.template-x .api-templates-toolbar .search-dropdown-container { + background: #FFFFFF; + top: calc(100% + 6px); + border-radius: 12px; + box-shadow: 0 0 20px #00000029; + position: absolute; + width: 100%; + box-sizing: border-box; + left: 0; + z-index: 3; +} + +main .template-x .api-templates-toolbar .search-bar-wrapper .hidden, +main .template-x .api-templates-toolbar .search-bar-wrapper.collapsed .search-dropdown-container { + display: none; +} + +.template-x .search-bar-wrapper .icon-search-clear, +.template-x .search-bar-wrapper.sticky-search-bar.collapsed .icon-search-clear, +.template-x .search-bar-wrapper.sticky-search-bar.collapsed .search-dropdown { + display: none; +} + +.template-x .api-templates-toolbar .search-bar-wrapper.collapsed { + position: relative; + max-width: 42px; +} + +.template-x .api-templates-toolbar .search-bar-wrapper.collapsed .search-bar { + padding: 0; + max-width: 42px; +} + +.template-x .api-templates-toolbar .search-bar-wrapper.collapsed .search-bar::placeholder, +.template-x .api-templates-toolbar .search-bar-wrapper.collapsed .search-bar { + color: transparent; +} + +.template-x .api-templates-toolbar .wrapper-functions { + display: flex; + justify-content: space-between; + flex-grow: 1; + align-items: center; + gap: 24px; +} + +.template-x .api-templates-toolbar .wrapper-functions .icon { + display: block; + padding-right: 6px; + height: 18px; + width: 18px; +} + +.template-x .api-templates-toolbar .wrapper-functions .views .icon { + height: 22px; + width: 22px; + padding-right: unset; +} + +.template-x .api-templates-toolbar .wrapper-functions .functions-container, +.template-x .api-templates-toolbar .functions-drawer { + display: flex; + align-items: center; + gap: 16px; +} + +.template-x .api-templates-toolbar .wrapper-functions .functions-container { + display: none; +} + +.template-x .api-templates-toolbar .wrapper-functions .current-option { + font-family: var(--body-font-family); + font-size: 14px; + line-height: 24px; + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.template-x .api-templates-toolbar .wrapper-functions .functions-container .function-wrapper, +.template-x .api-templates-toolbar .functions-drawer .function-sort { + cursor: pointer; + user-select: none; +} + +.template-x .api-templates-toolbar .wrapper-functions .functions-container .function-wrapper { + background-color: var(--color-gray-200); + padding: 4px 8px; + border-radius: 8px; + width: 100vw; + max-width: 160px; + position: relative; + transition: background-color 0.2s; +} + +.template-x .api-templates-toolbar .wrapper-functions .functions-container .function-wrapper:hover { + background-color: var(--color-gray-300); +} + +.template-x .api-templates-toolbar .wrapper-functions .functions-container .options-wrapper { + position: absolute; + box-sizing: border-box; + z-index: 1; + width: 100%; + display: none; + flex-direction: column; + align-items: stretch; + top: 0; + left: 0; + background: var(--color-white); + border-radius: 8px; + overflow: hidden; + box-shadow: 0 3px 6px #00000016; +} + +.template-x .api-templates-toolbar .functions-drawer .function-sort .options-wrapper { + position: absolute; + box-sizing: border-box; + z-index: 1; + width: 88%; + display: none; + flex-direction: column; + align-items: stretch; + bottom: -190px; + right: 50%; + transform: translateX(50%); + background: var(--color-white); + padding: 12px; + border-radius: 8px; + box-shadow: 0 3px 6px #00000016; +} + +.template-x .api-templates-toolbar .functions-drawer .function-sort .options-wrapper .icon { + padding-right: 4px; + height: 18px; + width: 18px; +} + +.template-x .api-templates-toolbar .function-wrapper.opened .options-wrapper { + display: flex; +} + +.template-x .api-templates-toolbar .function-wrapper.opened .button-wrapper .icon.icon-drop-down-arrow { + transform: rotate(180deg); +} + +.template-x .api-templates-toolbar .functions-drawer .category-list-wrapper .category-list li { + margin-bottom: 0; +} + +.template-x .api-templates-toolbar .wrapper-functions .functions-container .options-wrapper .option-button, +.template-x .api-templates-toolbar .functions-drawer .function-wrapper .options-wrapper .option-button, +.template-x .api-templates-toolbar .functions-drawer .category-list-wrapper .category-list li > a { + font-size: 14px; + font-family: var(--body-font-family); + line-height: 18px; + cursor: pointer; + display: flex; + align-items: center; + text-align: left; + padding: 7px 16px 7px 8px; + word-break: keep-all; + transition: background-color 0.2s, color 0.2s; +} + +.template-x .api-templates-toolbar .functions-drawer .category-list-wrapper .category-list li.active > a { + font-weight: 600; + color: var(--color-info-accent); +} + +.template-x .api-templates-toolbar .functions-drawer .category-list-wrapper .category-list li > a > span { + margin-left: 4px; +} + + +.template-x .api-templates-toolbar .function-wrapper .options-wrapper .option-button.active { + font-weight: 700; + color: var(--color-info-accent); +} + +.template-x .api-templates-toolbar .wrapper-functions .functions-container .options-wrapper .option-button:hover, +.template-x .api-templates-toolbar .functions-drawer .function-wrapper .options-wrapper .option-button:hover, +.template-x .api-templates-toolbar .functions-drawer .function-wrapper .options-wrapper .option-button.active +{ + background-color: var(--color-gray-200); +} + +.template-x .api-templates-toolbar .functions-drawer .function-wrapper .options-wrapper .option-button:hover, +.template-x .api-templates-toolbar .functions-drawer .function-wrapper .options-wrapper .option-button.active +{ + border-radius: 8px; +} + +.template-x .api-templates-toolbar .wrapper-functions .functions-container .options-wrapper .option-button .icon, +.template-x .api-templates-toolbar .functions-drawer .function-wrapper .options-wrapper .option-button .icon, +.template-x .api-templates-toolbar .functions-drawer .category-list-wrapper .category-list li .icon{ + height: 18px; + width: 18px; + padding-right: 6px; +} + +.template-x .api-templates-toolbar .wrapper-functions .functions-container .options-wrapper .option-button:hover .option-radio, +.template-x .api-templates-toolbar .functions-drawer .function-wrapper .options-wrapper .option-button:hover .option-radio { + border: #4646C6 6px solid; + max-height: 4px; + max-width: 4px; + border-radius: 50%; +} + +.template-x .api-templates-toolbar .wrapper-functions .functions-container .options-wrapper .option-button:active .option-radio, +.template-x .api-templates-toolbar .functions-drawer .function-wrapper .options-wrapper .option-button:active .option-radio { + border: #3D3DB4 6px solid; + max-height: 4px; + max-width: 4px; + border-radius: 50%; +} + +.template-x .api-templates-toolbar .wrapper-functions .functions-container .options-wrapper .option-button .option-radio:focus-visible, +.template-x .api-templates-toolbar .functions-drawer .function-wrapper .options-wrapper .option-button .option-radio:focus-visible { + outline-offset: 4px; +} + +.template-x .api-templates-toolbar .wrapper-functions .functions-container .options-wrapper .option-button.active .option-radio, +.template-x .api-templates-toolbar .functions-drawer .function-wrapper .options-wrapper .option-button.active .option-radio { + border: #5c5ce0 6px solid; + max-height: 4px; + max-width: 4px; + border-radius: 50%; +} + +.template-x .api-templates-toolbar .views { + display: flex; + gap: 8px; + min-width: 82px; +} + +.template-x .api-templates-toolbar .views .view-toggle-button { + opacity: 0.16; + height: 22px; + transition: opacity 0.2s; + cursor: pointer; +} + +.template-x .api-templates-toolbar .views .view-toggle-button:hover { + opacity: 0.27; +} + +.template-x .api-templates-toolbar .views .view-toggle-button.active { + opacity: 1; +} + +.template-x .api-templates-toolbar .button-wrapper { + display: flex; + align-items: center; + position: relative; + padding-right: 24px; +} + +.template-x .api-templates-toolbar .button-wrapper .icon.icon-drop-down-arrow { + height: 10px; + width: 10px; + position: absolute; + right: 3px; + transform: rotate(0deg); + z-index: 2; + padding-right: 0; +} + +.template-x .api-templates-toolbar .functions-drawer .filter-drawer-mobile-inner-wrapper .function-wrapper .icon.icon-drop-down-arrow { + transform: rotate(180deg); +} + +.template-x .api-templates-toolbar .functions-drawer .filter-drawer-mobile-inner-wrapper .function-wrapper.collapsed .icon.icon-drop-down-arrow { + transform: rotate(0deg); +} + +.template-x .api-templates-toolbar .functions-drawer .filter-drawer-mobile { + position: fixed; + box-sizing: border-box; + overflow-x: hidden; + z-index: 4; + top: 0; + right: 0; + height: 100%; + width: 80vw; + background: var(--color-white); + padding: 12px 24px; + display: flex; + flex-direction: column; + text-align: left; + transition: transform 0.5s; +} + +.template-x .api-templates-toolbar .functions-drawer .filter-drawer-mobile.scrollable::before { + content: ''; + position: absolute; + z-index: 1; + width: 100vw; + bottom: 76px; + left: 0; + height: 88px; + background: linear-gradient(#ffffff00, #ffffff90, #ffffff); +} + +.template-x .api-templates-toolbar .functions-drawer .filter-drawer-mobile .filter-drawer-mobile-inner-wrapper { + text-align: right; + height: 100%; + overflow: auto; + padding-bottom: 76px; +} + +.template-x .api-templates-toolbar .functions-drawer .filter-drawer-mobile .filter-drawer-mobile-inner-wrapper::-webkit-scrollbar { + display: none; +} + +.template-x .api-templates-toolbar .functions-drawer .filter-drawer-mobile .close-drawer { + margin-left: auto; + cursor: pointer; + height: 18px; + width: 18px; +} + +.template-x .api-templates-toolbar .functions-drawer .filter-container-mobile .drawer-background { + z-index: 3; + position: fixed; + background: var(--color-gray-600); + top: 0; + left: 0; + height: 100%; + width: 100vw; + transition: opacity 0.5s; +} + +.template-x .api-templates-toolbar .functions-drawer .filter-container-mobile .drawer-background.hidden { + display: none; +} + +.template-x .api-templates-toolbar .functions-drawer .filter-container-mobile .drawer-background.transparent { + opacity: 0; +} + +.template-x .api-templates-toolbar .functions-drawer .filter-button-mobile-wrapper, +.template-x .api-templates-toolbar .functions-drawer .button-wrapper { + font-family: var(--body-font-family); + cursor: pointer; + display: flex; + gap: 4px; + align-items: center; +} + +.template-x .api-templates-toolbar .filter-drawer-mobile .button-wrapper { + margin-bottom: 8px; +} + +.template-x .api-templates-toolbar .filter-drawer-mobile .button-wrapper span { + font-size: 14px; + line-height: 24px; + font-weight: 700; +} + +.template-x .api-templates-toolbar .functions-drawer .filter-button-mobile-wrapper .icon, +.template-x .api-templates-toolbar .functions-drawer .button-wrapper .icon { + height: 18px; + width: 18px; + display: block; +} + +.template-x .api-templates-toolbar .functions-drawer .filter-button-mobile-wrapper .icon.icon-drop-down-arrow, +.template-x .api-templates-toolbar .functions-drawer .button-wrapper .icon.icon-drop-down-arrow { + height: 10px; + width: 10px; +} + +.template-x .api-templates-toolbar .functions-drawer .filter-drawer-mobile .function-wrapper { + padding: 12px 0; + border-top: var(--color-gray-200) 1px solid; + overflow: hidden; + transition: max-height 0.2s; +} + +.template-x .api-templates-toolbar .functions-drawer .filter-drawer-mobile .function-wrapper:first-of-type { + border-top: none; +} + +.template-x .api-templates-toolbar .functions-drawer .filter-drawer-mobile .options-wrapper { + display: flex; + flex-direction: column; +} + +.template-x .api-templates-toolbar .functions-drawer .filter-drawer-mobile .options-wrapper .option-button:before { + margin-right: 16px; +} + +.template-x .api-templates-toolbar .apply-filter-button-wrapper { + position: fixed; + bottom: 0; + left: 0; + z-index: 5; + display: flex; + align-items: center; + justify-content: center; + width: 100vw; + height: 76px; + background: var(--color-gray-200); + transition: opacity 0.2s; +} + +.template-x .api-templates-toolbar .apply-filter-button-wrapper.hidden { + display: none; +} + +.template-x .api-templates-toolbar .apply-filter-button-wrapper.transparent { + opacity: 0; +} + +.template-x .api-templates-toolbar .apply-filter-button { + width: 276px; + height: 32px; + font-size: 16px; + border-radius: 100px; + display: flex; + align-items: center; + justify-content: center; +} + +.template-x .api-templates-toolbar .functions-drawer .filter-drawer-mobile.hidden { + display: none; +} + +.template-x .api-templates-toolbar .functions-drawer .filter-drawer-mobile.retracted { + transform: translateX(100%); +} + +.template-x .category-list-wrapper .category-list-heading { + margin-bottom: 4px; + height: 24px; + padding: 4px 7px; + border-radius: 8px; + transition: background-color .2s, color .2s; + overflow: hidden; + display: flex; + font-weight: 700; + font-size: var(--body-font-size-s); + align-items: center; + width: max-content; +} + +.template-x .category-list-wrapper .category-list-heading .icon { + height: 18px; + width: 18px; + padding-right: 8px; +} + +.template-x.with-categories-list .api-templates-toolbar .category-list-wrapper { + padding: 12px 0; + border-top: var(--color-gray-200) 1px solid; + overflow: auto; + transition: max-height 0.5s; +} + +.template-x.with-categories-list .api-templates-toolbar .category-list-wrapper.collapsed { + overflow: hidden; +} + +.template-x.with-categories-list .api-templates-toolbar .category-list-wrapper::-webkit-scrollbar { + display: none; +} + +.template-x.with-categories-list .api-templates-toolbar .category-list-wrapper .category-list-toggle-wrapper { + margin-bottom: 8px; + cursor: pointer; + display: flex; + gap: 4px; + align-items: center; + position: relative; + padding-right: 16px; +} + +.template-x.with-categories-list .api-templates-toolbar .category-list-wrapper .category-list-toggle-wrapper > .icon { + height: 22px; + width: 22px; +} + +.template-x.with-categories-list .api-templates-toolbar .category-list-wrapper .category-list-toggle { + font-family: var(--body-font-family); + font-size: 14px; + line-height: 24px; + font-weight: 700; +} + +.template-x.with-categories-list .api-templates-toolbar .category-list-wrapper .category-list-toggle-wrapper .icon-drop-down-arrow { + height: 10px; + width: 10px; + position: absolute; + right: 3px; + transform: rotate(180deg); +} + +.template-x.with-categories-list .api-templates-toolbar .category-list-wrapper .category-list-toggle-wrapper.collapsed .icon-drop-down-arrow { + transform: rotate(0deg); +} + +.template-x.with-categories-list .api-templates-toolbar .category-list-wrapper .category-list { + margin: 0; + list-style: none; + padding-left: unset; +} + +.template-x.with-categories-list .api-templates-toolbar .category-list-wrapper .category-list li > .category-list-template-count { + font-family: var(--body-font-family); + margin-left: 2px; +} + +.template-x.with-categories-list .api-templates-toolbar .category-list-wrapper .category-list li a { + color: var(--color-black); + font-weight: 400; + font-size: 14px; + line-height: 24px; + cursor: pointer; +} + +.template-x.with-categories-list .api-templates-toolbar .lottie-wrapper { + position: fixed; + z-index: 2; + bottom: 76px; + right: 0; +} + +.template-x.with-categories-list .api-templates-toolbar .lottie-wrapper .lottie { + height: 54px; + width: 54px; + pointer-events: none; +} + +.template-x.with-categories-list .category-list-wrapper { + display: none; + padding-top: 32px; + text-align: left; + overflow: hidden; + height: max-content; + max-height: 1000px; + min-width: max-content; + transition: max-height 0.5s; +} + +.template-x.with-categories-list .toolbar-wrapper .category-list-wrapper { + display: block; +} + +.template-x.with-categories-list .toolbar-wrapper .category-list-wrapper .category-list-heading { + display: none; +} + +.template-x.with-categories-list .category-list-wrapper::-webkit-scrollbar { + display: none; +} + +.template-x.with-categories-list .category-list-toggle-wrapper { + margin-bottom: 16px; + display: flex; + gap: 4px; + align-items: center; + position: relative; + padding-right: 16px; +} + +.template-x.with-categories-list .category-list-toggle-wrapper .icon.icon-template-free { + height: 18px; + width: 18px; +} + +.template-x.with-categories-list .category-list-toggle { + font-family: var(--body-font-family); + font-size: 16px; + line-height: 24px; + font-weight: 700; + white-space: nowrap; +} + +.template-x.with-categories-list .category-list-resize { + font-family: var(--body-font-family); + color: var(--color-gray-500); + position: relative; + display: flex; + align-items: center; + cursor: pointer; + background: var(--color-white); +} + +.template-x.with-categories-list .category-list-resize:after { + position: absolute; + width: 100%; + height: 80px; + background: linear-gradient(#ffffff00, #ffffff90, #ffffff); + bottom: 100%; +} + +.template-x.with-categories-list .category-list-wrapper ul > li:hover { + background-color: var(--color-gray-200); + color: var(--color-info-accent); + border-radius: 8px; +} + +@media (min-width: 900px) { + .template-x.with-categories-list .category-list-wrapper { + text-align: left; + padding-top: 32px; + } +} + +/* Carousel styles (Template-x specific) */ + +/* hide controls in mobile-breakpoint if they scrolled using drag */ +.template-x.horizontal .carousel-container.controls-hidden .carousel-fader-left, +.template-x.horizontal .carousel-container.controls-hidden .carousel-fader-right { + opacity: 0; + pointer-events: none; +} + +.template-x.horizontal .carousel-container.controls-hidden .carousel-fader-left a.button.carousel-arrow, +.template-x.horizontal .carousel-container.controls-hidden .carousel-fader-right a.button.carousel-arrow { + pointer-events: none; +} + +/* Remove max-width on mobile breakpoints */ +.section.template-x-horizontal-container { + padding-left: 0; + padding-right: 0; +} + +.template-x.horizontal { + min-height: 54px; + padding-left: 0; + padding-right: 0; +} + +/* re-add max-width on elements that are not carousel */ +.template-x.horizontal > *:not(.template-x.horizontal), +.template-x.horizontal:not(.holiday) > .template-x.horizontal > *:not(.carousel-container) { + max-width: unset; + padding-left: 15px; + padding-right: 15px; + margin-right: auto; + margin-left: auto; + margin-bottom: 24px; + margin-block: auto; +} + +main .template-x.horizontal > .template-x.horizontal.tabbed > .template-title { + margin-bottom: 0; +} + +.template-x.horizontal .carousel-container { + margin-left: 0; + margin-right: 0; +} + +.template-x.horizontal.mini .carousel-container { + margin-bottom: 0; +} + +.template-x.horizontal .carousel-platform { + scroll-padding: 12px; + padding: 24px 15px; + box-sizing: border-box; +} + +.template-x.horizontal.mini .carousel-platform { + padding: 32px; +} + +.template-x.horizontal.fullwidth.holiday .carousel-container .carousel-fader-right { + transform: translate3d(0, 0, 0); + height: 232px; + right: -2px; +} + +.template-x.horizontal.fullwidth.holiday .carousel-container .carousel-fader-left { + transform: translate3d(0, 0, 0); + height: 232px; + left: -4px +} + +.template-x.horizontal.holiday .template-x-inner-wrapper .carousel-container { + max-width: 1090px; +} + +.template-x.horizontal.holiday.animated video ~ .template-x-inner-wrapper { + padding: 0; + margin: 0; +} + +.template-x.horizontal.holiday.animated video ~ .template-x-inner-wrapper .carousel-container { + max-width: none; +} + +.template-x.mini { + min-height: unset; +} + +.template-x-horizontal-fullwidth-mini-container .template-x .template-title { + margin-bottom: 8px; +} + +.template-x-horizontal-fullwidth-mini-container.toc-container .template-x .template-title h2 { + -webkit-hyphens: none; /* safari */ + hyphens: none; + display: inline; +} + +.template-x-horizontal-fullwidth-mini-container.toc-container .template-x .template-title .toc-slot { + display: inline; + width: 116px; + height: 44px; + float: right; +} + +.template-x-horizontal-fullwidth-mini-container .template-x .template-title p:last-of-type { + margin-top: 16px; + font-weight: 800; +} + +.template-x-horizontal-fullwidth-mini-container .template-x .template-title p:first-of-type { + margin-bottom: 8px; +} + +.template-x-horizontal-fullwidth-mini-container .template-x .template-title p:last-of-type { + margin-top: 16px; + font-weight: 800; +} + +.template-x-horizontal-fullwidth-mini-container .template-title .icon { + height: unset; + width: 167px; +} + +.template-x-horizontal-fullwidth-mini-container .template-x .carousel-fader-left, +.template-x-horizontal-fullwidth-mini-container .template-x .carousel-fader-right { + display: none; +} + +.template-x-horizontal-fullwidth-mini-spreadsheet-powered-container > div, +.template-x-horizontal-fullwidth-mini-container > div { + max-width: unset; + padding: 0; +} + +.template-x.collaboration { + margin-bottom: 40px; +} + +.template-x.collaboration .template-title > div { + display: block; + position: relative; +} + +.template-x.collaboration .template-title .social-links { + display: flex; + gap: 12px; +} + +.template-x.collaboration .template-title .social-links a.template-title-link { + height: 22px; + width: 22px; +} + +.template-x.collaboration .template-title .social-links a.template-title-link svg { + height: 100%; + width: 100%; +} + +.template-x.collaboration .template-title .social-links a.template-title-link:after { + content: unset; +} + +.template-x.collaboration .template-title > div > h3 { + scroll-margin: 72px; + display: flex; + gap: 8px; + font-size: 22px; + line-height: 25px; + color: var(--color-black); +} + +.template-x.collaboration .template-title p:first-of-type { + max-width: 600px; + margin: 16px 0; +} + +.template-x.collaboration .template-title p:last-of-type { + position: absolute; + bottom: 0; + right: 0; +} + +.template-x.collaboration .template-title > div > h3 .collaboration-anchor { + display: inline-block; + position: relative; + height: 24px; + width: 24px; + min-width: 24px; + background-image: url('/express/icons/link.svg'); + background-repeat: no-repeat; + cursor: pointer; +} + +.template-x.collaboration .template-title > div > h3 .collaboration-anchor .clipboard-tag { + background-color: #268e6c; + color: var(--color-white); + white-space: nowrap; + font-size: 12px; + padding: 2px 8px; + border-radius: 6px; + position: absolute; + right: 0; + bottom: 32px; + opacity: 0; + transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; +} + +.template-x.collaboration .template-title > div > h3 .collaboration-anchor.copied .clipboard-tag { + opacity: 1; +} + +.template-x.collaboration .carousel-container { + margin-left: 6px; +} + +.template-x.horizontal.holiday { + position: absolute; + overflow: hidden; + width: 100%; + background: var(--color-black); + min-height: 72px; + cursor: pointer; +} + +.template-x.horizontal.holiday.animated { + color: var(--color-white); + padding-top: 0; +} + +.template-x.horizontal.holiday.light-text, +.template-x.horizontal.holiday.light-text .toggle-button a, +.template-x.horizontal.holiday.light-text .template-link { + color: var(--color-white); +} + +.template-x.horizontal.holiday.light-text .toggle-button .toggle-button-chev { + border-color: var(--color-white); +} + +.template-x.horizontal.holiday.dark-text, +.template-x.horizontal.holiday.dark-text .toggle-button a, +.template-x.horizontal.holiday.dark-text .template-link { + color: var(--color-gray-800); +} + +.template-x.horizontal.holiday.dark-text .toggle-button .toggle-button-chev { + border-color: var(--color-gray-800); +} + +.template-x.horizontal.holiday p, +.template-x.horizontal.holiday picture { + z-index: 1; +} + +.template-x.horizontal.holiday .template-title { + width: max-content; + margin: auto; + cursor: pointer; + user-select: none; +} + +.template-x.horizontal.holiday .toggle-bar { + margin: auto; + max-width: 925px; +} + +.template-x.horizontal.holiday .toggle-bar > div:not(.toggle-button) { + display: flex; + flex-direction: row; + justify-content: space-between; + margin: auto; + align-items: center; +} + +.template-x.horizontal.holiday .toggle-bar p { + font-size: 16px; + margin: 0; +} + +.template-x.horizontal.holiday .toggle-bar img { + display: block; + max-height: 32px; +} + +.template-x.horizontal.holiday .toggle-button { + align-self: center; + transition: margin 0.4s, transform 0.4s; + padding: 4px 0 16px 0; +} + +.template-x.horizontal.holiday.mobile .toggle-button { + display: flex; + transform: translateX(0); + margin-left: 50%; + padding: 0 0 16px 0; + width: 110px; +} + +.template-x.horizontal.holiday.expanded.mobile .toggle-button { + margin-left: 50%; + transform: translateX(-50%); +} + +.template-x.horizontal.holiday .toggle-button a:hover { + text-decoration: underline; +} + +.template-x.horizontal.holiday .toggle-button .toggle-button-chev { + display: flex; + width: 6px; + height: 6px; + border-top-width: 0; + border-left-width: 0; + border-bottom-width: 2px; + border-right-width: 2px; + border-style: solid; + transform-origin: 75% 75%; + transform: rotate(45deg); + margin-top: 5px; + margin-left: 5px; + margin-right: 2.25px; + transition: transform 0.2s; + cursor: pointer; +} + +.template-x.horizontal.holiday .toggle-bar-top { + display: flex; + justify-content: space-between; + gap: 22px; + align-items: center; +} + +.template-x.horizontal.holiday .toggle-bar-bottom { + display: flex; + justify-content: flex-end; + gap: 32px; + z-index: 1; +} + +.template-x.horizontal.holiday .template-x-wrapper, +.template-x.holiday, +.template-x.holiday .carousel-container { + max-width: none; + z-index: 1; +} + +.template-x.horizontal.holiday .template-x-wrapper { + max-height: 0; + position: relative; + transition: max-height 0.5s, padding-top 0.5s; + overflow: hidden; +} + +.template-x.holiday .carousel-container .carousel-platform { + scroll-padding: initial; + max-height: 250px; + padding: 20px 0 24px; +} + +.template-x-container .template-x-wrapper.horizontal.holiday > .template-x.horizontal > .template-title { + padding: 0 30px 0 30px; +} + +.template-x-horizontal-holiday-container.expanded .animation-background { + opacity: 1; + transition: opacity 1s; +} + +.template-x .template .still-wrapper .image-wrapper { + position: relative; +} + +.template-x .template .still-wrapper .image-wrapper .free-tag { + position: absolute; + height: 24px; + display: flex; + border-radius: 1000px; + align-items: center; + font-weight: 500; + width: max-content; + top: 8px; + right: 8px; + color: var(--color-white); + font-size: 12px; + line-height: 16px; + padding: 0 12px; + background: #000000B3; +} + +.template-x .template .still-wrapper .image-wrapper .icon-premium { + position: absolute; + width: 30px; + height: 30px; + bottom: 8px; + right: 8px; +} + +.template-x .template .still-wrapper .image-wrapper .media-type-icon { + position: absolute; + width: 20px; + height: 20px; + background-color: white; + bottom: 8px; + left: 8px; + border-radius: 50%; + box-shadow: 0 0 5px #00000033; +} + +.template-x .template .still-wrapper .image-wrapper .remix-cnt { + position: absolute; + top: 8px; + left: 8px; + background: #000000B3; + opacity: 0.7; + color: white; + border-radius: 8px; + text-align: center; + padding: 2px 6px; + font-size: var(--body-font-size-s); +} + +.template-x .template .still-wrapper .creator-span { + line-height: 20px; + font-size: var(--body-font-size-s); +} + +.template-x .template:not(.placeholder) .button-container { + opacity: 0; + background-color: white; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + padding: 8px; + box-shadow: 0 0 6px #00000029; +} + +.template-x .template .button-container:hover { + z-index: 99; +} + + +.template-x.horizontal .template:not(.placeholder):first-of-type .button-container { + margin-left: 12px; +} + +.template-x .template .button-container .media-wrapper { + position: relative; + height: calc(100% - 34px); + width: 100%; +} + +.template-x.horizontal .template .button-container .media-wrapper { + flex-basis: 100%; +} + +.template-x .template .button-container a.button { + max-width: 100%; + margin: 6px 6px 0; + box-sizing: border-box; + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.template-x .template .button-container a.cta-link { + width: 100%; + height: 100%; + white-space: nowrap; + font-weight: var(--body-font-weight); +} + +.template-x.horizontal .template .button-container a.button { + min-height: 16px; +} + +.template-x.horizontal.mini .template .button-container a.button { + font-size: var(--body-font-size-xs); + padding: 2px 6px 4px; +} + +.template-x .template .button-container .media-wrapper .icon-share-arrow { + cursor: pointer; + pointer-events: auto; + width: 12px; + height: 12px; + padding: 4px; + background-color: white; + overflow: visible; +} + +.template-x .template .button-container .media-wrapper .share-icon-wrapper { + position: absolute; + top: 8px; + right: 8px; + border-radius: 50%; + height: 20px; +} + +.template-x .template .button-container .media-wrapper .share-icon-wrapper .shared-tooltip { + visibility: hidden; + position: absolute; + display: flex; + align-items: center; + gap: 4px; + width: 130px; + background-color: #33AB84; + color: white; + text-align: center; + border-radius: 6px; + padding: 6px; + top: 50%; + transform: translateY(-50%); + left: calc(100% + 12px); + font-size: var(--body-font-size-s); +} + +.template-x.horizontal .template:nth-last-of-type(2) .button-container .media-wrapper .share-icon-wrapper .shared-tooltip { + left: unset; + right: calc(100% + 12px); +} + +.template-x .template .button-container .media-wrapper .share-icon-wrapper .shared-tooltip .icon-checkmark-green { + width: 10px; + height: 10px; + border-radius: 30px; + background-color: var(--color-white); + padding: 2px; +} + +.template-x .template .button-container .media-wrapper .share-icon-wrapper .shared-tooltip.display-tooltip { + visibility: visible; +} + +.template-x .template .button-container .media-wrapper .share-icon-wrapper .shared-tooltip.flipped { + left: unset; + right: calc(100% + 12px); +} + +.template-x .template .button-container .media-wrapper .share-icon-wrapper .shared-tooltip::after { + content: " "; + position: absolute; + top: 50%; + right: 100%; + margin-top: -5px; + border-width: 5px; + border-style: solid; + border-color: transparent #33AB84 transparent transparent; +} + +.template-x.horizontal .template:nth-last-of-type(2) .button-container .media-wrapper .share-icon-wrapper .shared-tooltip::after { + right: unset; + left: 100%; + border-color: transparent transparent transparent #33AB84; +} + +.template-x .template .button-container .media-wrapper .share-icon-wrapper .shared-tooltip.flipped::after { + right: unset; + left: 100%; + transform: rotate(180deg); +} + +.template-x .template-x-fallback-msg-wrapper { + font-size: 22px; + text-align: center; + padding: 0 28px; +} + +nav ol.templates-breadcrumbs { + list-style: none; + margin: 0 0 0 16px; + padding: 0; + display: flex; +} + +nav ol.templates-breadcrumbs li { + display: flex; + padding: 5px 10px 5px 0; + color: var(--color-gray-500); +} + +nav ol.templates-breadcrumbs li a { + color: var(--color-black); + font-weight: 400; +} + +nav ol.templates-breadcrumbs li:not(:first-child):before { + content: '/'; + color: var(--color-black); + padding: 0 10px 0 0; +} + +@media (max-width: 600px) { + .template-x .toolbar-wrapper { + z-index: 11; + } + .template-x-wrapper.horizontal { + margin-left: 0; + margin-right: 0; + max-width: unset; + } + + .template-x.horizontal.holiday .template-x-inner-wrapper .carousel-container { + margin-right: 16px; + margin-left: 16px; + } + + .template-x.horizontal.holiday .template-x-inner-wrapper .carousel-container { + margin-left: 16px; + } + + .template-x.fullwidth.holiday.expanded .template-x-inner-wrapper { + margin-left: 16px; + margin-right: 16px; + } +} + +@media (max-width: 900px) { + .template-x.horizontal.holiday .toggle-bar p { + display: none; + } + + .template-x.horizontal.holiday .toggle-bar-bottom { + margin-left: 16px; + } + + .template-x.holiday.mobile .carousel-container { + margin-bottom: 0; + } + + .template-x.horizontal.holiday .toggle-bar h4 { + margin: 0; + } + + .template-x.horizontal.holiday .toggle-bar { + margin-top: 10px; + } +} + +@media (max-width: 1200px) { + .template-x.horizontal.holiday .toggle-bar p { + font-size: 14px; + } + + .template-x.horizontal.holiday .toggle-bar h4 { + font-size: 15px; + } + + .template-x-wrapper.holiday .template-title-link { + font-size: var(--body-font-size-s); + } +} + +@media (min-width: 600px) { + .template-x .toolbar-wrapper { + border-radius: 12px; + } + + .template-x.with-categories-list .category-list-wrapper .category-list-toggle-wrapper { + padding: 4px 8px; + } + + .template-x.with-categories-list .category-list-wrapper .category-list-toggle-wrapper .icon { + transition: transform 0.2s; + } + + .template-x.with-categories-list .category-list-wrapper:hover .category-list-toggle-wrapper .icon { + transform: rotate(180deg); + } + + .template-x.with-categories-list .template-x.fullwidth { + width: calc(100% - 172px); + } + + .template-x.with-categories-list .template-x.fullwidth.sm-view { + max-width: calc(100% - 172px); + } + + .template-x.with-categories-list .template-x.fullwidth.md-view { + max-width: calc(100% - 260px); + } + + .template-x.with-categories-list .template-x.fullwidth.lg-view { + max-width: calc(100% - 337px); + } + + .template-x.fullwidth.lg-view .template.placeholder { + width: 354px; + } + + .template-x.fullwidth.md-view .template.placeholder { + width: 227.33px; + } + + .template-x.fullwidth.sm-view .template.placeholder { + width: 165px; + } + + .template-x.fullwidth:not(.horizontal), + .template-x > .default-content, + .template-x.fullwidth:not(.horizontal), + .template-x:not(.horizontal) > .default-content { + max-width: none; + padding: 0 28px; + } + + .template-x.fullwidth.lg-view > .template-x-inner-wrapper > .masonry-col { + max-width: 328px; + text-align: center; + } + + .template-x.fullwidth.md-view > .template-x-inner-wrapper > .masonry-col { + max-width: 200px; + text-align: center; + } + + .template-x.fullwidth.sm-view > .template-x-inner-wrapper > .masonry-col { + max-width: 163px; + text-align: center; + } + + .template-x.fullwidth.lg-view .template.placeholder, + .template-x.fullwidth.md-view .template.placeholder, + .template-x.fullwidth.sm-view .template.placeholder { + max-height: unset; + } + + .template-x.sm-view .template.placeholder > div:first-of-type { + height: 95%; + } + + .template-x .search-bar-wrapper .task-dropdown-list { + right: 0; + } + + .template-x .api-templates-toolbar .search-bar-wrapper .task-dropdown-list { + left: 0; + } +} + +@media (min-width: 900px) { + .template-x.fullwidth.md-view .template.placeholder { + width: 258.5px; + } + + .template-x.fullwidth.sm-view > .template-x-inner-wrapper > .masonry-col { + max-width: 170px; + text-align: center; + } + + .template-x-container > div, + .template-x-fourcols-container > div, + .template-x-horizontal-container > div { + max-width: 900px; + } + + .template-x.sixcols:not(.horizontal) { + max-width: 748px; + } + + .template-x .template-title.with-link.horizontal { + display: flex; + justify-content: space-between; + align-items: flex-end; + } + + .template-x .template-title.with-link > div { + flex-direction: row; + justify-content: space-between; + } + + .template-x .template-title.with-link.link-only { + justify-content: flex-end; + } + + .template-x:not(.holiday) .template-title.horizontal .view-all-link-wrapper { + margin: 0; + } + + .template-x .template-title.horizontal > div > * { + text-align: left; + } + + .template-x.sixcols:not(.horizontal) > .template-x-inner-wrapper > .masonry-col, + .template-x.fullwidth > .template-x-inner-wrapper > .masonry-col { + max-width: 180px; + } + + .template-x.fullwidth.md-view > .template-x-inner-wrapper > .masonry-col { + max-width: 260px; + text-align: center; + } + + .template-x .template { + width: 240px; + margin-left: 20px; + margin-right: 20px; + } + + .template-x.horizontal.fullwidth .template:not(.placeholder) { + margin: 24px 11px 18px 11px; + } + + .columns .template-x-inner-wrapper { + margin-top: 0; + margin-left: 40px; + } + + .template-x .template:not(.placeholder) .icon-free-badge { + display: none; + } + + .template-x.horizontal .carousel-container { + margin-left: 12px; + margin-right: 12px; + max-width: none; + display: inline-block; + } + + .section.template-x-horizontal-container { + padding-left: 32px; + padding-right: 32px; + } + + .template-x.horizonta:not(.holiday) { + max-width: 800px; + } + + .template-x .api-templates-toolbar h2 { + font-size: 22px; + line-height: 24px; + width: max-content; + } + + .template-x .api-templates-toolbar .wrapper-functions { + flex-grow: 0; + } + + .template-x .api-templates-toolbar .wrapper-content-search .search-bar-wrapper { + width: 480px; + } + + .template-x .search-bar-wrapper .search-dropdown .search-dropdown-heading { + display: unset; + } + + .template-x .search-bar-wrapper .search-dropdown .free-plan-widget { + gap: 32px; + } + + .template-x.collaboration .carousel-container { + margin-left: 0; + } + + .template-x.horizontal.holiday { + min-height: 54px; + } + + main.with-holiday-templates-banner { + padding-top: 54px; + } + + .template-x.horizontal.holiday .toggle-bar { + gap: 14px; + } + + .template-x.horizontal.holiday .toggle-button { + display: flex; + padding: unset; + } + + .template-x.horizontal.holiday.mobile .toggle-button { + margin-left: 50%; + } + + .template-x.horizontal:not(.fullwidth) { + max-width: 800px; + } +} + +@media (min-width: 1200px) { + .template-x.fullwidth.with-categories-list .template-x-inner-wrapper { + padding-left: 40px; + } + + .template-x.with-categories-list .category-list-wrapper { + display: unset; + background: transparent; + position: absolute; + left: 0; + top: 120px; + height: calc(100% - 64px); + max-height: unset; + overflow: hidden; + min-width: unset; + max-width: 32px; + z-index: 1; + } + + .template-x.with-categories-list .category-list-wrapper ul { + position: relative; + list-style: none; + max-height: 800px; + overflow: hidden; + transition: max-height 0.2s; + margin: 0; + padding-left: 0; + } + + .template-x.with-categories-list .category-list-wrapper ul > li { + margin-bottom: 4px; + border-radius: 8px; + transition: background-color .2s, color .2s; + } + + .template-x.with-categories-list .category-list-wrapper ul > li { + padding: 4px 8px; + } + + .template-x.with-categories-list .category-list-wrapper ul > li:hover { + background-color: var(--color-gray-200); + color: var(--color-info-accent); + } + + .template-x.with-categories-list .category-list-wrapper ul > li.active > a { + color: var(--color-info-accent); + font-weight: 600; + } + + .template-x.with-categories-list .category-list-wrapper ul > li .icon { + height: 18px; + width: 18px; + min-width: 18px; + display: block; + padding-right: 6px; + } + + .template-x.with-categories-list .category-list::before { + content: ''; + z-index: 0; + position: absolute; + height: 100%; + transition: opacity 0.2s; + background: linear-gradient(180deg, #FFFFFF00 0%, #FFFFFF 59%); + } + + .template-x.with-categories-list .category-list-wrapper:not(:hover) .category-list::before { + width: 100%; + } + + .template-x.with-categories-list .category-list-wrapper:hover .category-list::before { + width: 0; + } + + .template-x.with-categories-list .category-list-wrapper:hover::before { + content: ''; + opacity: 1; + z-index: -1; + position: absolute; + height: calc(100% - 120px); + width: 100%; + transition: opacity 0.2s; + background: linear-gradient(90deg, #fff 50%, #ffffff9B 88%, #ffffff00 100%); + } + + .template-x.with-categories-list .category-list-wrapper:hover { + min-width: max-content; + padding-right: 160px; + overflow: visible; + } + + .template-x.fullwidth.with-categories-list .template-x-inner-wrapper { + min-height: 600px; + padding-left: 56px; + } + + .template-x.horizontal .carousel-container { + margin-left: auto; + margin-right: auto; + display: block; + } + + .template-x.horizontal.fullwidth .carousel-container { + margin-bottom: 16px; + max-width: none; + display: block; + } + + .template-x .api-templates-toolbar { + border-radius: 12px; + } + + .template-x .api-templates-toolbar .wrapper-functions .functions-container { + display: flex; + } + + .template-x .api-templates-toolbar .functions-drawer { + display: none; + } + + .template-x .api-templates-toolbar .wrapper-content-search { + flex-basis: unset; + padding-right: 16px; + } + + .template-x .api-templates-toolbar .functions-drawer .function-sort:hover .options-wrapper { + display: flex; + } + + .template-x .api-templates-toolbar .functions-drawer .function-sort:hover .button-wrapper .icon.icon-drop-down-arrow { + transform: rotate(180deg); + } + + .template-x-horizontal-holiday-container { + padding-bottom: 0; + } + + .template-x-horizontal-holiday-container .toggle-bar { + max-width: 1024px; + } + + .template-x-horizontal-holiday-container .mobile-only { + display: none; + } + + .template-x-horizontal-holiday-container .toggle-bar-bottom { + display: flex; + } + + .template-x-horizontal-holiday-container .template-x.expanded { + padding-top: 0; + } + + .template-x .template-x-fallback-msg-wrapper { + padding-left: 60px; + text-align: left; + } + + .template-x.fourcols { + max-width: 1200px; + } + + .template-x.sixcols:not(.horizontal) { + max-width: 1122px; + } + + .template-x.fullwidth { + max-width: none; + } + + /* template-x inside columns */ + + .columns .template-x-inner-wrapper { + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + } + + .columns .template-x .template { + justify-content: flex-start; + min-width: 132px; + } + + .columns .template-x .template-link { + font-size: 0.875rem; + font-weight: 400; + } + + .template-x.fullwidth.with-categories-list .template-x-inner-wrapper { + padding-left: 40px; + padding-right: 0; + } + + .template-x.with-categories-list .category-list-wrapper ul { + position: relative; + list-style: none; + max-height: 800px; + overflow: hidden; + transition: max-height 0.2s; + padding-left: 0; + } + + .template-x.with-categories-list .category-list-wrapper ul > li { + margin-bottom: 4px; + border-radius: 8px; + transition: background-color .2s, color .2s; + } + + .template-x.with-categories-list .category-list-wrapper ul > li { + padding: 4px 8px; + } + + .template-x.with-categories-list .category-list-wrapper ul > li.active > a { + color: var(--color-info-accent); + font-weight: 600; + } + + .template-x.with-categories-list .category-list-wrapper ul > li .icon { + height: 18px; + width: 18px; + min-width: 18px; + display: block; + padding-right: 6px; + } + + .template-x.with-categories-list .category-list-wrapper ul > li > a { + font-family: var(--body-font-family); + color: var(--color-black); + font-weight: 400; + font-size: 14px; + line-height: 24px; + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + white-space: nowrap; + } + + .template-x.with-categories-list .category-list-wrapper ul > li > a > .category-list-template-count { + font-family: var(--body-font-family); + margin-left: 2px; + font-size: 14px; + } + + .template-x.horizontal .carousel-container.controls-hidden .carousel-fader-left, + .template-x.horizontal .carousel-container.controls-hidden .carousel-fader-right { + opacity: unset; + } + + .template-x.horizontal .carousel-container.controls-hidden .carousel-fader-left a.button.carousel-arrow, + .template-x.horizontal .carousel-container.controls-hidden .carousel-fader-right a.button.carousel-arrow { + pointer-events: auto; + } + + .template-x.horizontal .carousel-container .carousel-fader-left.arrow-hidden, + .template-x.horizontal .carousel-container .carousel-fader-right.arrow-hidden { + opacity: 0; + pointer-events: none; + } + + .template-x.horizontal .carousel-container .carousel-fader-left.arrow-hidden a.button.carousel-arrow, + .template-x.horizontal .carousel-container .carousel-fader-right.arrow-hidden a.button.carousel-arrow { + pointer-events: none; + } + + .template-x.horizontal .carousel-container.controls-hidden .carousel-platform { + scroll-snap-type: x mandatory; + } + + .template-x.horizontal.fullwidth .carousel-container { + margin-bottom: 20px; + max-width: none; + display: block; + } + + .template-x .api-templates-toolbar { + border-radius: 12px; + } + + .template-x .api-templates-toolbar .wrapper-functions .functions-container { + display: flex; + } + + .template-x .api-templates-toolbar .functions-drawer { + display: none; + } + + .template-x .api-templates-toolbar .wrapper-content-search { + flex-basis: unset; + padding-right: 16px; + height: 41px; + } + + .template-x .api-templates-toolbar .functions-drawer .function-sort:hover .options-wrapper { + display: flex; + } + + .template-x .api-templates-toolbar .functions-drawer .function-sort:hover .button-wrapper .icon.icon-drop-down-arrow { + transform: rotate(180deg); + } + + .template-x.horizontal { + max-width: 1024px; + } + + .template-x.horizontal.fullwidth .template-x-inner-wrapper > div, + .template-x.horizontal.fullwidth { + max-width: none; + } + + .template-x.horizontal:not(.holiday) { + max-width: 1090px; + } + + .template-x-horizontal-fullwidth-mini-container .template-x.mini { + display: none; + } + + .template-x.collaboration .template-title > div > h3 { + gap: 12px; + } + + .template-x.collaboration .template-title > div > h3 .collaboration-anchor .clipboard-tag { + right: unset; + bottom: unset; + top: 50%; + left: 48px; + transform: translateY(-50%); + } + + .template-x.collaboration .template-title > div > h3 .collaboration-anchor.copied .clipboard-tag { + left: 28px; + } + + .template-x.horizontal.holiday .toggle-bar { + max-width: 1090px; + } + + .template-x.holiday .template-title .toggle-bar-bottom { + display: flex; + flex-grow: 1; + } + + .template-x.horizontal.holiday.expanded .template-x-wrapper { + padding-top: 0; + } +} diff --git a/express/blocks/template-x/template-x.js b/express/blocks/template-x/template-x.js new file mode 100755 index 00000000..4f8aa5e3 --- /dev/null +++ b/express/blocks/template-x/template-x.js @@ -0,0 +1,1762 @@ +import { + getLottie, + lazyLoadLottiePlayer, + toClassName, + getLibs, +} from '../../scripts/utils.js'; +import { titleCase } from '../../scripts/utils/string.js'; +import { createOptimizedPicture, transformLinkToAnimation } from '../../scripts/utils/media.js'; +import { Masonry } from '../../scripts/widgets/masonry.js'; +import buildCarousel from '../../scripts/widgets/carousel.js'; +import { + fetchTemplates, + isValidTemplate, + fetchTemplatesCategoryCount, + gatherPageImpression, + trackSearch, + updateImpressionCache, + generateSearchId, +} from '../../template-x/template-search-api-v3.js'; +import fetchAllTemplatesMetadata from '../../scripts/utils/all-templates-metadata.js'; +import renderTemplate from './template-rendering.js'; +import isDarkOverlayReadable from '../../scripts/color-tools.js'; +import { fixIcons, getIconElementDeprecated } from '../../scripts/utils/icons.js'; +import BlockMediator from '../../scripts/block-mediator.min.js'; + +const imports = await Promise.all([import(`${getLibs()}/features/placeholders.js`), import(`${getLibs()}/utils/utils.js`)]); +const { replaceKey, replaceKeyArray } = imports[0]; +const { getMetadata, createTag, getConfig } = imports[1]; + +function wordStartsWithVowels(word) { + return word.match('^[aieouâêîôûäëïöüàéèùœAIEOUÂÊÎÔÛÄËÏÖÜÀÉÈÙŒ].*'); +} + +function camelize(str) { + return str.replace(/^\w|[A-Z]|\b\w/g, (word, index) => (index === 0 ? word.toLowerCase() : word.toUpperCase())).replace(/\s+/g, ''); +} + +function handlelize(str) { + return str.normalize('NFD') + .replace(/[\u0300-\u036f]/g, '') // Remove accents + .replace(/(\W+|\s+)/g, '-') // Replace space and other characters by hyphen + .replace(/--+/g, '-') // Replaces multiple hyphens by one hyphen + .replace(/(^-+|-+$)/g, '') // Remove extra hyphens from beginning or end of the string + .toLowerCase(); +} + +async function getTemplates(response, fallbackMsg) { + const filtered = response.items.filter((item) => isValidTemplate(item)); + const templates = await Promise.all( + filtered.map((template) => renderTemplate(template)), + ); + return { + fallbackMsg, + templates, + }; +} + +async function fetchAndRenderTemplates(props) { + const [{ response, fallbackMsg }] = await Promise.all( + [fetchTemplates(props)], + ); + if (!response || !response.items || !Array.isArray(response.items)) { + return { templates: null }; + } + + if ('_links' in response) { + // eslint-disable-next-line no-underscore-dangle + const nextQuery = response._links.next.href; + const starts = new URLSearchParams(nextQuery).get('start').split(','); + props.start = starts.join(','); + } else { + props.start = ''; + } + + props.total = response.metadata.totalHits; + + // eslint-disable-next-line no-return-await + return await getTemplates(response, fallbackMsg); +} + +async function processContentRow(block, props) { + const templateTitle = createTag('div', { class: 'template-title' }); + const textWrapper = createTag('div', { class: 'text-wrapper' }); + textWrapper.innerHTML = props.contentRow.outerHTML; + templateTitle.append(textWrapper); + + const aTags = templateTitle.querySelectorAll(':scope a'); + + if (aTags.length > 0) { + templateTitle.classList.add('with-link'); + aTags.forEach((aTag) => { + aTag.className = 'template-title-link'; + + const p = aTag.closest('p'); + if (p) { + templateTitle.append(p); + p.className = 'view-all-link-wrapper'; + } + }); + + if (textWrapper.children.length === 1 && textWrapper.firstElementChild.className === 'button-container') { + templateTitle.classList.add('link-only'); + } + } + + block.prepend(templateTitle); + + if (props.orientation.toLowerCase() === 'horizontal') templateTitle.classList.add('horizontal'); +} + +async function formatHeadingPlaceholder(props) { + // special treatment for express/ root url + const config = getConfig(); + const { region } = config.locale; + const lang = config.locale.ietf; + const templateCount = lang === 'es-ES' ? props.total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ') : props.total.toLocaleString(lang); + const templatePlaceholder = await replaceKey('template-placeholder', getConfig()); + let toolBarHeading = getMetadata('toolbar-heading') ? props.templateStats : templatePlaceholder; + + const templateSearchHeadingSingular = await replaceKey('template-search-heading-singular', getConfig()); + const templateSearchHeadingPlural = await replaceKey('template-search-heading-plural', getConfig()); + if (getMetadata('template-search-page') === 'Y' + && templateSearchHeadingSingular !== 'template search heading singular' + && templateSearchHeadingPlural !== 'template search heading plural') { + // eslint-disable-next-line max-len + toolBarHeading = props.total === 1 ? templateSearchHeadingSingular : templateSearchHeadingPlural; + } + + if (toolBarHeading) { + toolBarHeading = toolBarHeading + .replace('{{quantity}}', props.fallbackMsg ? '0' : templateCount) + .replace('quantity', props.fallbackMsg ? '0' : templateCount) + .replace('{{Type}}', titleCase(getMetadata('short-title') || getMetadata('q') || getMetadata('topics'))) + .replace('{{type}}', getMetadata('short-title') || getMetadata('q') || getMetadata('topics')); + if (region === 'fr') { + toolBarHeading.split(' ').forEach((word, index, words) => { + if (index + 1 < words.length) { + if (word === 'de' && wordStartsWithVowels(words[index + 1])) { + words.splice(index, 2, `d'${words[index + 1].toLowerCase()}`); + toolBarHeading = words.join(' '); + } + } + }); + } + } + + return toolBarHeading; +} + +function constructProps(block) { + const props = { + templates: [], + filters: { + locales: 'en', + topics: '', + }, + renditionParams: { + format: 'jpg', + size: 151, + }, + tailButton: '', + limit: 70, + total: 0, + start: '', + collectionId: 'urn:aaid:sc:VA6C2:25a82757-01de-4dd9-b0ee-bde51dd3b418', + sort: '', + masonry: undefined, + headingTitle: null, + headingSlug: null, + viewAllLink: null, + holidayIcon: null, + backgroundColor: '#000B1D', + backgroundAnimation: null, + textColor: '#FFFFFF', + loadedOtherCategoryCounts: false, + }; + Array.from(block.children).forEach((row) => { + const cols = row.querySelectorAll('div'); + const key = cols[0].querySelector('strong')?.textContent.trim().toLowerCase(); + if (cols.length === 1) { + [props.contentRow] = cols; + } else if (cols.length === 2) { + let value = cols[1].textContent.trim(); + // Treat "null" as blank + if (value.toLowerCase() === 'null') { + value = ''; + } + + if (key && value) { + // FIXME: facebook-post + if (['tasks', 'topics', 'locales', 'behaviors'].includes(key) || (['premium', 'animated'].includes(key) && value.toLowerCase() !== 'all')) { + props.filters[camelize(key)] = value; + } else if (['yes', 'true', 'on', 'no', 'false', 'off'].includes(value.toLowerCase())) { + props[camelize(key)] = ['yes', 'true', 'on'].includes(value.toLowerCase()); + } else if (key === 'collection id') { + props[camelize(key)] = value.replaceAll('\\:', ':'); + } else { + props[camelize(key)] = value; + } + } + } else if (cols.length === 3) { + if (key === 'template stats' && ['yes', 'true', 'on'].includes(cols[1].textContent.trim().toLowerCase())) { + props[camelize(key)] = cols[2].textContent.trim(); + } + } else if (cols.length === 4) { + if (key === 'blank template') { + cols[0].remove(); + props.templates.push(row); + } + } else if (cols.length === 5) { + if (key === 'holiday block' && ['yes', 'true', 'on'].includes(cols[1].textContent.trim().toLowerCase())) { + const backgroundColor = cols[3].textContent.trim().toLowerCase(); + let holidayIcon = cols[2].querySelector('picture'); + + if (!holidayIcon) { + const link = cols[2].querySelector('a'); + if (link && (link.href.endsWith('.svg') || link.href.endsWith('.png'))) { + holidayIcon = createOptimizedPicture(link.href); + } + } + const backgroundAnimation = cols[4].querySelector('a'); + + props.holidayBlock = true; + props.holidayIcon = holidayIcon || null; + if (backgroundColor) { + props.backgroundColor = backgroundColor; + } + props.backgroundAnimation = backgroundAnimation || null; + props.textColor = isDarkOverlayReadable(backgroundColor) ? 'dark-text' : 'light-text'; + } + } + }); + + return props; +} + +const SHORT_PLACEHOLDER_HEIGHT_CUTOFF = 80; +const WIDE_PLACEHOLDER_RATIO_CUTOFF = 1.3; + +function adjustPlaceholderDimensions(block, props, tmplt, option) { + const sep = option.includes(':') ? ':' : 'x'; + const ratios = option.split(sep).map((e) => +e); + props.placeholderFormat = ratios; + if (!ratios[1]) return; + if (block.classList.contains('horizontal')) { + const height = block.classList.contains('mini') ? 100 : 200; + const width = (ratios[0] / ratios[1]) * height; + tmplt.style = `width: ${width}px`; + if (width / height > WIDE_PLACEHOLDER_RATIO_CUTOFF) { + tmplt.classList.add('tall'); + } + } else { + const width = block.classList.contains('sixcols') || block.classList.contains('fullwidth') ? 165 : 200; + const height = (ratios[1] / ratios[0]) * width; + tmplt.style.height = `${height}px`; + if (height < SHORT_PLACEHOLDER_HEIGHT_CUTOFF) tmplt.classList.add('short'); + if (width / height > WIDE_PLACEHOLDER_RATIO_CUTOFF) tmplt.classList.add('wide'); + } +} + +function adjustTemplateDimensions(block, props, tmplt, isPlaceholder) { + const overlayCell = tmplt.querySelector(':scope > div:last-of-type'); + const option = overlayCell.textContent.trim(); + if (!option) return; + if (isPlaceholder) { + // add aspect ratio to template + adjustPlaceholderDimensions(block, props, tmplt, option); + } else { + // add icon to 1st cell + const $icon = getIconElementDeprecated(toClassName(option)); + $icon.setAttribute('title', option); + tmplt.children[0].append($icon); + } + overlayCell.remove(); +} + +function populateTemplates(block, props, templates) { + for (let tmplt of templates) { + const isPlaceholder = tmplt.querySelector(':scope > div:first-of-type > img[src*=".svg"], :scope > div:first-of-type > svg'); + const linkContainer = tmplt.querySelector(':scope > div:nth-of-type(2)'); + const rowWithLinkInFirstCol = tmplt.querySelector(':scope > div:first-of-type > a'); + const innerWrapper = block.querySelector('.template-x-inner-wrapper'); + + if (innerWrapper && linkContainer) { + const link = linkContainer.querySelector(':scope a'); + if (link && isPlaceholder) { + const aTag = createTag('a', { href: link.href || '#' }); + aTag.append(...tmplt.children); + tmplt.remove(); + tmplt = aTag; + // convert A to SPAN + const newLink = createTag('span', { class: 'template-link' }); + newLink.append(link.textContent.trim()); + linkContainer.innerHTML = ''; + linkContainer.append(newLink); + } + innerWrapper.append(tmplt); + } + + if (rowWithLinkInFirstCol && !tmplt.querySelector('img')) { + props.tailButton = rowWithLinkInFirstCol; + rowWithLinkInFirstCol.remove(); + } + + if (tmplt.children.length === 3) { + // look for options in last cell + adjustTemplateDimensions(block, props, tmplt, isPlaceholder); + } + + if (!tmplt.querySelectorAll(':scope > div > *').length) { + // remove empty row + tmplt.remove(); + } + tmplt.classList.add('template'); + if (isPlaceholder) { + tmplt.classList.add('placeholder'); + } + } +} + +function updateLoadMoreButton(props, loadMore) { + if (props.start === '') { + loadMore.style.display = 'none'; + } else { + loadMore.style.removeProperty('display'); + } +} + +async function decorateNewTemplates(block, props, options = { reDrawMasonry: false }) { + const { templates: newTemplates } = await fetchAndRenderTemplates(props); + updateImpressionCache({ result_count: props.total }); + const loadMore = block.parentElement.querySelector('.load-more'); + + props.templates = props.templates.concat(newTemplates); + populateTemplates(block, props, newTemplates); + + const newCells = Array.from(block.querySelectorAll('.template:not(.appear)')); + + if (options.reDrawMasonry) { + props.masonry.cells = [props.masonry.cells[0]].concat(newCells); + } else { + props.masonry.cells = props.masonry.cells.concat(newCells); + } + props.masonry.draw(newCells); + + if (loadMore) { + updateLoadMoreButton(props, loadMore); + } +} + +async function decorateLoadMoreButton(block, props) { + const loadMoreDiv = createTag('div', { class: 'load-more' }); + const loadMoreButton = createTag('button', { class: 'load-more-button' }); + const loadMoreText = createTag('p', { class: 'load-more-text' }); + loadMoreDiv.append(loadMoreButton, loadMoreText); + const loadMore = await replaceKey('load-more', getConfig()); + loadMoreText.textContent = loadMore === 'load more' ? '' : loadMore; + block.append(loadMoreDiv); + loadMoreButton.append(getIconElementDeprecated('plus-icon')); + + loadMoreButton.addEventListener('click', async () => { + trackSearch('select-load-more', BlockMediator.get('templateSearchSpecs').search_id); + loadMoreButton.classList.add('disabled'); + const scrollPosition = window.scrollY; + await decorateNewTemplates(block, props); + window.scrollTo({ + top: scrollPosition, + left: 0, + behavior: 'smooth', + }); + loadMoreButton.classList.remove('disabled'); + }); + + return loadMoreDiv; +} + +async function attachFreeInAppPills(block) { + const freeInAppText = await replaceKey('free-in-app', getConfig()); + + const templateLinks = block.querySelectorAll('a.template'); + for (const templateLink of templateLinks) { + if (!block.classList.contains('apipowered') + && templateLink.querySelectorAll('.icon-premium').length <= 0 + && !templateLink.classList.contains('placeholder') + && !templateLink.querySelector('.icon-free-badge') + && freeInAppText !== 'free in app') { + const $freeInAppBadge = createTag('span', { class: 'icon icon-free-badge' }); + $freeInAppBadge.textContent = freeInAppText; + templateLink.querySelector('div').append($freeInAppBadge); + } + } +} + +async function makeTemplateFunctions() { + const [templateFilterPremium, templateFilterPremiumIcons, templateFilterAnimated, templateFilterAnimatedIcons, templateXSort, templateXSortIcons] = await replaceKeyArray(['template-filter-premium', 'template-filter-premium-icons', 'template-filter-animated', 'template-filter-animated-icons', 'template-x-sort', 'template-x-sort-icons'], getConfig()); + const functions = { + premium: { + placeholders: JSON.parse(templateFilterPremium !== 'template filter premium' ? templateFilterPremium : '{}'), + elements: {}, + icons: (templateFilterPremiumIcons !== 'template filter premium icons' ? templateFilterPremiumIcons.replace(/\s/g, '')?.split(',') : undefined) + || ['template-premium-and-free', 'template-free', 'template-premium'], + }, + animated: { + placeholders: JSON.parse(templateFilterAnimated !== 'template filter animated' ? templateFilterAnimated : '{}'), + elements: {}, + icons: (templateFilterAnimatedIcons !== 'template filter animated icons' ? templateFilterAnimatedIcons.replace(/\s/g, '')?.split(',') : undefined) + || ['template-static-and-animated', 'template-static', 'template-animated'], + }, + sort: { + placeholders: JSON.parse(templateXSort !== 'template x sort' ? templateXSort : '{}'), + elements: {}, + icons: (templateXSortIcons !== 'template x sort icons' ? templateXSortIcons.replace(/\s/g, '')?.split(',') : undefined) + || ['sort', 'visibility-on', 'visibility-off', 'order-dsc', 'order-asc'], + }, + }; + + Object.entries(functions).forEach((entry) => { + entry[1].elements.wrapper = createTag('div', { + class: `function-wrapper function-${entry[0]}`, + 'data-param': entry[0], + }); + + entry[1].elements.wrapper.subElements = { + button: { + wrapper: createTag('div', { class: `button-wrapper button-wrapper-${entry[0]}` }), + subElements: { + iconHolder: createTag('span', { class: 'icon-holder' }), + textSpan: createTag('span', { class: `current-option current-option-${entry[0]}` }), + chevIcon: getIconElementDeprecated('drop-down-arrow'), + }, + }, + options: { + wrapper: createTag('div', { class: `options-wrapper options-wrapper-${entry[0]}` }), + subElements: Object.entries(entry[1].placeholders).map((option, subIndex) => { + const icon = getIconElementDeprecated(entry[1].icons[subIndex]); + const optionButton = createTag('div', { class: 'option-button', 'data-value': option[1] }); + [optionButton.textContent] = option; + optionButton.prepend(icon); + return optionButton; + }), + }, + }; + + const $span = entry[1].elements.wrapper.subElements.button.subElements.textSpan; + [[$span.textContent]] = Object.entries(entry[1].placeholders); + }); + + return functions; +} + +function updateFilterIcon(block) { + const functionWrapper = block.querySelectorAll('.function-wrapper'); + const optionsWrapper = block.querySelectorAll('.options-wrapper'); + + functionWrapper.forEach((wrap, index) => { + const iconHolder = wrap.querySelector('.icon-holder'); + const activeOption = optionsWrapper[index].querySelector('.option-button.active'); + if (iconHolder && activeOption) { + const activeIcon = activeOption.querySelector('.icon'); + if (activeIcon) { + iconHolder.innerHTML = activeIcon.outerHTML; + } + } + }); +} + +async function decorateFunctionsContainer(block, functions) { + const functionsContainer = createTag('div', { class: 'functions-container' }); + const functionContainerMobile = createTag('div', { class: 'functions-drawer' }); + + Object.values(functions).forEach((filter) => { + const filterWrapper = filter.elements.wrapper; + + Object.values(filterWrapper.subElements).forEach((part) => { + const innerWrapper = part.wrapper; + + Object.values(part.subElements).forEach((innerElement) => { + if (innerElement) { + innerWrapper.append(innerElement); + } + }); + + filterWrapper.append(innerWrapper); + }); + functionContainerMobile.append(filterWrapper.cloneNode({ deep: true })); + functionsContainer.append(filterWrapper); + }); + + // restructure drawer for mobile design + const filterContainer = createTag('div', { class: 'filter-container-mobile' }); + const mobileFilterButtonWrapper = createTag('div', { class: 'filter-button-mobile-wrapper' }); + const mobileFilterButton = createTag('span', { class: 'filter-button-mobile' }); + const drawer = createTag('div', { class: 'filter-drawer-mobile hidden retracted' }); + const drawerInnerWrapper = createTag('div', { class: 'filter-drawer-mobile-inner-wrapper' }); + const drawerBackground = createTag('div', { class: 'drawer-background hidden transparent' }); + const $closeButton = getIconElementDeprecated('search-clear'); + const applyButtonWrapper = createTag('div', { class: 'apply-filter-button-wrapper hidden transparent' }); + const applyButton = createTag('a', { class: 'apply-filter-button button gradient', href: '#' }); + + $closeButton.classList.add('close-drawer'); + const [applyFilters, free, versusShorthand, premium, staticP, animated, filter, sort] = await replaceKeyArray(['apply-filters', 'free', 'versus-shorthand', 'premium', 'static', 'animated', 'filter', 'sort'], getConfig()); + + applyButton.textContent = applyFilters; + + functionContainerMobile.children[0] + .querySelector('.current-option-premium') + .textContent = `${free} ${versusShorthand} ${premium}`; + + functionContainerMobile.children[1] + .querySelector('.current-option-animated') + .textContent = `${staticP} ${versusShorthand} ${animated}`; + + drawerInnerWrapper.append( + functionContainerMobile.children[0], + functionContainerMobile.children[1], + ); + + drawer.append($closeButton, drawerInnerWrapper); + + const buttonsInDrawer = drawer.querySelectorAll('.button-wrapper'); + const optionsInDrawer = drawer.querySelectorAll('.options-wrapper'); + + [buttonsInDrawer, optionsInDrawer].forEach((category) => { + category.forEach((element) => { + element.classList.add('in-drawer'); + const heading = element.querySelector('.current-option'); + const iconHolder = element.querySelector('.icon-holder'); + if (heading) { + heading.className = 'filter-mobile-option-heading'; + } + if (iconHolder) { + iconHolder.remove(); + } + }); + }); + + mobileFilterButtonWrapper.append(getIconElementDeprecated('scratch-icon-22'), mobileFilterButton); + applyButtonWrapper.append(applyButton); + filterContainer.append( + mobileFilterButtonWrapper, + drawer, + applyButtonWrapper, + drawerBackground, + ); + functionContainerMobile.prepend(filterContainer); + + mobileFilterButton.textContent = filter; + const sortButton = functionContainerMobile.querySelector('.current-option-sort'); + if (sortButton) { + sortButton.textContent = sort; + sortButton.className = 'filter-mobile-option-heading'; + } + + return { mobile: functionContainerMobile, desktop: functionsContainer }; +} + +function updateLottieStatus(block) { + const drawer = block.querySelector('.filter-drawer-mobile'); + const inWrapper = drawer.querySelector('.filter-drawer-mobile-inner-wrapper'); + const lottieArrows = drawer.querySelector('.lottie-wrapper'); + if (lottieArrows) { + if (inWrapper.scrollHeight - inWrapper.scrollTop === inWrapper.offsetHeight) { + lottieArrows.style.display = 'none'; + drawer.classList.remove('scrollable'); + } else { + lottieArrows.style.removeProperty('display'); + drawer.classList.add('scrollable'); + } + } +} + +async function fetchCntSpan(props, anchor, lang) { + const cntSpan = createTag('span', { class: 'category-list-template-count' }); + const cnt = await fetchTemplatesCategoryCount(props, anchor.dataset.tasks); + cntSpan.textContent = `(${cnt.toLocaleString(lang)})`; + return { cntSpan, anchor }; +} + +async function appendCategoryTemplatesCount(block, props) { + if (props.loadedOtherCategoryCounts) { + return; + } + props.loadedOtherCategoryCounts = true; + const categories = block.querySelectorAll('ul.category-list > li'); + const lang = getConfig().locale.ietf; + + const fetchCntSpanPromises = [...categories] + .map((li) => fetchCntSpan(props, li.querySelector('a'), lang)); + const res = await Promise.all(fetchCntSpanPromises); + + // append one by one to gain attention + for (const { cntSpan, anchor } of res) { + anchor.append(cntSpan); + // eslint-disable-next-line no-await-in-loop, no-promise-executor-return + await new Promise((resolve) => setTimeout(resolve, 25)); + } +} + +async function decorateCategoryList(block, props) { + const { prefix } = getConfig().locale; + const mobileDrawerWrapper = block.querySelector('.filter-drawer-mobile'); + const drawerWrapper = block.querySelector('.filter-drawer-mobile-inner-wrapper'); + const xTaskCategories = await replaceKey('x-task-categories', getConfig()); + const categories = xTaskCategories !== 'x task categories' ? JSON.parse(xTaskCategories) : {}; + const taskCategoryIcons = await replaceKey('task-category-icons', getConfig()); + const categoryIcons = taskCategoryIcons !== 'task category icons' ? taskCategoryIcons.replace(/\s/g, '')?.split(',') : undefined; + const categoriesDesktopWrapper = createTag('div', { class: 'category-list-wrapper' }); + const categoriesToggleWrapper = createTag('div', { class: 'category-list-toggle-wrapper' }); + const categoriesToggle = getIconElementDeprecated('drop-down-arrow'); + const categoriesListHeading = createTag('div', { class: 'category-list-heading' }); + const categoriesList = createTag('ul', { class: 'category-list' }); + + const jumpToCategory = await replaceKey('jump-to-category', getConfig()); + categoriesListHeading.append(getIconElementDeprecated('template-search'), jumpToCategory); + categoriesToggleWrapper.append(categoriesToggle); + categoriesDesktopWrapper.append(categoriesToggleWrapper, categoriesListHeading, categoriesList); + + Object.entries(categories).forEach((category, index) => { + const format = `${props.placeholderFormat[0]}:${props.placeholderFormat[1]}`; + const targetTasks = category[1]; + const currentTasks = props.filters.tasks ? props.filters.tasks : "''"; + const currentTopic = props.filters.topics || props.q; + + const listItem = createTag('li'); + if (category[1] === currentTasks) { + listItem.classList.add('active'); + } + + let icon; + if (categoryIcons[index] && categoryIcons[index] !== '') { + icon = categoryIcons[index]; + } else { + icon = 'template-static'; + } + + const iconElement = getIconElementDeprecated(icon); + const a = createTag('a', { + 'data-tasks': targetTasks, + 'data-topics': currentTopic || '', + href: `${prefix}/express/templates/search?tasks=${targetTasks}&tasksx=${targetTasks}&phformat=${format}&topics=${currentTopic || "''"}&q=${currentTopic || ''}&searchId=${generateSearchId()}`, + }); + [a.textContent] = category; + + a.prepend(iconElement); + listItem.append(a); + categoriesList.append(listItem); + a.addEventListener('click', () => { + updateImpressionCache({ + category_filter: a.dataset.tasks, + collection: a.dataset.topics, + collection_path: window.location.pathname, + content_category: 'templates', + }); + trackSearch('search-inspire', new URLSearchParams(new URL(a.href).search).get('searchId')); + }, { passive: true }); + }); + + categoriesDesktopWrapper.addEventListener('mouseover', () => { + appendCategoryTemplatesCount(block, props); + }, { once: true }); + + const categoriesMobileWrapper = categoriesDesktopWrapper.cloneNode({ deep: true }); + const mobileJumpCategoryLinks = categoriesMobileWrapper.querySelectorAll('.category-list > li > a'); + mobileJumpCategoryLinks.forEach((a) => { + a.addEventListener('click', () => { + updateImpressionCache({ + search_keyword: a.dataset.tasks, + collection: a.dataset.topics, + collection_path: window.location.pathname, + content_category: 'templates', + }); + trackSearch('search-inspire', new URLSearchParams(new URL(a.href).search).get('searchId')); + }, { passive: true }); + }); + const mobileCategoriesToggle = createTag('span', { class: 'category-list-toggle' }); + mobileCategoriesToggle.textContent = jumpToCategory !== 'jump to category' ? jumpToCategory : ''; + categoriesMobileWrapper.querySelector('.category-list-toggle-wrapper > .icon')?.replaceWith(mobileCategoriesToggle); + const lottieArrows = createTag('a', { class: 'lottie-wrapper' }); + mobileDrawerWrapper.append(lottieArrows); + drawerWrapper.append(categoriesMobileWrapper); + lottieArrows.innerHTML = getLottie('purple-arrows', '/express/icons/purple-arrows.json'); + lazyLoadLottiePlayer(); + + block.prepend(categoriesDesktopWrapper); + block.classList.add('with-categories-list'); + + const toggleButton = categoriesMobileWrapper.querySelector('.category-list-toggle-wrapper'); + toggleButton.append(getIconElementDeprecated('drop-down-arrow')); + toggleButton.addEventListener('click', () => { + const listWrapper = toggleButton.parentElement; + toggleButton.classList.toggle('collapsed'); + if (toggleButton.classList.contains('collapsed')) { + if (listWrapper.classList.contains('desktop-only')) { + listWrapper.classList.add('collapsed'); + listWrapper.style.maxHeight = '40px'; + } else { + listWrapper.classList.add('collapsed'); + listWrapper.style.maxHeight = '24px'; + } + } else { + listWrapper.classList.remove('collapsed'); + listWrapper.style.maxHeight = '1000px'; + } + + setTimeout(() => { + if (!listWrapper.classList.contains('desktop-only')) { + updateLottieStatus(block); + } + }, 510); + }, { passive: true }); + + lottieArrows.addEventListener('click', () => { + drawerWrapper.scrollBy({ + top: 300, + behavior: 'smooth', + }); + }, { passive: true }); + + drawerWrapper.addEventListener('scroll', () => { + updateLottieStatus(block); + }, { passive: true }); +} + +function closeDrawer(toolBar) { + const drawerBackground = toolBar.querySelector('.drawer-background'); + const drawer = toolBar.querySelector('.filter-drawer-mobile'); + const applyButton = toolBar.querySelector('.apply-filter-button-wrapper'); + + drawer.classList.add('retracted'); + drawerBackground.classList.add('transparent'); + applyButton.classList.add('transparent'); + + setTimeout(() => { + drawer.classList.add('hidden'); + drawerBackground.classList.add('hidden'); + applyButton.classList.add('hidden'); + }, 500); +} + +function updateOptionsStatus(block, props, toolBar) { + const wrappers = toolBar.querySelectorAll('.function-wrapper'); + const waysOfSort = { + 'Most Relevant': '', + 'Most Viewed': '&orderBy=-remixCount', + 'Rare & Original': '&orderBy=remixCount', + 'Newest to Oldest': '&orderBy=-availabilityDate', + 'Oldest to Newest': '&orderBy=availabilityDate', + }; + + wrappers.forEach((wrapper) => { + const currentOption = wrapper.querySelector('.current-option'); + const options = wrapper.querySelectorAll('.option-button'); + + options.forEach((option) => { + const paramType = wrapper.dataset.param; + const paramValue = option.dataset.value; + const filterValue = props.filters[paramType] ? props.filters[paramType] : 'remove'; + const sortValue = waysOfSort[props[paramType]] || props[paramType]; + + if (filterValue === paramValue || sortValue === paramValue) { + if (currentOption) { + currentOption.textContent = option.textContent; + } + + options.forEach((o) => { + if (option !== o) { + o.classList.remove('active'); + } + }); + + option.classList.add('active'); + } + }); + + updateFilterIcon(block); + }); +} + +function initDrawer(block, props, toolBar) { + const filterButton = toolBar.querySelector('.filter-button-mobile-wrapper'); + const drawerBackground = toolBar.querySelector('.drawer-background'); + const drawer = toolBar.querySelector('.filter-drawer-mobile'); + const closeDrawerBtn = toolBar.querySelector('.close-drawer'); + const applyButton = toolBar.querySelector('.apply-filter-button-wrapper'); + + const functionWrappers = drawer.querySelectorAll('.function-wrapper'); + + let currentFilters; + filterButton.addEventListener('click', () => { + appendCategoryTemplatesCount(block, props); + }, { once: true }); + filterButton.addEventListener('click', () => { + currentFilters = { ...props.filters }; + drawer.classList.remove('hidden'); + drawerBackground.classList.remove('hidden'); + applyButton.classList.remove('hidden'); + updateLottieStatus(block); + + setTimeout(() => { + drawer.classList.remove('retracted'); + drawerBackground.classList.remove('transparent'); + applyButton.classList.remove('transparent'); + functionWrappers.forEach((wrapper) => { + const button = wrapper.querySelector('.button-wrapper'); + if (button) { + button.style.maxHeight = `${button.nextElementSibling.offsetHeight}px`; + } + }); + }, 100); + }, { passive: true }); + + [drawerBackground, closeDrawerBtn].forEach((el) => { + el.addEventListener('click', async () => { + props.filters = { ...currentFilters }; + closeDrawer(toolBar); + updateOptionsStatus(block, props, toolBar); + }, { passive: true }); + }); + + drawer.classList.remove('hidden'); + functionWrappers.forEach((wrapper) => { + const button = wrapper.querySelector('.button-wrapper'); + let maxHeight; + if (button) { + const wrapperMaxHeightGrabbed = setInterval(() => { + if (wrapper.offsetHeight > 0) { + maxHeight = `${wrapper.offsetHeight}px`; + wrapper.style.maxHeight = maxHeight; + clearInterval(wrapperMaxHeightGrabbed); + } + }, 200); + + button.addEventListener('click', (e) => { + e.stopPropagation(); + const btnWrapper = wrapper.querySelector('.button-wrapper'); + if (btnWrapper) { + const minHeight = `${btnWrapper.offsetHeight - 8}px`; + wrapper.classList.toggle('collapsed'); + wrapper.style.maxHeight = wrapper.classList.contains('collapsed') ? minHeight : maxHeight; + } + }); + } + }); + + drawer.classList.add('hidden'); +} + +function updateQuery(functionWrapper, props, option) { + const paramType = functionWrapper.dataset.param; + const paramValue = option.dataset.value; + + if (paramType === 'sort') { + props.sort = paramValue; + } else { + const filtersObj = props.filters; + + if (paramType in filtersObj) { + if (paramValue === 'remove') { + delete filtersObj[paramType]; + } else { + filtersObj[paramType] = `${paramValue}`; + } + } else if (paramValue !== 'remove') { + filtersObj[paramType] = `${paramValue}`; + } + + props.filters = filtersObj; + } +} + +async function redrawTemplates(block, props, toolBar) { + const heading = toolBar.querySelector('h2'); + const currentTotal = props.total.toLocaleString('en-US'); + props.templates = [props.templates[0]]; + props.start = ''; + block.querySelectorAll('.template:not(.placeholder)').forEach((card) => { + card.remove(); + }); + + await decorateNewTemplates(block, props, { reDrawMasonry: true }); + + heading.textContent = heading.textContent.replace(`${currentTotal}`, props.total.toLocaleString('en-US')); + updateOptionsStatus(block, props, toolBar); + if (block.querySelectorAll('.template').length <= 0) { + const $viewButtons = toolBar.querySelectorAll('.view-toggle-button'); + $viewButtons.forEach((button) => { + button.classList.remove('active'); + }); + ['sm-view', 'md-view', 'lg-view'].forEach((className) => { + block.classList.remove(className); + }); + } +} + +function parseOrderBy(queryString) { + let orderType = 'relevancy'; + let orderDirection = 'descending'; + + if (!queryString) { + return { + orderType, + orderDirection, + }; + } + + const parts = queryString.split('='); + + if (parts[1]?.startsWith('-')) { + orderDirection = 'descending'; + orderType = parts[1].substring(1); + } else { + orderDirection = 'ascending'; + [, orderType] = parts; + } + + return { + orderType, + orderDirection, + }; +} + +async function initFilterSort(block, props, toolBar) { + const buttons = toolBar.querySelectorAll('.button-wrapper'); + const applyFilterButton = toolBar.querySelector('.apply-filter-button'); + let existingProps = { ...props, filters: { ...props.filters } }; + + if (buttons.length > 0) { + buttons.forEach((button) => { + const wrapper = button.parentElement; + const currentOption = wrapper.querySelector('span.current-option'); + const optionsList = button.nextElementSibling; + const options = optionsList.querySelectorAll('.option-button'); + + button.addEventListener('click', () => { + existingProps = { ...props, filters: { ...props.filters } }; + if (!button.classList.contains('in-drawer')) { + buttons.forEach((b) => { + if (button !== b) { + b.parentElement.classList.remove('opened'); + } + }); + + wrapper.classList.toggle('opened'); + } + }, { passive: true }); + + options.forEach((option) => { + const updateOptions = () => { + buttons.forEach((b) => { + b.parentElement.classList.remove('opened'); + }); + + if (currentOption) { + currentOption.textContent = option.textContent; + } + + options.forEach((o) => { + if (option !== o) { + o.classList.remove('active'); + } + }); + option.classList.add('active'); + }; + + option.addEventListener('click', async (e) => { + e.stopPropagation(); + updateOptions(); + updateQuery(wrapper, props, option); + updateFilterIcon(block); + + if (!button.classList.contains('in-drawer') && JSON.stringify(props) !== JSON.stringify(existingProps)) { + const sortObj = parseOrderBy(props.sort); + updateImpressionCache({ + ...gatherPageImpression(props), + ...{ + search_type: 'adjust-filter', + search_keyword: 'change filters, no keyword found', + sort_type: sortObj.orderType, + sort_order: sortObj.orderDirection, + content_category: 'templates', + }, + }); + trackSearch('search-inspire'); + await redrawTemplates(block, props, toolBar); + trackSearch('view-search-results', BlockMediator.get('templateSearchSpecs').search_id); + } + }); + }); + + document.addEventListener('click', (e) => { + const { target } = e; + if (target !== wrapper && !wrapper.contains(target) && !button.classList.contains('in-drawer')) { + wrapper.classList.remove('opened'); + } + }, { passive: true }); + }); + + if (applyFilterButton) { + applyFilterButton.addEventListener('click', async (e) => { + e.preventDefault(); + if (JSON.stringify(props) !== JSON.stringify(existingProps)) { + const sortObj = parseOrderBy(props.sort); + updateImpressionCache({ + ...gatherPageImpression(props), + ...{ + search_type: 'adjust-filter', + search_keyword: 'change filters, no keyword found', + sort_type: sortObj.orderType, + sort_order: sortObj.orderDirection, + content_category: 'templates', + }, + }); + trackSearch('search-inspire'); + await redrawTemplates(block, props, toolBar); + } + + closeDrawer(toolBar); + }); + } + + // sync current filter & sorting method with toolbar current options + updateOptionsStatus(block, props, toolBar); + } +} + +function getPlaceholderWidth(block) { + let width; + if (window.innerWidth >= 900) { + if (block.classList.contains('sm-view')) { + width = 165; + } + + if (block.classList.contains('md-view')) { + width = 258.5; + } + + if (block.classList.contains('lg-view')) { + width = 352; + } + } else if (window.innerWidth >= 600) { + if (block.classList.contains('sm-view')) { + width = 165; + } + + if (block.classList.contains('md-view')) { + width = 227.33; + } + + if (block.classList.contains('lg-view')) { + width = 352; + } + } else { + if (block.classList.contains('sm-view')) { + width = 106.33; + } + + if (block.classList.contains('md-view')) { + width = 165.5; + } + + if (block.classList.contains('lg-view')) { + width = 335; + } + } + + return width; +} + +function toggleMasonryView(block, props, button, toggleButtons) { + const blockEl = block.closest('.template-x'); + blockEl.classList.add('template-x-wrapper'); + const templatesToView = block.querySelectorAll('.template:not(.placeholder)'); + // const blockWrapper = block.closest('.template-x-wrapper'); + const blockWrapper = blockEl.closest('.template-x-wrapper'); + + if (!button.classList.contains('active') && templatesToView.length > 0) { + toggleButtons.forEach((b) => { + if (b !== button) { + b.classList.remove('active'); + } + }); + + ['sm-view', 'md-view', 'lg-view'].forEach((className) => { + if (className !== `${button.dataset.view}-view`) { + block.classList.remove(className); + blockWrapper.classList.remove(className); + } + }); + button.classList.add('active'); + block.classList.add(`${button.dataset.view}-view`); + blockWrapper.classList.add(`${button.dataset.view}-view`); + + props.masonry.draw(); + } + + const placeholder = block.querySelector('.template.placeholder'); + const ratios = props.placeholderFormat; + const width = getPlaceholderWidth(block); + + if (ratios[1]) { + const height = (ratios[1] / ratios[0]) * width; + placeholder.style = `height: ${height - 21}px`; + if (width / height > 1.3) { + placeholder.classList.add('wide'); + } + } +} + +function initViewToggle(block, props, toolBar) { + const toggleButtons = toolBar.querySelectorAll('.view-toggle-button '); + const authoredViewIndex = ['sm', 'md', 'lg'].findIndex((size) => getMetadata('initial-template-view')?.toLowerCase().trim() === size); + const initViewIndex = authoredViewIndex === -1 ? 0 : authoredViewIndex; + + toggleButtons.forEach((button, index) => { + if (index === initViewIndex) { + toggleMasonryView(block, props, button, toggleButtons); + } + + button.addEventListener('click', () => { + toggleMasonryView(block, props, button, toggleButtons); + }, { passive: true }); + }); +} + +function initToolbarShadow(toolbar) { + const toolbarWrapper = toolbar.parentElement; + document.addEventListener('scroll', () => { + if (toolbarWrapper.getBoundingClientRect().top <= 0) { + toolbarWrapper.classList.add('with-box-shadow'); + } else { + toolbarWrapper.classList.remove('with-box-shadow'); + } + }); +} + +async function decorateToolbar(block, props) { + const sectionHeading = createTag('h2'); + const tBarWrapper = createTag('div', { class: 'toolbar-wrapper' }); + const tBar = createTag('div', { class: 'api-templates-toolbar' }); + const contentWrapper = createTag('div', { class: 'wrapper-content-search' }); + const functionsWrapper = createTag('div', { class: 'wrapper-functions' }); + + if (props.templateStats) { + sectionHeading.textContent = await formatHeadingPlaceholder(props) || ''; + } + + block.prepend(tBarWrapper); + tBarWrapper.append(tBar); + tBar.append(contentWrapper, functionsWrapper); + contentWrapper.append(sectionHeading); + + if (tBar) { + const viewsWrapper = createTag('div', { class: 'views' }); + + const smView = createTag('a', { class: 'view-toggle-button small-view', 'data-view': 'sm' }); + smView.append(getIconElementDeprecated('small_grid')); + const mdView = createTag('a', { class: 'view-toggle-button medium-view', 'data-view': 'md' }); + mdView.append(getIconElementDeprecated('medium_grid')); + const lgView = createTag('a', { class: 'view-toggle-button large-view', 'data-view': 'lg' }); + lgView.append(getIconElementDeprecated('large_grid')); + + const functionsObj = await makeTemplateFunctions(); + const functions = await decorateFunctionsContainer(block, functionsObj); + + viewsWrapper.append(smView, mdView, lgView); + functionsWrapper.append(viewsWrapper, functions.desktop); + + tBar.append(contentWrapper, functionsWrapper, functions.mobile); + + initDrawer(block, props, tBar); + initFilterSort(block, props, tBar); + initViewToggle(block, props, tBar); + initToolbarShadow(tBar); + } +} + +function initExpandCollapseToolbar(block, templateTitle, toggle, toggleChev) { + const onToggle = () => { + block.classList.toggle('expanded'); + + if (document.body.dataset.device === 'mobile' || block.classList.contains('mobile')) { + const tglBtn = block.querySelector('.toggle-button'); + const heading = templateTitle.querySelector('.toggle-bar-top > h4'); + + if (tglBtn && heading) { + const rect = heading.getBoundingClientRect(); + if (!block.classList.contains('expanded')) { + tglBtn.style.marginLeft = `${rect.x}px`; + } else { + tglBtn.style.removeProperty('margin-left'); + } + } + } + }; + const templateImages = block.querySelectorAll('.template'); + + templateImages.forEach((template) => { + template.addEventListener('click', (e) => { + e.stopPropagation(); + }); + }); + + toggleChev.addEventListener('click', onToggle); + toggle.addEventListener('click', () => onToggle()); + document.addEventListener('click', (e) => { + if (e.target.closest('.carousel-fader-right') || e.target.closest('.carousel-fader-left')) { + return; + } + if (e.target.closest('.template-x.holiday') || ( + block.classList.contains('expanded') + )) { + onToggle(); + } + }); + + setTimeout(() => { + if (block.classList.contains('auto-expand')) { + onToggle(); + } + }, 3000); +} + +function decorateHoliday(block, props) { + const main = document.querySelector('main'); + const templateXSection = block.closest('div[class="section section-wrapper template-x-container"]'); + const mobileViewport = window.innerWidth < 901; + const templateTitle = block.querySelector('.template-title'); + const toggleBar = templateTitle.querySelector('div'); + const heading = templateTitle.querySelector('h4'); + const subheading = templateTitle.querySelector('p'); + const link = templateTitle.querySelector('.template-title-link'); + const linkWrapper = link.closest('p'); + const toggle = createTag('div', { class: 'toggle-button' }); + const topElements = createTag('div', { class: 'toggle-bar-top' }); + const bottomElements = createTag('div', { class: 'toggle-bar-bottom' }); + const toggleChev = createTag('div', { class: 'toggle-button-chev' }); + + if (props.holidayIcon) topElements.append(props.holidayIcon); + if (props.backgroundAnimation) { + const animation = transformLinkToAnimation(props.backgroundAnimation); + block.classList.add('animated'); + block.prepend(animation); + } + + if (templateXSection && templateXSection.querySelectorAll('div.block').length === 1) main.classList.add('with-holiday-templates-banner'); + block.classList.add(props.textColor); + toggleBar.classList.add('toggle-bar'); + topElements.append(heading); + toggle.append(link, toggleChev); + linkWrapper.remove(); + bottomElements.append(subheading); + toggleBar.append(topElements, bottomElements); + block.style.backgroundColor = props.backgroundColor; + + if (mobileViewport) { + block.classList.add('mobile'); + block.append(toggle); + } else { + toggleBar.append(toggle); + } + + initExpandCollapseToolbar(block, templateTitle, toggle, toggleChev); +} + +async function decorateTemplates(block, props) { + const impression = gatherPageImpression(props); + updateImpressionCache(impression); + const innerWrapper = block.querySelector('.template-x-inner-wrapper'); + + let rows = block.children.length; + + const templates = Array.from(innerWrapper.children); + rows = templates.length; + let breakpoints = [{ width: '400' }]; + + if (rows > 6 && !block.classList.contains('horizontal')) { + innerWrapper.classList.add('masonry'); + } + + if (rows === 1) { + block.classList.add('large'); + breakpoints = [{ + media: '(min-width: 600px)', + width: '2000', + }, { width: '750' }]; + } + + block.querySelectorAll(':scope picture > img').forEach((img) => { + const { src, alt } = img; + img.parentNode.replaceWith(createOptimizedPicture(src, alt, true, breakpoints)); + }); + + // find the edit link and turn the template DIV into the A + // A + // +- DIV + // +- PICTURE + // +- DIV + // +- SPAN + // +- "Edit this template" + // + // make copy of children to avoid modifying list while looping + + populateTemplates(block, props, templates); + if (props.orientation.toLowerCase() !== 'horizontal') { + if (rows > 6 || block.classList.contains('sixcols') || block.classList.contains('fullwidth')) { + /* flex masonry */ + + if (innerWrapper) { + const cells = Array.from(innerWrapper.children); + innerWrapper.classList.remove('masonry'); + innerWrapper.classList.add('flex-masonry'); + props.masonry = new Masonry(innerWrapper, cells); + } else { + block.remove(); + } + + props.masonry.draw(); + window.addEventListener('resize', () => { + props.masonry.draw(); + }); + } else { + block.classList.add('template-x-complete'); + } + } + + await attachFreeInAppPills(block); + + const templateLinks = block.querySelectorAll('.template .button-container > a, a.template.placeholder'); + const linksPopulated = new CustomEvent('linkspopulated', { detail: templateLinks }); + + const searchId = new URLSearchParams(window.location.search).get('searchId'); + updateImpressionCache({ + search_keyword: getMetadata('q') || getMetadata('topics-x'), + result_count: props.total, + content_category: 'templates', + }); + if (searchId) trackSearch('view-search-results', searchId); + + document.dispatchEvent(linksPopulated); +} + +async function decorateBreadcrumbs(block) { + // breadcrumbs are desktop-only + if (document.body.dataset.device !== 'desktop') return; + const { default: getBreadcrumbs } = await import('../template-list/breadcrumbs.js'); + const breadcrumbs = await getBreadcrumbs(); + if (breadcrumbs) block.prepend(breadcrumbs); +} + +function cycleThroughSuggestions(block, targetIndex = 0) { + const suggestions = block.querySelectorAll('.suggestions-list li'); + if (targetIndex >= suggestions.length || targetIndex < 0) return; + if (suggestions.length > 0) suggestions[targetIndex].focus(); +} + +function importSearchBar(block, blockMediator) { + blockMediator.subscribe('stickySearchBar', (e) => { + const parent = block.querySelector('.api-templates-toolbar .wrapper-content-search'); + if (parent) { + const existingStickySearchBar = parent.querySelector('.search-bar-wrapper'); + if (e.newValue.loadSearchBar && !existingStickySearchBar) { + const searchWrapper = e.newValue.element; + parent.prepend(searchWrapper); + searchWrapper.classList.add('show'); + searchWrapper.classList.add('collapsed'); + + const searchDropdown = searchWrapper.querySelector('.search-dropdown-container'); + const searchForm = searchWrapper.querySelector('.search-form'); + const searchBar = searchWrapper.querySelector('input.search-bar'); + const clearBtn = searchWrapper.querySelector('.icon-search-clear'); + const trendsContainer = searchWrapper.querySelector('.trends-container'); + const suggestionsContainer = searchWrapper.querySelector('.suggestions-container'); + const suggestionsList = searchWrapper.querySelector('.suggestions-list'); + + searchBar.addEventListener('click', (event) => { + event.stopPropagation(); + searchWrapper.classList.remove('collapsed'); + setTimeout(() => { + searchDropdown.classList.remove('hidden'); + }, 500); + }, { passive: true }); + + searchBar.addEventListener('keyup', () => { + if (searchBar.value !== '') { + clearBtn.style.display = 'inline-block'; + trendsContainer.classList.add('hidden'); + suggestionsContainer.classList.remove('hidden'); + } else { + clearBtn.style.display = 'none'; + trendsContainer.classList.remove('hidden'); + suggestionsContainer.classList.add('hidden'); + } + }, { passive: true }); + + searchBar.addEventListener('keydown', (event) => { + if (event.key === 'ArrowDown' || event.keyCode === 40) { + event.preventDefault(); + cycleThroughSuggestions(block); + } + }); + + document.addEventListener('click', (event) => { + const { target } = event; + if (target !== searchWrapper && !searchWrapper.contains(target)) { + searchWrapper.classList.add('collapsed'); + searchDropdown.classList.add('hidden'); + searchBar.value = ''; + suggestionsList.innerHTML = ''; + trendsContainer.classList.remove('hidden'); + suggestionsContainer.classList.add('hidden'); + clearBtn.style.display = 'none'; + } + }, { passive: true }); + + const redirectSearch = async () => { + const xTaskNameMapping = await replaceKey('x-task-name-mapping', getConfig()); + const taskMap = xTaskNameMapping !== 'x task name mapping' ? JSON.parse(xTaskNameMapping) : {}; + + const format = getMetadata('placeholder-format'); + let currentTasks = ''; + let searchInput = searchBar.value.toLowerCase() || getMetadata('topics'); + + const tasksFoundInInput = Object.entries(taskMap) + .filter((task) => task[1].some((word) => { + const searchValue = searchBar.value.toLowerCase(); + return searchValue.indexOf(word.toLowerCase()) >= 0; + })).sort((a, b) => b[0].length - a[0].length); + + if (tasksFoundInInput.length > 0) { + tasksFoundInInput[0][1].sort((a, b) => b.length - a.length).forEach((word) => { + searchInput = searchInput.toLowerCase().replace(word.toLowerCase(), ''); + }); + + searchInput = searchInput.trim(); + [[currentTasks]] = tasksFoundInInput; + } + updateImpressionCache({ collection: currentTasks || 'all-templates', content_category: 'templates' }); + trackSearch('search-inspire'); + + const { prefix } = getConfig().locale; + const topicUrl = searchInput ? `/${searchInput}` : ''; + const taskUrl = `/${handlelize(currentTasks.toLowerCase())}`; + const targetPath = `${prefix}/express/templates${taskUrl}${topicUrl}`; + const searchId = BlockMediator.get('templateSearchSpecs').search_id; + const allTemplatesMetadata = await fetchAllTemplatesMetadata(); + const pathMatch = (event) => event.url === targetPath; + let targetLocation; + + if (allTemplatesMetadata.some(pathMatch)) { + targetLocation = `${window.location.origin}${targetPath}?searchId=${searchId || ''}`; + } else { + const searchUrlTemplate = `/express/templates/search?tasks=${currentTasks}&phformat=${format}&topics=${searchInput || "''"}&q=${searchInput || "''"}&searchId=${searchId || ''}`; + targetLocation = `${window.location.origin}${prefix}${searchUrlTemplate}`; + } + window.location.assign(targetLocation); + }; + + const onSearchSubmit = async () => { + searchBar.disabled = true; + await redirectSearch(); + }; + + const handleSubmitInteraction = async (item, index) => { + if (item.query !== searchBar.value) { + searchBar.value = item.query; + searchBar.dispatchEvent(new Event('input')); + } + updateImpressionCache({ + status_filter: 'free', + type_filter: 'all', + collection: 'all-templates', + keyword_rank: index + 1, + search_keyword: searchBar.value, + search_type: 'autocomplete', + }); + await onSearchSubmit(); + }; + + searchForm.addEventListener('submit', async (event) => { + event.preventDefault(); + searchBar.disabled = true; + updateImpressionCache({ + status_filter: 'free', + type_filter: 'all', + collection: 'all-templates', + search_type: 'direct', + search_keyword: searchBar.value, + }); + await onSearchSubmit(); + }); + + clearBtn.addEventListener('click', () => { + searchBar.value = ''; + suggestionsList.innerHTML = ''; + trendsContainer.classList.remove('hidden'); + suggestionsContainer.classList.add('hidden'); + clearBtn.style.display = 'none'; + }, { passive: true }); + + const suggestionsListUIUpdateCB = (suggestions) => { + suggestionsList.innerHTML = ''; + const searchBarVal = searchBar.value.toLowerCase(); + if (suggestions && !(suggestions.length <= 1 && suggestions[0]?.query === searchBarVal)) { + suggestions.forEach((item, index) => { + const li = createTag('li', { tabindex: 0 }); + const valRegEx = new RegExp(searchBar.value, 'i'); + li.innerHTML = item.query.replace(valRegEx, `${searchBarVal}`); + li.addEventListener('click', async () => { + if (item.query === searchBar.value) return; + searchBar.value = item.query; + searchBar.dispatchEvent(new Event('input')); + await handleSubmitInteraction(item, index); + }); + + li.addEventListener('keydown', async (event) => { + if (event.key === 'Enter' || event.keyCode === 13) { + await handleSubmitInteraction(item, index); + } + }); + + li.addEventListener('keydown', (event) => { + if (event.key === 'ArrowDown' || event.keyCode === 40) { + event.preventDefault(); + cycleThroughSuggestions(block, index + 1); + } + }); + + li.addEventListener('keydown', (event) => { + if (event.key === 'ArrowUp' || event.keyCode === 38) { + event.preventDefault(); + cycleThroughSuggestions(block, index - 1); + } + }); + + suggestionsList.append(li); + }); + const suggestListString = suggestions.map((s) => s.query).join(','); + updateImpressionCache({ + prefix_query: searchBarVal, + suggestion_list_shown: suggestListString, + }); + } + }; + + import('../../scripts/autocomplete-api-v3.js').then(({ default: useInputAutocomplete }) => { + const { inputHandler } = useInputAutocomplete( + suggestionsListUIUpdateCB, + { throttleDelay: 300, debounceDelay: 500, limit: 7 }, + ); + searchBar.addEventListener('input', inputHandler); + }); + } + + if (e.newValue.loadSearchBar && existingStickySearchBar) { + existingStickySearchBar.classList.add('show'); + } + + if (!e.newValue.loadSearchBar && existingStickySearchBar) { + existingStickySearchBar.classList.remove('show'); + } + } + }); +} + +function wordExistsInString(word, inputString) { + const escapedWord = word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); + const regexPattern = new RegExp(`(?:^|\\s|[.,!?()'"\\-])${escapedWord}(?:$|\\s|[.,!?()'"\\-])`, 'i'); + return regexPattern.test(inputString); +} + +async function getTaskNameInMapping(text) { + const xTaskNameMapping = await replaceKey('x-task-name-mapping', getConfig()); + const taskMap = xTaskNameMapping !== 'x task name mapping' ? JSON.parse(xTaskNameMapping) : {}; + return Object.entries(taskMap) + .filter((task) => task[1].some((word) => { + const searchValue = text.toLowerCase(); + return wordExistsInString(word.toLowerCase(), searchValue); + })) + .sort((a, b) => b[0].length - a[0].length); +} + +function renderFallbackMsgWrapper(block, { fallbackMsg }) { + let fallbackMsgWrapper = block.querySelector('.template-x-fallback-msg-wrapper'); + if (!fallbackMsgWrapper) { + fallbackMsgWrapper = createTag('div', { class: 'template-x-fallback-msg-wrapper' }); + block.append(fallbackMsgWrapper); + } + if (!fallbackMsg) { + fallbackMsgWrapper.textContent = ''; + } else { + fallbackMsgWrapper.textContent = fallbackMsg; + } +} + +async function buildTemplateList(block, props, type = []) { + if (type?.length > 0) { + type.forEach((typeName) => { + block.parentElement.classList.add(typeName); + block.classList.add(typeName); + }); + } + + if (!props.templateStats) { + await processContentRow(block, props); + } + + const { templates, fallbackMsg } = await fetchAndRenderTemplates(props); + + if (templates?.length > 0) { + props.fallbackMsg = fallbackMsg; + renderFallbackMsgWrapper(block, props); + const blockInnerWrapper = createTag('div', { class: 'template-x-inner-wrapper' }); + block.append(blockInnerWrapper); + props.templates = props.templates.concat(templates); + props.templates.forEach((template) => { + blockInnerWrapper.append(template); + }); + + await decorateTemplates(block, props); + } else { + window.lana.log(`failed to load templates with props: ${JSON.stringify(props)}`, { tags: 'templates-api' }); + + if (getConfig().env.name === 'prod') { + block.remove(); + } else { + block.textContent = 'Error loading templates, please refresh the page or try again later.'; + } + } + + if (templates && props.tabs) { + block.classList.add('tabbed'); + const tabs = props.tabs.split(','); + const templatesWrapper = block.querySelector('.template-x-inner-wrapper'); + const textWrapper = block.querySelector('.template-title .text-wrapper > div'); + const tabsWrapper = createTag('div', { class: 'template-tabs' }); + const tabBtns = []; + + const collectionRegex = /(.+?)\s*\((.+?)\)/; + const tabConfigs = tabs.map((tab) => { + const match = collectionRegex.exec(tab.trim()); + if (match) { + return { tab: match[1], collectionId: match[2] }; + } + return { tab, collectionId: props.collectionId }; + }); + const taskNames = tabConfigs.map(({ tab }) => getTaskNameInMapping(tab)); + if (taskNames.length === tabs.length) { + taskNames.filter(({ length }) => length).forEach(([[task]], index) => { + const tabBtn = createTag('button', { class: 'template-tab-button' }); + tabBtn.textContent = tabConfigs[index].tab; + tabsWrapper.append(tabBtn); + tabBtns.push(tabBtn); + + if (props.filters.tasks === task) { + tabBtn.classList.add('active'); + } + + tabBtn.addEventListener('click', async () => { + templatesWrapper.style.opacity = 0; + const { + templates: newTemplates, + fallbackMsg: newFallbackMsg, + } = await fetchAndRenderTemplates({ + ...props, + start: '', + filters: { + ...props.filters, + tasks: task, + }, + collectionId: tabConfigs[index].collectionId, + }); + if (newTemplates?.length > 0) { + props.fallbackMsg = newFallbackMsg; + renderFallbackMsgWrapper(block, props); + + templatesWrapper.innerHTML = ''; + props.templates = newTemplates; + props.templates.forEach((template) => { + templatesWrapper.append(template); + }); + + await decorateTemplates(block, props); + buildCarousel(':scope > .template', templatesWrapper); + templatesWrapper.style.opacity = 1; + } + + tabsWrapper.querySelectorAll('.template-tab-button').forEach((btn) => { + if (btn !== tabBtn) btn.classList.remove('active'); + }); + tabBtn.classList.add('active'); + }, { passive: true }); + }); + + document.dispatchEvent(new CustomEvent('linkspopulated', { detail: tabBtns })); + } + + textWrapper.append(tabsWrapper); + } + + // templates are either finished rendering or API has crashed at this point. + + if (templates && props.loadMoreTemplates) { + const loadMore = await decorateLoadMoreButton(block, props); + if (loadMore) { + updateLoadMoreButton(props, loadMore); + } + } + + if (templates && props.toolBar) { + await decorateToolbar(block, props); + await decorateCategoryList(block, props); + } + + if (props.toolBar && props.searchBar) { + import('../../scripts/block-mediator.min.js').then(({ default: blockMediator }) => { + importSearchBar(block, blockMediator); + }); + } + + await decorateBreadcrumbs(block); + + if (templates && props.orientation && props.orientation.toLowerCase() === 'horizontal') { + const innerWrapper = block.querySelector('.template-x-inner-wrapper'); + if (innerWrapper) { + buildCarousel(':scope > .template', innerWrapper); + } else { + block.remove(); + } + } + + if (props.holidayBlock) { + decorateHoliday(block, props); + } +} + +function determineTemplateXType(props) { + // todo: build layers of aspects based on props conditions - i.e. orientation -> style -> use case + const type = []; + + // orientation aspect + if (props.orientation && props.orientation.toLowerCase() === 'horizontal') type.push('horizontal'); + + // style aspect + if (props.width && props.width.toLowerCase() === 'full') type.push('fullwidth'); + if (props.width && props.width.toLowerCase() === 'sixcols') type.push('sixcols'); + if (props.width && props.width.toLowerCase() === 'fourcols') type.push('fourcols'); + if (props.mini) type.push('mini'); + + // use case aspect + if (props.holidayBlock) type.push('holiday'); + + return type; +} + +export default async function decorate(block) { + await fixIcons(block); + block.dataset.blockName = 'template-x'; + block.dataset.blockName = 'template-x'; + const props = constructProps(block); + block.innerHTML = ''; + await buildTemplateList(block, props, determineTemplateXType(props)); +} diff --git a/express/scripts/autocomplete-api-v3.js b/express/scripts/autocomplete-api-v3.js new file mode 100755 index 00000000..7899192b --- /dev/null +++ b/express/scripts/autocomplete-api-v3.js @@ -0,0 +1,82 @@ +/* eslint-disable no-underscore-dangle */ +import { getLibs } from './utils.js'; +import { memoize, throttle, debounce } from './utils/hofs.js'; + +const { getConfig } = await import(`${getLibs()}/utils/utils.js`); + +const url = 'https://adobesearch-atc.adobe.io/uss/v3/autocomplete'; +const experienceId = 'default-templates-autocomplete-v1'; +const scopeEntities = ['HzTemplate']; +const wlLocales = ['en-US', 'fr-FR', 'de-DE', 'ja-JP']; +const emptyRes = { queryResults: [{ items: [] }] }; + +async function fetchAPI({ limit = 5, textQuery, locale = 'en-US' }) { + if (!textQuery || !wlLocales.includes(locale)) { + return []; + } + + const res = await fetch(url, { + method: 'POST', + headers: { + 'x-api-key': window.atob('cHJvamVjdHhfbWFya2V0aW5nX3dlYg=='), + 'content-type': 'application/json', + }, + body: JSON.stringify({ + experienceId, + textQuery, + locale, + queries: [ + { + limit, + id: experienceId, + scope: { entities: scopeEntities }, + }, + ], + }), + }) + .then((response) => response.json()) + .then((response) => (response.queryResults?.[0]?.items ? response : emptyRes)) + .catch((err) => { + // eslint-disable-next-line no-console + console.error('Autocomplete API Error: ', err); + return emptyRes; + }); + return res.queryResults[0].items; +} + +const memoizedFetchAPI = memoize(fetchAPI, { + key: (options) => options.textQuery, + ttl: 30 * 1000, +}); + +export default function useInputAutocomplete( + updateUIWithSuggestions, + { throttleDelay = 300, debounceDelay = 500, limit = 5 } = {}, +) { + const state = { query: '', waitingFor: '' }; + + const fetchAndUpdateUI = async () => { + const currentSearch = state.query; + state.waitingFor = currentSearch; + const suggestions = await memoizedFetchAPI({ + textQuery: currentSearch, + limit, + locale: getConfig().locale.ietf, + }); + if (state.waitingFor === currentSearch) { + updateUIWithSuggestions(suggestions); + } + }; + const throttledFetchAndUpdateUI = throttle(fetchAndUpdateUI, throttleDelay, { trailing: true }); + const debouncedFetchAndUpdateUI = debounce(fetchAndUpdateUI, debounceDelay); + + const inputHandler = (e) => { + state.query = e.target.value; + if (state.query.length < 4 || state.query.endsWith(' ')) { + throttledFetchAndUpdateUI(); + } else { + debouncedFetchAndUpdateUI(); + } + }; + return { inputHandler }; +} diff --git a/express/scripts/color-tools.js b/express/scripts/color-tools.js new file mode 100644 index 00000000..84bc7fdc --- /dev/null +++ b/express/scripts/color-tools.js @@ -0,0 +1,25 @@ +export default function isDarkOverlayReadable(colorString) { + let r; + let g; + let b; + + if (colorString.match(/^rgb/)) { + const colorValues = colorString.match( + /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/, + ); + [r, g, b] = colorValues.slice(1); + } else { + const hexToRgb = +`0x${colorString + .slice(1) + .replace(colorString.length < 5 ? /./g : '', '$&$&')}`; + // eslint-disable-next-line no-bitwise + r = (hexToRgb >> 16) & 255; + // eslint-disable-next-line no-bitwise + g = (hexToRgb >> 8) & 255; + // eslint-disable-next-line no-bitwise + b = hexToRgb & 255; + } + + const hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b)); + return hsp > 140; +} diff --git a/express/scripts/lottie-player.1.5.6.js b/express/scripts/lottie-player.1.5.6.js new file mode 100644 index 00000000..60c5a2c9 --- /dev/null +++ b/express/scripts/lottie-player.1.5.6.js @@ -0,0 +1,80 @@ +/* eslint-disable */ +!function (t, e) { "object" == typeof exports && "undefined" != typeof module ? e(exports) : "function" == typeof define && define.amd ? define(["exports"], e) : e((t = "undefined" != typeof globalThis ? globalThis : t || self)["lottie-player"] = {}) }(this, (function (exports) { + "use strict"; function _asyncIterator(t) { var e, r, i, s = 2; for ("undefined" != typeof Symbol && (r = Symbol.asyncIterator, i = Symbol.iterator); s--;) { if (r && null != (e = t[r])) return e.call(t); if (i && null != (e = t[i])) return new AsyncFromSyncIterator(e.call(t)); r = "@@asyncIterator", i = "@@iterator" } throw new TypeError("Object is not async iterable") } function AsyncFromSyncIterator(t) { function e(t) { if (Object(t) !== t) return Promise.reject(new TypeError(t + " is not an object.")); var e = t.done; return Promise.resolve(t.value).then((function (t) { return { value: t, done: e } })) } return AsyncFromSyncIterator = function (t) { this.s = t, this.n = t.next }, AsyncFromSyncIterator.prototype = { s: null, n: null, next: function () { return e(this.n.apply(this.s, arguments)) }, return: function (t) { var r = this.s.return; return void 0 === r ? Promise.resolve({ value: t, done: !0 }) : e(r.apply(this.s, arguments)) }, throw: function (t) { var r = this.s.return; return void 0 === r ? Promise.reject(t) : e(r.apply(this.s, arguments)) } }, new AsyncFromSyncIterator(t) } var REACT_ELEMENT_TYPE; function _jsx(t, e, r, i) { REACT_ELEMENT_TYPE || (REACT_ELEMENT_TYPE = "function" == typeof Symbol && Symbol.for && Symbol.for("react.element") || 60103); var s = t && t.defaultProps, a = arguments.length - 3; if (e || 0 === a || (e = { children: void 0 }), 1 === a) e.children = i; else if (a > 1) { for (var n = new Array(a), o = 0; o < a; o++)n[o] = arguments[o + 3]; e.children = n } if (e && s) for (var h in s) void 0 === e[h] && (e[h] = s[h]); else e || (e = s || {}); return { $$typeof: REACT_ELEMENT_TYPE, type: t, key: void 0 === r ? null : "" + r, ref: null, props: e, _owner: null } } function ownKeys(t, e) { var r = Object.keys(t); if (Object.getOwnPropertySymbols) { var i = Object.getOwnPropertySymbols(t); e && (i = i.filter((function (e) { return Object.getOwnPropertyDescriptor(t, e).enumerable }))), r.push.apply(r, i) } return r } function _objectSpread2(t) { for (var e = 1; e < arguments.length; e++) { var r = null != arguments[e] ? arguments[e] : {}; e % 2 ? ownKeys(Object(r), !0).forEach((function (e) { _defineProperty(t, e, r[e]) })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) : ownKeys(Object(r)).forEach((function (e) { Object.defineProperty(t, e, Object.getOwnPropertyDescriptor(r, e)) })) } return t } function _typeof(t) { return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (t) { return typeof t } : function (t) { return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t }, _typeof(t) } function _wrapRegExp() { _wrapRegExp = function (t, e) { return new r(t, void 0, e) }; var t = RegExp.prototype, e = new WeakMap; function r(t, i, s) { var a = new RegExp(t, i); return e.set(a, s || e.get(t)), _setPrototypeOf(a, r.prototype) } function i(t, r) { var i = e.get(r); return Object.keys(i).reduce((function (e, r) { return e[r] = t[i[r]], e }), Object.create(null)) } return _inherits(r, RegExp), r.prototype.exec = function (e) { var r = t.exec.call(this, e); return r && (r.groups = i(r, this)), r }, r.prototype[Symbol.replace] = function (r, s) { if ("string" == typeof s) { var a = e.get(this); return t[Symbol.replace].call(this, r, s.replace(/\$<([^>]+)>/g, (function (t, e) { return "$" + a[e] }))) } if ("function" == typeof s) { var n = this; return t[Symbol.replace].call(this, r, (function () { var t = arguments; return "object" != typeof t[t.length - 1] && (t = [].slice.call(t)).push(i(t, n)), s.apply(this, t) })) } return t[Symbol.replace].call(this, r, s) }, _wrapRegExp.apply(this, arguments) } function _AwaitValue(t) { this.wrapped = t } function _AsyncGenerator(t) { var e, r; function i(e, r) { try { var a = t[e](r), n = a.value, o = n instanceof _AwaitValue; Promise.resolve(o ? n.wrapped : n).then((function (t) { o ? i("return" === e ? "return" : "next", t) : s(a.done ? "return" : "normal", t) }), (function (t) { i("throw", t) })) } catch (t) { s("throw", t) } } function s(t, s) { switch (t) { case "return": e.resolve({ value: s, done: !0 }); break; case "throw": e.reject(s); break; default: e.resolve({ value: s, done: !1 }) }(e = e.next) ? i(e.key, e.arg) : r = null } this._invoke = function (t, s) { return new Promise((function (a, n) { var o = { key: t, arg: s, resolve: a, reject: n, next: null }; r ? r = r.next = o : (e = r = o, i(t, s)) })) }, "function" != typeof t.return && (this.return = void 0) } function _wrapAsyncGenerator(t) { return function () { return new _AsyncGenerator(t.apply(this, arguments)) } } function _awaitAsyncGenerator(t) { return new _AwaitValue(t) } function _asyncGeneratorDelegate(t, e) { var r = {}, i = !1; function s(r, s) { return i = !0, s = new Promise((function (e) { e(t[r](s)) })), { done: !1, value: e(s) } } return r["undefined" != typeof Symbol && Symbol.iterator || "@@iterator"] = function () { return this }, r.next = function (t) { return i ? (i = !1, t) : s("next", t) }, "function" == typeof t.throw && (r.throw = function (t) { if (i) throw i = !1, t; return s("throw", t) }), "function" == typeof t.return && (r.return = function (t) { return i ? (i = !1, t) : s("return", t) }), r } function asyncGeneratorStep(t, e, r, i, s, a, n) { try { var o = t[a](n), h = o.value } catch (t) { return void r(t) } o.done ? e(h) : Promise.resolve(h).then(i, s) } function _asyncToGenerator(t) { return function () { var e = this, r = arguments; return new Promise((function (i, s) { var a = t.apply(e, r); function n(t) { asyncGeneratorStep(a, i, s, n, o, "next", t) } function o(t) { asyncGeneratorStep(a, i, s, n, o, "throw", t) } n(void 0) })) } } function _classCallCheck(t, e) { if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function") } function _defineProperties(t, e) { for (var r = 0; r < e.length; r++) { var i = e[r]; i.enumerable = i.enumerable || !1, i.configurable = !0, "value" in i && (i.writable = !0), Object.defineProperty(t, i.key, i) } } function _createClass(t, e, r) { return e && _defineProperties(t.prototype, e), r && _defineProperties(t, r), Object.defineProperty(t, "prototype", { writable: !1 }), t } function _defineEnumerableProperties(t, e) { for (var r in e) { (a = e[r]).configurable = a.enumerable = !0, "value" in a && (a.writable = !0), Object.defineProperty(t, r, a) } if (Object.getOwnPropertySymbols) for (var i = Object.getOwnPropertySymbols(e), s = 0; s < i.length; s++) { var a, n = i[s]; (a = e[n]).configurable = a.enumerable = !0, "value" in a && (a.writable = !0), Object.defineProperty(t, n, a) } return t } function _defaults(t, e) { for (var r = Object.getOwnPropertyNames(e), i = 0; i < r.length; i++) { var s = r[i], a = Object.getOwnPropertyDescriptor(e, s); a && a.configurable && void 0 === t[s] && Object.defineProperty(t, s, a) } return t } function _defineProperty(t, e, r) { return e in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t } function _extends() { return _extends = Object.assign || function (t) { for (var e = 1; e < arguments.length; e++) { var r = arguments[e]; for (var i in r) Object.prototype.hasOwnProperty.call(r, i) && (t[i] = r[i]) } return t }, _extends.apply(this, arguments) } function _objectSpread(t) { for (var e = 1; e < arguments.length; e++) { var r = null != arguments[e] ? Object(arguments[e]) : {}, i = Object.keys(r); "function" == typeof Object.getOwnPropertySymbols && i.push.apply(i, Object.getOwnPropertySymbols(r).filter((function (t) { return Object.getOwnPropertyDescriptor(r, t).enumerable }))), i.forEach((function (e) { _defineProperty(t, e, r[e]) })) } return t } function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e) } function _inheritsLoose(t, e) { t.prototype = Object.create(e.prototype), t.prototype.constructor = t, _setPrototypeOf(t, e) } function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function (t) { return t.__proto__ || Object.getPrototypeOf(t) }, _getPrototypeOf(t) } function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf || function (t, e) { return t.__proto__ = e, t }, _setPrototypeOf(t, e) } function _isNativeReflectConstruct() { if ("undefined" == typeof Reflect || !Reflect.construct) return !1; if (Reflect.construct.sham) return !1; if ("function" == typeof Proxy) return !0; try { return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function () { }))), !0 } catch (t) { return !1 } } function _construct(t, e, r) { return _construct = _isNativeReflectConstruct() ? Reflect.construct : function (t, e, r) { var i = [null]; i.push.apply(i, e); var s = new (Function.bind.apply(t, i)); return r && _setPrototypeOf(s, r.prototype), s }, _construct.apply(null, arguments) } function _isNativeFunction(t) { return -1 !== Function.toString.call(t).indexOf("[native code]") } function _wrapNativeSuper(t) { var e = "function" == typeof Map ? new Map : void 0; return _wrapNativeSuper = function (t) { if (null === t || !_isNativeFunction(t)) return t; if ("function" != typeof t) throw new TypeError("Super expression must either be null or a function"); if (void 0 !== e) { if (e.has(t)) return e.get(t); e.set(t, r) } function r() { return _construct(t, arguments, _getPrototypeOf(this).constructor) } return r.prototype = Object.create(t.prototype, { constructor: { value: r, enumerable: !1, writable: !0, configurable: !0 } }), _setPrototypeOf(r, t) }, _wrapNativeSuper(t) } function _instanceof(t, e) { return null != e && "undefined" != typeof Symbol && e[Symbol.hasInstance] ? !!e[Symbol.hasInstance](t) : t instanceof e } function _interopRequireDefault(t) { return t && t.__esModule ? t : { default: t } } function _getRequireWildcardCache(t) { if ("function" != typeof WeakMap) return null; var e = new WeakMap, r = new WeakMap; return (_getRequireWildcardCache = function (t) { return t ? r : e })(t) } function _interopRequireWildcard(t, e) { if (!e && t && t.__esModule) return t; if (null === t || "object" != typeof t && "function" != typeof t) return { default: t }; var r = _getRequireWildcardCache(e); if (r && r.has(t)) return r.get(t); var i = {}, s = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var a in t) if ("default" !== a && Object.prototype.hasOwnProperty.call(t, a)) { var n = s ? Object.getOwnPropertyDescriptor(t, a) : null; n && (n.get || n.set) ? Object.defineProperty(i, a, n) : i[a] = t[a] } return i.default = t, r && r.set(t, i), i } function _newArrowCheck(t, e) { if (t !== e) throw new TypeError("Cannot instantiate an arrow function") } function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure undefined") } function _objectWithoutPropertiesLoose(t, e) { if (null == t) return {}; var r, i, s = {}, a = Object.keys(t); for (i = 0; i < a.length; i++)r = a[i], e.indexOf(r) >= 0 || (s[r] = t[r]); return s } function _objectWithoutProperties(t, e) { if (null == t) return {}; var r, i, s = _objectWithoutPropertiesLoose(t, e); if (Object.getOwnPropertySymbols) { var a = Object.getOwnPropertySymbols(t); for (i = 0; i < a.length; i++)r = a[i], e.indexOf(r) >= 0 || Object.prototype.propertyIsEnumerable.call(t, r) && (s[r] = t[r]) } return s } function _assertThisInitialized(t) { if (void 0 === t) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return t } function _possibleConstructorReturn(t, e) { if (e && ("object" == typeof e || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t) } function _createSuper(t) { var e = _isNativeReflectConstruct(); return function () { var r, i = _getPrototypeOf(t); if (e) { var s = _getPrototypeOf(this).constructor; r = Reflect.construct(i, arguments, s) } else r = i.apply(this, arguments); return _possibleConstructorReturn(this, r) } } function _superPropBase(t, e) { for (; !Object.prototype.hasOwnProperty.call(t, e) && null !== (t = _getPrototypeOf(t));); return t } function _get() { return _get = "undefined" != typeof Reflect && Reflect.get ? Reflect.get : function (t, e, r) { var i = _superPropBase(t, e); if (i) { var s = Object.getOwnPropertyDescriptor(i, e); return s.get ? s.get.call(arguments.length < 3 ? t : r) : s.value } }, _get.apply(this, arguments) } function set(t, e, r, i) { return set = "undefined" != typeof Reflect && Reflect.set ? Reflect.set : function (t, e, r, i) { var s, a = _superPropBase(t, e); if (a) { if ((s = Object.getOwnPropertyDescriptor(a, e)).set) return s.set.call(i, r), !0; if (!s.writable) return !1 } if (s = Object.getOwnPropertyDescriptor(i, e)) { if (!s.writable) return !1; s.value = r, Object.defineProperty(i, e, s) } else _defineProperty(i, e, r); return !0 }, set(t, e, r, i) } function _set(t, e, r, i, s) { if (!set(t, e, r, i || t) && s) throw new Error("failed to set property"); return r } function _taggedTemplateLiteral(t, e) { return e || (e = t.slice(0)), Object.freeze(Object.defineProperties(t, { raw: { value: Object.freeze(e) } })) } function _taggedTemplateLiteralLoose(t, e) { return e || (e = t.slice(0)), t.raw = e, t } function _readOnlyError(t) { throw new TypeError('"' + t + '" is read-only') } function _writeOnlyError(t) { throw new TypeError('"' + t + '" is write-only') } function _classNameTDZError(t) { throw new Error('Class "' + t + '" cannot be referenced in computed property keys.') } function _temporalUndefined() { } function _tdz(t) { throw new ReferenceError(t + " is not defined - temporal dead zone") } function _temporalRef(t, e) { return t === _temporalUndefined ? _tdz(e) : t } function _slicedToArray(t, e) { return _arrayWithHoles(t) || _iterableToArrayLimit(t, e) || _unsupportedIterableToArray(t, e) || _nonIterableRest() } function _slicedToArrayLoose(t, e) { return _arrayWithHoles(t) || _iterableToArrayLimitLoose(t, e) || _unsupportedIterableToArray(t, e) || _nonIterableRest() } function _toArray(t) { return _arrayWithHoles(t) || _iterableToArray(t) || _unsupportedIterableToArray(t) || _nonIterableRest() } function _toConsumableArray(t) { return _arrayWithoutHoles(t) || _iterableToArray(t) || _unsupportedIterableToArray(t) || _nonIterableSpread() } function _arrayWithoutHoles(t) { if (Array.isArray(t)) return _arrayLikeToArray(t) } function _arrayWithHoles(t) { if (Array.isArray(t)) return t } function _maybeArrayLike(t, e, r) { if (e && !Array.isArray(e) && "number" == typeof e.length) { var i = e.length; return _arrayLikeToArray(e, void 0 !== r && r < i ? r : i) } return t(e, r) } function _iterableToArray(t) { if ("undefined" != typeof Symbol && null != t[Symbol.iterator] || null != t["@@iterator"]) return Array.from(t) } function _iterableToArrayLimit(t, e) { var r = null == t ? null : "undefined" != typeof Symbol && t[Symbol.iterator] || t["@@iterator"]; if (null != r) { var i, s, a = [], n = !0, o = !1; try { for (r = r.call(t); !(n = (i = r.next()).done) && (a.push(i.value), !e || a.length !== e); n = !0); } catch (t) { o = !0, s = t } finally { try { n || null == r.return || r.return() } finally { if (o) throw s } } return a } } function _iterableToArrayLimitLoose(t, e) { var r = t && ("undefined" != typeof Symbol && t[Symbol.iterator] || t["@@iterator"]); if (null != r) { var i = []; for (r = r.call(t), _step; !(_step = r.next()).done && (i.push(_step.value), !e || i.length !== e);); return i } } function _unsupportedIterableToArray(t, e) { if (t) { if ("string" == typeof t) return _arrayLikeToArray(t, e); var r = Object.prototype.toString.call(t).slice(8, -1); return "Object" === r && t.constructor && (r = t.constructor.name), "Map" === r || "Set" === r ? Array.from(t) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? _arrayLikeToArray(t, e) : void 0 } } function _arrayLikeToArray(t, e) { (null == e || e > t.length) && (e = t.length); for (var r = 0, i = new Array(e); r < e; r++)i[r] = t[r]; return i } function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.") } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.") } function _createForOfIteratorHelper(t, e) { var r = "undefined" != typeof Symbol && t[Symbol.iterator] || t["@@iterator"]; if (!r) { if (Array.isArray(t) || (r = _unsupportedIterableToArray(t)) || e && t && "number" == typeof t.length) { r && (t = r); var i = 0, s = function () { }; return { s: s, n: function () { return i >= t.length ? { done: !0 } : { done: !1, value: t[i++] } }, e: function (t) { throw t }, f: s } } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.") } var a, n = !0, o = !1; return { s: function () { r = r.call(t) }, n: function () { var t = r.next(); return n = t.done, t }, e: function (t) { o = !0, a = t }, f: function () { try { n || null == r.return || r.return() } finally { if (o) throw a } } } } function _createForOfIteratorHelperLoose(t, e) { var r = "undefined" != typeof Symbol && t[Symbol.iterator] || t["@@iterator"]; if (r) return (r = r.call(t)).next.bind(r); if (Array.isArray(t) || (r = _unsupportedIterableToArray(t)) || e && t && "number" == typeof t.length) { r && (t = r); var i = 0; return function () { return i >= t.length ? { done: !0 } : { done: !1, value: t[i++] } } } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.") } function _skipFirstGeneratorNext(t) { return function () { var e = t.apply(this, arguments); return e.next(), e } } function _toPrimitive(t, e) { if ("object" != typeof t || null === t) return t; var r = t[Symbol.toPrimitive]; if (void 0 !== r) { var i = r.call(t, e || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value.") } return ("string" === e ? String : Number)(t) } function _toPropertyKey(t) { var e = _toPrimitive(t, "string"); return "symbol" == typeof e ? e : String(e) } function _initializerWarningHelper(t, e) { throw new Error("Decorating class property failed. Please ensure that proposal-class-properties is enabled and runs after the decorators transform.") } function _initializerDefineProperty(t, e, r, i) { r && Object.defineProperty(t, e, { enumerable: r.enumerable, configurable: r.configurable, writable: r.writable, value: r.initializer ? r.initializer.call(i) : void 0 }) } function _applyDecoratedDescriptor(t, e, r, i, s) { var a = {}; return Object.keys(i).forEach((function (t) { a[t] = i[t] })), a.enumerable = !!a.enumerable, a.configurable = !!a.configurable, ("value" in a || a.initializer) && (a.writable = !0), a = r.slice().reverse().reduce((function (r, i) { return i(t, e, r) || r }), a), s && void 0 !== a.initializer && (a.value = a.initializer ? a.initializer.call(s) : void 0, a.initializer = void 0), void 0 === a.initializer && (Object.defineProperty(t, e, a), a = null), a } _AsyncGenerator.prototype["function" == typeof Symbol && Symbol.asyncIterator || "@@asyncIterator"] = function () { return this }, _AsyncGenerator.prototype.next = function (t) { return this._invoke("next", t) }, _AsyncGenerator.prototype.throw = function (t) { return this._invoke("throw", t) }, _AsyncGenerator.prototype.return = function (t) { return this._invoke("return", t) }; var id = 0; function _classPrivateFieldLooseKey(t) { return "__private_" + id++ + "_" + t } function _classPrivateFieldLooseBase(t, e) { if (!Object.prototype.hasOwnProperty.call(t, e)) throw new TypeError("attempted to use private field on non-instance"); return t } function _classPrivateFieldGet(t, e) { return _classApplyDescriptorGet(t, _classExtractFieldDescriptor(t, e, "get")) } function _classPrivateFieldSet(t, e, r) { return _classApplyDescriptorSet(t, _classExtractFieldDescriptor(t, e, "set"), r), r } function _classPrivateFieldDestructureSet(t, e) { return _classApplyDescriptorDestructureSet(t, _classExtractFieldDescriptor(t, e, "set")) } function _classExtractFieldDescriptor(t, e, r) { if (!e.has(t)) throw new TypeError("attempted to " + r + " private field on non-instance"); return e.get(t) } function _classStaticPrivateFieldSpecGet(t, e, r) { return _classCheckPrivateStaticAccess(t, e), _classCheckPrivateStaticFieldDescriptor(r, "get"), _classApplyDescriptorGet(t, r) } function _classStaticPrivateFieldSpecSet(t, e, r, i) { return _classCheckPrivateStaticAccess(t, e), _classCheckPrivateStaticFieldDescriptor(r, "set"), _classApplyDescriptorSet(t, r, i), i } function _classStaticPrivateMethodGet(t, e, r) { return _classCheckPrivateStaticAccess(t, e), r } function _classStaticPrivateMethodSet() { throw new TypeError("attempted to set read only static private field") } function _classApplyDescriptorGet(t, e) { return e.get ? e.get.call(t) : e.value } function _classApplyDescriptorSet(t, e, r) { if (e.set) e.set.call(t, r); else { if (!e.writable) throw new TypeError("attempted to set read only private field"); e.value = r } } function _classApplyDescriptorDestructureSet(t, e) { if (e.set) return "__destrObj" in e || (e.__destrObj = { set value(r) { e.set.call(t, r) } }), e.__destrObj; if (!e.writable) throw new TypeError("attempted to set read only private field"); return e } function _classStaticPrivateFieldDestructureSet(t, e, r) { return _classCheckPrivateStaticAccess(t, e), _classCheckPrivateStaticFieldDescriptor(r, "set"), _classApplyDescriptorDestructureSet(t, r) } function _classCheckPrivateStaticAccess(t, e) { if (t !== e) throw new TypeError("Private static access of wrong provenance") } function _classCheckPrivateStaticFieldDescriptor(t, e) { if (void 0 === t) throw new TypeError("attempted to " + e + " private static field before its declaration") } function _decorate(t, e, r, i) { var s = _getDecoratorsApi(); if (i) for (var a = 0; a < i.length; a++)s = i[a](s); var n = e((function (t) { s.initializeInstanceElements(t, o.elements) }), r), o = s.decorateClass(_coalesceClassElements(n.d.map(_createElementDescriptor)), t); return s.initializeClassElements(n.F, o.elements), s.runClassFinishers(n.F, o.finishers) } function _getDecoratorsApi() { _getDecoratorsApi = function () { return t }; var t = { elementsDefinitionOrder: [["method"], ["field"]], initializeInstanceElements: function (t, e) { ["method", "field"].forEach((function (r) { e.forEach((function (e) { e.kind === r && "own" === e.placement && this.defineClassElement(t, e) }), this) }), this) }, initializeClassElements: function (t, e) { var r = t.prototype;["method", "field"].forEach((function (i) { e.forEach((function (e) { var s = e.placement; if (e.kind === i && ("static" === s || "prototype" === s)) { var a = "static" === s ? t : r; this.defineClassElement(a, e) } }), this) }), this) }, defineClassElement: function (t, e) { var r = e.descriptor; if ("field" === e.kind) { var i = e.initializer; r = { enumerable: r.enumerable, writable: r.writable, configurable: r.configurable, value: void 0 === i ? void 0 : i.call(t) } } Object.defineProperty(t, e.key, r) }, decorateClass: function (t, e) { var r = [], i = [], s = { static: [], prototype: [], own: [] }; if (t.forEach((function (t) { this.addElementPlacement(t, s) }), this), t.forEach((function (t) { if (!_hasDecorators(t)) return r.push(t); var e = this.decorateElement(t, s); r.push(e.element), r.push.apply(r, e.extras), i.push.apply(i, e.finishers) }), this), !e) return { elements: r, finishers: i }; var a = this.decorateConstructor(r, e); return i.push.apply(i, a.finishers), a.finishers = i, a }, addElementPlacement: function (t, e, r) { var i = e[t.placement]; if (!r && -1 !== i.indexOf(t.key)) throw new TypeError("Duplicated element (" + t.key + ")"); i.push(t.key) }, decorateElement: function (t, e) { for (var r = [], i = [], s = t.decorators, a = s.length - 1; a >= 0; a--) { var n = e[t.placement]; n.splice(n.indexOf(t.key), 1); var o = this.fromElementDescriptor(t), h = this.toElementFinisherExtras((0, s[a])(o) || o); t = h.element, this.addElementPlacement(t, e), h.finisher && i.push(h.finisher); var l = h.extras; if (l) { for (var p = 0; p < l.length; p++)this.addElementPlacement(l[p], e); r.push.apply(r, l) } } return { element: t, finishers: i, extras: r } }, decorateConstructor: function (t, e) { for (var r = [], i = e.length - 1; i >= 0; i--) { var s = this.fromClassDescriptor(t), a = this.toClassDescriptor((0, e[i])(s) || s); if (void 0 !== a.finisher && r.push(a.finisher), void 0 !== a.elements) { t = a.elements; for (var n = 0; n < t.length - 1; n++)for (var o = n + 1; o < t.length; o++)if (t[n].key === t[o].key && t[n].placement === t[o].placement) throw new TypeError("Duplicated element (" + t[n].key + ")") } } return { elements: t, finishers: r } }, fromElementDescriptor: function (t) { var e = { kind: t.kind, key: t.key, placement: t.placement, descriptor: t.descriptor }; return Object.defineProperty(e, Symbol.toStringTag, { value: "Descriptor", configurable: !0 }), "field" === t.kind && (e.initializer = t.initializer), e }, toElementDescriptors: function (t) { if (void 0 !== t) return _toArray(t).map((function (t) { var e = this.toElementDescriptor(t); return this.disallowProperty(t, "finisher", "An element descriptor"), this.disallowProperty(t, "extras", "An element descriptor"), e }), this) }, toElementDescriptor: function (t) { var e = String(t.kind); if ("method" !== e && "field" !== e) throw new TypeError('An element descriptor\'s .kind property must be either "method" or "field", but a decorator created an element descriptor with .kind "' + e + '"'); var r = _toPropertyKey(t.key), i = String(t.placement); if ("static" !== i && "prototype" !== i && "own" !== i) throw new TypeError('An element descriptor\'s .placement property must be one of "static", "prototype" or "own", but a decorator created an element descriptor with .placement "' + i + '"'); var s = t.descriptor; this.disallowProperty(t, "elements", "An element descriptor"); var a = { kind: e, key: r, placement: i, descriptor: Object.assign({}, s) }; return "field" !== e ? this.disallowProperty(t, "initializer", "A method descriptor") : (this.disallowProperty(s, "get", "The property descriptor of a field descriptor"), this.disallowProperty(s, "set", "The property descriptor of a field descriptor"), this.disallowProperty(s, "value", "The property descriptor of a field descriptor"), a.initializer = t.initializer), a }, toElementFinisherExtras: function (t) { return { element: this.toElementDescriptor(t), finisher: _optionalCallableProperty(t, "finisher"), extras: this.toElementDescriptors(t.extras) } }, fromClassDescriptor: function (t) { var e = { kind: "class", elements: t.map(this.fromElementDescriptor, this) }; return Object.defineProperty(e, Symbol.toStringTag, { value: "Descriptor", configurable: !0 }), e }, toClassDescriptor: function (t) { var e = String(t.kind); if ("class" !== e) throw new TypeError('A class descriptor\'s .kind property must be "class", but a decorator created a class descriptor with .kind "' + e + '"'); this.disallowProperty(t, "key", "A class descriptor"), this.disallowProperty(t, "placement", "A class descriptor"), this.disallowProperty(t, "descriptor", "A class descriptor"), this.disallowProperty(t, "initializer", "A class descriptor"), this.disallowProperty(t, "extras", "A class descriptor"); var r = _optionalCallableProperty(t, "finisher"); return { elements: this.toElementDescriptors(t.elements), finisher: r } }, runClassFinishers: function (t, e) { for (var r = 0; r < e.length; r++) { var i = (0, e[r])(t); if (void 0 !== i) { if ("function" != typeof i) throw new TypeError("Finishers must return a constructor."); t = i } } return t }, disallowProperty: function (t, e, r) { if (void 0 !== t[e]) throw new TypeError(r + " can't have a ." + e + " property.") } }; return t } function _createElementDescriptor(t) { var e, r = _toPropertyKey(t.key); "method" === t.kind ? e = { value: t.value, writable: !0, configurable: !0, enumerable: !1 } : "get" === t.kind ? e = { get: t.value, configurable: !0, enumerable: !1 } : "set" === t.kind ? e = { set: t.value, configurable: !0, enumerable: !1 } : "field" === t.kind && (e = { configurable: !0, writable: !0, enumerable: !0 }); var i = { kind: "field" === t.kind ? "field" : "method", key: r, placement: t.static ? "static" : "field" === t.kind ? "own" : "prototype", descriptor: e }; return t.decorators && (i.decorators = t.decorators), "field" === t.kind && (i.initializer = t.value), i } function _coalesceGetterSetter(t, e) { void 0 !== t.descriptor.get ? e.descriptor.get = t.descriptor.get : e.descriptor.set = t.descriptor.set } function _coalesceClassElements(t) { for (var e = [], r = function (t) { return "method" === t.kind && t.key === a.key && t.placement === a.placement }, i = 0; i < t.length; i++) { var s, a = t[i]; if ("method" === a.kind && (s = e.find(r))) if (_isDataDescriptor(a.descriptor) || _isDataDescriptor(s.descriptor)) { if (_hasDecorators(a) || _hasDecorators(s)) throw new ReferenceError("Duplicated methods (" + a.key + ") can't be decorated."); s.descriptor = a.descriptor } else { if (_hasDecorators(a)) { if (_hasDecorators(s)) throw new ReferenceError("Decorators can't be placed on different accessors with for the same property (" + a.key + ")."); s.decorators = a.decorators } _coalesceGetterSetter(a, s) } else e.push(a) } return e } function _hasDecorators(t) { return t.decorators && t.decorators.length } function _isDataDescriptor(t) { return void 0 !== t && !(void 0 === t.value && void 0 === t.writable) } function _optionalCallableProperty(t, e) { var r = t[e]; if (void 0 !== r && "function" != typeof r) throw new TypeError("Expected '" + e + "' to be a function"); return r } function _classPrivateMethodGet(t, e, r) { if (!e.has(t)) throw new TypeError("attempted to get private field on non-instance"); return r } function _checkPrivateRedeclaration(t, e) { if (e.has(t)) throw new TypeError("Cannot initialize the same private elements twice on an object") } function _classPrivateFieldInitSpec(t, e, r) { _checkPrivateRedeclaration(t, e), e.set(t, r) } function _classPrivateMethodInitSpec(t, e) { _checkPrivateRedeclaration(t, e), e.add(t) } function _classPrivateMethodSet() { throw new TypeError("attempted to reassign private method") } +/*! ***************************************************************************** + Copyright (c) Microsoft Corporation. + + Permission to use, copy, modify, and/or distribute this software for any + purpose with or without fee is hereby granted. + + THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH + REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY + AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, + INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM + LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR + OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR + PERFORMANCE OF THIS SOFTWARE. + ***************************************************************************** */var _extendStatics = function (t, e) { return _extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function (t, e) { t.__proto__ = e } || function (t, e) { for (var r in e) Object.prototype.hasOwnProperty.call(e, r) && (t[r] = e[r]) }, _extendStatics(t, e) }; function __extends(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Class extends value " + String(e) + " is not a constructor or null"); function r() { this.constructor = t } _extendStatics(t, e), t.prototype = null === e ? Object.create(e) : (r.prototype = e.prototype, new r) } var _assign = function () { return _assign = Object.assign || function (t) { for (var e, r = 1, i = arguments.length; r < i; r++)for (var s in e = arguments[r]) Object.prototype.hasOwnProperty.call(e, s) && (t[s] = e[s]); return t }, _assign.apply(this, arguments) }; function __rest(t, e) { var r = {}; for (var i in t) Object.prototype.hasOwnProperty.call(t, i) && e.indexOf(i) < 0 && (r[i] = t[i]); if (null != t && "function" == typeof Object.getOwnPropertySymbols) { var s = 0; for (i = Object.getOwnPropertySymbols(t); s < i.length; s++)e.indexOf(i[s]) < 0 && Object.prototype.propertyIsEnumerable.call(t, i[s]) && (r[i[s]] = t[i[s]]) } return r } function __decorate(t, e, r, i) { var s, a = arguments.length, n = a < 3 ? e : null === i ? i = Object.getOwnPropertyDescriptor(e, r) : i; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) n = Reflect.decorate(t, e, r, i); else for (var o = t.length - 1; o >= 0; o--)(s = t[o]) && (n = (a < 3 ? s(n) : a > 3 ? s(e, r, n) : s(e, r)) || n); return a > 3 && n && Object.defineProperty(e, r, n), n } function __param(t, e) { return function (r, i) { e(r, i, t) } } function __metadata(t, e) { if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(t, e) } function __awaiter(t, e, r, i) { return new (r || (r = Promise))((function (s, a) { function n(t) { try { h(i.next(t)) } catch (t) { a(t) } } function o(t) { try { h(i.throw(t)) } catch (t) { a(t) } } function h(t) { var e; t.done ? s(t.value) : (e = t.value, e instanceof r ? e : new r((function (t) { t(e) }))).then(n, o) } h((i = i.apply(t, e || [])).next()) })) } function __generator(t, e) { var r, i, s, a, n = { label: 0, sent: function () { if (1 & s[0]) throw s[1]; return s[1] }, trys: [], ops: [] }; return a = { next: o(0), throw: o(1), return: o(2) }, "function" == typeof Symbol && (a[Symbol.iterator] = function () { return this }), a; function o(a) { return function (o) { return function (a) { if (r) throw new TypeError("Generator is already executing."); for (; n;)try { if (r = 1, i && (s = 2 & a[0] ? i.return : a[0] ? i.throw || ((s = i.return) && s.call(i), 0) : i.next) && !(s = s.call(i, a[1])).done) return s; switch (i = 0, s && (a = [2 & a[0], s.value]), a[0]) { case 0: case 1: s = a; break; case 4: return n.label++, { value: a[1], done: !1 }; case 5: n.label++, i = a[1], a = [0]; continue; case 7: a = n.ops.pop(), n.trys.pop(); continue; default: if (!(s = n.trys, (s = s.length > 0 && s[s.length - 1]) || 6 !== a[0] && 2 !== a[0])) { n = 0; continue } if (3 === a[0] && (!s || a[1] > s[0] && a[1] < s[3])) { n.label = a[1]; break } if (6 === a[0] && n.label < s[1]) { n.label = s[1], s = a; break } if (s && n.label < s[2]) { n.label = s[2], n.ops.push(a); break } s[2] && n.ops.pop(), n.trys.pop(); continue }a = e.call(t, n) } catch (t) { a = [6, t], i = 0 } finally { r = s = 0 } if (5 & a[0]) throw a[1]; return { value: a[0] ? a[1] : void 0, done: !0 } }([a, o]) } } } var __createBinding = Object.create ? function (t, e, r, i) { void 0 === i && (i = r), Object.defineProperty(t, i, { enumerable: !0, get: function () { return e[r] } }) } : function (t, e, r, i) { void 0 === i && (i = r), t[i] = e[r] }; function __exportStar(t, e) { for (var r in t) "default" === r || Object.prototype.hasOwnProperty.call(e, r) || __createBinding(e, t, r) } function __values(t) { var e = "function" == typeof Symbol && Symbol.iterator, r = e && t[e], i = 0; if (r) return r.call(t); if (t && "number" == typeof t.length) return { next: function () { return t && i >= t.length && (t = void 0), { value: t && t[i++], done: !t } } }; throw new TypeError(e ? "Object is not iterable." : "Symbol.iterator is not defined.") } function __read(t, e) { var r = "function" == typeof Symbol && t[Symbol.iterator]; if (!r) return t; var i, s, a = r.call(t), n = []; try { for (; (void 0 === e || e-- > 0) && !(i = a.next()).done;)n.push(i.value) } catch (t) { s = { error: t } } finally { try { i && !i.done && (r = a.return) && r.call(a) } finally { if (s) throw s.error } } return n } function __spread() { for (var t = [], e = 0; e < arguments.length; e++)t = t.concat(__read(arguments[e])); return t } function __spreadArrays() { for (var t = 0, e = 0, r = arguments.length; e < r; e++)t += arguments[e].length; var i = Array(t), s = 0; for (e = 0; e < r; e++)for (var a = arguments[e], n = 0, o = a.length; n < o; n++, s++)i[s] = a[n]; return i } function __spreadArray(t, e, r) { if (r || 2 === arguments.length) for (var i, s = 0, a = e.length; s < a; s++)!i && s in e || (i || (i = Array.prototype.slice.call(e, 0, s)), i[s] = e[s]); return t.concat(i || Array.prototype.slice.call(e)) } function __await(t) { return this instanceof __await ? (this.v = t, this) : new __await(t) } function __asyncGenerator(t, e, r) { if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined."); var i, s = r.apply(t, e || []), a = []; return i = {}, n("next"), n("throw"), n("return"), i[Symbol.asyncIterator] = function () { return this }, i; function n(t) { s[t] && (i[t] = function (e) { return new Promise((function (r, i) { a.push([t, e, r, i]) > 1 || o(t, e) })) }) } function o(t, e) { try { !function (t) { t.value instanceof __await ? Promise.resolve(t.value.v).then(h, l) : p(a[0][2], t) }(s[t](e)) } catch (t) { p(a[0][3], t) } } function h(t) { o("next", t) } function l(t) { o("throw", t) } function p(t, e) { t(e), a.shift(), a.length && o(a[0][0], a[0][1]) } } function __asyncDelegator(t) { var e, r; return e = {}, i("next"), i("throw", (function (t) { throw t })), i("return"), e[Symbol.iterator] = function () { return this }, e; function i(i, s) { e[i] = t[i] ? function (e) { return (r = !r) ? { value: __await(t[i](e)), done: "return" === i } : s ? s(e) : e } : s } } function __asyncValues(t) { if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined."); var e, r = t[Symbol.asyncIterator]; return r ? r.call(t) : (t = "function" == typeof __values ? __values(t) : t[Symbol.iterator](), e = {}, i("next"), i("throw"), i("return"), e[Symbol.asyncIterator] = function () { return this }, e); function i(r) { e[r] = t[r] && function (e) { return new Promise((function (i, s) { (function (t, e, r, i) { Promise.resolve(i).then((function (e) { t({ value: e, done: r }) }), e) })(i, s, (e = t[r](e)).done, e.value) })) } } } function __makeTemplateObject(t, e) { return Object.defineProperty ? Object.defineProperty(t, "raw", { value: e }) : t.raw = e, t } var __setModuleDefault = Object.create ? function (t, e) { Object.defineProperty(t, "default", { enumerable: !0, value: e }) } : function (t, e) { t.default = e }; function __importStar(t) { if (t && t.__esModule) return t; var e = {}; if (null != t) for (var r in t) "default" !== r && Object.prototype.hasOwnProperty.call(t, r) && __createBinding(e, t, r); return __setModuleDefault(e, t), e } function __importDefault(t) { return t && t.__esModule ? t : { default: t } } function __classPrivateFieldGet(t, e, r, i) { if ("a" === r && !i) throw new TypeError("Private accessor was defined without a getter"); if ("function" == typeof e ? t !== e || !i : !e.has(t)) throw new TypeError("Cannot read private member from an object whose class did not declare it"); return "m" === r ? i : "a" === r ? i.call(t) : i ? i.value : e.get(t) } function __classPrivateFieldSet(t, e, r, i, s) { + if ("m" === i) throw new TypeError("Private method is not writable"); if ("a" === i && !s) throw new TypeError("Private accessor was defined without a setter"); if ("function" == typeof e ? t !== e || !s : !e.has(t)) throw new TypeError("Cannot write private member to an object whose class did not declare it"); return "a" === i ? s.call(t, r) : s ? s.value = r : e.set(t, r), r +/** + * @license + * Copyright 2019 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */} var t$3 = window.ShadowRoot && (void 0 === window.ShadyCSS || window.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, e$8 = Symbol(), n$5 = new Map; class s$3 { constructor(t, e) { if (this._$cssResult$ = !0, e !== e$8) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead."); this.cssText = t } get styleSheet() { var t = n$5.get(this.cssText); return t$3 && void 0 === t && (n$5.set(this.cssText, t = new CSSStyleSheet), t.replaceSync(this.cssText)), t } toString() { return this.cssText } } var o$5 = t => new s$3("string" == typeof t ? t : t + "", e$8), r$3 = function (t) { for (var e = arguments.length, r = new Array(e > 1 ? e - 1 : 0), i = 1; i < e; i++)r[i - 1] = arguments[i]; var s = 1 === t.length ? t[0] : r.reduce(((e, r, i) => e + (t => { if (!0 === t._$cssResult$) return t.cssText; if ("number" == typeof t) return t; throw Error("Value passed to 'css' function must be a 'css' function result: " + t + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.") })(r) + t[i + 1]), t[0]); return new s$3(s, e$8) }, i$3 = (t, e) => { t$3 ? t.adoptedStyleSheets = e.map((t => t instanceof CSSStyleSheet ? t : t.styleSheet)) : e.forEach((e => { var r = document.createElement("style"), i = window.litNonce; void 0 !== i && r.setAttribute("nonce", i), r.textContent = e.cssText, t.appendChild(r) })) }, S$1 = t$3 ? t => t : t => t instanceof CSSStyleSheet ? (t => { var e = ""; for (var r of t.cssRules) e += r.cssText; return o$5(e) })(t) : t +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */, s$2, e$7 = window.trustedTypes, r$2 = e$7 ? e$7.emptyScript : "", h$2 = window.reactiveElementPolyfillSupport, o$4 = { toAttribute(t, e) { switch (e) { case Boolean: t = t ? r$2 : null; break; case Object: case Array: t = null == t ? t : JSON.stringify(t) }return t }, fromAttribute(t, e) { var r = t; switch (e) { case Boolean: r = null !== t; break; case Number: r = null === t ? null : Number(t); break; case Object: case Array: try { r = JSON.parse(t) } catch (t) { r = null } }return r } }, n$4 = (t, e) => e !== t && (e == e || t == t), l$3 = { attribute: !0, type: String, converter: o$4, reflect: !1, hasChanged: n$4 }, t$2; class a$1 extends HTMLElement { constructor() { super(), this._$Et = new Map, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Ei = null, this.o() } static addInitializer(t) { var e; null !== (e = this.l) && void 0 !== e || (this.l = []), this.l.push(t) } static get observedAttributes() { this.finalize(); var t = []; return this.elementProperties.forEach(((e, r) => { var i = this._$Eh(r, e); void 0 !== i && (this._$Eu.set(i, r), t.push(i)) })), t } static createProperty(t) { var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : l$3; if (e.state && (e.attribute = !1), this.finalize(), this.elementProperties.set(t, e), !e.noAccessor && !this.prototype.hasOwnProperty(t)) { var r = "symbol" == typeof t ? Symbol() : "__" + t, i = this.getPropertyDescriptor(t, r, e); void 0 !== i && Object.defineProperty(this.prototype, t, i) } } static getPropertyDescriptor(t, e, r) { return { get() { return this[e] }, set(i) { var s = this[t]; this[e] = i, this.requestUpdate(t, s, r) }, configurable: !0, enumerable: !0 } } static getPropertyOptions(t) { return this.elementProperties.get(t) || l$3 } static finalize() { if (this.hasOwnProperty("finalized")) return !1; this.finalized = !0; var t = Object.getPrototypeOf(this); if (t.finalize(), this.elementProperties = new Map(t.elementProperties), this._$Eu = new Map, this.hasOwnProperty("properties")) { var e = this.properties, r = [...Object.getOwnPropertyNames(e), ...Object.getOwnPropertySymbols(e)]; for (var i of r) this.createProperty(i, e[i]) } return this.elementStyles = this.finalizeStyles(this.styles), !0 } static finalizeStyles(t) { var e = []; if (Array.isArray(t)) { var r = new Set(t.flat(1 / 0).reverse()); for (var i of r) e.unshift(S$1(i)) } else void 0 !== t && e.push(S$1(t)); return e } static _$Eh(t, e) { var r = e.attribute; return !1 === r ? void 0 : "string" == typeof r ? r : "string" == typeof t ? t.toLowerCase() : void 0 } o() { var t; this._$Ep = new Promise((t => this.enableUpdating = t)), this._$AL = new Map, this._$Em(), this.requestUpdate(), null === (t = this.constructor.l) || void 0 === t || t.forEach((t => t(this))) } addController(t) { var e, r; (null !== (e = this._$Eg) && void 0 !== e ? e : this._$Eg = []).push(t), void 0 !== this.renderRoot && this.isConnected && (null === (r = t.hostConnected) || void 0 === r || r.call(t)) } removeController(t) { var e; null === (e = this._$Eg) || void 0 === e || e.splice(this._$Eg.indexOf(t) >>> 0, 1) } _$Em() { this.constructor.elementProperties.forEach(((t, e) => { this.hasOwnProperty(e) && (this._$Et.set(e, this[e]), delete this[e]) })) } createRenderRoot() { var t, e = null !== (t = this.shadowRoot) && void 0 !== t ? t : this.attachShadow(this.constructor.shadowRootOptions); return i$3(e, this.constructor.elementStyles), e } connectedCallback() { var t; void 0 === this.renderRoot && (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), null === (t = this._$Eg) || void 0 === t || t.forEach((t => { var e; return null === (e = t.hostConnected) || void 0 === e ? void 0 : e.call(t) })) } enableUpdating(t) { } disconnectedCallback() { var t; null === (t = this._$Eg) || void 0 === t || t.forEach((t => { var e; return null === (e = t.hostDisconnected) || void 0 === e ? void 0 : e.call(t) })) } attributeChangedCallback(t, e, r) { this._$AK(t, r) } _$ES(t, e) { var r, i, s = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : l$3, a = this.constructor._$Eh(t, s); if (void 0 !== a && !0 === s.reflect) { var n = (null !== (i = null === (r = s.converter) || void 0 === r ? void 0 : r.toAttribute) && void 0 !== i ? i : o$4.toAttribute)(e, s.type); this._$Ei = t, null == n ? this.removeAttribute(a) : this.setAttribute(a, n), this._$Ei = null } } _$AK(t, e) { var r, i, s, a = this.constructor, n = a._$Eu.get(t); if (void 0 !== n && this._$Ei !== n) { var o = a.getPropertyOptions(n), h = o.converter, l = null !== (s = null !== (i = null === (r = h) || void 0 === r ? void 0 : r.fromAttribute) && void 0 !== i ? i : "function" == typeof h ? h : null) && void 0 !== s ? s : o$4.fromAttribute; this._$Ei = n, this[n] = l(e, o.type), this._$Ei = null } } requestUpdate(t, e, r) { var i = !0; void 0 !== t && (((r = r || this.constructor.getPropertyOptions(t)).hasChanged || n$4)(this[t], e) ? (this._$AL.has(t) || this._$AL.set(t, e), !0 === r.reflect && this._$Ei !== t && (void 0 === this._$E_ && (this._$E_ = new Map), this._$E_.set(t, r))) : i = !1), !this.isUpdatePending && i && (this._$Ep = this._$EC()) } _$EC() { var t = this; return _asyncToGenerator((function* () { t.isUpdatePending = !0; try { yield t._$Ep } catch (e) { Promise.reject(e) } var e = t.scheduleUpdate(); return null != e && (yield e), !t.isUpdatePending }))() } scheduleUpdate() { return this.performUpdate() } performUpdate() { var t; if (this.isUpdatePending) { this.hasUpdated, this._$Et && (this._$Et.forEach(((t, e) => this[e] = t)), this._$Et = void 0); var e = !1, r = this._$AL; try { (e = this.shouldUpdate(r)) ? (this.willUpdate(r), null === (t = this._$Eg) || void 0 === t || t.forEach((t => { var e; return null === (e = t.hostUpdate) || void 0 === e ? void 0 : e.call(t) })), this.update(r)) : this._$EU() } catch (t) { throw e = !1, this._$EU(), t } e && this._$AE(r) } } willUpdate(t) { } _$AE(t) { var e; null === (e = this._$Eg) || void 0 === e || e.forEach((t => { var e; return null === (e = t.hostUpdated) || void 0 === e ? void 0 : e.call(t) })), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t) } _$EU() { this._$AL = new Map, this.isUpdatePending = !1 } get updateComplete() { return this.getUpdateComplete() } getUpdateComplete() { return this._$Ep } shouldUpdate(t) { return !0 } update(t) { void 0 !== this._$E_ && (this._$E_.forEach(((t, e) => this._$ES(e, this[e], t))), this._$E_ = void 0), this._$EU() } updated(t) { } firstUpdated(t) { } } a$1.finalized = !0, a$1.elementProperties = new Map, a$1.elementStyles = [], a$1.shadowRootOptions = { mode: "open" }, null == h$2 || h$2({ ReactiveElement: a$1 }), (null !== (s$2 = globalThis.reactiveElementVersions) && void 0 !== s$2 ? s$2 : globalThis.reactiveElementVersions = []).push("1.2.1"); var i$2 = globalThis.trustedTypes, s$1 = i$2 ? i$2.createPolicy("lit-html", { createHTML: t => t }) : void 0, e$6 = "lit$".concat((Math.random() + "").slice(9), "$"), o$3 = "?" + e$6, n$3 = "<".concat(o$3, ">"), l$2 = document, h$1 = function () { var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : ""; return l$2.createComment(t) }, r$1 = t => null === t || "object" != typeof t && "function" != typeof t, d = Array.isArray, u = t => { var e; return d(t) || "function" == typeof (null === (e = t) || void 0 === e ? void 0 : e[Symbol.iterator]) }, c = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v = /-->/g, a = />/g, f = />|[ \n \r](?:([^\s"'>=/]+)([ \n \r]*=[ \n \r]*(?:[^ \n \r"'`<>=]|("|')|))|$)/g, _ = /'/g, m = /"/g, g = /^(?:script|style|textarea)$/i, p = t => function (e) { for (var r = arguments.length, i = new Array(r > 1 ? r - 1 : 0), s = 1; s < r; s++)i[s - 1] = arguments[s]; return { _$litType$: t, strings: e, values: i } }, $ = p(1), y = p(2), b = Symbol.for("lit-noChange"), w = Symbol.for("lit-nothing"), T = new WeakMap, x = (t, e, r) => { var i, s, a = null !== (i = null == r ? void 0 : r.renderBefore) && void 0 !== i ? i : e, n = a._$litPart$; if (void 0 === n) { var o = null !== (s = null == r ? void 0 : r.renderBefore) && void 0 !== s ? s : null; a._$litPart$ = n = new N(e.insertBefore(h$1(), o), o, void 0, null != r ? r : {}) } return n._$AI(t), n }, A = l$2.createTreeWalker(l$2, 129, null, !1), C = (t, e) => { for (var r, i = t.length - 1, s = [], n = 2 === e ? "" : "", o = c, h = 0; h < i; h++) { for (var l = t[h], p = void 0, d = void 0, u = -1, y = 0; y < l.length && (o.lastIndex = y, null !== (d = o.exec(l)));)y = o.lastIndex, o === c ? "!--" === d[1] ? o = v : void 0 !== d[1] ? o = a : void 0 !== d[2] ? (g.test(d[2]) && (r = RegExp("" === d[0] ? (o = null != r ? r : c, u = -1) : void 0 === d[1] ? u = -2 : (u = o.lastIndex - d[2].length, p = d[1], o = void 0 === d[3] ? f : '"' === d[3] ? m : _) : o === m || o === _ ? o = f : o === v || o === a ? o = c : (o = f, r = void 0); var b = o === f && t[h + 1].startsWith("/>") ? " " : ""; n += o === c ? l + n$3 : u >= 0 ? (s.push(p), l.slice(0, u) + "$lit$" + l.slice(u) + e$6 + b) : l + e$6 + (-2 === u ? (s.push(void 0), h) : b) } var P = n + (t[i] || "") + (2 === e ? "" : ""); if (!Array.isArray(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array"); return [void 0 !== s$1 ? s$1.createHTML(P) : P, s] }; class E { constructor(t, e) { var r, { strings: i, _$litType$: s } = t; this.parts = []; var a = 0, n = 0, o = i.length - 1, h = this.parts, [l, p] = C(i, s); if (this.el = E.createElement(l, e), A.currentNode = this.el.content, 2 === s) { var c = this.el.content, f = c.firstChild; f.remove(), c.append(...f.childNodes) } for (; null !== (r = A.nextNode()) && h.length < o;) { if (1 === r.nodeType) { if (r.hasAttributes()) { var d = []; for (var m of r.getAttributeNames()) if (m.endsWith("$lit$") || m.startsWith(e$6)) { var u = p[n++]; if (d.push(m), void 0 !== u) { var y = r.getAttribute(u.toLowerCase() + "$lit$").split(e$6), v = /([.?@])?(.*)/.exec(u); h.push({ type: 1, index: a, name: v[2], strings: y, ctor: "." === v[1] ? M : "?" === v[1] ? H : "@" === v[1] ? I : S }) } else h.push({ type: 6, index: a }) } for (var b of d) r.removeAttribute(b) } if (g.test(r.tagName)) { var P = r.textContent.split(e$6), _ = P.length - 1; if (_ > 0) { r.textContent = i$2 ? i$2.emptyScript : ""; for (var x = 0; x < _; x++)r.append(P[x], h$1()), A.nextNode(), h.push({ type: 2, index: ++a }); r.append(P[_], h$1()) } } } else if (8 === r.nodeType) if (r.data === o$3) h.push({ type: 2, index: a }); else for (var w = -1; -1 !== (w = r.data.indexOf(e$6, w + 1));)h.push({ type: 7, index: a }), w += e$6.length - 1; a++ } } static createElement(t, e) { var r = l$2.createElement("template"); return r.innerHTML = t, r } } function P(t, e) { var r, i, s, a, n = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : t, o = arguments.length > 3 ? arguments[3] : void 0; if (e === b) return e; var h = void 0 !== o ? null === (r = n._$Cl) || void 0 === r ? void 0 : r[o] : n._$Cu, l = r$1(e) ? void 0 : e._$litDirective$; return (null == h ? void 0 : h.constructor) !== l && (null === (i = null == h ? void 0 : h._$AO) || void 0 === i || i.call(h, !1), void 0 === l ? h = void 0 : (h = new l(t))._$AT(t, n, o), void 0 !== o ? (null !== (s = (a = n)._$Cl) && void 0 !== s ? s : a._$Cl = [])[o] = h : n._$Cu = h), void 0 !== h && (e = P(t, h._$AS(t, e.values), h, o)), e } class V { constructor(t, e) { this.v = [], this._$AN = void 0, this._$AD = t, this._$AM = e } get parentNode() { return this._$AM.parentNode } get _$AU() { return this._$AM._$AU } p(t) { var e, { el: { content: r }, parts: i } = this._$AD, s = (null !== (e = null == t ? void 0 : t.creationScope) && void 0 !== e ? e : l$2).importNode(r, !0); A.currentNode = s; for (var a = A.nextNode(), n = 0, o = 0, h = i[0]; void 0 !== h;) { if (n === h.index) { var l = void 0; 2 === h.type ? l = new N(a, a.nextSibling, this, t) : 1 === h.type ? l = new h.ctor(a, h.name, h.strings, this, t) : 6 === h.type && (l = new L(a, this, t)), this.v.push(l), h = i[++o] } n !== (null == h ? void 0 : h.index) && (a = A.nextNode(), n++) } return s } m(t) { var e = 0; for (var r of this.v) void 0 !== r && (void 0 !== r.strings ? (r._$AI(t, r, e), e += r.strings.length - 2) : r._$AI(t[e])), e++ } } class N { constructor(t, e, r, i) { var s; this.type = 2, this._$AH = w, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = r, this.options = i, this._$Cg = null === (s = null == i ? void 0 : i.isConnected) || void 0 === s || s } get _$AU() { var t, e; return null !== (e = null === (t = this._$AM) || void 0 === t ? void 0 : t._$AU) && void 0 !== e ? e : this._$Cg } get parentNode() { var t = this._$AA.parentNode, e = this._$AM; return void 0 !== e && 11 === t.nodeType && (t = e.parentNode), t } get startNode() { return this._$AA } get endNode() { return this._$AB } _$AI(t) { t = P(this, t, arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : this), r$1(t) ? t === w || null == t || "" === t ? (this._$AH !== w && this._$AR(), this._$AH = w) : t !== this._$AH && t !== b && this.$(t) : void 0 !== t._$litType$ ? this.T(t) : void 0 !== t.nodeType ? this.S(t) : u(t) ? this.A(t) : this.$(t) } M(t) { var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : this._$AB; return this._$AA.parentNode.insertBefore(t, e) } S(t) { this._$AH !== t && (this._$AR(), this._$AH = this.M(t)) } $(t) { this._$AH !== w && r$1(this._$AH) ? this._$AA.nextSibling.data = t : this.S(l$2.createTextNode(t)), this._$AH = t } T(t) { var e, { values: r, _$litType$: i } = t, s = "number" == typeof i ? this._$AC(t) : (void 0 === i.el && (i.el = E.createElement(i.h, this.options)), i); if ((null === (e = this._$AH) || void 0 === e ? void 0 : e._$AD) === s) this._$AH.m(r); else { var a = new V(s, this), n = a.p(this.options); a.m(r), this.S(n), this._$AH = a } } _$AC(t) { var e = T.get(t.strings); return void 0 === e && T.set(t.strings, e = new E(t)), e } A(t) { d(this._$AH) || (this._$AH = [], this._$AR()); var e, r = this._$AH, i = 0; for (var s of t) i === r.length ? r.push(e = new N(this.M(h$1()), this.M(h$1()), this, this.options)) : e = r[i], e._$AI(s), i++; i < r.length && (this._$AR(e && e._$AB.nextSibling, i), r.length = i) } _$AR() { var t, e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : this._$AA.nextSibling, r = arguments.length > 1 ? arguments[1] : void 0; for (null === (t = this._$AP) || void 0 === t || t.call(this, !1, !0, r); e && e !== this._$AB;) { var i = e.nextSibling; e.remove(), e = i } } setConnected(t) { var e; void 0 === this._$AM && (this._$Cg = t, null === (e = this._$AP) || void 0 === e || e.call(this, t)) } } class S { constructor(t, e, r, i, s) { this.type = 1, this._$AH = w, this._$AN = void 0, this.element = t, this.name = e, this._$AM = i, this.options = s, r.length > 2 || "" !== r[0] || "" !== r[1] ? (this._$AH = Array(r.length - 1).fill(new String), this.strings = r) : this._$AH = w } get tagName() { return this.element.tagName } get _$AU() { return this._$AM._$AU } _$AI(t) { var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : this, r = arguments.length > 2 ? arguments[2] : void 0, i = arguments.length > 3 ? arguments[3] : void 0, s = this.strings, a = !1; if (void 0 === s) t = P(this, t, e, 0), (a = !r$1(t) || t !== this._$AH && t !== b) && (this._$AH = t); else { var n, o, h = t; for (t = s[0], n = 0; n < s.length - 1; n++)(o = P(this, h[r + n], e, n)) === b && (o = this._$AH[n]), a || (a = !r$1(o) || o !== this._$AH[n]), o === w ? t = w : t !== w && (t += (null != o ? o : "") + s[n + 1]), this._$AH[n] = o } a && !i && this.k(t) } k(t) { t === w ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, null != t ? t : "") } } class M extends S { constructor() { super(...arguments), this.type = 3 } k(t) { this.element[this.name] = t === w ? void 0 : t } } var k = i$2 ? i$2.emptyScript : ""; class H extends S { constructor() { super(...arguments), this.type = 4 } k(t) { t && t !== w ? this.element.setAttribute(this.name, k) : this.element.removeAttribute(this.name) } } class I extends S { constructor(t, e, r, i, s) { super(t, e, r, i, s), this.type = 5 } _$AI(t) { var e; if ((t = null !== (e = P(this, t, arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : this, 0)) && void 0 !== e ? e : w) !== b) { var r = this._$AH, i = t === w && r !== w || t.capture !== r.capture || t.once !== r.once || t.passive !== r.passive, s = t !== w && (r === w || i); i && this.element.removeEventListener(this.name, this, r), s && this.element.addEventListener(this.name, this, t), this._$AH = t } } handleEvent(t) { var e, r; "function" == typeof this._$AH ? this._$AH.call(null !== (r = null === (e = this.options) || void 0 === e ? void 0 : e.host) && void 0 !== r ? r : this.element, t) : this._$AH.handleEvent(t) } } class L { constructor(t, e, r) { this.element = t, this.type = 6, this._$AN = void 0, this._$AM = e, this.options = r } get _$AU() { return this._$AM._$AU } _$AI(t) { P(this, t) } } var R = { P: "$lit$", V: e$6, L: o$3, I: 1, N: C, R: V, D: u, j: P, H: N, O: S, F: H, B: I, W: M, Z: L }, z = window.litHtmlPolyfillSupport, l$1, o$2; null == z || z(E, N), (null !== (t$2 = globalThis.litHtmlVersions) && void 0 !== t$2 ? t$2 : globalThis.litHtmlVersions = []).push("2.1.2"); var r = a$1; class s extends a$1 { constructor() { super(...arguments), this.renderOptions = { host: this }, this._$Dt = void 0 } createRenderRoot() { var t, e, r = super.createRenderRoot(); return null !== (t = (e = this.renderOptions).renderBefore) && void 0 !== t || (e.renderBefore = r.firstChild), r } update(t) { var e = this.render(); this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Dt = x(e, this.renderRoot, this.renderOptions) } connectedCallback() { var t; super.connectedCallback(), null === (t = this._$Dt) || void 0 === t || t.setConnected(!0) } disconnectedCallback() { var t; super.disconnectedCallback(), null === (t = this._$Dt) || void 0 === t || t.setConnected(!1) } render() { return b } } s.finalized = !0, s._$litElement$ = !0, null === (l$1 = globalThis.litElementHydrateSupport) || void 0 === l$1 || l$1.call(globalThis, { LitElement: s }); var n$2 = globalThis.litElementPolyfillSupport; null == n$2 || n$2({ LitElement: s }); var h = { _$AK: (t, e, r) => { t._$AK(e, r) }, _$AL: t => t._$AL }; (null !== (o$2 = globalThis.litElementVersions) && void 0 !== o$2 ? o$2 : globalThis.litElementVersions = []).push("3.1.2"); + /** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ + var n$1 = t => e => "function" == typeof e ? ((t, e) => (window.customElements.define(t, e), e))(t, e) : ((t, e) => { var { kind: r, elements: i } = e; return { kind: r, elements: i, finisher(e) { window.customElements.define(t, e) } } })(t, e) +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */, i$1 = (t, e) => "method" === e.kind && e.descriptor && !("value" in e.descriptor) ? _objectSpread2(_objectSpread2({}, e), {}, { finisher(r) { r.createProperty(e.key, t) } }) : { kind: "field", key: Symbol(), placement: "own", descriptor: {}, originalKey: e.key, initializer() { "function" == typeof e.initializer && (this[e.key] = e.initializer.call(this)) }, finisher(r) { r.createProperty(e.key, t) } }; function e$5(t) { return (e, r) => void 0 !== r ? ((t, e, r) => { e.constructor.createProperty(r, t) })(t, e, r) : i$1(t, e) } +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */function t$1(t) { return e$5(_objectSpread2(_objectSpread2({}, t), {}, { state: !0 })) } +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */var e$4 = (t, e, r) => { Object.defineProperty(e, r, t) }, t = (t, e) => ({ kind: "method", placement: "prototype", key: e.key, descriptor: t }), o$1 = t => { var { finisher: e, descriptor: r } = t; return (t, i) => { var s; if (void 0 === i) { var a = null !== (s = t.originalKey) && void 0 !== s ? s : t.key, n = null != r ? { kind: "method", placement: "prototype", key: a, descriptor: r(t.key) } : _objectSpread2(_objectSpread2({}, t), {}, { key: a }); return null != e && (n.finisher = function (t) { e(t, a) }), n } var o = t.constructor; void 0 !== r && Object.defineProperty(t, i, r(i)), null == e || e(o, i) } }, n; +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */function e$3(t) { return o$1({ finisher: (e, r) => { Object.assign(e.prototype[r], t) } }) } +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */function i(t, e) { return o$1({ descriptor: r => { var i = { get() { var e, r; return null !== (r = null === (e = this.renderRoot) || void 0 === e ? void 0 : e.querySelector(t)) && void 0 !== r ? r : null }, enumerable: !0, configurable: !0 }; if (e) { var s = "symbol" == typeof r ? Symbol() : "__" + r; i.get = function () { var e, r; return void 0 === this[s] && (this[s] = null !== (r = null === (e = this.renderRoot) || void 0 === e ? void 0 : e.querySelector(t)) && void 0 !== r ? r : null), this[s] } } return i } }) } +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */function e$2(t) { return o$1({ descriptor: e => ({ get() { var e, r; return null !== (r = null === (e = this.renderRoot) || void 0 === e ? void 0 : e.querySelectorAll(t)) && void 0 !== r ? r : [] }, enumerable: !0, configurable: !0 }) }) } +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */function e$1(t) { return o$1({ descriptor: e => ({ get() { var e = this; return _asyncToGenerator((function* () { var r; return yield e.updateComplete, null === (r = e.renderRoot) || void 0 === r ? void 0 : r.querySelector(t) }))() }, enumerable: !0, configurable: !0 }) }) } +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */var e = null != (null === (n = window.HTMLSlotElement) || void 0 === n ? void 0 : n.prototype.assignedElements) ? (t, e) => t.assignedElements(e) : (t, e) => t.assignedNodes(e).filter((t => t.nodeType === Node.ELEMENT_NODE)); function l(t) { var { slot: r, selector: i } = null != t ? t : {}; return o$1({ descriptor: s => ({ get() { var s, a = "slot" + (r ? "[name=".concat(r, "]") : ":not([name])"), n = null === (s = this.renderRoot) || void 0 === s ? void 0 : s.querySelector(a), o = null != n ? e(n, t) : []; return i ? o.filter((t => t.matches(i))) : o }, enumerable: !0, configurable: !0 }) }) } +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */function o(t, e, r) { var i, s = t; return "object" == typeof t ? (s = t.slot, i = t) : i = { flatten: e }, r ? l({ slot: s, flatten: e, selector: r }) : o$1({ descriptor: t => ({ get() { var t, e, r = "slot" + (s ? "[name=".concat(s, "]") : ":not([name])"), a = null === (t = this.renderRoot) || void 0 === t ? void 0 : t.querySelector(r); return null !== (e = null == a ? void 0 : a.assignedNodes(i)) && void 0 !== e ? e : [] }, enumerable: !0, configurable: !0 }) }) } var commonjsGlobal = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {}; function getDefaultExportFromCjs(t) { return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t } function getDefaultExportFromNamespaceIfPresent(t) { return t && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t } function getDefaultExportFromNamespaceIfNotNamed(t) { return t && Object.prototype.hasOwnProperty.call(t, "default") && 1 === Object.keys(t).length ? t.default : t } function getAugmentedNamespace(t) { if (t.__esModule) return t; var e = Object.defineProperty({}, "__esModule", { value: !0 }); return Object.keys(t).forEach((function (r) { var i = Object.getOwnPropertyDescriptor(t, r); Object.defineProperty(e, r, i.get ? i : { enumerable: !0, get: function () { return t[r] } }) })), e } function commonjsRequire(t) { throw new Error('Could not dynamically require "' + t + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.') } var lottie$1 = { exports: {} }; (function (module) { var root, factory; "undefined" != typeof navigator && (root = window || {}, factory = function (window) { var svgNS = "http://www.w3.org/2000/svg", locationHref = "", initialDefaultFrame = -999999, _useWebWorker = !1, subframeEnabled = !0, idPrefix = "", expressionsPlugin, isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent), cachedColors = {}, bmRnd, bmPow = Math.pow, bmSqrt = Math.sqrt, bmFloor = Math.floor, bmMax = Math.max, bmMin = Math.min, BMMath = {}; function ProjectInterface() { return {} } !function () { var t, e = ["abs", "acos", "acosh", "asin", "asinh", "atan", "atanh", "atan2", "ceil", "cbrt", "expm1", "clz32", "cos", "cosh", "exp", "floor", "fround", "hypot", "imul", "log", "log1p", "log2", "log10", "max", "min", "pow", "random", "round", "sign", "sin", "sinh", "sqrt", "tan", "tanh", "trunc", "E", "LN10", "LN2", "LOG10E", "LOG2E", "PI", "SQRT1_2", "SQRT2"], r = e.length; for (t = 0; t < r; t += 1)BMMath[e[t]] = Math[e[t]] }(), BMMath.random = Math.random, BMMath.abs = function (t) { if ("object" == typeof t && t.length) { var e, r = createSizedArray(t.length), i = t.length; for (e = 0; e < i; e += 1)r[e] = Math.abs(t[e]); return r } return Math.abs(t) }; var defaultCurveSegments = 150, degToRads = Math.PI / 180, roundCorner = .5519; function roundValues(t) { bmRnd = t ? Math.round : function (t) { return t } } function styleDiv(t) { t.style.position = "absolute", t.style.top = 0, t.style.left = 0, t.style.display = "block", t.style.transformOrigin = "0 0", t.style.webkitTransformOrigin = "0 0", t.style.backfaceVisibility = "visible", t.style.webkitBackfaceVisibility = "visible", t.style.transformStyle = "preserve-3d", t.style.webkitTransformStyle = "preserve-3d", t.style.mozTransformStyle = "preserve-3d" } function BMEnterFrameEvent(t, e, r, i) { this.type = t, this.currentTime = e, this.totalTime = r, this.direction = i < 0 ? -1 : 1 } function BMCompleteEvent(t, e) { this.type = t, this.direction = e < 0 ? -1 : 1 } function BMCompleteLoopEvent(t, e, r, i) { this.type = t, this.currentLoop = r, this.totalLoops = e, this.direction = i < 0 ? -1 : 1 } function BMSegmentStartEvent(t, e, r) { this.type = t, this.firstFrame = e, this.totalFrames = r } function BMDestroyEvent(t, e) { this.type = t, this.target = e } function BMRenderFrameErrorEvent(t, e) { this.type = "renderFrameError", this.nativeError = t, this.currentTime = e } function BMConfigErrorEvent(t) { this.type = "configError", this.nativeError = t } function BMAnimationConfigErrorEvent(t, e) { this.type = t, this.nativeError = e } roundValues(!1); var createElementID = (_count = 0, function () { return idPrefix + "__lottie_element_" + (_count += 1) }), _count; function HSVtoRGB(t, e, r) { var i, s, a, n, o, h, l, p; switch (h = r * (1 - e), l = r * (1 - (o = 6 * t - (n = Math.floor(6 * t))) * e), p = r * (1 - (1 - o) * e), n % 6) { case 0: i = r, s = p, a = h; break; case 1: i = l, s = r, a = h; break; case 2: i = h, s = r, a = p; break; case 3: i = h, s = l, a = r; break; case 4: i = p, s = h, a = r; break; case 5: i = r, s = h, a = l }return [i, s, a] } function RGBtoHSV(t, e, r) { var i, s = Math.max(t, e, r), a = Math.min(t, e, r), n = s - a, o = 0 === s ? 0 : n / s, h = s / 255; switch (s) { case a: i = 0; break; case t: i = e - r + n * (e < r ? 6 : 0), i /= 6 * n; break; case e: i = r - t + 2 * n, i /= 6 * n; break; case r: i = t - e + 4 * n, i /= 6 * n }return [i, o, h] } function addSaturationToRGB(t, e) { var r = RGBtoHSV(255 * t[0], 255 * t[1], 255 * t[2]); return r[1] += e, r[1] > 1 ? r[1] = 1 : r[1] <= 0 && (r[1] = 0), HSVtoRGB(r[0], r[1], r[2]) } function addBrightnessToRGB(t, e) { var r = RGBtoHSV(255 * t[0], 255 * t[1], 255 * t[2]); return r[2] += e, r[2] > 1 ? r[2] = 1 : r[2] < 0 && (r[2] = 0), HSVtoRGB(r[0], r[1], r[2]) } function addHueToRGB(t, e) { var r = RGBtoHSV(255 * t[0], 255 * t[1], 255 * t[2]); return r[0] += e / 360, r[0] > 1 ? r[0] -= 1 : r[0] < 0 && (r[0] += 1), HSVtoRGB(r[0], r[1], r[2]) } var rgbToHex = function () { var t, e, r = []; for (t = 0; t < 256; t += 1)e = t.toString(16), r[t] = 1 === e.length ? "0" + e : e; return function (t, e, i) { return t < 0 && (t = 0), e < 0 && (e = 0), i < 0 && (i = 0), "#" + r[t] + r[e] + r[i] } }(); function BaseEvent() { } BaseEvent.prototype = { triggerEvent: function (t, e) { if (this._cbs[t]) for (var r = this._cbs[t], i = 0; i < r.length; i += 1)r[i](e) }, addEventListener: function (t, e) { return this._cbs[t] || (this._cbs[t] = []), this._cbs[t].push(e), function () { this.removeEventListener(t, e) }.bind(this) }, removeEventListener: function (t, e) { if (e) { if (this._cbs[t]) { for (var r = 0, i = this._cbs[t].length; r < i;)this._cbs[t][r] === e && (this._cbs[t].splice(r, 1), r -= 1, i -= 1), r += 1; this._cbs[t].length || (this._cbs[t] = null) } } else this._cbs[t] = null } }; var createTypedArray = function () { function t(t, e) { var r, i = 0, s = []; switch (t) { case "int16": case "uint8c": r = 1; break; default: r = 1.1 }for (i = 0; i < e; i += 1)s.push(r); return s } return "function" == typeof Uint8ClampedArray && "function" == typeof Float32Array ? function (e, r) { return "float32" === e ? new Float32Array(r) : "int16" === e ? new Int16Array(r) : "uint8c" === e ? new Uint8ClampedArray(r) : t(e, r) } : t }(); function createSizedArray(t) { return Array.apply(null, { length: t }) } function createNS(t) { return document.createElementNS(svgNS, t) } function createTag(t) { return document.createElement(t) } function DynamicPropertyContainer() { } DynamicPropertyContainer.prototype = { addDynamicProperty: function (t) { -1 === this.dynamicProperties.indexOf(t) && (this.dynamicProperties.push(t), this.container.addDynamicProperty(this), this._isAnimated = !0) }, iterateDynamicProperties: function () { var t; this._mdf = !1; var e = this.dynamicProperties.length; for (t = 0; t < e; t += 1)this.dynamicProperties[t].getValue(), this.dynamicProperties[t]._mdf && (this._mdf = !0) }, initDynamicPropertyContainer: function (t) { this.container = t, this.dynamicProperties = [], this._mdf = !1, this._isAnimated = !1 } }; var getBlendMode = (blendModeEnums = { 0: "source-over", 1: "multiply", 2: "screen", 3: "overlay", 4: "darken", 5: "lighten", 6: "color-dodge", 7: "color-burn", 8: "hard-light", 9: "soft-light", 10: "difference", 11: "exclusion", 12: "hue", 13: "saturation", 14: "color", 15: "luminosity" }, function (t) { return blendModeEnums[t] || "" }), blendModeEnums, lineCapEnum = { 1: "butt", 2: "round", 3: "square" }, lineJoinEnum = { 1: "miter", 2: "round", 3: "bevel" }, Matrix = function () { var t = Math.cos, e = Math.sin, r = Math.tan, i = Math.round; function s() { return this.props[0] = 1, this.props[1] = 0, this.props[2] = 0, this.props[3] = 0, this.props[4] = 0, this.props[5] = 1, this.props[6] = 0, this.props[7] = 0, this.props[8] = 0, this.props[9] = 0, this.props[10] = 1, this.props[11] = 0, this.props[12] = 0, this.props[13] = 0, this.props[14] = 0, this.props[15] = 1, this } function a(r) { if (0 === r) return this; var i = t(r), s = e(r); return this._t(i, -s, 0, 0, s, i, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) } function n(r) { if (0 === r) return this; var i = t(r), s = e(r); return this._t(1, 0, 0, 0, 0, i, -s, 0, 0, s, i, 0, 0, 0, 0, 1) } function o(r) { if (0 === r) return this; var i = t(r), s = e(r); return this._t(i, 0, s, 0, 0, 1, 0, 0, -s, 0, i, 0, 0, 0, 0, 1) } function h(r) { if (0 === r) return this; var i = t(r), s = e(r); return this._t(i, -s, 0, 0, s, i, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) } function l(t, e) { return this._t(1, e, t, 1, 0, 0) } function p(t, e) { return this.shear(r(t), r(e)) } function c(i, s) { var a = t(s), n = e(s); return this._t(a, n, 0, 0, -n, a, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)._t(1, 0, 0, 0, r(i), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)._t(a, -n, 0, 0, n, a, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) } function f(t, e, r) { return r || 0 === r || (r = 1), 1 === t && 1 === e && 1 === r ? this : this._t(t, 0, 0, 0, 0, e, 0, 0, 0, 0, r, 0, 0, 0, 0, 1) } function d(t, e, r, i, s, a, n, o, h, l, p, c, f, d, m, u) { return this.props[0] = t, this.props[1] = e, this.props[2] = r, this.props[3] = i, this.props[4] = s, this.props[5] = a, this.props[6] = n, this.props[7] = o, this.props[8] = h, this.props[9] = l, this.props[10] = p, this.props[11] = c, this.props[12] = f, this.props[13] = d, this.props[14] = m, this.props[15] = u, this } function m(t, e, r) { return r = r || 0, 0 !== t || 0 !== e || 0 !== r ? this._t(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, t, e, r, 1) : this } function u(t, e, r, i, s, a, n, o, h, l, p, c, f, d, m, u) { var y = this.props; if (1 === t && 0 === e && 0 === r && 0 === i && 0 === s && 1 === a && 0 === n && 0 === o && 0 === h && 0 === l && 1 === p && 0 === c) return y[12] = y[12] * t + y[15] * f, y[13] = y[13] * a + y[15] * d, y[14] = y[14] * p + y[15] * m, y[15] *= u, this._identityCalculated = !1, this; var g = y[0], v = y[1], b = y[2], P = y[3], _ = y[4], E = y[5], S = y[6], x = y[7], A = y[8], w = y[9], C = y[10], k = y[11], T = y[12], D = y[13], M = y[14], F = y[15]; return y[0] = g * t + v * s + b * h + P * f, y[1] = g * e + v * a + b * l + P * d, y[2] = g * r + v * n + b * p + P * m, y[3] = g * i + v * o + b * c + P * u, y[4] = _ * t + E * s + S * h + x * f, y[5] = _ * e + E * a + S * l + x * d, y[6] = _ * r + E * n + S * p + x * m, y[7] = _ * i + E * o + S * c + x * u, y[8] = A * t + w * s + C * h + k * f, y[9] = A * e + w * a + C * l + k * d, y[10] = A * r + w * n + C * p + k * m, y[11] = A * i + w * o + C * c + k * u, y[12] = T * t + D * s + M * h + F * f, y[13] = T * e + D * a + M * l + F * d, y[14] = T * r + D * n + M * p + F * m, y[15] = T * i + D * o + M * c + F * u, this._identityCalculated = !1, this } function y() { return this._identityCalculated || (this._identity = !(1 !== this.props[0] || 0 !== this.props[1] || 0 !== this.props[2] || 0 !== this.props[3] || 0 !== this.props[4] || 1 !== this.props[5] || 0 !== this.props[6] || 0 !== this.props[7] || 0 !== this.props[8] || 0 !== this.props[9] || 1 !== this.props[10] || 0 !== this.props[11] || 0 !== this.props[12] || 0 !== this.props[13] || 0 !== this.props[14] || 1 !== this.props[15]), this._identityCalculated = !0), this._identity } function g(t) { for (var e = 0; e < 16;) { if (t.props[e] !== this.props[e]) return !1; e += 1 } return !0 } function v(t) { var e; for (e = 0; e < 16; e += 1)t.props[e] = this.props[e]; return t } function b(t) { var e; for (e = 0; e < 16; e += 1)this.props[e] = t[e] } function P(t, e, r) { return { x: t * this.props[0] + e * this.props[4] + r * this.props[8] + this.props[12], y: t * this.props[1] + e * this.props[5] + r * this.props[9] + this.props[13], z: t * this.props[2] + e * this.props[6] + r * this.props[10] + this.props[14] } } function _(t, e, r) { return t * this.props[0] + e * this.props[4] + r * this.props[8] + this.props[12] } function E(t, e, r) { return t * this.props[1] + e * this.props[5] + r * this.props[9] + this.props[13] } function S(t, e, r) { return t * this.props[2] + e * this.props[6] + r * this.props[10] + this.props[14] } function x() { var t = this.props[0] * this.props[5] - this.props[1] * this.props[4], e = this.props[5] / t, r = -this.props[1] / t, i = -this.props[4] / t, s = this.props[0] / t, a = (this.props[4] * this.props[13] - this.props[5] * this.props[12]) / t, n = -(this.props[0] * this.props[13] - this.props[1] * this.props[12]) / t, o = new Matrix; return o.props[0] = e, o.props[1] = r, o.props[4] = i, o.props[5] = s, o.props[12] = a, o.props[13] = n, o } function A(t) { return this.getInverseMatrix().applyToPointArray(t[0], t[1], t[2] || 0) } function w(t) { var e, r = t.length, i = []; for (e = 0; e < r; e += 1)i[e] = A(t[e]); return i } function C(t, e, r) { var i = createTypedArray("float32", 6); if (this.isIdentity()) i[0] = t[0], i[1] = t[1], i[2] = e[0], i[3] = e[1], i[4] = r[0], i[5] = r[1]; else { var s = this.props[0], a = this.props[1], n = this.props[4], o = this.props[5], h = this.props[12], l = this.props[13]; i[0] = t[0] * s + t[1] * n + h, i[1] = t[0] * a + t[1] * o + l, i[2] = e[0] * s + e[1] * n + h, i[3] = e[0] * a + e[1] * o + l, i[4] = r[0] * s + r[1] * n + h, i[5] = r[0] * a + r[1] * o + l } return i } function k(t, e, r) { return this.isIdentity() ? [t, e, r] : [t * this.props[0] + e * this.props[4] + r * this.props[8] + this.props[12], t * this.props[1] + e * this.props[5] + r * this.props[9] + this.props[13], t * this.props[2] + e * this.props[6] + r * this.props[10] + this.props[14]] } function T(t, e) { if (this.isIdentity()) return t + "," + e; var r = this.props; return Math.round(100 * (t * r[0] + e * r[4] + r[12])) / 100 + "," + Math.round(100 * (t * r[1] + e * r[5] + r[13])) / 100 } function D() { for (var t = 0, e = this.props, r = "matrix3d("; t < 16;)r += i(1e4 * e[t]) / 1e4, r += 15 === t ? ")" : ",", t += 1; return r } function M(t) { return t < 1e-6 && t > 0 || t > -1e-6 && t < 0 ? i(1e4 * t) / 1e4 : t } function F() { var t = this.props; return "matrix(" + M(t[0]) + "," + M(t[1]) + "," + M(t[4]) + "," + M(t[5]) + "," + M(t[12]) + "," + M(t[13]) + ")" } return function () { this.reset = s, this.rotate = a, this.rotateX = n, this.rotateY = o, this.rotateZ = h, this.skew = p, this.skewFromAxis = c, this.shear = l, this.scale = f, this.setTransform = d, this.translate = m, this.transform = u, this.applyToPoint = P, this.applyToX = _, this.applyToY = E, this.applyToZ = S, this.applyToPointArray = k, this.applyToTriplePoints = C, this.applyToPointStringified = T, this.toCSS = D, this.to2dCSS = F, this.clone = v, this.cloneFromProps = b, this.equals = g, this.inversePoints = w, this.inversePoint = A, this.getInverseMatrix = x, this._t = this.transform, this.isIdentity = y, this._identity = !0, this._identityCalculated = !1, this.props = createTypedArray("float32", 16), this.reset() } }(); !function (t, e) { var r = this, i = 256, s = e.pow(i, 6), a = e.pow(2, 52), n = 2 * a, o = 255; function h(t) { var e, r = t.length, s = this, a = 0, n = s.i = s.j = 0, h = s.S = []; for (r || (t = [r++]); a < i;)h[a] = a++; for (a = 0; a < i; a++)h[a] = h[n = o & n + t[a % r] + (e = h[a])], h[n] = e; s.g = function (t) { for (var e, r = 0, a = s.i, n = s.j, h = s.S; t--;)e = h[a = o & a + 1], r = r * i + h[o & (h[a] = h[n = o & n + e]) + (h[n] = e)]; return s.i = a, s.j = n, r } } function l(t, e) { return e.i = t.i, e.j = t.j, e.S = t.S.slice(), e } function p(t, e) { var r, i = [], s = typeof t; if (e && "object" == s) for (r in t) try { i.push(p(t[r], e - 1)) } catch (t) { } return i.length ? i : "string" == s ? t : t + "\0" } function c(t, e) { for (var r, i = t + "", s = 0; s < i.length;)e[o & s] = o & (r ^= 19 * e[o & s]) + i.charCodeAt(s++); return f(e) } function f(t) { return String.fromCharCode.apply(0, t) } e.seedrandom = function (o, d, m) { var u = [], y = c(p((d = !0 === d ? { entropy: !0 } : d || {}).entropy ? [o, f(t)] : null === o ? function () { try { var e = new Uint8Array(i); return (r.crypto || r.msCrypto).getRandomValues(e), f(e) } catch (e) { var s = r.navigator, a = s && s.plugins; return [+new Date, r, a, r.screen, f(t)] } }() : o, 3), u), g = new h(u), v = function () { for (var t = g.g(6), e = s, r = 0; t < a;)t = (t + r) * i, e *= i, r = g.g(1); for (; t >= n;)t /= 2, e /= 2, r >>>= 1; return (t + r) / e }; return v.int32 = function () { return 0 | g.g(4) }, v.quick = function () { return g.g(4) / 4294967296 }, v.double = v, c(f(g.S), t), (d.pass || m || function (t, r, i, s) { return s && (s.S && l(s, g), t.state = function () { return l(g, {}) }), i ? (e.random = t, r) : t })(v, y, "global" in d ? d.global : this == e, d.state) }, c(e.random(), t) }([], BMMath); var BezierFactory = function () { var t = { getBezierEasing: function (t, r, i, s, a) { var n = a || ("bez_" + t + "_" + r + "_" + i + "_" + s).replace(/\./g, "p"); if (e[n]) return e[n]; var o = new l([t, r, i, s]); return e[n] = o, o } }, e = {}, r = .1, i = "function" == typeof Float32Array; function s(t, e) { return 1 - 3 * e + 3 * t } function a(t, e) { return 3 * e - 6 * t } function n(t) { return 3 * t } function o(t, e, r) { return ((s(e, r) * t + a(e, r)) * t + n(e)) * t } function h(t, e, r) { return 3 * s(e, r) * t * t + 2 * a(e, r) * t + n(e) } function l(t) { this._p = t, this._mSampleValues = i ? new Float32Array(11) : new Array(11), this._precomputed = !1, this.get = this.get.bind(this) } return l.prototype = { get: function (t) { var e = this._p[0], r = this._p[1], i = this._p[2], s = this._p[3]; return this._precomputed || this._precompute(), e === r && i === s ? t : 0 === t ? 0 : 1 === t ? 1 : o(this._getTForX(t), r, s) }, _precompute: function () { var t = this._p[0], e = this._p[1], r = this._p[2], i = this._p[3]; this._precomputed = !0, t === e && r === i || this._calcSampleValues() }, _calcSampleValues: function () { for (var t = this._p[0], e = this._p[2], i = 0; i < 11; ++i)this._mSampleValues[i] = o(i * r, t, e) }, _getTForX: function (t) { for (var e = this._p[0], i = this._p[2], s = this._mSampleValues, a = 0, n = 1; 10 !== n && s[n] <= t; ++n)a += r; var l = a + (t - s[--n]) / (s[n + 1] - s[n]) * r, p = h(l, e, i); return p >= .001 ? function (t, e, r, i) { for (var s = 0; s < 4; ++s) { var a = h(e, r, i); if (0 === a) return e; e -= (o(e, r, i) - t) / a } return e }(t, l, e, i) : 0 === p ? l : function (t, e, r, i, s) { var a, n, h = 0; do { (a = o(n = e + (r - e) / 2, i, s) - t) > 0 ? r = n : e = n } while (Math.abs(a) > 1e-7 && ++h < 10); return n }(t, a, a + r, e, i) } }, t }(); function extendPrototype(t, e) { var r, i, s = t.length; for (r = 0; r < s; r += 1)for (var a in i = t[r].prototype) Object.prototype.hasOwnProperty.call(i, a) && (e.prototype[a] = i[a]) } function getDescriptor(t, e) { return Object.getOwnPropertyDescriptor(t, e) } function createProxyFunction(t) { function e() { } return e.prototype = t, e } function bezFunction() { var t = Math; function e(t, e, r, i, s, a) { var n = t * i + e * s + r * a - s * i - a * t - r * e; return n > -.001 && n < .001 } var r = function (t, e, r, i) { var s, a, n, o, h, l, p = defaultCurveSegments, c = 0, f = [], d = [], m = bezierLengthPool.newElement(); for (n = r.length, s = 0; s < p; s += 1) { for (h = s / (p - 1), l = 0, a = 0; a < n; a += 1)o = bmPow(1 - h, 3) * t[a] + 3 * bmPow(1 - h, 2) * h * r[a] + 3 * (1 - h) * bmPow(h, 2) * i[a] + bmPow(h, 3) * e[a], f[a] = o, null !== d[a] && (l += bmPow(f[a] - d[a], 2)), d[a] = f[a]; l && (c += l = bmSqrt(l)), m.percents[s] = h, m.lengths[s] = c } return m.addedLength = c, m }; function i(t) { this.segmentLength = 0, this.points = new Array(t) } function s(t, e) { this.partialLength = t, this.point = e } var a, n = (a = {}, function (t, r, n, o) { var h = (t[0] + "_" + t[1] + "_" + r[0] + "_" + r[1] + "_" + n[0] + "_" + n[1] + "_" + o[0] + "_" + o[1]).replace(/\./g, "p"); if (!a[h]) { var l, p, c, f, d, m, u, y = defaultCurveSegments, g = 0, v = null; 2 === t.length && (t[0] !== r[0] || t[1] !== r[1]) && e(t[0], t[1], r[0], r[1], t[0] + n[0], t[1] + n[1]) && e(t[0], t[1], r[0], r[1], r[0] + o[0], r[1] + o[1]) && (y = 2); var b = new i(y); for (c = n.length, l = 0; l < y; l += 1) { for (u = createSizedArray(c), d = l / (y - 1), m = 0, p = 0; p < c; p += 1)f = bmPow(1 - d, 3) * t[p] + 3 * bmPow(1 - d, 2) * d * (t[p] + n[p]) + 3 * (1 - d) * bmPow(d, 2) * (r[p] + o[p]) + bmPow(d, 3) * r[p], u[p] = f, null !== v && (m += bmPow(u[p] - v[p], 2)); g += m = bmSqrt(m), b.points[l] = new s(m, u), v = u } b.segmentLength = g, a[h] = b } return a[h] }); function o(t, e) { var r = e.percents, i = e.lengths, s = r.length, a = bmFloor((s - 1) * t), n = t * e.addedLength, o = 0; if (a === s - 1 || 0 === a || n === i[a]) return r[a]; for (var h = i[a] > n ? -1 : 1, l = !0; l;)if (i[a] <= n && i[a + 1] > n ? (o = (n - i[a]) / (i[a + 1] - i[a]), l = !1) : a += h, a < 0 || a >= s - 1) { if (a === s - 1) return r[a]; l = !1 } return r[a] + (r[a + 1] - r[a]) * o } var h = createTypedArray("float32", 8); return { getSegmentsLength: function (t) { var e, i = segmentsLengthPool.newElement(), s = t.c, a = t.v, n = t.o, o = t.i, h = t._length, l = i.lengths, p = 0; for (e = 0; e < h - 1; e += 1)l[e] = r(a[e], a[e + 1], n[e], o[e + 1]), p += l[e].addedLength; return s && h && (l[e] = r(a[e], a[0], n[e], o[0]), p += l[e].addedLength), i.totalLength = p, i }, getNewSegment: function (e, r, i, s, a, n, l) { a < 0 ? a = 0 : a > 1 && (a = 1); var p, c = o(a, l), f = o(n = n > 1 ? 1 : n, l), d = e.length, m = 1 - c, u = 1 - f, y = m * m * m, g = c * m * m * 3, v = c * c * m * 3, b = c * c * c, P = m * m * u, _ = c * m * u + m * c * u + m * m * f, E = c * c * u + m * c * f + c * m * f, S = c * c * f, x = m * u * u, A = c * u * u + m * f * u + m * u * f, w = c * f * u + m * f * f + c * u * f, C = c * f * f, k = u * u * u, T = f * u * u + u * f * u + u * u * f, D = f * f * u + u * f * f + f * u * f, M = f * f * f; for (p = 0; p < d; p += 1)h[4 * p] = t.round(1e3 * (y * e[p] + g * i[p] + v * s[p] + b * r[p])) / 1e3, h[4 * p + 1] = t.round(1e3 * (P * e[p] + _ * i[p] + E * s[p] + S * r[p])) / 1e3, h[4 * p + 2] = t.round(1e3 * (x * e[p] + A * i[p] + w * s[p] + C * r[p])) / 1e3, h[4 * p + 3] = t.round(1e3 * (k * e[p] + T * i[p] + D * s[p] + M * r[p])) / 1e3; return h }, getPointInSegment: function (e, r, i, s, a, n) { var h = o(a, n), l = 1 - h; return [t.round(1e3 * (l * l * l * e[0] + (h * l * l + l * h * l + l * l * h) * i[0] + (h * h * l + l * h * h + h * l * h) * s[0] + h * h * h * r[0])) / 1e3, t.round(1e3 * (l * l * l * e[1] + (h * l * l + l * h * l + l * l * h) * i[1] + (h * h * l + l * h * h + h * l * h) * s[1] + h * h * h * r[1])) / 1e3] }, buildBezierData: n, pointOnLine2D: e, pointOnLine3D: function (r, i, s, a, n, o, h, l, p) { if (0 === s && 0 === o && 0 === p) return e(r, i, a, n, h, l); var c, f = t.sqrt(t.pow(a - r, 2) + t.pow(n - i, 2) + t.pow(o - s, 2)), d = t.sqrt(t.pow(h - r, 2) + t.pow(l - i, 2) + t.pow(p - s, 2)), m = t.sqrt(t.pow(h - a, 2) + t.pow(l - n, 2) + t.pow(p - o, 2)); return (c = f > d ? f > m ? f - d - m : m - d - f : m > d ? m - d - f : d - f - m) > -1e-4 && c < 1e-4 } } } !function () { for (var t = 0, e = ["ms", "moz", "webkit", "o"], r = 0; r < e.length && !window.requestAnimationFrame; ++r)window.requestAnimationFrame = window[e[r] + "RequestAnimationFrame"], window.cancelAnimationFrame = window[e[r] + "CancelAnimationFrame"] || window[e[r] + "CancelRequestAnimationFrame"]; window.requestAnimationFrame || (window.requestAnimationFrame = function (e) { var r = (new Date).getTime(), i = Math.max(0, 16 - (r - t)), s = setTimeout((function () { e(r + i) }), i); return t = r + i, s }), window.cancelAnimationFrame || (window.cancelAnimationFrame = function (t) { clearTimeout(t) }) }(); var bez = bezFunction(), dataManager = function () { var t, e, r = 1, i = [], s = { onmessage: function () { }, postMessage: function (e) { t({ data: e }) } }, _workerSelf = { postMessage: function (t) { s.onmessage({ data: t }) } }; function a() { e || (e = function (e) { if (window.Worker && window.Blob && _useWebWorker) { var r = new Blob(["var _workerSelf = self; self.onmessage = ", e.toString()], { type: "text/javascript" }), i = URL.createObjectURL(r); return new Worker(i) } return t = e, s }((function (t) { if (_workerSelf.dataManager || (_workerSelf.dataManager = function () { function t(s, a) { var n, o, h, l, p, f, d = s.length; for (o = 0; o < d; o += 1)if ("ks" in (n = s[o]) && !n.completed) { if (n.completed = !0, n.tt && (s[o - 1].td = n.tt), n.hasMask) { var m = n.masksProperties; for (l = m.length, h = 0; h < l; h += 1)if (m[h].pt.k.i) i(m[h].pt.k); else for (f = m[h].pt.k.length, p = 0; p < f; p += 1)m[h].pt.k[p].s && i(m[h].pt.k[p].s[0]), m[h].pt.k[p].e && i(m[h].pt.k[p].e[0]) } 0 === n.ty ? (n.layers = e(n.refId, a), t(n.layers, a)) : 4 === n.ty ? r(n.shapes) : 5 === n.ty && c(n) } } function e(t, e) { for (var r = 0, i = e.length; r < i;) { if (e[r].id === t) return e[r].layers.__used ? JSON.parse(JSON.stringify(e[r].layers)) : (e[r].layers.__used = !0, e[r].layers); r += 1 } return null } function r(t) { var e, s, a; for (e = t.length - 1; e >= 0; e -= 1)if ("sh" === t[e].ty) if (t[e].ks.k.i) i(t[e].ks.k); else for (a = t[e].ks.k.length, s = 0; s < a; s += 1)t[e].ks.k[s].s && i(t[e].ks.k[s].s[0]), t[e].ks.k[s].e && i(t[e].ks.k[s].e[0]); else "gr" === t[e].ty && r(t[e].it) } function i(t) { var e, r = t.i.length; for (e = 0; e < r; e += 1)t.i[e][0] += t.v[e][0], t.i[e][1] += t.v[e][1], t.o[e][0] += t.v[e][0], t.o[e][1] += t.v[e][1] } function s(t, e) { var r = e ? e.split(".") : [100, 100, 100]; return t[0] > r[0] || !(r[0] > t[0]) && (t[1] > r[1] || !(r[1] > t[1]) && (t[2] > r[2] || !(r[2] > t[2]) && null)) } var a, n = function () { var t = [4, 4, 14]; function e(t) { var e, r, i, s = t.length; for (e = 0; e < s; e += 1)5 === t[e].ty && (i = void 0, i = (r = t[e]).t.d, r.t.d = { k: [{ s: i, t: 0 }] }) } return function (r) { if (s(t, r.v) && (e(r.layers), r.assets)) { var i, a = r.assets.length; for (i = 0; i < a; i += 1)r.assets[i].layers && e(r.assets[i].layers) } } }(), o = (a = [4, 7, 99], function (t) { if (t.chars && !s(a, t.v)) { var e, r, n, o, h, l = t.chars.length; for (e = 0; e < l; e += 1)if (t.chars[e].data && t.chars[e].data.shapes) for (n = (h = t.chars[e].data.shapes[0].it).length, r = 0; r < n; r += 1)(o = h[r].ks.k).__converted || (i(h[r].ks.k), o.__converted = !0) } }), h = function () { var t = [5, 7, 15]; function e(t) { var e, r, i = t.length; for (e = 0; e < i; e += 1)5 === t[e].ty && (r = void 0, "number" == typeof (r = t[e].t.p).a && (r.a = { a: 0, k: r.a }), "number" == typeof r.p && (r.p = { a: 0, k: r.p }), "number" == typeof r.r && (r.r = { a: 0, k: r.r })) } return function (r) { if (s(t, r.v) && (e(r.layers), r.assets)) { var i, a = r.assets.length; for (i = 0; i < a; i += 1)r.assets[i].layers && e(r.assets[i].layers) } } }(), l = function () { var t = [4, 1, 9]; function e(t) { var r, i, s, a = t.length; for (r = 0; r < a; r += 1)if ("gr" === t[r].ty) e(t[r].it); else if ("fl" === t[r].ty || "st" === t[r].ty) if (t[r].c.k && t[r].c.k[0].i) for (s = t[r].c.k.length, i = 0; i < s; i += 1)t[r].c.k[i].s && (t[r].c.k[i].s[0] /= 255, t[r].c.k[i].s[1] /= 255, t[r].c.k[i].s[2] /= 255, t[r].c.k[i].s[3] /= 255), t[r].c.k[i].e && (t[r].c.k[i].e[0] /= 255, t[r].c.k[i].e[1] /= 255, t[r].c.k[i].e[2] /= 255, t[r].c.k[i].e[3] /= 255); else t[r].c.k[0] /= 255, t[r].c.k[1] /= 255, t[r].c.k[2] /= 255, t[r].c.k[3] /= 255 } function r(t) { var r, i = t.length; for (r = 0; r < i; r += 1)4 === t[r].ty && e(t[r].shapes) } return function (e) { if (s(t, e.v) && (r(e.layers), e.assets)) { var i, a = e.assets.length; for (i = 0; i < a; i += 1)e.assets[i].layers && r(e.assets[i].layers) } } }(), p = function () { var t = [4, 4, 18]; function e(t) { var r, i, s; for (r = t.length - 1; r >= 0; r -= 1)if ("sh" === t[r].ty) if (t[r].ks.k.i) t[r].ks.k.c = t[r].closed; else for (s = t[r].ks.k.length, i = 0; i < s; i += 1)t[r].ks.k[i].s && (t[r].ks.k[i].s[0].c = t[r].closed), t[r].ks.k[i].e && (t[r].ks.k[i].e[0].c = t[r].closed); else "gr" === t[r].ty && e(t[r].it) } function r(t) { var r, i, s, a, n, o, h = t.length; for (i = 0; i < h; i += 1) { if ((r = t[i]).hasMask) { var l = r.masksProperties; for (a = l.length, s = 0; s < a; s += 1)if (l[s].pt.k.i) l[s].pt.k.c = l[s].cl; else for (o = l[s].pt.k.length, n = 0; n < o; n += 1)l[s].pt.k[n].s && (l[s].pt.k[n].s[0].c = l[s].cl), l[s].pt.k[n].e && (l[s].pt.k[n].e[0].c = l[s].cl) } 4 === r.ty && e(r.shapes) } } return function (e) { if (s(t, e.v) && (r(e.layers), e.assets)) { var i, a = e.assets.length; for (i = 0; i < a; i += 1)e.assets[i].layers && r(e.assets[i].layers) } } }(); function c(t) { 0 !== t.t.a.length || "m" in t.t.p || (t.singleShape = !0) } var f = { completeData: function (e) { e.__complete || (l(e), n(e), o(e), h(e), p(e), t(e.layers, e.assets), e.__complete = !0) } }; return f.checkColors = l, f.checkChars = o, f.checkPathProperties = h, f.checkShapes = p, f.completeLayers = t, f }()), _workerSelf.assetLoader || (_workerSelf.assetLoader = function () { function t(t) { var e = t.getResponseHeader("content-type"); return e && "json" === t.responseType && -1 !== e.indexOf("json") || t.response && "object" == typeof t.response ? t.response : t.response && "string" == typeof t.response ? JSON.parse(t.response) : t.responseText ? JSON.parse(t.responseText) : null } return { load: function (e, r, i, s) { var a, n = new XMLHttpRequest; try { n.responseType = "json" } catch (t) { } n.onreadystatechange = function () { if (4 === n.readyState) if (200 === n.status) a = t(n), i(a); else try { a = t(n), i(a) } catch (t) { s && s(t) } }; try { n.open("GET", e, !0) } catch (t) { n.open("GET", r + "/" + e, !0) } n.send() } } }()), "loadAnimation" === t.data.type) _workerSelf.assetLoader.load(t.data.path, t.data.fullPath, (function (e) { _workerSelf.dataManager.completeData(e), _workerSelf.postMessage({ id: t.data.id, payload: e, status: "success" }) }), (function () { _workerSelf.postMessage({ id: t.data.id, status: "error" }) })); else if ("complete" === t.data.type) { var e = t.data.animation; _workerSelf.dataManager.completeData(e), _workerSelf.postMessage({ id: t.data.id, payload: e, status: "success" }) } else "loadData" === t.data.type && _workerSelf.assetLoader.load(t.data.path, t.data.fullPath, (function (e) { _workerSelf.postMessage({ id: t.data.id, payload: e, status: "success" }) }), (function () { _workerSelf.postMessage({ id: t.data.id, status: "error" }) })) })), e.onmessage = function (t) { var e = t.data, r = e.id, s = i[r]; i[r] = null, "success" === e.status ? s.onComplete(e.payload) : s.onError && s.onError() }) } function n(t, e) { var s = "processId_" + (r += 1); return i[s] = { onComplete: t, onError: e }, s } return { loadAnimation: function (t, r, i) { a(); var s = n(r, i); e.postMessage({ type: "loadAnimation", path: t, fullPath: window.location.origin + window.location.pathname, id: s }) }, loadData: function (t, r, i) { a(); var s = n(r, i); e.postMessage({ type: "loadData", path: t, fullPath: window.location.origin + window.location.pathname, id: s }) }, completeAnimation: function (t, r, i) { a(); var s = n(r, i); e.postMessage({ type: "complete", animation: t, id: s }) } } }(); function getFontProperties(t) { for (var e = t.fStyle ? t.fStyle.split(" ") : [], r = "normal", i = "normal", s = e.length, a = 0; a < s; a += 1)switch (e[a].toLowerCase()) { case "italic": i = "italic"; break; case "bold": r = "700"; break; case "black": r = "900"; break; case "medium": r = "500"; break; case "regular": case "normal": r = "400"; break; case "light": case "thin": r = "200" }return { style: i, weight: t.fWeight || r } } var FontManager = function () { var t = { w: 0, size: 0, shapes: [] }, e = []; e = e.concat([2304, 2305, 2306, 2307, 2362, 2363, 2364, 2364, 2366, 2367, 2368, 2369, 2370, 2371, 2372, 2373, 2374, 2375, 2376, 2377, 2378, 2379, 2380, 2381, 2382, 2383, 2387, 2388, 2389, 2390, 2391, 2402, 2403]); var r = ["d83cdffb", "d83cdffc", "d83cdffd", "d83cdffe", "d83cdfff"], i = [65039, 8205]; function s(t, e) { var r = createTag("span"); r.setAttribute("aria-hidden", !0), r.style.fontFamily = e; var i = createTag("span"); i.innerText = "giItT1WQy@!-/#", r.style.position = "absolute", r.style.left = "-10000px", r.style.top = "-10000px", r.style.fontSize = "300px", r.style.fontVariant = "normal", r.style.fontStyle = "normal", r.style.fontWeight = "normal", r.style.letterSpacing = "0", r.appendChild(i), document.body.appendChild(r); var s = i.offsetWidth; return i.style.fontFamily = function (t) { var e, r = t.split(","), i = r.length, s = []; for (e = 0; e < i; e += 1)"sans-serif" !== r[e] && "monospace" !== r[e] && s.push(r[e]); return s.join(",") }(t) + ", " + e, { node: i, w: s, parent: r } } function a(t, e) { var r = createNS("text"); r.style.fontSize = "100px"; var i = getFontProperties(e); return r.setAttribute("font-family", e.fFamily), r.setAttribute("font-style", i.style), r.setAttribute("font-weight", i.weight), r.textContent = "1", e.fClass ? (r.style.fontFamily = "inherit", r.setAttribute("class", e.fClass)) : r.style.fontFamily = e.fFamily, t.appendChild(r), createTag("canvas").getContext("2d").font = e.fWeight + " " + e.fStyle + " 100px " + e.fFamily, r } var n = function () { this.fonts = [], this.chars = null, this.typekitLoaded = 0, this.isLoaded = !1, this._warned = !1, this.initTime = Date.now(), this.setIsLoadedBinded = this.setIsLoaded.bind(this), this.checkLoadedFontsBinded = this.checkLoadedFonts.bind(this) }; n.isModifier = function (t, e) { var i = t.toString(16) + e.toString(16); return -1 !== r.indexOf(i) }, n.isZeroWidthJoiner = function (t, e) { return e ? t === i[0] && e === i[1] : t === i[1] }, n.isCombinedCharacter = function (t) { return -1 !== e.indexOf(t) }; var o = { addChars: function (t) { if (t) { var e; this.chars || (this.chars = []); var r, i, s = t.length, a = this.chars.length; for (e = 0; e < s; e += 1) { for (r = 0, i = !1; r < a;)this.chars[r].style === t[e].style && this.chars[r].fFamily === t[e].fFamily && this.chars[r].ch === t[e].ch && (i = !0), r += 1; i || (this.chars.push(t[e]), a += 1) } } }, addFonts: function (t, e) { if (t) { if (this.chars) return this.isLoaded = !0, void (this.fonts = t.list); var r, i = t.list, n = i.length, o = n; for (r = 0; r < n; r += 1) { var h, l, p = !0; if (i[r].loaded = !1, i[r].monoCase = s(i[r].fFamily, "monospace"), i[r].sansCase = s(i[r].fFamily, "sans-serif"), i[r].fPath) { if ("p" === i[r].fOrigin || 3 === i[r].origin) { if ((h = document.querySelectorAll('style[f-forigin="p"][f-family="' + i[r].fFamily + '"], style[f-origin="3"][f-family="' + i[r].fFamily + '"]')).length > 0 && (p = !1), p) { var c = createTag("style"); c.setAttribute("f-forigin", i[r].fOrigin), c.setAttribute("f-origin", i[r].origin), c.setAttribute("f-family", i[r].fFamily), c.type = "text/css", c.innerText = "@font-face {font-family: " + i[r].fFamily + "; font-style: normal; src: url('" + i[r].fPath + "');}", e.appendChild(c) } } else if ("g" === i[r].fOrigin || 1 === i[r].origin) { for (h = document.querySelectorAll('link[f-forigin="g"], link[f-origin="1"]'), l = 0; l < h.length; l += 1)-1 !== h[l].href.indexOf(i[r].fPath) && (p = !1); if (p) { var f = createTag("link"); f.setAttribute("f-forigin", i[r].fOrigin), f.setAttribute("f-origin", i[r].origin), f.type = "text/css", f.rel = "stylesheet", f.href = i[r].fPath, document.body.appendChild(f) } } else if ("t" === i[r].fOrigin || 2 === i[r].origin) { for (h = document.querySelectorAll('script[f-forigin="t"], script[f-origin="2"]'), l = 0; l < h.length; l += 1)i[r].fPath === h[l].src && (p = !1); if (p) { var d = createTag("link"); d.setAttribute("f-forigin", i[r].fOrigin), d.setAttribute("f-origin", i[r].origin), d.setAttribute("rel", "stylesheet"), d.setAttribute("href", i[r].fPath), e.appendChild(d) } } } else i[r].loaded = !0, o -= 1; i[r].helper = a(e, i[r]), i[r].cache = {}, this.fonts.push(i[r]) } 0 === o ? this.isLoaded = !0 : setTimeout(this.checkLoadedFonts.bind(this), 100) } else this.isLoaded = !0 }, getCharData: function (e, r, i) { for (var s = 0, a = this.chars.length; s < a;) { if (this.chars[s].ch === e && this.chars[s].style === r && this.chars[s].fFamily === i) return this.chars[s]; s += 1 } return ("string" == typeof e && 13 !== e.charCodeAt(0) || !e) && console && console.warn && !this._warned && (this._warned = !0, console.warn("Missing character from exported characters list: ", e, r, i)), t }, getFontByName: function (t) { for (var e = 0, r = this.fonts.length; e < r;) { if (this.fonts[e].fName === t) return this.fonts[e]; e += 1 } return this.fonts[0] }, measureText: function (t, e, r) { var i = this.getFontByName(e), s = t.charCodeAt(0); if (!i.cache[s + 1]) { var a = i.helper; if (" " === t) { a.textContent = "|" + t + "|"; var n = a.getComputedTextLength(); a.textContent = "||"; var o = a.getComputedTextLength(); i.cache[s + 1] = (n - o) / 100 } else a.textContent = t, i.cache[s + 1] = a.getComputedTextLength() / 100 } return i.cache[s + 1] * r }, checkLoadedFonts: function () { var t, e, r, i = this.fonts.length, s = i; for (t = 0; t < i; t += 1)this.fonts[t].loaded ? s -= 1 : "n" === this.fonts[t].fOrigin || 0 === this.fonts[t].origin ? this.fonts[t].loaded = !0 : (e = this.fonts[t].monoCase.node, r = this.fonts[t].monoCase.w, e.offsetWidth !== r ? (s -= 1, this.fonts[t].loaded = !0) : (e = this.fonts[t].sansCase.node, r = this.fonts[t].sansCase.w, e.offsetWidth !== r && (s -= 1, this.fonts[t].loaded = !0)), this.fonts[t].loaded && (this.fonts[t].sansCase.parent.parentNode.removeChild(this.fonts[t].sansCase.parent), this.fonts[t].monoCase.parent.parentNode.removeChild(this.fonts[t].monoCase.parent))); 0 !== s && Date.now() - this.initTime < 5e3 ? setTimeout(this.checkLoadedFontsBinded, 20) : setTimeout(this.setIsLoadedBinded, 10) }, setIsLoaded: function () { this.isLoaded = !0 } }; return n.prototype = o, n }(), PropertyFactory = function () { var t = initialDefaultFrame, e = Math.abs; function r(t, e) { var r, s = this.offsetTime; "multidimensional" === this.propType && (r = createTypedArray("float32", this.pv.length)); for (var a, n, o, h, l, p, c, f, d, m = e.lastIndex, u = m, y = this.keyframes.length - 1, g = !0; g;) { if (a = this.keyframes[u], n = this.keyframes[u + 1], u === y - 1 && t >= n.t - s) { a.h && (a = n), m = 0; break } if (n.t - s > t) { m = u; break } u < y - 1 ? u += 1 : (m = 0, g = !1) } o = this.keyframesMetadata[u] || {}; var v, b, P, _, E, S, x, A, w, C, k = n.t - s, T = a.t - s; if (a.to) { o.bezierData || (o.bezierData = bez.buildBezierData(a.s, n.s || a.e, a.to, a.ti)); var D = o.bezierData; if (t >= k || t < T) { var M = t >= k ? D.points.length - 1 : 0; for (l = D.points[M].point.length, h = 0; h < l; h += 1)r[h] = D.points[M].point[h] } else { o.__fnct ? d = o.__fnct : (d = BezierFactory.getBezierEasing(a.o.x, a.o.y, a.i.x, a.i.y, a.n).get, o.__fnct = d), p = d((t - T) / (k - T)); var F, I = D.segmentLength * p, R = e.lastFrame < t && e._lastKeyframeIndex === u ? e._lastAddedLength : 0; for (f = e.lastFrame < t && e._lastKeyframeIndex === u ? e._lastPoint : 0, g = !0, c = D.points.length; g;) { if (R += D.points[f].partialLength, 0 === I || 0 === p || f === D.points.length - 1) { for (l = D.points[f].point.length, h = 0; h < l; h += 1)r[h] = D.points[f].point[h]; break } if (I >= R && I < R + D.points[f + 1].partialLength) { for (F = (I - R) / D.points[f + 1].partialLength, l = D.points[f].point.length, h = 0; h < l; h += 1)r[h] = D.points[f].point[h] + (D.points[f + 1].point[h] - D.points[f].point[h]) * F; break } f < c - 1 ? f += 1 : g = !1 } e._lastPoint = f, e._lastAddedLength = R - D.points[f].partialLength, e._lastKeyframeIndex = u } } else { var V, O, L, B, $; if (y = a.s.length, v = n.s || a.e, this.sh && 1 !== a.h) if (t >= k) r[0] = v[0], r[1] = v[1], r[2] = v[2]; else if (t <= T) r[0] = a.s[0], r[1] = a.s[1], r[2] = a.s[2]; else { var z = i(a.s), G = i(v); b = r, P = function (t, e, r) { var i, s, a, n, o, h = [], l = t[0], p = t[1], c = t[2], f = t[3], d = e[0], m = e[1], u = e[2], y = e[3]; return (s = l * d + p * m + c * u + f * y) < 0 && (s = -s, d = -d, m = -m, u = -u, y = -y), 1 - s > 1e-6 ? (i = Math.acos(s), a = Math.sin(i), n = Math.sin((1 - r) * i) / a, o = Math.sin(r * i) / a) : (n = 1 - r, o = r), h[0] = n * l + o * d, h[1] = n * p + o * m, h[2] = n * c + o * u, h[3] = n * f + o * y, h }(z, G, (t - T) / (k - T)), _ = P[0], E = P[1], S = P[2], x = P[3], A = Math.atan2(2 * E * x - 2 * _ * S, 1 - 2 * E * E - 2 * S * S), w = Math.asin(2 * _ * E + 2 * S * x), C = Math.atan2(2 * _ * x - 2 * E * S, 1 - 2 * _ * _ - 2 * S * S), b[0] = A / degToRads, b[1] = w / degToRads, b[2] = C / degToRads } else for (u = 0; u < y; u += 1)1 !== a.h && (t >= k ? p = 1 : t < T ? p = 0 : (a.o.x.constructor === Array ? (o.__fnct || (o.__fnct = []), o.__fnct[u] ? d = o.__fnct[u] : (V = void 0 === a.o.x[u] ? a.o.x[0] : a.o.x[u], O = void 0 === a.o.y[u] ? a.o.y[0] : a.o.y[u], L = void 0 === a.i.x[u] ? a.i.x[0] : a.i.x[u], B = void 0 === a.i.y[u] ? a.i.y[0] : a.i.y[u], d = BezierFactory.getBezierEasing(V, O, L, B).get, o.__fnct[u] = d)) : o.__fnct ? d = o.__fnct : (V = a.o.x, O = a.o.y, L = a.i.x, B = a.i.y, d = BezierFactory.getBezierEasing(V, O, L, B).get, a.keyframeMetadata = d), p = d((t - T) / (k - T)))), v = n.s || a.e, $ = 1 === a.h ? a.s[u] : a.s[u] + (v[u] - a.s[u]) * p, "multidimensional" === this.propType ? r[u] = $ : r = $ } return e.lastIndex = m, r } function i(t) { var e = t[0] * degToRads, r = t[1] * degToRads, i = t[2] * degToRads, s = Math.cos(e / 2), a = Math.cos(r / 2), n = Math.cos(i / 2), o = Math.sin(e / 2), h = Math.sin(r / 2), l = Math.sin(i / 2); return [o * h * n + s * a * l, o * a * n + s * h * l, s * h * n - o * a * l, s * a * n - o * h * l] } function s() { var e = this.comp.renderedFrame - this.offsetTime, r = this.keyframes[0].t - this.offsetTime, i = this.keyframes[this.keyframes.length - 1].t - this.offsetTime; if (!(e === this._caching.lastFrame || this._caching.lastFrame !== t && (this._caching.lastFrame >= i && e >= i || this._caching.lastFrame < r && e < r))) { this._caching.lastFrame >= e && (this._caching._lastKeyframeIndex = -1, this._caching.lastIndex = 0); var s = this.interpolateValue(e, this._caching); this.pv = s } return this._caching.lastFrame = e, this.pv } function a(t) { var r; if ("unidimensional" === this.propType) r = t * this.mult, e(this.v - r) > 1e-5 && (this.v = r, this._mdf = !0); else for (var i = 0, s = this.v.length; i < s;)r = t[i] * this.mult, e(this.v[i] - r) > 1e-5 && (this.v[i] = r, this._mdf = !0), i += 1 } function n() { if (this.elem.globalData.frameId !== this.frameId && this.effectsSequence.length) if (this.lock) this.setVValue(this.pv); else { var t; this.lock = !0, this._mdf = this._isFirstFrame; var e = this.effectsSequence.length, r = this.kf ? this.pv : this.data.k; for (t = 0; t < e; t += 1)r = this.effectsSequence[t](r); this.setVValue(r), this._isFirstFrame = !1, this.lock = !1, this.frameId = this.elem.globalData.frameId } } function o(t) { this.effectsSequence.push(t), this.container.addDynamicProperty(this) } function h(t, e, r, i) { this.propType = "unidimensional", this.mult = r || 1, this.data = e, this.v = r ? e.k * r : e.k, this.pv = e.k, this._mdf = !1, this.elem = t, this.container = i, this.comp = t.comp, this.k = !1, this.kf = !1, this.vel = 0, this.effectsSequence = [], this._isFirstFrame = !0, this.getValue = n, this.setVValue = a, this.addEffect = o } function l(t, e, r, i) { var s; this.propType = "multidimensional", this.mult = r || 1, this.data = e, this._mdf = !1, this.elem = t, this.container = i, this.comp = t.comp, this.k = !1, this.kf = !1, this.frameId = -1; var h = e.k.length; for (this.v = createTypedArray("float32", h), this.pv = createTypedArray("float32", h), this.vel = createTypedArray("float32", h), s = 0; s < h; s += 1)this.v[s] = e.k[s] * this.mult, this.pv[s] = e.k[s]; this._isFirstFrame = !0, this.effectsSequence = [], this.getValue = n, this.setVValue = a, this.addEffect = o } function p(e, i, h, l) { this.propType = "unidimensional", this.keyframes = i.k, this.keyframesMetadata = [], this.offsetTime = e.data.st, this.frameId = -1, this._caching = { lastFrame: t, lastIndex: 0, value: 0, _lastKeyframeIndex: -1 }, this.k = !0, this.kf = !0, this.data = i, this.mult = h || 1, this.elem = e, this.container = l, this.comp = e.comp, this.v = t, this.pv = t, this._isFirstFrame = !0, this.getValue = n, this.setVValue = a, this.interpolateValue = r, this.effectsSequence = [s.bind(this)], this.addEffect = o } function c(e, i, h, l) { var p; this.propType = "multidimensional"; var c, f, d, m, u = i.k.length; for (p = 0; p < u - 1; p += 1)i.k[p].to && i.k[p].s && i.k[p + 1] && i.k[p + 1].s && (c = i.k[p].s, f = i.k[p + 1].s, d = i.k[p].to, m = i.k[p].ti, (2 === c.length && (c[0] !== f[0] || c[1] !== f[1]) && bez.pointOnLine2D(c[0], c[1], f[0], f[1], c[0] + d[0], c[1] + d[1]) && bez.pointOnLine2D(c[0], c[1], f[0], f[1], f[0] + m[0], f[1] + m[1]) || 3 === c.length && (c[0] !== f[0] || c[1] !== f[1] || c[2] !== f[2]) && bez.pointOnLine3D(c[0], c[1], c[2], f[0], f[1], f[2], c[0] + d[0], c[1] + d[1], c[2] + d[2]) && bez.pointOnLine3D(c[0], c[1], c[2], f[0], f[1], f[2], f[0] + m[0], f[1] + m[1], f[2] + m[2])) && (i.k[p].to = null, i.k[p].ti = null), c[0] === f[0] && c[1] === f[1] && 0 === d[0] && 0 === d[1] && 0 === m[0] && 0 === m[1] && (2 === c.length || c[2] === f[2] && 0 === d[2] && 0 === m[2]) && (i.k[p].to = null, i.k[p].ti = null)); this.effectsSequence = [s.bind(this)], this.data = i, this.keyframes = i.k, this.keyframesMetadata = [], this.offsetTime = e.data.st, this.k = !0, this.kf = !0, this._isFirstFrame = !0, this.mult = h || 1, this.elem = e, this.container = l, this.comp = e.comp, this.getValue = n, this.setVValue = a, this.interpolateValue = r, this.frameId = -1; var y = i.k[0].s.length; for (this.v = createTypedArray("float32", y), this.pv = createTypedArray("float32", y), p = 0; p < y; p += 1)this.v[p] = t, this.pv[p] = t; this._caching = { lastFrame: t, lastIndex: 0, value: createTypedArray("float32", y) }, this.addEffect = o } var f = { getProp: function (t, e, r, i, s) { var a; if (e.k.length) if ("number" == typeof e.k[0]) a = new l(t, e, i, s); else switch (r) { case 0: a = new p(t, e, i, s); break; case 1: a = new c(t, e, i, s) } else a = new h(t, e, i, s); return a.effectsSequence.length && s.addDynamicProperty(a), a } }; return f }(), TransformPropertyFactory = function () { var t = [0, 0]; function e(t, e, r) { if (this.elem = t, this.frameId = -1, this.propType = "transform", this.data = e, this.v = new Matrix, this.pre = new Matrix, this.appliedTransformations = 0, this.initDynamicPropertyContainer(r || t), e.p && e.p.s ? (this.px = PropertyFactory.getProp(t, e.p.x, 0, 0, this), this.py = PropertyFactory.getProp(t, e.p.y, 0, 0, this), e.p.z && (this.pz = PropertyFactory.getProp(t, e.p.z, 0, 0, this))) : this.p = PropertyFactory.getProp(t, e.p || { k: [0, 0, 0] }, 1, 0, this), e.rx) { if (this.rx = PropertyFactory.getProp(t, e.rx, 0, degToRads, this), this.ry = PropertyFactory.getProp(t, e.ry, 0, degToRads, this), this.rz = PropertyFactory.getProp(t, e.rz, 0, degToRads, this), e.or.k[0].ti) { var i, s = e.or.k.length; for (i = 0; i < s; i += 1)e.or.k[i].to = null, e.or.k[i].ti = null } this.or = PropertyFactory.getProp(t, e.or, 1, degToRads, this), this.or.sh = !0 } else this.r = PropertyFactory.getProp(t, e.r || { k: 0 }, 0, degToRads, this); e.sk && (this.sk = PropertyFactory.getProp(t, e.sk, 0, degToRads, this), this.sa = PropertyFactory.getProp(t, e.sa, 0, degToRads, this)), this.a = PropertyFactory.getProp(t, e.a || { k: [0, 0, 0] }, 1, 0, this), this.s = PropertyFactory.getProp(t, e.s || { k: [100, 100, 100] }, 1, .01, this), e.o ? this.o = PropertyFactory.getProp(t, e.o, 0, .01, t) : this.o = { _mdf: !1, v: 1 }, this._isDirty = !0, this.dynamicProperties.length || this.getValue(!0) } return e.prototype = { applyToMatrix: function (t) { var e = this._mdf; this.iterateDynamicProperties(), this._mdf = this._mdf || e, this.a && t.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]), this.s && t.scale(this.s.v[0], this.s.v[1], this.s.v[2]), this.sk && t.skewFromAxis(-this.sk.v, this.sa.v), this.r ? t.rotate(-this.r.v) : t.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]), this.data.p.s ? this.data.p.z ? t.translate(this.px.v, this.py.v, -this.pz.v) : t.translate(this.px.v, this.py.v, 0) : t.translate(this.p.v[0], this.p.v[1], -this.p.v[2]) }, getValue: function (e) { if (this.elem.globalData.frameId !== this.frameId) { if (this._isDirty && (this.precalculateMatrix(), this._isDirty = !1), this.iterateDynamicProperties(), this._mdf || e) { var r; if (this.v.cloneFromProps(this.pre.props), this.appliedTransformations < 1 && this.v.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]), this.appliedTransformations < 2 && this.v.scale(this.s.v[0], this.s.v[1], this.s.v[2]), this.sk && this.appliedTransformations < 3 && this.v.skewFromAxis(-this.sk.v, this.sa.v), this.r && this.appliedTransformations < 4 ? this.v.rotate(-this.r.v) : !this.r && this.appliedTransformations < 4 && this.v.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]), this.autoOriented) { var i, s; if (r = this.elem.globalData.frameRate, this.p && this.p.keyframes && this.p.getValueAtTime) this.p._caching.lastFrame + this.p.offsetTime <= this.p.keyframes[0].t ? (i = this.p.getValueAtTime((this.p.keyframes[0].t + .01) / r, 0), s = this.p.getValueAtTime(this.p.keyframes[0].t / r, 0)) : this.p._caching.lastFrame + this.p.offsetTime >= this.p.keyframes[this.p.keyframes.length - 1].t ? (i = this.p.getValueAtTime(this.p.keyframes[this.p.keyframes.length - 1].t / r, 0), s = this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length - 1].t - .05) / r, 0)) : (i = this.p.pv, s = this.p.getValueAtTime((this.p._caching.lastFrame + this.p.offsetTime - .01) / r, this.p.offsetTime)); else if (this.px && this.px.keyframes && this.py.keyframes && this.px.getValueAtTime && this.py.getValueAtTime) { i = [], s = []; var a = this.px, n = this.py; a._caching.lastFrame + a.offsetTime <= a.keyframes[0].t ? (i[0] = a.getValueAtTime((a.keyframes[0].t + .01) / r, 0), i[1] = n.getValueAtTime((n.keyframes[0].t + .01) / r, 0), s[0] = a.getValueAtTime(a.keyframes[0].t / r, 0), s[1] = n.getValueAtTime(n.keyframes[0].t / r, 0)) : a._caching.lastFrame + a.offsetTime >= a.keyframes[a.keyframes.length - 1].t ? (i[0] = a.getValueAtTime(a.keyframes[a.keyframes.length - 1].t / r, 0), i[1] = n.getValueAtTime(n.keyframes[n.keyframes.length - 1].t / r, 0), s[0] = a.getValueAtTime((a.keyframes[a.keyframes.length - 1].t - .01) / r, 0), s[1] = n.getValueAtTime((n.keyframes[n.keyframes.length - 1].t - .01) / r, 0)) : (i = [a.pv, n.pv], s[0] = a.getValueAtTime((a._caching.lastFrame + a.offsetTime - .01) / r, a.offsetTime), s[1] = n.getValueAtTime((n._caching.lastFrame + n.offsetTime - .01) / r, n.offsetTime)) } else i = s = t; this.v.rotate(-Math.atan2(i[1] - s[1], i[0] - s[0])) } this.data.p && this.data.p.s ? this.data.p.z ? this.v.translate(this.px.v, this.py.v, -this.pz.v) : this.v.translate(this.px.v, this.py.v, 0) : this.v.translate(this.p.v[0], this.p.v[1], -this.p.v[2]) } this.frameId = this.elem.globalData.frameId } }, precalculateMatrix: function () { if (!this.a.k && (this.pre.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]), this.appliedTransformations = 1, !this.s.effectsSequence.length)) { if (this.pre.scale(this.s.v[0], this.s.v[1], this.s.v[2]), this.appliedTransformations = 2, this.sk) { if (this.sk.effectsSequence.length || this.sa.effectsSequence.length) return; this.pre.skewFromAxis(-this.sk.v, this.sa.v), this.appliedTransformations = 3 } this.r ? this.r.effectsSequence.length || (this.pre.rotate(-this.r.v), this.appliedTransformations = 4) : this.rz.effectsSequence.length || this.ry.effectsSequence.length || this.rx.effectsSequence.length || this.or.effectsSequence.length || (this.pre.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]), this.appliedTransformations = 4) } }, autoOrient: function () { } }, extendPrototype([DynamicPropertyContainer], e), e.prototype.addDynamicProperty = function (t) { this._addDynamicProperty(t), this.elem.addDynamicProperty(t), this._isDirty = !0 }, e.prototype._addDynamicProperty = DynamicPropertyContainer.prototype.addDynamicProperty, { getTransformProperty: function (t, r, i) { return new e(t, r, i) } } }(); function ShapePath() { this.c = !1, this._length = 0, this._maxLength = 8, this.v = createSizedArray(this._maxLength), this.o = createSizedArray(this._maxLength), this.i = createSizedArray(this._maxLength) } ShapePath.prototype.setPathData = function (t, e) { this.c = t, this.setLength(e); for (var r = 0; r < e;)this.v[r] = pointPool.newElement(), this.o[r] = pointPool.newElement(), this.i[r] = pointPool.newElement(), r += 1 }, ShapePath.prototype.setLength = function (t) { for (; this._maxLength < t;)this.doubleArrayLength(); this._length = t }, ShapePath.prototype.doubleArrayLength = function () { this.v = this.v.concat(createSizedArray(this._maxLength)), this.i = this.i.concat(createSizedArray(this._maxLength)), this.o = this.o.concat(createSizedArray(this._maxLength)), this._maxLength *= 2 }, ShapePath.prototype.setXYAt = function (t, e, r, i, s) { var a; switch (this._length = Math.max(this._length, i + 1), this._length >= this._maxLength && this.doubleArrayLength(), r) { case "v": a = this.v; break; case "i": a = this.i; break; case "o": a = this.o; break; default: a = [] }(!a[i] || a[i] && !s) && (a[i] = pointPool.newElement()), a[i][0] = t, a[i][1] = e }, ShapePath.prototype.setTripleAt = function (t, e, r, i, s, a, n, o) { this.setXYAt(t, e, "v", n, o), this.setXYAt(r, i, "o", n, o), this.setXYAt(s, a, "i", n, o) }, ShapePath.prototype.reverse = function () { var t = new ShapePath; t.setPathData(this.c, this._length); var e = this.v, r = this.o, i = this.i, s = 0; this.c && (t.setTripleAt(e[0][0], e[0][1], i[0][0], i[0][1], r[0][0], r[0][1], 0, !1), s = 1); var a, n = this._length - 1, o = this._length; for (a = s; a < o; a += 1)t.setTripleAt(e[n][0], e[n][1], i[n][0], i[n][1], r[n][0], r[n][1], a, !1), n -= 1; return t }; var ShapePropertyFactory = function () { var t = -999999; function e(t, e, r) { var i, s, a, n, o, h, l, p, c, f = r.lastIndex, d = this.keyframes; if (t < d[0].t - this.offsetTime) i = d[0].s[0], a = !0, f = 0; else if (t >= d[d.length - 1].t - this.offsetTime) i = d[d.length - 1].s ? d[d.length - 1].s[0] : d[d.length - 2].e[0], a = !0; else { for (var m, u, y, g = f, v = d.length - 1, b = !0; b && (m = d[g], !((u = d[g + 1]).t - this.offsetTime > t));)g < v - 1 ? g += 1 : b = !1; if (y = this.keyframesMetadata[g] || {}, f = g, !(a = 1 === m.h)) { if (t >= u.t - this.offsetTime) p = 1; else if (t < m.t - this.offsetTime) p = 0; else { var P; y.__fnct ? P = y.__fnct : (P = BezierFactory.getBezierEasing(m.o.x, m.o.y, m.i.x, m.i.y).get, y.__fnct = P), p = P((t - (m.t - this.offsetTime)) / (u.t - this.offsetTime - (m.t - this.offsetTime))) } s = u.s ? u.s[0] : m.e[0] } i = m.s[0] } for (h = e._length, l = i.i[0].length, r.lastIndex = f, n = 0; n < h; n += 1)for (o = 0; o < l; o += 1)c = a ? i.i[n][o] : i.i[n][o] + (s.i[n][o] - i.i[n][o]) * p, e.i[n][o] = c, c = a ? i.o[n][o] : i.o[n][o] + (s.o[n][o] - i.o[n][o]) * p, e.o[n][o] = c, c = a ? i.v[n][o] : i.v[n][o] + (s.v[n][o] - i.v[n][o]) * p, e.v[n][o] = c } function r() { var e = this.comp.renderedFrame - this.offsetTime, r = this.keyframes[0].t - this.offsetTime, i = this.keyframes[this.keyframes.length - 1].t - this.offsetTime, s = this._caching.lastFrame; return s !== t && (s < r && e < r || s > i && e > i) || (this._caching.lastIndex = s < e ? this._caching.lastIndex : 0, this.interpolateShape(e, this.pv, this._caching)), this._caching.lastFrame = e, this.pv } function i() { this.paths = this.localShapeCollection } function s(t) { (function (t, e) { if (t._length !== e._length || t.c !== e.c) return !1; var r, i = t._length; for (r = 0; r < i; r += 1)if (t.v[r][0] !== e.v[r][0] || t.v[r][1] !== e.v[r][1] || t.o[r][0] !== e.o[r][0] || t.o[r][1] !== e.o[r][1] || t.i[r][0] !== e.i[r][0] || t.i[r][1] !== e.i[r][1]) return !1; return !0 })(this.v, t) || (this.v = shapePool.clone(t), this.localShapeCollection.releaseShapes(), this.localShapeCollection.addShape(this.v), this._mdf = !0, this.paths = this.localShapeCollection) } function a() { if (this.elem.globalData.frameId !== this.frameId) if (this.effectsSequence.length) if (this.lock) this.setVValue(this.pv); else { var t, e; this.lock = !0, this._mdf = !1, t = this.kf ? this.pv : this.data.ks ? this.data.ks.k : this.data.pt.k; var r = this.effectsSequence.length; for (e = 0; e < r; e += 1)t = this.effectsSequence[e](t); this.setVValue(t), this.lock = !1, this.frameId = this.elem.globalData.frameId } else this._mdf = !1 } function n(t, e, r) { this.propType = "shape", this.comp = t.comp, this.container = t, this.elem = t, this.data = e, this.k = !1, this.kf = !1, this._mdf = !1; var s = 3 === r ? e.pt.k : e.ks.k; this.v = shapePool.clone(s), this.pv = shapePool.clone(this.v), this.localShapeCollection = shapeCollectionPool.newShapeCollection(), this.paths = this.localShapeCollection, this.paths.addShape(this.v), this.reset = i, this.effectsSequence = [] } function o(t) { this.effectsSequence.push(t), this.container.addDynamicProperty(this) } function h(e, s, a) { this.propType = "shape", this.comp = e.comp, this.elem = e, this.container = e, this.offsetTime = e.data.st, this.keyframes = 3 === a ? s.pt.k : s.ks.k, this.keyframesMetadata = [], this.k = !0, this.kf = !0; var n = this.keyframes[0].s[0].i.length; this.v = shapePool.newElement(), this.v.setPathData(this.keyframes[0].s[0].c, n), this.pv = shapePool.clone(this.v), this.localShapeCollection = shapeCollectionPool.newShapeCollection(), this.paths = this.localShapeCollection, this.paths.addShape(this.v), this.lastFrame = t, this.reset = i, this._caching = { lastFrame: t, lastIndex: 0 }, this.effectsSequence = [r.bind(this)] } n.prototype.interpolateShape = e, n.prototype.getValue = a, n.prototype.setVValue = s, n.prototype.addEffect = o, h.prototype.getValue = a, h.prototype.interpolateShape = e, h.prototype.setVValue = s, h.prototype.addEffect = o; var l = function () { var t = roundCorner; function e(t, e) { this.v = shapePool.newElement(), this.v.setPathData(!0, 4), this.localShapeCollection = shapeCollectionPool.newShapeCollection(), this.paths = this.localShapeCollection, this.localShapeCollection.addShape(this.v), this.d = e.d, this.elem = t, this.comp = t.comp, this.frameId = -1, this.initDynamicPropertyContainer(t), this.p = PropertyFactory.getProp(t, e.p, 1, 0, this), this.s = PropertyFactory.getProp(t, e.s, 1, 0, this), this.dynamicProperties.length ? this.k = !0 : (this.k = !1, this.convertEllToPath()) } return e.prototype = { reset: i, getValue: function () { this.elem.globalData.frameId !== this.frameId && (this.frameId = this.elem.globalData.frameId, this.iterateDynamicProperties(), this._mdf && this.convertEllToPath()) }, convertEllToPath: function () { var e = this.p.v[0], r = this.p.v[1], i = this.s.v[0] / 2, s = this.s.v[1] / 2, a = 3 !== this.d, n = this.v; n.v[0][0] = e, n.v[0][1] = r - s, n.v[1][0] = a ? e + i : e - i, n.v[1][1] = r, n.v[2][0] = e, n.v[2][1] = r + s, n.v[3][0] = a ? e - i : e + i, n.v[3][1] = r, n.i[0][0] = a ? e - i * t : e + i * t, n.i[0][1] = r - s, n.i[1][0] = a ? e + i : e - i, n.i[1][1] = r - s * t, n.i[2][0] = a ? e + i * t : e - i * t, n.i[2][1] = r + s, n.i[3][0] = a ? e - i : e + i, n.i[3][1] = r + s * t, n.o[0][0] = a ? e + i * t : e - i * t, n.o[0][1] = r - s, n.o[1][0] = a ? e + i : e - i, n.o[1][1] = r + s * t, n.o[2][0] = a ? e - i * t : e + i * t, n.o[2][1] = r + s, n.o[3][0] = a ? e - i : e + i, n.o[3][1] = r - s * t } }, extendPrototype([DynamicPropertyContainer], e), e }(), p = function () { function t(t, e) { this.v = shapePool.newElement(), this.v.setPathData(!0, 0), this.elem = t, this.comp = t.comp, this.data = e, this.frameId = -1, this.d = e.d, this.initDynamicPropertyContainer(t), 1 === e.sy ? (this.ir = PropertyFactory.getProp(t, e.ir, 0, 0, this), this.is = PropertyFactory.getProp(t, e.is, 0, .01, this), this.convertToPath = this.convertStarToPath) : this.convertToPath = this.convertPolygonToPath, this.pt = PropertyFactory.getProp(t, e.pt, 0, 0, this), this.p = PropertyFactory.getProp(t, e.p, 1, 0, this), this.r = PropertyFactory.getProp(t, e.r, 0, degToRads, this), this.or = PropertyFactory.getProp(t, e.or, 0, 0, this), this.os = PropertyFactory.getProp(t, e.os, 0, .01, this), this.localShapeCollection = shapeCollectionPool.newShapeCollection(), this.localShapeCollection.addShape(this.v), this.paths = this.localShapeCollection, this.dynamicProperties.length ? this.k = !0 : (this.k = !1, this.convertToPath()) } return t.prototype = { reset: i, getValue: function () { this.elem.globalData.frameId !== this.frameId && (this.frameId = this.elem.globalData.frameId, this.iterateDynamicProperties(), this._mdf && this.convertToPath()) }, convertStarToPath: function () { var t, e, r, i, s = 2 * Math.floor(this.pt.v), a = 2 * Math.PI / s, n = !0, o = this.or.v, h = this.ir.v, l = this.os.v, p = this.is.v, c = 2 * Math.PI * o / (2 * s), f = 2 * Math.PI * h / (2 * s), d = -Math.PI / 2; d += this.r.v; var m = 3 === this.data.d ? -1 : 1; for (this.v._length = 0, t = 0; t < s; t += 1) { r = n ? l : p, i = n ? c : f; var u = (e = n ? o : h) * Math.cos(d), y = e * Math.sin(d), g = 0 === u && 0 === y ? 0 : y / Math.sqrt(u * u + y * y), v = 0 === u && 0 === y ? 0 : -u / Math.sqrt(u * u + y * y); u += +this.p.v[0], y += +this.p.v[1], this.v.setTripleAt(u, y, u - g * i * r * m, y - v * i * r * m, u + g * i * r * m, y + v * i * r * m, t, !0), n = !n, d += a * m } }, convertPolygonToPath: function () { var t, e = Math.floor(this.pt.v), r = 2 * Math.PI / e, i = this.or.v, s = this.os.v, a = 2 * Math.PI * i / (4 * e), n = .5 * -Math.PI, o = 3 === this.data.d ? -1 : 1; for (n += this.r.v, this.v._length = 0, t = 0; t < e; t += 1) { var h = i * Math.cos(n), l = i * Math.sin(n), p = 0 === h && 0 === l ? 0 : l / Math.sqrt(h * h + l * l), c = 0 === h && 0 === l ? 0 : -h / Math.sqrt(h * h + l * l); h += +this.p.v[0], l += +this.p.v[1], this.v.setTripleAt(h, l, h - p * a * s * o, l - c * a * s * o, h + p * a * s * o, l + c * a * s * o, t, !0), n += r * o } this.paths.length = 0, this.paths[0] = this.v } }, extendPrototype([DynamicPropertyContainer], t), t }(), c = function () { function t(t, e) { this.v = shapePool.newElement(), this.v.c = !0, this.localShapeCollection = shapeCollectionPool.newShapeCollection(), this.localShapeCollection.addShape(this.v), this.paths = this.localShapeCollection, this.elem = t, this.comp = t.comp, this.frameId = -1, this.d = e.d, this.initDynamicPropertyContainer(t), this.p = PropertyFactory.getProp(t, e.p, 1, 0, this), this.s = PropertyFactory.getProp(t, e.s, 1, 0, this), this.r = PropertyFactory.getProp(t, e.r, 0, 0, this), this.dynamicProperties.length ? this.k = !0 : (this.k = !1, this.convertRectToPath()) } return t.prototype = { convertRectToPath: function () { var t = this.p.v[0], e = this.p.v[1], r = this.s.v[0] / 2, i = this.s.v[1] / 2, s = bmMin(r, i, this.r.v), a = s * (1 - roundCorner); this.v._length = 0, 2 === this.d || 1 === this.d ? (this.v.setTripleAt(t + r, e - i + s, t + r, e - i + s, t + r, e - i + a, 0, !0), this.v.setTripleAt(t + r, e + i - s, t + r, e + i - a, t + r, e + i - s, 1, !0), 0 !== s ? (this.v.setTripleAt(t + r - s, e + i, t + r - s, e + i, t + r - a, e + i, 2, !0), this.v.setTripleAt(t - r + s, e + i, t - r + a, e + i, t - r + s, e + i, 3, !0), this.v.setTripleAt(t - r, e + i - s, t - r, e + i - s, t - r, e + i - a, 4, !0), this.v.setTripleAt(t - r, e - i + s, t - r, e - i + a, t - r, e - i + s, 5, !0), this.v.setTripleAt(t - r + s, e - i, t - r + s, e - i, t - r + a, e - i, 6, !0), this.v.setTripleAt(t + r - s, e - i, t + r - a, e - i, t + r - s, e - i, 7, !0)) : (this.v.setTripleAt(t - r, e + i, t - r + a, e + i, t - r, e + i, 2), this.v.setTripleAt(t - r, e - i, t - r, e - i + a, t - r, e - i, 3))) : (this.v.setTripleAt(t + r, e - i + s, t + r, e - i + a, t + r, e - i + s, 0, !0), 0 !== s ? (this.v.setTripleAt(t + r - s, e - i, t + r - s, e - i, t + r - a, e - i, 1, !0), this.v.setTripleAt(t - r + s, e - i, t - r + a, e - i, t - r + s, e - i, 2, !0), this.v.setTripleAt(t - r, e - i + s, t - r, e - i + s, t - r, e - i + a, 3, !0), this.v.setTripleAt(t - r, e + i - s, t - r, e + i - a, t - r, e + i - s, 4, !0), this.v.setTripleAt(t - r + s, e + i, t - r + s, e + i, t - r + a, e + i, 5, !0), this.v.setTripleAt(t + r - s, e + i, t + r - a, e + i, t + r - s, e + i, 6, !0), this.v.setTripleAt(t + r, e + i - s, t + r, e + i - s, t + r, e + i - a, 7, !0)) : (this.v.setTripleAt(t - r, e - i, t - r + a, e - i, t - r, e - i, 1, !0), this.v.setTripleAt(t - r, e + i, t - r, e + i - a, t - r, e + i, 2, !0), this.v.setTripleAt(t + r, e + i, t + r - a, e + i, t + r, e + i, 3, !0))) }, getValue: function () { this.elem.globalData.frameId !== this.frameId && (this.frameId = this.elem.globalData.frameId, this.iterateDynamicProperties(), this._mdf && this.convertRectToPath()) }, reset: i }, extendPrototype([DynamicPropertyContainer], t), t }(), f = { getShapeProp: function (t, e, r) { var i; return 3 === r || 4 === r ? i = (3 === r ? e.pt : e.ks).k.length ? new h(t, e, r) : new n(t, e, r) : 5 === r ? i = new c(t, e) : 6 === r ? i = new l(t, e) : 7 === r && (i = new p(t, e)), i.k && t.addDynamicProperty(i), i }, getConstructorFunction: function () { return n }, getKeyframedConstructorFunction: function () { return h } }; return f }(), ShapeModifiers = (ob = {}, modifiers = {}, ob.registerModifier = function (t, e) { modifiers[t] || (modifiers[t] = e) }, ob.getModifier = function (t, e, r) { return new modifiers[t](e, r) }, ob), ob, modifiers; function ShapeModifier() { } function TrimModifier() { } function RoundCornersModifier() { } function PuckerAndBloatModifier() { } function RepeaterModifier() { } function ShapeCollection() { this._length = 0, this._maxLength = 4, this.shapes = createSizedArray(this._maxLength) } function DashProperty(t, e, r, i) { var s; this.elem = t, this.frameId = -1, this.dataProps = createSizedArray(e.length), this.renderer = r, this.k = !1, this.dashStr = "", this.dashArray = createTypedArray("float32", e.length ? e.length - 1 : 0), this.dashoffset = createTypedArray("float32", 1), this.initDynamicPropertyContainer(i); var a, n = e.length || 0; for (s = 0; s < n; s += 1)a = PropertyFactory.getProp(t, e[s].v, 0, 0, this), this.k = a.k || this.k, this.dataProps[s] = { n: e[s].n, p: a }; this.k || this.getValue(!0), this._isAnimated = this.k } function GradientProperty(t, e, r) { this.data = e, this.c = createTypedArray("uint8c", 4 * e.p); var i = e.k.k[0].s ? e.k.k[0].s.length - 4 * e.p : e.k.k.length - 4 * e.p; this.o = createTypedArray("float32", i), this._cmdf = !1, this._omdf = !1, this._collapsable = this.checkCollapsable(), this._hasOpacity = i, this.initDynamicPropertyContainer(r), this.prop = PropertyFactory.getProp(t, e.k, 1, null, this), this.k = this.prop.k, this.getValue(!0) } ShapeModifier.prototype.initModifierProperties = function () { }, ShapeModifier.prototype.addShapeToModifier = function () { }, ShapeModifier.prototype.addShape = function (t) { if (!this.closed) { t.sh.container.addDynamicProperty(t.sh); var e = { shape: t.sh, data: t, localShapeCollection: shapeCollectionPool.newShapeCollection() }; this.shapes.push(e), this.addShapeToModifier(e), this._isAnimated && t.setAsAnimated() } }, ShapeModifier.prototype.init = function (t, e) { this.shapes = [], this.elem = t, this.initDynamicPropertyContainer(t), this.initModifierProperties(t, e), this.frameId = initialDefaultFrame, this.closed = !1, this.k = !1, this.dynamicProperties.length ? this.k = !0 : this.getValue(!0) }, ShapeModifier.prototype.processKeys = function () { this.elem.globalData.frameId !== this.frameId && (this.frameId = this.elem.globalData.frameId, this.iterateDynamicProperties()) }, extendPrototype([DynamicPropertyContainer], ShapeModifier), extendPrototype([ShapeModifier], TrimModifier), TrimModifier.prototype.initModifierProperties = function (t, e) { this.s = PropertyFactory.getProp(t, e.s, 0, .01, this), this.e = PropertyFactory.getProp(t, e.e, 0, .01, this), this.o = PropertyFactory.getProp(t, e.o, 0, 0, this), this.sValue = 0, this.eValue = 0, this.getValue = this.processKeys, this.m = e.m, this._isAnimated = !!this.s.effectsSequence.length || !!this.e.effectsSequence.length || !!this.o.effectsSequence.length }, TrimModifier.prototype.addShapeToModifier = function (t) { t.pathsData = [] }, TrimModifier.prototype.calculateShapeEdges = function (t, e, r, i, s) { var a = []; e <= 1 ? a.push({ s: t, e: e }) : t >= 1 ? a.push({ s: t - 1, e: e - 1 }) : (a.push({ s: t, e: 1 }), a.push({ s: 0, e: e - 1 })); var n, o, h = [], l = a.length; for (n = 0; n < l; n += 1) { var p, c; (o = a[n]).e * s < i || o.s * s > i + r || (p = o.s * s <= i ? 0 : (o.s * s - i) / r, c = o.e * s >= i + r ? 1 : (o.e * s - i) / r, h.push([p, c])) } return h.length || h.push([0, 0]), h }, TrimModifier.prototype.releasePathsData = function (t) { var e, r = t.length; for (e = 0; e < r; e += 1)segmentsLengthPool.release(t[e]); return t.length = 0, t }, TrimModifier.prototype.processShapes = function (t) { var e, r, i, s; if (this._mdf || t) { var a = this.o.v % 360 / 360; if (a < 0 && (a += 1), (e = this.s.v > 1 ? 1 + a : this.s.v < 0 ? 0 + a : this.s.v + a) > (r = this.e.v > 1 ? 1 + a : this.e.v < 0 ? 0 + a : this.e.v + a)) { var n = e; e = r, r = n } e = 1e-4 * Math.round(1e4 * e), r = 1e-4 * Math.round(1e4 * r), this.sValue = e, this.eValue = r } else e = this.sValue, r = this.eValue; var o, h, l, p, c, f = this.shapes.length, d = 0; if (r === e) for (s = 0; s < f; s += 1)this.shapes[s].localShapeCollection.releaseShapes(), this.shapes[s].shape._mdf = !0, this.shapes[s].shape.paths = this.shapes[s].localShapeCollection, this._mdf && (this.shapes[s].pathsData.length = 0); else if (1 === r && 0 === e || 0 === r && 1 === e) { if (this._mdf) for (s = 0; s < f; s += 1)this.shapes[s].pathsData.length = 0, this.shapes[s].shape._mdf = !0 } else { var m, u, y = []; for (s = 0; s < f; s += 1)if ((m = this.shapes[s]).shape._mdf || this._mdf || t || 2 === this.m) { if (h = (i = m.shape.paths)._length, c = 0, !m.shape._mdf && m.pathsData.length) c = m.totalShapeLength; else { for (l = this.releasePathsData(m.pathsData), o = 0; o < h; o += 1)p = bez.getSegmentsLength(i.shapes[o]), l.push(p), c += p.totalLength; m.totalShapeLength = c, m.pathsData = l } d += c, m.shape._mdf = !0 } else m.shape.paths = m.localShapeCollection; var g, v = e, b = r, P = 0; for (s = f - 1; s >= 0; s -= 1)if ((m = this.shapes[s]).shape._mdf) { for ((u = m.localShapeCollection).releaseShapes(), 2 === this.m && f > 1 ? (g = this.calculateShapeEdges(e, r, m.totalShapeLength, P, d), P += m.totalShapeLength) : g = [[v, b]], h = g.length, o = 0; o < h; o += 1) { v = g[o][0], b = g[o][1], y.length = 0, b <= 1 ? y.push({ s: m.totalShapeLength * v, e: m.totalShapeLength * b }) : v >= 1 ? y.push({ s: m.totalShapeLength * (v - 1), e: m.totalShapeLength * (b - 1) }) : (y.push({ s: m.totalShapeLength * v, e: m.totalShapeLength }), y.push({ s: 0, e: m.totalShapeLength * (b - 1) })); var _ = this.addShapes(m, y[0]); if (y[0].s !== y[0].e) { if (y.length > 1) if (m.shape.paths.shapes[m.shape.paths._length - 1].c) { var E = _.pop(); this.addPaths(_, u), _ = this.addShapes(m, y[1], E) } else this.addPaths(_, u), _ = this.addShapes(m, y[1]); this.addPaths(_, u) } } m.shape.paths = u } } }, TrimModifier.prototype.addPaths = function (t, e) { var r, i = t.length; for (r = 0; r < i; r += 1)e.addShape(t[r]) }, TrimModifier.prototype.addSegment = function (t, e, r, i, s, a, n) { s.setXYAt(e[0], e[1], "o", a), s.setXYAt(r[0], r[1], "i", a + 1), n && s.setXYAt(t[0], t[1], "v", a), s.setXYAt(i[0], i[1], "v", a + 1) }, TrimModifier.prototype.addSegmentFromArray = function (t, e, r, i) { e.setXYAt(t[1], t[5], "o", r), e.setXYAt(t[2], t[6], "i", r + 1), i && e.setXYAt(t[0], t[4], "v", r), e.setXYAt(t[3], t[7], "v", r + 1) }, TrimModifier.prototype.addShapes = function (t, e, r) { var i, s, a, n, o, h, l, p, c = t.pathsData, f = t.shape.paths.shapes, d = t.shape.paths._length, m = 0, u = [], y = !0; for (r ? (o = r._length, p = r._length) : (r = shapePool.newElement(), o = 0, p = 0), u.push(r), i = 0; i < d; i += 1) { for (h = c[i].lengths, r.c = f[i].c, a = f[i].c ? h.length : h.length + 1, s = 1; s < a; s += 1)if (m + (n = h[s - 1]).addedLength < e.s) m += n.addedLength, r.c = !1; else { if (m > e.e) { r.c = !1; break } e.s <= m && e.e >= m + n.addedLength ? (this.addSegment(f[i].v[s - 1], f[i].o[s - 1], f[i].i[s], f[i].v[s], r, o, y), y = !1) : (l = bez.getNewSegment(f[i].v[s - 1], f[i].v[s], f[i].o[s - 1], f[i].i[s], (e.s - m) / n.addedLength, (e.e - m) / n.addedLength, h[s - 1]), this.addSegmentFromArray(l, r, o, y), y = !1, r.c = !1), m += n.addedLength, o += 1 } if (f[i].c && h.length) { if (n = h[s - 1], m <= e.e) { var g = h[s - 1].addedLength; e.s <= m && e.e >= m + g ? (this.addSegment(f[i].v[s - 1], f[i].o[s - 1], f[i].i[0], f[i].v[0], r, o, y), y = !1) : (l = bez.getNewSegment(f[i].v[s - 1], f[i].v[0], f[i].o[s - 1], f[i].i[0], (e.s - m) / g, (e.e - m) / g, h[s - 1]), this.addSegmentFromArray(l, r, o, y), y = !1, r.c = !1) } else r.c = !1; m += n.addedLength, o += 1 } if (r._length && (r.setXYAt(r.v[p][0], r.v[p][1], "i", p), r.setXYAt(r.v[r._length - 1][0], r.v[r._length - 1][1], "o", r._length - 1)), m > e.e) break; i < d - 1 && (r = shapePool.newElement(), y = !0, u.push(r), o = 0) } return u }, ShapeModifiers.registerModifier("tm", TrimModifier), extendPrototype([ShapeModifier], RoundCornersModifier), RoundCornersModifier.prototype.initModifierProperties = function (t, e) { this.getValue = this.processKeys, this.rd = PropertyFactory.getProp(t, e.r, 0, null, this), this._isAnimated = !!this.rd.effectsSequence.length }, RoundCornersModifier.prototype.processPath = function (t, e) { var r, i = shapePool.newElement(); i.c = t.c; var s, a, n, o, h, l, p, c, f, d, m, u, y = t._length, g = 0; for (r = 0; r < y; r += 1)s = t.v[r], n = t.o[r], a = t.i[r], s[0] === n[0] && s[1] === n[1] && s[0] === a[0] && s[1] === a[1] ? 0 !== r && r !== y - 1 || t.c ? (o = 0 === r ? t.v[y - 1] : t.v[r - 1], l = (h = Math.sqrt(Math.pow(s[0] - o[0], 2) + Math.pow(s[1] - o[1], 2))) ? Math.min(h / 2, e) / h : 0, p = m = s[0] + (o[0] - s[0]) * l, c = u = s[1] - (s[1] - o[1]) * l, f = p - (p - s[0]) * roundCorner, d = c - (c - s[1]) * roundCorner, i.setTripleAt(p, c, f, d, m, u, g), g += 1, o = r === y - 1 ? t.v[0] : t.v[r + 1], l = (h = Math.sqrt(Math.pow(s[0] - o[0], 2) + Math.pow(s[1] - o[1], 2))) ? Math.min(h / 2, e) / h : 0, p = f = s[0] + (o[0] - s[0]) * l, c = d = s[1] + (o[1] - s[1]) * l, m = p - (p - s[0]) * roundCorner, u = c - (c - s[1]) * roundCorner, i.setTripleAt(p, c, f, d, m, u, g), g += 1) : (i.setTripleAt(s[0], s[1], n[0], n[1], a[0], a[1], g), g += 1) : (i.setTripleAt(t.v[r][0], t.v[r][1], t.o[r][0], t.o[r][1], t.i[r][0], t.i[r][1], g), g += 1); return i }, RoundCornersModifier.prototype.processShapes = function (t) { var e, r, i, s, a, n, o = this.shapes.length, h = this.rd.v; if (0 !== h) for (r = 0; r < o; r += 1) { if (n = (a = this.shapes[r]).localShapeCollection, a.shape._mdf || this._mdf || t) for (n.releaseShapes(), a.shape._mdf = !0, e = a.shape.paths.shapes, s = a.shape.paths._length, i = 0; i < s; i += 1)n.addShape(this.processPath(e[i], h)); a.shape.paths = a.localShapeCollection } this.dynamicProperties.length || (this._mdf = !1) }, ShapeModifiers.registerModifier("rd", RoundCornersModifier), extendPrototype([ShapeModifier], PuckerAndBloatModifier), PuckerAndBloatModifier.prototype.initModifierProperties = function (t, e) { this.getValue = this.processKeys, this.amount = PropertyFactory.getProp(t, e.a, 0, null, this), this._isAnimated = !!this.amount.effectsSequence.length }, PuckerAndBloatModifier.prototype.processPath = function (t, e) { var r = e / 100, i = [0, 0], s = t._length, a = 0; for (a = 0; a < s; a += 1)i[0] += t.v[a][0], i[1] += t.v[a][1]; i[0] /= s, i[1] /= s; var n, o, h, l, p, c, f = shapePool.newElement(); for (f.c = t.c, a = 0; a < s; a += 1)n = t.v[a][0] + (i[0] - t.v[a][0]) * r, o = t.v[a][1] + (i[1] - t.v[a][1]) * r, h = t.o[a][0] + (i[0] - t.o[a][0]) * -r, l = t.o[a][1] + (i[1] - t.o[a][1]) * -r, p = t.i[a][0] + (i[0] - t.i[a][0]) * -r, c = t.i[a][1] + (i[1] - t.i[a][1]) * -r, f.setTripleAt(n, o, h, l, p, c, a); return f }, PuckerAndBloatModifier.prototype.processShapes = function (t) { var e, r, i, s, a, n, o = this.shapes.length, h = this.amount.v; if (0 !== h) for (r = 0; r < o; r += 1) { if (n = (a = this.shapes[r]).localShapeCollection, a.shape._mdf || this._mdf || t) for (n.releaseShapes(), a.shape._mdf = !0, e = a.shape.paths.shapes, s = a.shape.paths._length, i = 0; i < s; i += 1)n.addShape(this.processPath(e[i], h)); a.shape.paths = a.localShapeCollection } this.dynamicProperties.length || (this._mdf = !1) }, ShapeModifiers.registerModifier("pb", PuckerAndBloatModifier), extendPrototype([ShapeModifier], RepeaterModifier), RepeaterModifier.prototype.initModifierProperties = function (t, e) { this.getValue = this.processKeys, this.c = PropertyFactory.getProp(t, e.c, 0, null, this), this.o = PropertyFactory.getProp(t, e.o, 0, null, this), this.tr = TransformPropertyFactory.getTransformProperty(t, e.tr, this), this.so = PropertyFactory.getProp(t, e.tr.so, 0, .01, this), this.eo = PropertyFactory.getProp(t, e.tr.eo, 0, .01, this), this.data = e, this.dynamicProperties.length || this.getValue(!0), this._isAnimated = !!this.dynamicProperties.length, this.pMatrix = new Matrix, this.rMatrix = new Matrix, this.sMatrix = new Matrix, this.tMatrix = new Matrix, this.matrix = new Matrix }, RepeaterModifier.prototype.applyTransforms = function (t, e, r, i, s, a) { var n = a ? -1 : 1, o = i.s.v[0] + (1 - i.s.v[0]) * (1 - s), h = i.s.v[1] + (1 - i.s.v[1]) * (1 - s); t.translate(i.p.v[0] * n * s, i.p.v[1] * n * s, i.p.v[2]), e.translate(-i.a.v[0], -i.a.v[1], i.a.v[2]), e.rotate(-i.r.v * n * s), e.translate(i.a.v[0], i.a.v[1], i.a.v[2]), r.translate(-i.a.v[0], -i.a.v[1], i.a.v[2]), r.scale(a ? 1 / o : o, a ? 1 / h : h), r.translate(i.a.v[0], i.a.v[1], i.a.v[2]) }, RepeaterModifier.prototype.init = function (t, e, r, i) { for (this.elem = t, this.arr = e, this.pos = r, this.elemsData = i, this._currentCopies = 0, this._elements = [], this._groups = [], this.frameId = -1, this.initDynamicPropertyContainer(t), this.initModifierProperties(t, e[r]); r > 0;)r -= 1, this._elements.unshift(e[r]); this.dynamicProperties.length ? this.k = !0 : this.getValue(!0) }, RepeaterModifier.prototype.resetElements = function (t) { var e, r = t.length; for (e = 0; e < r; e += 1)t[e]._processed = !1, "gr" === t[e].ty && this.resetElements(t[e].it) }, RepeaterModifier.prototype.cloneElements = function (t) { var e = JSON.parse(JSON.stringify(t)); return this.resetElements(e), e }, RepeaterModifier.prototype.changeGroupRender = function (t, e) { var r, i = t.length; for (r = 0; r < i; r += 1)t[r]._render = e, "gr" === t[r].ty && this.changeGroupRender(t[r].it, e) }, RepeaterModifier.prototype.processShapes = function (t) { var e, r, i, s, a, n = !1; if (this._mdf || t) { var o, h = Math.ceil(this.c.v); if (this._groups.length < h) { for (; this._groups.length < h;) { var l = { it: this.cloneElements(this._elements), ty: "gr" }; l.it.push({ a: { a: 0, ix: 1, k: [0, 0] }, nm: "Transform", o: { a: 0, ix: 7, k: 100 }, p: { a: 0, ix: 2, k: [0, 0] }, r: { a: 1, ix: 6, k: [{ s: 0, e: 0, t: 0 }, { s: 0, e: 0, t: 1 }] }, s: { a: 0, ix: 3, k: [100, 100] }, sa: { a: 0, ix: 5, k: 0 }, sk: { a: 0, ix: 4, k: 0 }, ty: "tr" }), this.arr.splice(0, 0, l), this._groups.splice(0, 0, l), this._currentCopies += 1 } this.elem.reloadShapes(), n = !0 } for (a = 0, i = 0; i <= this._groups.length - 1; i += 1) { if (o = a < h, this._groups[i]._render = o, this.changeGroupRender(this._groups[i].it, o), !o) { var p = this.elemsData[i].it, c = p[p.length - 1]; 0 !== c.transform.op.v ? (c.transform.op._mdf = !0, c.transform.op.v = 0) : c.transform.op._mdf = !1 } a += 1 } this._currentCopies = h; var f = this.o.v, d = f % 1, m = f > 0 ? Math.floor(f) : Math.ceil(f), u = this.pMatrix.props, y = this.rMatrix.props, g = this.sMatrix.props; this.pMatrix.reset(), this.rMatrix.reset(), this.sMatrix.reset(), this.tMatrix.reset(), this.matrix.reset(); var v, b, P = 0; if (f > 0) { for (; P < m;)this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, 1, !1), P += 1; d && (this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, d, !1), P += d) } else if (f < 0) { for (; P > m;)this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, 1, !0), P -= 1; d && (this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, -d, !0), P -= d) } for (i = 1 === this.data.m ? 0 : this._currentCopies - 1, s = 1 === this.data.m ? 1 : -1, a = this._currentCopies; a;) { if (b = (r = (e = this.elemsData[i].it)[e.length - 1].transform.mProps.v.props).length, e[e.length - 1].transform.mProps._mdf = !0, e[e.length - 1].transform.op._mdf = !0, e[e.length - 1].transform.op.v = 1 === this._currentCopies ? this.so.v : this.so.v + (this.eo.v - this.so.v) * (i / (this._currentCopies - 1)), 0 !== P) { for ((0 !== i && 1 === s || i !== this._currentCopies - 1 && -1 === s) && this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, 1, !1), this.matrix.transform(y[0], y[1], y[2], y[3], y[4], y[5], y[6], y[7], y[8], y[9], y[10], y[11], y[12], y[13], y[14], y[15]), this.matrix.transform(g[0], g[1], g[2], g[3], g[4], g[5], g[6], g[7], g[8], g[9], g[10], g[11], g[12], g[13], g[14], g[15]), this.matrix.transform(u[0], u[1], u[2], u[3], u[4], u[5], u[6], u[7], u[8], u[9], u[10], u[11], u[12], u[13], u[14], u[15]), v = 0; v < b; v += 1)r[v] = this.matrix.props[v]; this.matrix.reset() } else for (this.matrix.reset(), v = 0; v < b; v += 1)r[v] = this.matrix.props[v]; P += 1, a -= 1, i += s } } else for (a = this._currentCopies, i = 0, s = 1; a;)r = (e = this.elemsData[i].it)[e.length - 1].transform.mProps.v.props, e[e.length - 1].transform.mProps._mdf = !1, e[e.length - 1].transform.op._mdf = !1, a -= 1, i += s; return n }, RepeaterModifier.prototype.addShape = function () { }, ShapeModifiers.registerModifier("rp", RepeaterModifier), ShapeCollection.prototype.addShape = function (t) { this._length === this._maxLength && (this.shapes = this.shapes.concat(createSizedArray(this._maxLength)), this._maxLength *= 2), this.shapes[this._length] = t, this._length += 1 }, ShapeCollection.prototype.releaseShapes = function () { var t; for (t = 0; t < this._length; t += 1)shapePool.release(this.shapes[t]); this._length = 0 }, DashProperty.prototype.getValue = function (t) { if ((this.elem.globalData.frameId !== this.frameId || t) && (this.frameId = this.elem.globalData.frameId, this.iterateDynamicProperties(), this._mdf = this._mdf || t, this._mdf)) { var e = 0, r = this.dataProps.length; for ("svg" === this.renderer && (this.dashStr = ""), e = 0; e < r; e += 1)"o" !== this.dataProps[e].n ? "svg" === this.renderer ? this.dashStr += " " + this.dataProps[e].p.v : this.dashArray[e] = this.dataProps[e].p.v : this.dashoffset[0] = this.dataProps[e].p.v } }, extendPrototype([DynamicPropertyContainer], DashProperty), GradientProperty.prototype.comparePoints = function (t, e) { for (var r = 0, i = this.o.length / 2; r < i;) { if (Math.abs(t[4 * r] - t[4 * e + 2 * r]) > .01) return !1; r += 1 } return !0 }, GradientProperty.prototype.checkCollapsable = function () { if (this.o.length / 2 != this.c.length / 4) return !1; if (this.data.k.k[0].s) for (var t = 0, e = this.data.k.k.length; t < e;) { if (!this.comparePoints(this.data.k.k[t].s, this.data.p)) return !1; t += 1 } else if (!this.comparePoints(this.data.k.k, this.data.p)) return !1; return !0 }, GradientProperty.prototype.getValue = function (t) { if (this.prop.getValue(), this._mdf = !1, this._cmdf = !1, this._omdf = !1, this.prop._mdf || t) { var e, r, i, s = 4 * this.data.p; for (e = 0; e < s; e += 1)r = e % 4 == 0 ? 100 : 255, i = Math.round(this.prop.v[e] * r), this.c[e] !== i && (this.c[e] = i, this._cmdf = !t); if (this.o.length) for (s = this.prop.v.length, e = 4 * this.data.p; e < s; e += 1)r = e % 2 == 0 ? 100 : 1, i = e % 2 == 0 ? Math.round(100 * this.prop.v[e]) : this.prop.v[e], this.o[e - 4 * this.data.p] !== i && (this.o[e - 4 * this.data.p] = i, this._omdf = !t); this._mdf = !t } }, extendPrototype([DynamicPropertyContainer], GradientProperty); var buildShapeString = function (t, e, r, i) { if (0 === e) return ""; var s, a = t.o, n = t.i, o = t.v, h = " M" + i.applyToPointStringified(o[0][0], o[0][1]); for (s = 1; s < e; s += 1)h += " C" + i.applyToPointStringified(a[s - 1][0], a[s - 1][1]) + " " + i.applyToPointStringified(n[s][0], n[s][1]) + " " + i.applyToPointStringified(o[s][0], o[s][1]); return r && e && (h += " C" + i.applyToPointStringified(a[s - 1][0], a[s - 1][1]) + " " + i.applyToPointStringified(n[0][0], n[0][1]) + " " + i.applyToPointStringified(o[0][0], o[0][1]), h += "z"), h }, audioControllerFactory = function () { function t(t) { this.audios = [], this.audioFactory = t, this._volume = 1, this._isMuted = !1 } return t.prototype = { addAudio: function (t) { this.audios.push(t) }, pause: function () { var t, e = this.audios.length; for (t = 0; t < e; t += 1)this.audios[t].pause() }, resume: function () { var t, e = this.audios.length; for (t = 0; t < e; t += 1)this.audios[t].resume() }, setRate: function (t) { var e, r = this.audios.length; for (e = 0; e < r; e += 1)this.audios[e].setRate(t) }, createAudio: function (t) { return this.audioFactory ? this.audioFactory(t) : Howl ? new Howl({ src: [t] }) : { isPlaying: !1, play: function () { this.isPlaying = !0 }, seek: function () { this.isPlaying = !1 }, playing: function () { }, rate: function () { }, setVolume: function () { } } }, setAudioFactory: function (t) { this.audioFactory = t }, setVolume: function (t) { this._volume = t, this._updateVolume() }, mute: function () { this._isMuted = !0, this._updateVolume() }, unmute: function () { this._isMuted = !1, this._updateVolume() }, getVolume: function () { return this._volume }, _updateVolume: function () { var t, e = this.audios.length; for (t = 0; t < e; t += 1)this.audios[t].volume(this._volume * (this._isMuted ? 0 : 1)) } }, function () { return new t } }(), ImagePreloader = function () { var t = function () { var t = createTag("canvas"); t.width = 1, t.height = 1; var e = t.getContext("2d"); return e.fillStyle = "rgba(0,0,0,0)", e.fillRect(0, 0, 1, 1), t }(); function e() { this.loadedAssets += 1, this.loadedAssets === this.totalImages && this.loadedFootagesCount === this.totalFootages && this.imagesLoadedCb && this.imagesLoadedCb(null) } function r() { this.loadedFootagesCount += 1, this.loadedAssets === this.totalImages && this.loadedFootagesCount === this.totalFootages && this.imagesLoadedCb && this.imagesLoadedCb(null) } function i(t, e, r) { var i = ""; if (t.e) i = t.p; else if (e) { var s = t.p; -1 !== s.indexOf("images/") && (s = s.split("/")[1]), i = e + s } else i = r, i += t.u ? t.u : "", i += t.p; return i } function s(t) { var e = 0, r = setInterval(function () { (t.getBBox().width || e > 500) && (this._imageLoaded(), clearInterval(r)), e += 1 }.bind(this), 50) } function a(t) { var e = { assetData: t }, r = i(t, this.assetsPath, this.path); return dataManager.loadData(r, function (t) { e.img = t, this._footageLoaded() }.bind(this), function () { e.img = {}, this._footageLoaded() }.bind(this)), e } function n() { this._imageLoaded = e.bind(this), this._footageLoaded = r.bind(this), this.testImageLoaded = s.bind(this), this.createFootageData = a.bind(this), this.assetsPath = "", this.path = "", this.totalImages = 0, this.totalFootages = 0, this.loadedAssets = 0, this.loadedFootagesCount = 0, this.imagesLoadedCb = null, this.images = [] } return n.prototype = { loadAssets: function (t, e) { var r; this.imagesLoadedCb = e; var i = t.length; for (r = 0; r < i; r += 1)t[r].layers || (t[r].t && "seq" !== t[r].t ? 3 === t[r].t && (this.totalFootages += 1, this.images.push(this.createFootageData(t[r]))) : (this.totalImages += 1, this.images.push(this._createImageData(t[r])))) }, setAssetsPath: function (t) { this.assetsPath = t || "" }, setPath: function (t) { this.path = t || "" }, loadedImages: function () { return this.totalImages === this.loadedAssets }, loadedFootages: function () { return this.totalFootages === this.loadedFootagesCount }, destroy: function () { this.imagesLoadedCb = null, this.images.length = 0 }, getAsset: function (t) { for (var e = 0, r = this.images.length; e < r;) { if (this.images[e].assetData === t) return this.images[e].img; e += 1 } return null }, createImgData: function (e) { var r = i(e, this.assetsPath, this.path), s = createTag("img"); s.crossOrigin = "anonymous", s.addEventListener("load", this._imageLoaded, !1), s.addEventListener("error", function () { a.img = t, this._imageLoaded() }.bind(this), !1), s.src = r; var a = { img: s, assetData: e }; return a }, createImageData: function (e) { var r = i(e, this.assetsPath, this.path), s = createNS("image"); isSafari ? this.testImageLoaded(s) : s.addEventListener("load", this._imageLoaded, !1), s.addEventListener("error", function () { a.img = t, this._imageLoaded() }.bind(this), !1), s.setAttributeNS("http://www.w3.org/1999/xlink", "href", r), this._elementHelper.append ? this._elementHelper.append(s) : this._elementHelper.appendChild(s); var a = { img: s, assetData: e }; return a }, imageLoaded: e, footageLoaded: r, setCacheType: function (t, e) { "svg" === t ? (this._elementHelper = e, this._createImageData = this.createImageData.bind(this)) : this._createImageData = this.createImgData.bind(this) } }, n }(), featureSupport = function () { var t = { maskType: !0 }; return (/MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent) || /Edge\/\d./i.test(navigator.userAgent)) && (t.maskType = !1), t }(), filtersFactory = function () { var t = { createFilter: function (t, e) { var r = createNS("filter"); return r.setAttribute("id", t), !0 !== e && (r.setAttribute("filterUnits", "objectBoundingBox"), r.setAttribute("x", "0%"), r.setAttribute("y", "0%"), r.setAttribute("width", "100%"), r.setAttribute("height", "100%")), r }, createAlphaToLuminanceFilter: function () { var t = createNS("feColorMatrix"); return t.setAttribute("type", "matrix"), t.setAttribute("color-interpolation-filters", "sRGB"), t.setAttribute("values", "0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1"), t } }; return t }(); function TextAnimatorProperty(t, e, r) { this._isFirstFrame = !0, this._hasMaskedPath = !1, this._frameId = -1, this._textData = t, this._renderType = e, this._elem = r, this._animatorsData = createSizedArray(this._textData.a.length), this._pathData = {}, this._moreOptions = { alignment: {} }, this.renderedLetters = [], this.lettersChangedFlag = !1, this.initDynamicPropertyContainer(r) } function TextAnimatorDataProperty(t, e, r) { var i = { propType: !1 }, s = PropertyFactory.getProp, a = e.a; this.a = { r: a.r ? s(t, a.r, 0, degToRads, r) : i, rx: a.rx ? s(t, a.rx, 0, degToRads, r) : i, ry: a.ry ? s(t, a.ry, 0, degToRads, r) : i, sk: a.sk ? s(t, a.sk, 0, degToRads, r) : i, sa: a.sa ? s(t, a.sa, 0, degToRads, r) : i, s: a.s ? s(t, a.s, 1, .01, r) : i, a: a.a ? s(t, a.a, 1, 0, r) : i, o: a.o ? s(t, a.o, 0, .01, r) : i, p: a.p ? s(t, a.p, 1, 0, r) : i, sw: a.sw ? s(t, a.sw, 0, 0, r) : i, sc: a.sc ? s(t, a.sc, 1, 0, r) : i, fc: a.fc ? s(t, a.fc, 1, 0, r) : i, fh: a.fh ? s(t, a.fh, 0, 0, r) : i, fs: a.fs ? s(t, a.fs, 0, .01, r) : i, fb: a.fb ? s(t, a.fb, 0, .01, r) : i, t: a.t ? s(t, a.t, 0, 0, r) : i }, this.s = TextSelectorProp.getTextSelectorProp(t, e.s, r), this.s.t = e.s.t } function LetterProps(t, e, r, i, s, a) { this.o = t, this.sw = e, this.sc = r, this.fc = i, this.m = s, this.p = a, this._mdf = { o: !0, sw: !!e, sc: !!r, fc: !!i, m: !0, p: !0 } } function TextProperty(t, e) { this._frameId = initialDefaultFrame, this.pv = "", this.v = "", this.kf = !1, this._isFirstFrame = !0, this._mdf = !1, this.data = e, this.elem = t, this.comp = this.elem.comp, this.keysIndex = 0, this.canResize = !1, this.minimumFontSize = 1, this.effectsSequence = [], this.currentData = { ascent: 0, boxWidth: this.defaultBoxWidth, f: "", fStyle: "", fWeight: "", fc: "", j: "", justifyOffset: "", l: [], lh: 0, lineWidths: [], ls: "", of: "", s: "", sc: "", sw: 0, t: 0, tr: 0, sz: 0, ps: null, fillColorAnim: !1, strokeColorAnim: !1, strokeWidthAnim: !1, yOffset: 0, finalSize: 0, finalText: [], finalLineHeight: 0, __complete: !1 }, this.copyData(this.currentData, this.data.d.k[0].s), this.searchProperty() || this.completeTextData(this.currentData) } TextAnimatorProperty.prototype.searchProperties = function () { var t, e, r = this._textData.a.length, i = PropertyFactory.getProp; for (t = 0; t < r; t += 1)e = this._textData.a[t], this._animatorsData[t] = new TextAnimatorDataProperty(this._elem, e, this); this._textData.p && "m" in this._textData.p ? (this._pathData = { a: i(this._elem, this._textData.p.a, 0, 0, this), f: i(this._elem, this._textData.p.f, 0, 0, this), l: i(this._elem, this._textData.p.l, 0, 0, this), r: i(this._elem, this._textData.p.r, 0, 0, this), p: i(this._elem, this._textData.p.p, 0, 0, this), m: this._elem.maskManager.getMaskProperty(this._textData.p.m) }, this._hasMaskedPath = !0) : this._hasMaskedPath = !1, this._moreOptions.alignment = i(this._elem, this._textData.m.a, 1, 0, this) }, TextAnimatorProperty.prototype.getMeasures = function (t, e) { if (this.lettersChangedFlag = e, this._mdf || this._isFirstFrame || e || this._hasMaskedPath && this._pathData.m._mdf) { this._isFirstFrame = !1; var r, i, s, a, n, o, h, l, p, c, f, d, m, u, y, g, v, b, P, _ = this._moreOptions.alignment.v, E = this._animatorsData, S = this._textData, x = this.mHelper, A = this._renderType, w = this.renderedLetters.length, C = t.l; if (this._hasMaskedPath) { if (P = this._pathData.m, !this._pathData.n || this._pathData._mdf) { var k, T = P.v; for (this._pathData.r.v && (T = T.reverse()), n = { tLength: 0, segments: [] }, a = T._length - 1, g = 0, s = 0; s < a; s += 1)k = bez.buildBezierData(T.v[s], T.v[s + 1], [T.o[s][0] - T.v[s][0], T.o[s][1] - T.v[s][1]], [T.i[s + 1][0] - T.v[s + 1][0], T.i[s + 1][1] - T.v[s + 1][1]]), n.tLength += k.segmentLength, n.segments.push(k), g += k.segmentLength; s = a, P.v.c && (k = bez.buildBezierData(T.v[s], T.v[0], [T.o[s][0] - T.v[s][0], T.o[s][1] - T.v[s][1]], [T.i[0][0] - T.v[0][0], T.i[0][1] - T.v[0][1]]), n.tLength += k.segmentLength, n.segments.push(k), g += k.segmentLength), this._pathData.pi = n } if (n = this._pathData.pi, o = this._pathData.f.v, f = 0, c = 1, l = 0, p = !0, u = n.segments, o < 0 && P.v.c) for (n.tLength < Math.abs(o) && (o = -Math.abs(o) % n.tLength), c = (m = u[f = u.length - 1].points).length - 1; o < 0;)o += m[c].partialLength, (c -= 1) < 0 && (c = (m = u[f -= 1].points).length - 1); d = (m = u[f].points)[c - 1], y = (h = m[c]).partialLength } a = C.length, r = 0, i = 0; var D, M, F, I, R, V = 1.2 * t.finalSize * .714, O = !0; F = E.length; var L, B, $, z, G, N, j, H, q, W, U, Y, X = -1, K = o, J = f, Z = c, Q = -1, tt = "", et = this.defaultPropsArray; if (2 === t.j || 1 === t.j) { var rt = 0, it = 0, st = 2 === t.j ? -.5 : -1, at = 0, nt = !0; for (s = 0; s < a; s += 1)if (C[s].n) { for (rt && (rt += it); at < s;)C[at].animatorJustifyOffset = rt, at += 1; rt = 0, nt = !0 } else { for (M = 0; M < F; M += 1)(D = E[M].a).t.propType && (nt && 2 === t.j && (it += D.t.v * st), (R = E[M].s.getMult(C[s].anIndexes[M], S.a[M].s.totalChars)).length ? rt += D.t.v * R[0] * st : rt += D.t.v * R * st); nt = !1 } for (rt && (rt += it); at < s;)C[at].animatorJustifyOffset = rt, at += 1 } for (s = 0; s < a; s += 1) { if (x.reset(), z = 1, C[s].n) r = 0, i += t.yOffset, i += O ? 1 : 0, o = K, O = !1, this._hasMaskedPath && (c = Z, d = (m = u[f = J].points)[c - 1], y = (h = m[c]).partialLength, l = 0), tt = "", U = "", q = "", Y = "", et = this.defaultPropsArray; else { if (this._hasMaskedPath) { if (Q !== C[s].line) { switch (t.j) { case 1: o += g - t.lineWidths[C[s].line]; break; case 2: o += (g - t.lineWidths[C[s].line]) / 2 }Q = C[s].line } X !== C[s].ind && (C[X] && (o += C[X].extra), o += C[s].an / 2, X = C[s].ind), o += _[0] * C[s].an * .005; var ot = 0; for (M = 0; M < F; M += 1)(D = E[M].a).p.propType && ((R = E[M].s.getMult(C[s].anIndexes[M], S.a[M].s.totalChars)).length ? ot += D.p.v[0] * R[0] : ot += D.p.v[0] * R), D.a.propType && ((R = E[M].s.getMult(C[s].anIndexes[M], S.a[M].s.totalChars)).length ? ot += D.a.v[0] * R[0] : ot += D.a.v[0] * R); for (p = !0, this._pathData.a.v && (o = .5 * C[0].an + (g - this._pathData.f.v - .5 * C[0].an - .5 * C[C.length - 1].an) * X / (a - 1), o += this._pathData.f.v); p;)l + y >= o + ot || !m ? (v = (o + ot - l) / h.partialLength, B = d.point[0] + (h.point[0] - d.point[0]) * v, $ = d.point[1] + (h.point[1] - d.point[1]) * v, x.translate(-_[0] * C[s].an * .005, -_[1] * V * .01), p = !1) : m && (l += h.partialLength, (c += 1) >= m.length && (c = 0, u[f += 1] ? m = u[f].points : P.v.c ? (c = 0, m = u[f = 0].points) : (l -= h.partialLength, m = null)), m && (d = h, y = (h = m[c]).partialLength)); L = C[s].an / 2 - C[s].add, x.translate(-L, 0, 0) } else L = C[s].an / 2 - C[s].add, x.translate(-L, 0, 0), x.translate(-_[0] * C[s].an * .005, -_[1] * V * .01, 0); for (M = 0; M < F; M += 1)(D = E[M].a).t.propType && (R = E[M].s.getMult(C[s].anIndexes[M], S.a[M].s.totalChars), 0 === r && 0 === t.j || (this._hasMaskedPath ? R.length ? o += D.t.v * R[0] : o += D.t.v * R : R.length ? r += D.t.v * R[0] : r += D.t.v * R)); for (t.strokeWidthAnim && (N = t.sw || 0), t.strokeColorAnim && (G = t.sc ? [t.sc[0], t.sc[1], t.sc[2]] : [0, 0, 0]), t.fillColorAnim && t.fc && (j = [t.fc[0], t.fc[1], t.fc[2]]), M = 0; M < F; M += 1)(D = E[M].a).a.propType && ((R = E[M].s.getMult(C[s].anIndexes[M], S.a[M].s.totalChars)).length ? x.translate(-D.a.v[0] * R[0], -D.a.v[1] * R[1], D.a.v[2] * R[2]) : x.translate(-D.a.v[0] * R, -D.a.v[1] * R, D.a.v[2] * R)); for (M = 0; M < F; M += 1)(D = E[M].a).s.propType && ((R = E[M].s.getMult(C[s].anIndexes[M], S.a[M].s.totalChars)).length ? x.scale(1 + (D.s.v[0] - 1) * R[0], 1 + (D.s.v[1] - 1) * R[1], 1) : x.scale(1 + (D.s.v[0] - 1) * R, 1 + (D.s.v[1] - 1) * R, 1)); for (M = 0; M < F; M += 1) { if (D = E[M].a, R = E[M].s.getMult(C[s].anIndexes[M], S.a[M].s.totalChars), D.sk.propType && (R.length ? x.skewFromAxis(-D.sk.v * R[0], D.sa.v * R[1]) : x.skewFromAxis(-D.sk.v * R, D.sa.v * R)), D.r.propType && (R.length ? x.rotateZ(-D.r.v * R[2]) : x.rotateZ(-D.r.v * R)), D.ry.propType && (R.length ? x.rotateY(D.ry.v * R[1]) : x.rotateY(D.ry.v * R)), D.rx.propType && (R.length ? x.rotateX(D.rx.v * R[0]) : x.rotateX(D.rx.v * R)), D.o.propType && (R.length ? z += (D.o.v * R[0] - z) * R[0] : z += (D.o.v * R - z) * R), t.strokeWidthAnim && D.sw.propType && (R.length ? N += D.sw.v * R[0] : N += D.sw.v * R), t.strokeColorAnim && D.sc.propType) for (H = 0; H < 3; H += 1)R.length ? G[H] += (D.sc.v[H] - G[H]) * R[0] : G[H] += (D.sc.v[H] - G[H]) * R; if (t.fillColorAnim && t.fc) { if (D.fc.propType) for (H = 0; H < 3; H += 1)R.length ? j[H] += (D.fc.v[H] - j[H]) * R[0] : j[H] += (D.fc.v[H] - j[H]) * R; D.fh.propType && (j = R.length ? addHueToRGB(j, D.fh.v * R[0]) : addHueToRGB(j, D.fh.v * R)), D.fs.propType && (j = R.length ? addSaturationToRGB(j, D.fs.v * R[0]) : addSaturationToRGB(j, D.fs.v * R)), D.fb.propType && (j = R.length ? addBrightnessToRGB(j, D.fb.v * R[0]) : addBrightnessToRGB(j, D.fb.v * R)) } } for (M = 0; M < F; M += 1)(D = E[M].a).p.propType && (R = E[M].s.getMult(C[s].anIndexes[M], S.a[M].s.totalChars), this._hasMaskedPath ? R.length ? x.translate(0, D.p.v[1] * R[0], -D.p.v[2] * R[1]) : x.translate(0, D.p.v[1] * R, -D.p.v[2] * R) : R.length ? x.translate(D.p.v[0] * R[0], D.p.v[1] * R[1], -D.p.v[2] * R[2]) : x.translate(D.p.v[0] * R, D.p.v[1] * R, -D.p.v[2] * R)); if (t.strokeWidthAnim && (q = N < 0 ? 0 : N), t.strokeColorAnim && (W = "rgb(" + Math.round(255 * G[0]) + "," + Math.round(255 * G[1]) + "," + Math.round(255 * G[2]) + ")"), t.fillColorAnim && t.fc && (U = "rgb(" + Math.round(255 * j[0]) + "," + Math.round(255 * j[1]) + "," + Math.round(255 * j[2]) + ")"), this._hasMaskedPath) { if (x.translate(0, -t.ls), x.translate(0, _[1] * V * .01 + i, 0), this._pathData.p.v) { b = (h.point[1] - d.point[1]) / (h.point[0] - d.point[0]); var ht = 180 * Math.atan(b) / Math.PI; h.point[0] < d.point[0] && (ht += 180), x.rotate(-ht * Math.PI / 180) } x.translate(B, $, 0), o -= _[0] * C[s].an * .005, C[s + 1] && X !== C[s + 1].ind && (o += C[s].an / 2, o += .001 * t.tr * t.finalSize) } else { switch (x.translate(r, i, 0), t.ps && x.translate(t.ps[0], t.ps[1] + t.ascent, 0), t.j) { case 1: x.translate(C[s].animatorJustifyOffset + t.justifyOffset + (t.boxWidth - t.lineWidths[C[s].line]), 0, 0); break; case 2: x.translate(C[s].animatorJustifyOffset + t.justifyOffset + (t.boxWidth - t.lineWidths[C[s].line]) / 2, 0, 0) }x.translate(0, -t.ls), x.translate(L, 0, 0), x.translate(_[0] * C[s].an * .005, _[1] * V * .01, 0), r += C[s].l + .001 * t.tr * t.finalSize } "html" === A ? tt = x.toCSS() : "svg" === A ? tt = x.to2dCSS() : et = [x.props[0], x.props[1], x.props[2], x.props[3], x.props[4], x.props[5], x.props[6], x.props[7], x.props[8], x.props[9], x.props[10], x.props[11], x.props[12], x.props[13], x.props[14], x.props[15]], Y = z } w <= s ? (I = new LetterProps(Y, q, W, U, tt, et), this.renderedLetters.push(I), w += 1, this.lettersChangedFlag = !0) : (I = this.renderedLetters[s], this.lettersChangedFlag = I.update(Y, q, W, U, tt, et) || this.lettersChangedFlag) } } }, TextAnimatorProperty.prototype.getValue = function () { this._elem.globalData.frameId !== this._frameId && (this._frameId = this._elem.globalData.frameId, this.iterateDynamicProperties()) }, TextAnimatorProperty.prototype.mHelper = new Matrix, TextAnimatorProperty.prototype.defaultPropsArray = [], extendPrototype([DynamicPropertyContainer], TextAnimatorProperty), LetterProps.prototype.update = function (t, e, r, i, s, a) { this._mdf.o = !1, this._mdf.sw = !1, this._mdf.sc = !1, this._mdf.fc = !1, this._mdf.m = !1, this._mdf.p = !1; var n = !1; return this.o !== t && (this.o = t, this._mdf.o = !0, n = !0), this.sw !== e && (this.sw = e, this._mdf.sw = !0, n = !0), this.sc !== r && (this.sc = r, this._mdf.sc = !0, n = !0), this.fc !== i && (this.fc = i, this._mdf.fc = !0, n = !0), this.m !== s && (this.m = s, this._mdf.m = !0, n = !0), !a.length || this.p[0] === a[0] && this.p[1] === a[1] && this.p[4] === a[4] && this.p[5] === a[5] && this.p[12] === a[12] && this.p[13] === a[13] || (this.p = a, this._mdf.p = !0, n = !0), n }, TextProperty.prototype.defaultBoxWidth = [0, 0], TextProperty.prototype.copyData = function (t, e) { for (var r in e) Object.prototype.hasOwnProperty.call(e, r) && (t[r] = e[r]); return t }, TextProperty.prototype.setCurrentData = function (t) { t.__complete || this.completeTextData(t), this.currentData = t, this.currentData.boxWidth = this.currentData.boxWidth || this.defaultBoxWidth, this._mdf = !0 }, TextProperty.prototype.searchProperty = function () { return this.searchKeyframes() }, TextProperty.prototype.searchKeyframes = function () { return this.kf = this.data.d.k.length > 1, this.kf && this.addEffect(this.getKeyframeValue.bind(this)), this.kf }, TextProperty.prototype.addEffect = function (t) { this.effectsSequence.push(t), this.elem.addDynamicProperty(this) }, TextProperty.prototype.getValue = function (t) { if (this.elem.globalData.frameId !== this.frameId && this.effectsSequence.length || t) { this.currentData.t = this.data.d.k[this.keysIndex].s.t; var e = this.currentData, r = this.keysIndex; if (this.lock) this.setCurrentData(this.currentData); else { var i; this.lock = !0, this._mdf = !1; var s = this.effectsSequence.length, a = t || this.data.d.k[this.keysIndex].s; for (i = 0; i < s; i += 1)a = r !== this.keysIndex ? this.effectsSequence[i](a, a.t) : this.effectsSequence[i](this.currentData, a.t); e !== a && this.setCurrentData(a), this.v = this.currentData, this.pv = this.v, this.lock = !1, this.frameId = this.elem.globalData.frameId } } }, TextProperty.prototype.getKeyframeValue = function () { for (var t = this.data.d.k, e = this.elem.comp.renderedFrame, r = 0, i = t.length; r <= i - 1 && !(r === i - 1 || t[r + 1].t > e);)r += 1; return this.keysIndex !== r && (this.keysIndex = r), this.data.d.k[this.keysIndex].s }, TextProperty.prototype.buildFinalText = function (t) { for (var e, r, i = [], s = 0, a = t.length, n = !1; s < a;)e = t.charCodeAt(s), FontManager.isCombinedCharacter(e) ? i[i.length - 1] += t.charAt(s) : e >= 55296 && e <= 56319 ? (r = t.charCodeAt(s + 1)) >= 56320 && r <= 57343 ? (n || FontManager.isModifier(e, r) ? (i[i.length - 1] += t.substr(s, 2), n = !1) : i.push(t.substr(s, 2)), s += 1) : i.push(t.charAt(s)) : e > 56319 ? (r = t.charCodeAt(s + 1), FontManager.isZeroWidthJoiner(e, r) ? (n = !0, i[i.length - 1] += t.substr(s, 2), s += 1) : i.push(t.charAt(s))) : FontManager.isZeroWidthJoiner(e) ? (i[i.length - 1] += t.charAt(s), n = !0) : i.push(t.charAt(s)), s += 1; return i }, TextProperty.prototype.completeTextData = function (t) { t.__complete = !0; var e, r, i, s, a, n, o, h = this.elem.globalData.fontManager, l = this.data, p = [], c = 0, f = l.m.g, d = 0, m = 0, u = 0, y = [], g = 0, v = 0, b = h.getFontByName(t.f), P = 0, _ = getFontProperties(b); t.fWeight = _.weight, t.fStyle = _.style, t.finalSize = t.s, t.finalText = this.buildFinalText(t.t), r = t.finalText.length, t.finalLineHeight = t.lh; var E, S = t.tr / 1e3 * t.finalSize; if (t.sz) for (var x, A, w = !0, C = t.sz[0], k = t.sz[1]; w;) { x = 0, g = 0, r = (A = this.buildFinalText(t.t)).length, S = t.tr / 1e3 * t.finalSize; var T = -1; for (e = 0; e < r; e += 1)E = A[e].charCodeAt(0), i = !1, " " === A[e] ? T = e : 13 !== E && 3 !== E || (g = 0, i = !0, x += t.finalLineHeight || 1.2 * t.finalSize), h.chars ? (o = h.getCharData(A[e], b.fStyle, b.fFamily), P = i ? 0 : o.w * t.finalSize / 100) : P = h.measureText(A[e], t.f, t.finalSize), g + P > C && " " !== A[e] ? (-1 === T ? r += 1 : e = T, x += t.finalLineHeight || 1.2 * t.finalSize, A.splice(e, T === e ? 1 : 0, "\r"), T = -1, g = 0) : (g += P, g += S); x += b.ascent * t.finalSize / 100, this.canResize && t.finalSize > this.minimumFontSize && k < x ? (t.finalSize -= 1, t.finalLineHeight = t.finalSize * t.lh / t.s) : (t.finalText = A, r = t.finalText.length, w = !1) } g = -S, P = 0; var D, M = 0; for (e = 0; e < r; e += 1)if (i = !1, 13 === (E = (D = t.finalText[e]).charCodeAt(0)) || 3 === E ? (M = 0, y.push(g), v = g > v ? g : v, g = -2 * S, s = "", i = !0, u += 1) : s = D, h.chars ? (o = h.getCharData(D, b.fStyle, h.getFontByName(t.f).fFamily), P = i ? 0 : o.w * t.finalSize / 100) : P = h.measureText(s, t.f, t.finalSize), " " === D ? M += P + S : (g += P + S + M, M = 0), p.push({ l: P, an: P, add: d, n: i, anIndexes: [], val: s, line: u, animatorJustifyOffset: 0 }), 2 == f) { if (d += P, "" === s || " " === s || e === r - 1) { for ("" !== s && " " !== s || (d -= P); m <= e;)p[m].an = d, p[m].ind = c, p[m].extra = P, m += 1; c += 1, d = 0 } } else if (3 == f) { if (d += P, "" === s || e === r - 1) { for ("" === s && (d -= P); m <= e;)p[m].an = d, p[m].ind = c, p[m].extra = P, m += 1; d = 0, c += 1 } } else p[c].ind = c, p[c].extra = 0, c += 1; if (t.l = p, v = g > v ? g : v, y.push(g), t.sz) t.boxWidth = t.sz[0], t.justifyOffset = 0; else switch (t.boxWidth = v, t.j) { case 1: t.justifyOffset = -t.boxWidth; break; case 2: t.justifyOffset = -t.boxWidth / 2; break; default: t.justifyOffset = 0 }t.lineWidths = y; var F, I, R, V, O = l.a; n = O.length; var L = []; for (a = 0; a < n; a += 1) { for ((F = O[a]).a.sc && (t.strokeColorAnim = !0), F.a.sw && (t.strokeWidthAnim = !0), (F.a.fc || F.a.fh || F.a.fs || F.a.fb) && (t.fillColorAnim = !0), V = 0, R = F.s.b, e = 0; e < r; e += 1)(I = p[e]).anIndexes[a] = V, (1 == R && "" !== I.val || 2 == R && "" !== I.val && " " !== I.val || 3 == R && (I.n || " " == I.val || e == r - 1) || 4 == R && (I.n || e == r - 1)) && (1 === F.s.rn && L.push(V), V += 1); l.a[a].s.totalChars = V; var B, $ = -1; if (1 === F.s.rn) for (e = 0; e < r; e += 1)$ != (I = p[e]).anIndexes[a] && ($ = I.anIndexes[a], B = L.splice(Math.floor(Math.random() * L.length), 1)[0]), I.anIndexes[a] = B } t.yOffset = t.finalLineHeight || 1.2 * t.finalSize, t.ls = t.ls || 0, t.ascent = b.ascent * t.finalSize / 100 }, TextProperty.prototype.updateDocumentData = function (t, e) { e = void 0 === e ? this.keysIndex : e; var r = this.copyData({}, this.data.d.k[e].s); r = this.copyData(r, t), this.data.d.k[e].s = r, this.recalculate(e), this.elem.addDynamicProperty(this) }, TextProperty.prototype.recalculate = function (t) { var e = this.data.d.k[t].s; e.__complete = !1, this.keysIndex = 0, this._isFirstFrame = !0, this.getValue(e) }, TextProperty.prototype.canResizeFont = function (t) { this.canResize = t, this.recalculate(this.keysIndex), this.elem.addDynamicProperty(this) }, TextProperty.prototype.setMinimumFontSize = function (t) { this.minimumFontSize = Math.floor(t) || 1, this.recalculate(this.keysIndex), this.elem.addDynamicProperty(this) }; var TextSelectorProp = function () { var t = Math.max, e = Math.min, r = Math.floor; function i(t, e) { this._currentTextLength = -1, this.k = !1, this.data = e, this.elem = t, this.comp = t.comp, this.finalS = 0, this.finalE = 0, this.initDynamicPropertyContainer(t), this.s = PropertyFactory.getProp(t, e.s || { k: 0 }, 0, 0, this), this.e = "e" in e ? PropertyFactory.getProp(t, e.e, 0, 0, this) : { v: 100 }, this.o = PropertyFactory.getProp(t, e.o || { k: 0 }, 0, 0, this), this.xe = PropertyFactory.getProp(t, e.xe || { k: 0 }, 0, 0, this), this.ne = PropertyFactory.getProp(t, e.ne || { k: 0 }, 0, 0, this), this.sm = PropertyFactory.getProp(t, e.sm || { k: 100 }, 0, 0, this), this.a = PropertyFactory.getProp(t, e.a, 0, .01, this), this.dynamicProperties.length || this.getValue() } return i.prototype = { getMult: function (i) { this._currentTextLength !== this.elem.textProperty.currentData.l.length && this.getValue(); var s = 0, a = 0, n = 1, o = 1; this.ne.v > 0 ? s = this.ne.v / 100 : a = -this.ne.v / 100, this.xe.v > 0 ? n = 1 - this.xe.v / 100 : o = 1 + this.xe.v / 100; var h = BezierFactory.getBezierEasing(s, a, n, o).get, l = 0, p = this.finalS, c = this.finalE, f = this.data.sh; if (2 === f) l = h(l = c === p ? i >= c ? 1 : 0 : t(0, e(.5 / (c - p) + (i - p) / (c - p), 1))); else if (3 === f) l = h(l = c === p ? i >= c ? 0 : 1 : 1 - t(0, e(.5 / (c - p) + (i - p) / (c - p), 1))); else if (4 === f) c === p ? l = 0 : (l = t(0, e(.5 / (c - p) + (i - p) / (c - p), 1))) < .5 ? l *= 2 : l = 1 - 2 * (l - .5), l = h(l); else if (5 === f) { if (c === p) l = 0; else { var d = c - p, m = -d / 2 + (i = e(t(0, i + .5 - p), c - p)), u = d / 2; l = Math.sqrt(1 - m * m / (u * u)) } l = h(l) } else 6 === f ? (c === p ? l = 0 : (i = e(t(0, i + .5 - p), c - p), l = (1 + Math.cos(Math.PI + 2 * Math.PI * i / (c - p))) / 2), l = h(l)) : (i >= r(p) && (l = t(0, e(i - p < 0 ? e(c, 1) - (p - i) : c - i, 1))), l = h(l)); if (100 !== this.sm.v) { var y = .01 * this.sm.v; 0 === y && (y = 1e-8); var g = .5 - .5 * y; l < g ? l = 0 : (l = (l - g) / y) > 1 && (l = 1) } return l * this.a.v }, getValue: function (t) { this.iterateDynamicProperties(), this._mdf = t || this._mdf, this._currentTextLength = this.elem.textProperty.currentData.l.length || 0, t && 2 === this.data.r && (this.e.v = this._currentTextLength); var e = 2 === this.data.r ? 1 : 100 / this.data.totalChars, r = this.o.v / e, i = this.s.v / e + r, s = this.e.v / e + r; if (i > s) { var a = i; i = s, s = a } this.finalS = i, this.finalE = s } }, extendPrototype([DynamicPropertyContainer], i), { getTextSelectorProp: function (t, e, r) { return new i(t, e, r) } } }(), poolFactory = function (t, e, r) { var i = 0, s = t, a = createSizedArray(s); return { newElement: function () { return i ? a[i -= 1] : e() }, release: function (t) { i === s && (a = pooling.double(a), s *= 2), r && r(t), a[i] = t, i += 1 } } }, pooling = { double: function (t) { return t.concat(createSizedArray(t.length)) } }, pointPool = poolFactory(8, (function () { return createTypedArray("float32", 2) })), shapePool = (factory = poolFactory(4, (function () { return new ShapePath }), (function (t) { var e, r = t._length; for (e = 0; e < r; e += 1)pointPool.release(t.v[e]), pointPool.release(t.i[e]), pointPool.release(t.o[e]), t.v[e] = null, t.i[e] = null, t.o[e] = null; t._length = 0, t.c = !1 })), factory.clone = function (t) { var e, r = factory.newElement(), i = void 0 === t._length ? t.v.length : t._length; for (r.setLength(i), r.c = t.c, e = 0; e < i; e += 1)r.setTripleAt(t.v[e][0], t.v[e][1], t.o[e][0], t.o[e][1], t.i[e][0], t.i[e][1], e); return r }, factory), factory, shapeCollectionPool = function () { var t = { newShapeCollection: function () { return e ? i[e -= 1] : new ShapeCollection }, release: function (t) { var s, a = t._length; for (s = 0; s < a; s += 1)shapePool.release(t.shapes[s]); t._length = 0, e === r && (i = pooling.double(i), r *= 2), i[e] = t, e += 1 } }, e = 0, r = 4, i = createSizedArray(r); return t }(), segmentsLengthPool = poolFactory(8, (function () { return { lengths: [], totalLength: 0 } }), (function (t) { var e, r = t.lengths.length; for (e = 0; e < r; e += 1)bezierLengthPool.release(t.lengths[e]); t.lengths.length = 0 })), bezierLengthPool = poolFactory(8, (function () { return { addedLength: 0, percents: createTypedArray("float32", defaultCurveSegments), lengths: createTypedArray("float32", defaultCurveSegments) } })), markerParser = function () { function t(t) { for (var e, r = t.split("\r\n"), i = {}, s = 0, a = 0; a < r.length; a += 1)2 === (e = r[a].split(":")).length && (i[e[0]] = e[1].trim(), s += 1); if (0 === s) throw new Error; return i } return function (e) { for (var r = [], i = 0; i < e.length; i += 1) { var s = e[i], a = { time: s.tm, duration: s.dr }; try { a.payload = JSON.parse(e[i].cm) } catch (r) { try { a.payload = t(e[i].cm) } catch (t) { a.payload = { name: e[i] } } } r.push(a) } return r } }(); function BaseRenderer() { } function SVGRenderer(t, e) { this.animationItem = t, this.layers = null, this.renderedFrame = -1, this.svgElement = createNS("svg"); var r = ""; if (e && e.title) { var i = createNS("title"), s = createElementID(); i.setAttribute("id", s), i.textContent = e.title, this.svgElement.appendChild(i), r += s } if (e && e.description) { var a = createNS("desc"), n = createElementID(); a.setAttribute("id", n), a.textContent = e.description, this.svgElement.appendChild(a), r += " " + n } r && this.svgElement.setAttribute("aria-labelledby", r); var o = createNS("defs"); this.svgElement.appendChild(o); var h = createNS("g"); this.svgElement.appendChild(h), this.layerElement = h, this.renderConfig = { preserveAspectRatio: e && e.preserveAspectRatio || "xMidYMid meet", imagePreserveAspectRatio: e && e.imagePreserveAspectRatio || "xMidYMid slice", contentVisibility: e && e.contentVisibility || "visible", progressiveLoad: e && e.progressiveLoad || !1, hideOnTransparent: !(e && !1 === e.hideOnTransparent), viewBoxOnly: e && e.viewBoxOnly || !1, viewBoxSize: e && e.viewBoxSize || !1, className: e && e.className || "", id: e && e.id || "", focusable: e && e.focusable, filterSize: { width: e && e.filterSize && e.filterSize.width || "100%", height: e && e.filterSize && e.filterSize.height || "100%", x: e && e.filterSize && e.filterSize.x || "0%", y: e && e.filterSize && e.filterSize.y || "0%" } }, this.globalData = { _mdf: !1, frameNum: -1, defs: o, renderConfig: this.renderConfig }, this.elements = [], this.pendingElements = [], this.destroyed = !1, this.rendererType = "svg" } function CanvasRenderer(t, e) { this.animationItem = t, this.renderConfig = { clearCanvas: !e || void 0 === e.clearCanvas || e.clearCanvas, context: e && e.context || null, progressiveLoad: e && e.progressiveLoad || !1, preserveAspectRatio: e && e.preserveAspectRatio || "xMidYMid meet", imagePreserveAspectRatio: e && e.imagePreserveAspectRatio || "xMidYMid slice", contentVisibility: e && e.contentVisibility || "visible", className: e && e.className || "", id: e && e.id || "" }, this.renderConfig.dpr = e && e.dpr || 1, this.animationItem.wrapper && (this.renderConfig.dpr = e && e.dpr || window.devicePixelRatio || 1), this.renderedFrame = -1, this.globalData = { frameNum: -1, _mdf: !1, renderConfig: this.renderConfig, currentGlobalAlpha: -1 }, this.contextData = new CVContextData, this.elements = [], this.pendingElements = [], this.transformMat = new Matrix, this.completeLayers = !1, this.rendererType = "canvas" } function HybridRenderer(t, e) { this.animationItem = t, this.layers = null, this.renderedFrame = -1, this.renderConfig = { className: e && e.className || "", imagePreserveAspectRatio: e && e.imagePreserveAspectRatio || "xMidYMid slice", hideOnTransparent: !(e && !1 === e.hideOnTransparent), filterSize: { width: e && e.filterSize && e.filterSize.width || "400%", height: e && e.filterSize && e.filterSize.height || "400%", x: e && e.filterSize && e.filterSize.x || "-100%", y: e && e.filterSize && e.filterSize.y || "-100%" } }, this.globalData = { _mdf: !1, frameNum: -1, renderConfig: this.renderConfig }, this.pendingElements = [], this.elements = [], this.threeDElements = [], this.destroyed = !1, this.camera = null, this.supports3d = !0, this.rendererType = "html" } function MaskElement(t, e, r) { this.data = t, this.element = e, this.globalData = r, this.storedData = [], this.masksProperties = this.data.masksProperties || [], this.maskElement = null; var i, s, a = this.globalData.defs, n = this.masksProperties ? this.masksProperties.length : 0; this.viewData = createSizedArray(n), this.solidPath = ""; var o, h, l, p, c, f, d = this.masksProperties, m = 0, u = [], y = createElementID(), g = "clipPath", v = "clip-path"; for (i = 0; i < n; i += 1)if (("a" !== d[i].mode && "n" !== d[i].mode || d[i].inv || 100 !== d[i].o.k || d[i].o.x) && (g = "mask", v = "mask"), "s" !== d[i].mode && "i" !== d[i].mode || 0 !== m ? l = null : ((l = createNS("rect")).setAttribute("fill", "#ffffff"), l.setAttribute("width", this.element.comp.data.w || 0), l.setAttribute("height", this.element.comp.data.h || 0), u.push(l)), s = createNS("path"), "n" === d[i].mode) this.viewData[i] = { op: PropertyFactory.getProp(this.element, d[i].o, 0, .01, this.element), prop: ShapePropertyFactory.getShapeProp(this.element, d[i], 3), elem: s, lastPath: "" }, a.appendChild(s); else { var b; if (m += 1, s.setAttribute("fill", "s" === d[i].mode ? "#000000" : "#ffffff"), s.setAttribute("clip-rule", "nonzero"), 0 !== d[i].x.k ? (g = "mask", v = "mask", f = PropertyFactory.getProp(this.element, d[i].x, 0, null, this.element), b = createElementID(), (p = createNS("filter")).setAttribute("id", b), (c = createNS("feMorphology")).setAttribute("operator", "erode"), c.setAttribute("in", "SourceGraphic"), c.setAttribute("radius", "0"), p.appendChild(c), a.appendChild(p), s.setAttribute("stroke", "s" === d[i].mode ? "#000000" : "#ffffff")) : (c = null, f = null), this.storedData[i] = { elem: s, x: f, expan: c, lastPath: "", lastOperator: "", filterId: b, lastRadius: 0 }, "i" === d[i].mode) { h = u.length; var P = createNS("g"); for (o = 0; o < h; o += 1)P.appendChild(u[o]); var _ = createNS("mask"); _.setAttribute("mask-type", "alpha"), _.setAttribute("id", y + "_" + m), _.appendChild(s), a.appendChild(_), P.setAttribute("mask", "url(" + locationHref + "#" + y + "_" + m + ")"), u.length = 0, u.push(P) } else u.push(s); d[i].inv && !this.solidPath && (this.solidPath = this.createLayerSolidPath()), this.viewData[i] = { elem: s, lastPath: "", op: PropertyFactory.getProp(this.element, d[i].o, 0, .01, this.element), prop: ShapePropertyFactory.getShapeProp(this.element, d[i], 3), invRect: l }, this.viewData[i].prop.k || this.drawPath(d[i], this.viewData[i].prop.v, this.viewData[i]) } for (this.maskElement = createNS(g), n = u.length, i = 0; i < n; i += 1)this.maskElement.appendChild(u[i]); m > 0 && (this.maskElement.setAttribute("id", y), this.element.maskedElement.setAttribute(v, "url(" + locationHref + "#" + y + ")"), a.appendChild(this.maskElement)), this.viewData.length && this.element.addRenderableComponent(this) } function HierarchyElement() { } function FrameElement() { } function TransformElement() { } function RenderableElement() { } function RenderableDOMElement() { } function ProcessedElement(t, e) { this.elem = t, this.pos = e } function SVGStyleData(t, e) { this.data = t, this.type = t.ty, this.d = "", this.lvl = e, this._mdf = !1, this.closed = !0 === t.hd, this.pElem = createNS("path"), this.msElem = null } function SVGShapeData(t, e, r) { this.caches = [], this.styles = [], this.transformers = t, this.lStr = "", this.sh = r, this.lvl = e, this._isAnimated = !!r.k; for (var i = 0, s = t.length; i < s;) { if (t[i].mProps.dynamicProperties.length) { this._isAnimated = !0; break } i += 1 } } function SVGTransformData(t, e, r) { this.transform = { mProps: t, op: e, container: r }, this.elements = [], this._isAnimated = this.transform.mProps.dynamicProperties.length || this.transform.op.effectsSequence.length } function SVGStrokeStyleData(t, e, r) { this.initDynamicPropertyContainer(t), this.getValue = this.iterateDynamicProperties, this.o = PropertyFactory.getProp(t, e.o, 0, .01, this), this.w = PropertyFactory.getProp(t, e.w, 0, null, this), this.d = new DashProperty(t, e.d || {}, "svg", this), this.c = PropertyFactory.getProp(t, e.c, 1, 255, this), this.style = r, this._isAnimated = !!this._isAnimated } function SVGFillStyleData(t, e, r) { this.initDynamicPropertyContainer(t), this.getValue = this.iterateDynamicProperties, this.o = PropertyFactory.getProp(t, e.o, 0, .01, this), this.c = PropertyFactory.getProp(t, e.c, 1, 255, this), this.style = r } function SVGGradientFillStyleData(t, e, r) { this.initDynamicPropertyContainer(t), this.getValue = this.iterateDynamicProperties, this.initGradientData(t, e, r) } function SVGGradientStrokeStyleData(t, e, r) { this.initDynamicPropertyContainer(t), this.getValue = this.iterateDynamicProperties, this.w = PropertyFactory.getProp(t, e.w, 0, null, this), this.d = new DashProperty(t, e.d || {}, "svg", this), this.initGradientData(t, e, r), this._isAnimated = !!this._isAnimated } function ShapeGroupData() { this.it = [], this.prevViewData = [], this.gr = createNS("g") } BaseRenderer.prototype.checkLayers = function (t) { var e, r, i = this.layers.length; for (this.completeLayers = !0, e = i - 1; e >= 0; e -= 1)this.elements[e] || (r = this.layers[e]).ip - r.st <= t - this.layers[e].st && r.op - r.st > t - this.layers[e].st && this.buildItem(e), this.completeLayers = !!this.elements[e] && this.completeLayers; this.checkPendingElements() }, BaseRenderer.prototype.createItem = function (t) { switch (t.ty) { case 2: return this.createImage(t); case 0: return this.createComp(t); case 1: return this.createSolid(t); case 3: default: return this.createNull(t); case 4: return this.createShape(t); case 5: return this.createText(t); case 6: return this.createAudio(t); case 13: return this.createCamera(t); case 15: return this.createFootage(t) } }, BaseRenderer.prototype.createCamera = function () { throw new Error("You're using a 3d camera. Try the html renderer.") }, BaseRenderer.prototype.createAudio = function (t) { return new AudioElement(t, this.globalData, this) }, BaseRenderer.prototype.createFootage = function (t) { return new FootageElement(t, this.globalData, this) }, BaseRenderer.prototype.buildAllItems = function () { var t, e = this.layers.length; for (t = 0; t < e; t += 1)this.buildItem(t); this.checkPendingElements() }, BaseRenderer.prototype.includeLayers = function (t) { var e; this.completeLayers = !1; var r, i = t.length, s = this.layers.length; for (e = 0; e < i; e += 1)for (r = 0; r < s;) { if (this.layers[r].id === t[e].id) { this.layers[r] = t[e]; break } r += 1 } }, BaseRenderer.prototype.setProjectInterface = function (t) { this.globalData.projectInterface = t }, BaseRenderer.prototype.initItems = function () { this.globalData.progressiveLoad || this.buildAllItems() }, BaseRenderer.prototype.buildElementParenting = function (t, e, r) { for (var i = this.elements, s = this.layers, a = 0, n = s.length; a < n;)s[a].ind == e && (i[a] && !0 !== i[a] ? (r.push(i[a]), i[a].setAsParent(), void 0 !== s[a].parent ? this.buildElementParenting(t, s[a].parent, r) : t.setHierarchy(r)) : (this.buildItem(a), this.addPendingElement(t))), a += 1 }, BaseRenderer.prototype.addPendingElement = function (t) { this.pendingElements.push(t) }, BaseRenderer.prototype.searchExtraCompositions = function (t) { var e, r = t.length; for (e = 0; e < r; e += 1)if (t[e].xt) { var i = this.createComp(t[e]); i.initExpressions(), this.globalData.projectInterface.registerComposition(i) } }, BaseRenderer.prototype.setupGlobalData = function (t, e) { this.globalData.fontManager = new FontManager, this.globalData.fontManager.addChars(t.chars), this.globalData.fontManager.addFonts(t.fonts, e), this.globalData.getAssetData = this.animationItem.getAssetData.bind(this.animationItem), this.globalData.getAssetsPath = this.animationItem.getAssetsPath.bind(this.animationItem), this.globalData.imageLoader = this.animationItem.imagePreloader, this.globalData.audioController = this.animationItem.audioController, this.globalData.frameId = 0, this.globalData.frameRate = t.fr, this.globalData.nm = t.nm, this.globalData.compSize = { w: t.w, h: t.h } }, extendPrototype([BaseRenderer], SVGRenderer), SVGRenderer.prototype.createNull = function (t) { return new NullElement(t, this.globalData, this) }, SVGRenderer.prototype.createShape = function (t) { return new SVGShapeElement(t, this.globalData, this) }, SVGRenderer.prototype.createText = function (t) { return new SVGTextLottieElement(t, this.globalData, this) }, SVGRenderer.prototype.createImage = function (t) { return new IImageElement(t, this.globalData, this) }, SVGRenderer.prototype.createComp = function (t) { return new SVGCompElement(t, this.globalData, this) }, SVGRenderer.prototype.createSolid = function (t) { return new ISolidElement(t, this.globalData, this) }, SVGRenderer.prototype.configAnimation = function (t) { this.svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg"), this.renderConfig.viewBoxSize ? this.svgElement.setAttribute("viewBox", this.renderConfig.viewBoxSize) : this.svgElement.setAttribute("viewBox", "0 0 " + t.w + " " + t.h), this.renderConfig.viewBoxOnly || (this.svgElement.setAttribute("width", t.w), this.svgElement.setAttribute("height", t.h), this.svgElement.style.width = "100%", this.svgElement.style.height = "100%", this.svgElement.style.transform = "translate3d(0,0,0)", this.svgElement.style.contentVisibility = this.renderConfig.contentVisibility), this.renderConfig.className && this.svgElement.setAttribute("class", this.renderConfig.className), this.renderConfig.id && this.svgElement.setAttribute("id", this.renderConfig.id), void 0 !== this.renderConfig.focusable && this.svgElement.setAttribute("focusable", this.renderConfig.focusable), this.svgElement.setAttribute("preserveAspectRatio", this.renderConfig.preserveAspectRatio), this.animationItem.wrapper.appendChild(this.svgElement); var e = this.globalData.defs; this.setupGlobalData(t, e), this.globalData.progressiveLoad = this.renderConfig.progressiveLoad, this.data = t; var r = createNS("clipPath"), i = createNS("rect"); i.setAttribute("width", t.w), i.setAttribute("height", t.h), i.setAttribute("x", 0), i.setAttribute("y", 0); var s = createElementID(); r.setAttribute("id", s), r.appendChild(i), this.layerElement.setAttribute("clip-path", "url(" + locationHref + "#" + s + ")"), e.appendChild(r), this.layers = t.layers, this.elements = createSizedArray(t.layers.length) }, SVGRenderer.prototype.destroy = function () { var t; this.animationItem.wrapper && (this.animationItem.wrapper.innerText = ""), this.layerElement = null, this.globalData.defs = null; var e = this.layers ? this.layers.length : 0; for (t = 0; t < e; t += 1)this.elements[t] && this.elements[t].destroy(); this.elements.length = 0, this.destroyed = !0, this.animationItem = null }, SVGRenderer.prototype.updateContainerSize = function () { }, SVGRenderer.prototype.buildItem = function (t) { var e = this.elements; if (!e[t] && 99 !== this.layers[t].ty) { e[t] = !0; var r = this.createItem(this.layers[t]); e[t] = r, expressionsPlugin && (0 === this.layers[t].ty && this.globalData.projectInterface.registerComposition(r), r.initExpressions()), this.appendElementInPos(r, t), this.layers[t].tt && (this.elements[t - 1] && !0 !== this.elements[t - 1] ? r.setMatte(e[t - 1].layerId) : (this.buildItem(t - 1), this.addPendingElement(r))) } }, SVGRenderer.prototype.checkPendingElements = function () { for (; this.pendingElements.length;) { var t = this.pendingElements.pop(); if (t.checkParenting(), t.data.tt) for (var e = 0, r = this.elements.length; e < r;) { if (this.elements[e] === t) { t.setMatte(this.elements[e - 1].layerId); break } e += 1 } } }, SVGRenderer.prototype.renderFrame = function (t) { if (this.renderedFrame !== t && !this.destroyed) { var e; null === t ? t = this.renderedFrame : this.renderedFrame = t, this.globalData.frameNum = t, this.globalData.frameId += 1, this.globalData.projectInterface.currentFrame = t, this.globalData._mdf = !1; var r = this.layers.length; for (this.completeLayers || this.checkLayers(t), e = r - 1; e >= 0; e -= 1)(this.completeLayers || this.elements[e]) && this.elements[e].prepareFrame(t - this.layers[e].st); if (this.globalData._mdf) for (e = 0; e < r; e += 1)(this.completeLayers || this.elements[e]) && this.elements[e].renderFrame() } }, SVGRenderer.prototype.appendElementInPos = function (t, e) { var r = t.getBaseElement(); if (r) { for (var i, s = 0; s < e;)this.elements[s] && !0 !== this.elements[s] && this.elements[s].getBaseElement() && (i = this.elements[s].getBaseElement()), s += 1; i ? this.layerElement.insertBefore(r, i) : this.layerElement.appendChild(r) } }, SVGRenderer.prototype.hide = function () { this.layerElement.style.display = "none" }, SVGRenderer.prototype.show = function () { this.layerElement.style.display = "block" }, extendPrototype([BaseRenderer], CanvasRenderer), CanvasRenderer.prototype.createShape = function (t) { return new CVShapeElement(t, this.globalData, this) }, CanvasRenderer.prototype.createText = function (t) { return new CVTextElement(t, this.globalData, this) }, CanvasRenderer.prototype.createImage = function (t) { return new CVImageElement(t, this.globalData, this) }, CanvasRenderer.prototype.createComp = function (t) { return new CVCompElement(t, this.globalData, this) }, CanvasRenderer.prototype.createSolid = function (t) { return new CVSolidElement(t, this.globalData, this) }, CanvasRenderer.prototype.createNull = SVGRenderer.prototype.createNull, CanvasRenderer.prototype.ctxTransform = function (t) { if (1 !== t[0] || 0 !== t[1] || 0 !== t[4] || 1 !== t[5] || 0 !== t[12] || 0 !== t[13]) if (this.renderConfig.clearCanvas) { this.transformMat.cloneFromProps(t); var e = this.contextData.cTr.props; this.transformMat.transform(e[0], e[1], e[2], e[3], e[4], e[5], e[6], e[7], e[8], e[9], e[10], e[11], e[12], e[13], e[14], e[15]), this.contextData.cTr.cloneFromProps(this.transformMat.props); var r = this.contextData.cTr.props; this.canvasContext.setTransform(r[0], r[1], r[4], r[5], r[12], r[13]) } else this.canvasContext.transform(t[0], t[1], t[4], t[5], t[12], t[13]) }, CanvasRenderer.prototype.ctxOpacity = function (t) { if (!this.renderConfig.clearCanvas) return this.canvasContext.globalAlpha *= t < 0 ? 0 : t, void (this.globalData.currentGlobalAlpha = this.contextData.cO); this.contextData.cO *= t < 0 ? 0 : t, this.globalData.currentGlobalAlpha !== this.contextData.cO && (this.canvasContext.globalAlpha = this.contextData.cO, this.globalData.currentGlobalAlpha = this.contextData.cO) }, CanvasRenderer.prototype.reset = function () { this.renderConfig.clearCanvas ? this.contextData.reset() : this.canvasContext.restore() }, CanvasRenderer.prototype.save = function (t) { if (this.renderConfig.clearCanvas) { t && this.canvasContext.save(); var e, r = this.contextData.cTr.props; this.contextData._length <= this.contextData.cArrPos && this.contextData.duplicate(); var i = this.contextData.saved[this.contextData.cArrPos]; for (e = 0; e < 16; e += 1)i[e] = r[e]; this.contextData.savedOp[this.contextData.cArrPos] = this.contextData.cO, this.contextData.cArrPos += 1 } else this.canvasContext.save() }, CanvasRenderer.prototype.restore = function (t) { if (this.renderConfig.clearCanvas) { t && (this.canvasContext.restore(), this.globalData.blendMode = "source-over"), this.contextData.cArrPos -= 1; var e, r = this.contextData.saved[this.contextData.cArrPos], i = this.contextData.cTr.props; for (e = 0; e < 16; e += 1)i[e] = r[e]; this.canvasContext.setTransform(r[0], r[1], r[4], r[5], r[12], r[13]), r = this.contextData.savedOp[this.contextData.cArrPos], this.contextData.cO = r, this.globalData.currentGlobalAlpha !== r && (this.canvasContext.globalAlpha = r, this.globalData.currentGlobalAlpha = r) } else this.canvasContext.restore() }, CanvasRenderer.prototype.configAnimation = function (t) { if (this.animationItem.wrapper) { this.animationItem.container = createTag("canvas"); var e = this.animationItem.container.style; e.width = "100%", e.height = "100%"; var r = "0px 0px 0px"; e.transformOrigin = r, e.mozTransformOrigin = r, e.webkitTransformOrigin = r, e["-webkit-transform"] = r, e.contentVisibility = this.renderConfig.contentVisibility, this.animationItem.wrapper.appendChild(this.animationItem.container), this.canvasContext = this.animationItem.container.getContext("2d"), this.renderConfig.className && this.animationItem.container.setAttribute("class", this.renderConfig.className), this.renderConfig.id && this.animationItem.container.setAttribute("id", this.renderConfig.id) } else this.canvasContext = this.renderConfig.context; this.data = t, this.layers = t.layers, this.transformCanvas = { w: t.w, h: t.h, sx: 0, sy: 0, tx: 0, ty: 0 }, this.setupGlobalData(t, document.body), this.globalData.canvasContext = this.canvasContext, this.globalData.renderer = this, this.globalData.isDashed = !1, this.globalData.progressiveLoad = this.renderConfig.progressiveLoad, this.globalData.transformCanvas = this.transformCanvas, this.elements = createSizedArray(t.layers.length), this.updateContainerSize() }, CanvasRenderer.prototype.updateContainerSize = function () { var t, e, r, i; if (this.reset(), this.animationItem.wrapper && this.animationItem.container ? (t = this.animationItem.wrapper.offsetWidth, e = this.animationItem.wrapper.offsetHeight, this.animationItem.container.setAttribute("width", t * this.renderConfig.dpr), this.animationItem.container.setAttribute("height", e * this.renderConfig.dpr)) : (t = this.canvasContext.canvas.width * this.renderConfig.dpr, e = this.canvasContext.canvas.height * this.renderConfig.dpr), -1 !== this.renderConfig.preserveAspectRatio.indexOf("meet") || -1 !== this.renderConfig.preserveAspectRatio.indexOf("slice")) { var s = this.renderConfig.preserveAspectRatio.split(" "), a = s[1] || "meet", n = s[0] || "xMidYMid", o = n.substr(0, 4), h = n.substr(4); r = t / e, (i = this.transformCanvas.w / this.transformCanvas.h) > r && "meet" === a || i < r && "slice" === a ? (this.transformCanvas.sx = t / (this.transformCanvas.w / this.renderConfig.dpr), this.transformCanvas.sy = t / (this.transformCanvas.w / this.renderConfig.dpr)) : (this.transformCanvas.sx = e / (this.transformCanvas.h / this.renderConfig.dpr), this.transformCanvas.sy = e / (this.transformCanvas.h / this.renderConfig.dpr)), this.transformCanvas.tx = "xMid" === o && (i < r && "meet" === a || i > r && "slice" === a) ? (t - this.transformCanvas.w * (e / this.transformCanvas.h)) / 2 * this.renderConfig.dpr : "xMax" === o && (i < r && "meet" === a || i > r && "slice" === a) ? (t - this.transformCanvas.w * (e / this.transformCanvas.h)) * this.renderConfig.dpr : 0, this.transformCanvas.ty = "YMid" === h && (i > r && "meet" === a || i < r && "slice" === a) ? (e - this.transformCanvas.h * (t / this.transformCanvas.w)) / 2 * this.renderConfig.dpr : "YMax" === h && (i > r && "meet" === a || i < r && "slice" === a) ? (e - this.transformCanvas.h * (t / this.transformCanvas.w)) * this.renderConfig.dpr : 0 } else "none" === this.renderConfig.preserveAspectRatio ? (this.transformCanvas.sx = t / (this.transformCanvas.w / this.renderConfig.dpr), this.transformCanvas.sy = e / (this.transformCanvas.h / this.renderConfig.dpr), this.transformCanvas.tx = 0, this.transformCanvas.ty = 0) : (this.transformCanvas.sx = this.renderConfig.dpr, this.transformCanvas.sy = this.renderConfig.dpr, this.transformCanvas.tx = 0, this.transformCanvas.ty = 0); this.transformCanvas.props = [this.transformCanvas.sx, 0, 0, 0, 0, this.transformCanvas.sy, 0, 0, 0, 0, 1, 0, this.transformCanvas.tx, this.transformCanvas.ty, 0, 1], this.ctxTransform(this.transformCanvas.props), this.canvasContext.beginPath(), this.canvasContext.rect(0, 0, this.transformCanvas.w, this.transformCanvas.h), this.canvasContext.closePath(), this.canvasContext.clip(), this.renderFrame(this.renderedFrame, !0) }, CanvasRenderer.prototype.destroy = function () { var t; for (this.renderConfig.clearCanvas && this.animationItem.wrapper && (this.animationItem.wrapper.innerText = ""), t = (this.layers ? this.layers.length : 0) - 1; t >= 0; t -= 1)this.elements[t] && this.elements[t].destroy(); this.elements.length = 0, this.globalData.canvasContext = null, this.animationItem.container = null, this.destroyed = !0 }, CanvasRenderer.prototype.renderFrame = function (t, e) { if ((this.renderedFrame !== t || !0 !== this.renderConfig.clearCanvas || e) && !this.destroyed && -1 !== t) { var r; this.renderedFrame = t, this.globalData.frameNum = t - this.animationItem._isFirstFrame, this.globalData.frameId += 1, this.globalData._mdf = !this.renderConfig.clearCanvas || e, this.globalData.projectInterface.currentFrame = t; var i = this.layers.length; for (this.completeLayers || this.checkLayers(t), r = 0; r < i; r += 1)(this.completeLayers || this.elements[r]) && this.elements[r].prepareFrame(t - this.layers[r].st); if (this.globalData._mdf) { for (!0 === this.renderConfig.clearCanvas ? this.canvasContext.clearRect(0, 0, this.transformCanvas.w, this.transformCanvas.h) : this.save(), r = i - 1; r >= 0; r -= 1)(this.completeLayers || this.elements[r]) && this.elements[r].renderFrame(); !0 !== this.renderConfig.clearCanvas && this.restore() } } }, CanvasRenderer.prototype.buildItem = function (t) { var e = this.elements; if (!e[t] && 99 !== this.layers[t].ty) { var r = this.createItem(this.layers[t], this, this.globalData); e[t] = r, r.initExpressions() } }, CanvasRenderer.prototype.checkPendingElements = function () { for (; this.pendingElements.length;)this.pendingElements.pop().checkParenting() }, CanvasRenderer.prototype.hide = function () { this.animationItem.container.style.display = "none" }, CanvasRenderer.prototype.show = function () { this.animationItem.container.style.display = "block" }, extendPrototype([BaseRenderer], HybridRenderer), HybridRenderer.prototype.buildItem = SVGRenderer.prototype.buildItem, HybridRenderer.prototype.checkPendingElements = function () { for (; this.pendingElements.length;)this.pendingElements.pop().checkParenting() }, HybridRenderer.prototype.appendElementInPos = function (t, e) { var r = t.getBaseElement(); if (r) { var i = this.layers[e]; if (i.ddd && this.supports3d) this.addTo3dContainer(r, e); else if (this.threeDElements) this.addTo3dContainer(r, e); else { for (var s, a, n = 0; n < e;)this.elements[n] && !0 !== this.elements[n] && this.elements[n].getBaseElement && (a = this.elements[n], s = (this.layers[n].ddd ? this.getThreeDContainerByPos(n) : a.getBaseElement()) || s), n += 1; s ? i.ddd && this.supports3d || this.layerElement.insertBefore(r, s) : i.ddd && this.supports3d || this.layerElement.appendChild(r) } } }, HybridRenderer.prototype.createShape = function (t) { return this.supports3d ? new HShapeElement(t, this.globalData, this) : new SVGShapeElement(t, this.globalData, this) }, HybridRenderer.prototype.createText = function (t) { return this.supports3d ? new HTextElement(t, this.globalData, this) : new SVGTextLottieElement(t, this.globalData, this) }, HybridRenderer.prototype.createCamera = function (t) { return this.camera = new HCameraElement(t, this.globalData, this), this.camera }, HybridRenderer.prototype.createImage = function (t) { return this.supports3d ? new HImageElement(t, this.globalData, this) : new IImageElement(t, this.globalData, this) }, HybridRenderer.prototype.createComp = function (t) { return this.supports3d ? new HCompElement(t, this.globalData, this) : new SVGCompElement(t, this.globalData, this) }, HybridRenderer.prototype.createSolid = function (t) { return this.supports3d ? new HSolidElement(t, this.globalData, this) : new ISolidElement(t, this.globalData, this) }, HybridRenderer.prototype.createNull = SVGRenderer.prototype.createNull, HybridRenderer.prototype.getThreeDContainerByPos = function (t) { for (var e = 0, r = this.threeDElements.length; e < r;) { if (this.threeDElements[e].startPos <= t && this.threeDElements[e].endPos >= t) return this.threeDElements[e].perspectiveElem; e += 1 } return null }, HybridRenderer.prototype.createThreeDContainer = function (t, e) { var r, i, s = createTag("div"); styleDiv(s); var a = createTag("div"); if (styleDiv(a), "3d" === e) { (r = s.style).width = this.globalData.compSize.w + "px", r.height = this.globalData.compSize.h + "px"; var n = "50% 50%"; r.webkitTransformOrigin = n, r.mozTransformOrigin = n, r.transformOrigin = n; var o = "matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)"; (i = a.style).transform = o, i.webkitTransform = o } s.appendChild(a); var h = { container: a, perspectiveElem: s, startPos: t, endPos: t, type: e }; return this.threeDElements.push(h), h }, HybridRenderer.prototype.build3dContainers = function () { var t, e, r = this.layers.length, i = ""; for (t = 0; t < r; t += 1)this.layers[t].ddd && 3 !== this.layers[t].ty ? ("3d" !== i && (i = "3d", e = this.createThreeDContainer(t, "3d")), e.endPos = Math.max(e.endPos, t)) : ("2d" !== i && (i = "2d", e = this.createThreeDContainer(t, "2d")), e.endPos = Math.max(e.endPos, t)); for (t = (r = this.threeDElements.length) - 1; t >= 0; t -= 1)this.resizerElem.appendChild(this.threeDElements[t].perspectiveElem) }, HybridRenderer.prototype.addTo3dContainer = function (t, e) { for (var r = 0, i = this.threeDElements.length; r < i;) { if (e <= this.threeDElements[r].endPos) { for (var s, a = this.threeDElements[r].startPos; a < e;)this.elements[a] && this.elements[a].getBaseElement && (s = this.elements[a].getBaseElement()), a += 1; s ? this.threeDElements[r].container.insertBefore(t, s) : this.threeDElements[r].container.appendChild(t); break } r += 1 } }, HybridRenderer.prototype.configAnimation = function (t) { var e = createTag("div"), r = this.animationItem.wrapper, i = e.style; i.width = t.w + "px", i.height = t.h + "px", this.resizerElem = e, styleDiv(e), i.transformStyle = "flat", i.mozTransformStyle = "flat", i.webkitTransformStyle = "flat", this.renderConfig.className && e.setAttribute("class", this.renderConfig.className), r.appendChild(e), i.overflow = "hidden"; var s = createNS("svg"); s.setAttribute("width", "1"), s.setAttribute("height", "1"), styleDiv(s), this.resizerElem.appendChild(s); var a = createNS("defs"); s.appendChild(a), this.data = t, this.setupGlobalData(t, s), this.globalData.defs = a, this.layers = t.layers, this.layerElement = this.resizerElem, this.build3dContainers(), this.updateContainerSize() }, HybridRenderer.prototype.destroy = function () { var t; this.animationItem.wrapper && (this.animationItem.wrapper.innerText = ""), this.animationItem.container = null, this.globalData.defs = null; var e = this.layers ? this.layers.length : 0; for (t = 0; t < e; t += 1)this.elements[t].destroy(); this.elements.length = 0, this.destroyed = !0, this.animationItem = null }, HybridRenderer.prototype.updateContainerSize = function () { var t, e, r, i, s = this.animationItem.wrapper.offsetWidth, a = this.animationItem.wrapper.offsetHeight, n = s / a; this.globalData.compSize.w / this.globalData.compSize.h > n ? (t = s / this.globalData.compSize.w, e = s / this.globalData.compSize.w, r = 0, i = (a - this.globalData.compSize.h * (s / this.globalData.compSize.w)) / 2) : (t = a / this.globalData.compSize.h, e = a / this.globalData.compSize.h, r = (s - this.globalData.compSize.w * (a / this.globalData.compSize.h)) / 2, i = 0); var o = this.resizerElem.style; o.webkitTransform = "matrix3d(" + t + ",0,0,0,0," + e + ",0,0,0,0,1,0," + r + "," + i + ",0,1)", o.transform = o.webkitTransform }, HybridRenderer.prototype.renderFrame = SVGRenderer.prototype.renderFrame, HybridRenderer.prototype.hide = function () { this.resizerElem.style.display = "none" }, HybridRenderer.prototype.show = function () { this.resizerElem.style.display = "block" }, HybridRenderer.prototype.initItems = function () { if (this.buildAllItems(), this.camera) this.camera.setup(); else { var t, e = this.globalData.compSize.w, r = this.globalData.compSize.h, i = this.threeDElements.length; for (t = 0; t < i; t += 1) { var s = this.threeDElements[t].perspectiveElem.style; s.webkitPerspective = Math.sqrt(Math.pow(e, 2) + Math.pow(r, 2)) + "px", s.perspective = s.webkitPerspective } } }, HybridRenderer.prototype.searchExtraCompositions = function (t) { var e, r = t.length, i = createTag("div"); for (e = 0; e < r; e += 1)if (t[e].xt) { var s = this.createComp(t[e], i, this.globalData.comp, null); s.initExpressions(), this.globalData.projectInterface.registerComposition(s) } }, MaskElement.prototype.getMaskProperty = function (t) { return this.viewData[t].prop }, MaskElement.prototype.renderFrame = function (t) { var e, r = this.element.finalTransform.mat, i = this.masksProperties.length; for (e = 0; e < i; e += 1)if ((this.viewData[e].prop._mdf || t) && this.drawPath(this.masksProperties[e], this.viewData[e].prop.v, this.viewData[e]), (this.viewData[e].op._mdf || t) && this.viewData[e].elem.setAttribute("fill-opacity", this.viewData[e].op.v), "n" !== this.masksProperties[e].mode && (this.viewData[e].invRect && (this.element.finalTransform.mProp._mdf || t) && this.viewData[e].invRect.setAttribute("transform", r.getInverseMatrix().to2dCSS()), this.storedData[e].x && (this.storedData[e].x._mdf || t))) { var s = this.storedData[e].expan; this.storedData[e].x.v < 0 ? ("erode" !== this.storedData[e].lastOperator && (this.storedData[e].lastOperator = "erode", this.storedData[e].elem.setAttribute("filter", "url(" + locationHref + "#" + this.storedData[e].filterId + ")")), s.setAttribute("radius", -this.storedData[e].x.v)) : ("dilate" !== this.storedData[e].lastOperator && (this.storedData[e].lastOperator = "dilate", this.storedData[e].elem.setAttribute("filter", null)), this.storedData[e].elem.setAttribute("stroke-width", 2 * this.storedData[e].x.v)) } }, MaskElement.prototype.getMaskelement = function () { return this.maskElement }, MaskElement.prototype.createLayerSolidPath = function () { var t = "M0,0 "; return t += " h" + this.globalData.compSize.w, t += " v" + this.globalData.compSize.h, t += " h-" + this.globalData.compSize.w, t += " v-" + this.globalData.compSize.h + " " }, MaskElement.prototype.drawPath = function (t, e, r) { var i, s, a = " M" + e.v[0][0] + "," + e.v[0][1]; for (s = e._length, i = 1; i < s; i += 1)a += " C" + e.o[i - 1][0] + "," + e.o[i - 1][1] + " " + e.i[i][0] + "," + e.i[i][1] + " " + e.v[i][0] + "," + e.v[i][1]; if (e.c && s > 1 && (a += " C" + e.o[i - 1][0] + "," + e.o[i - 1][1] + " " + e.i[0][0] + "," + e.i[0][1] + " " + e.v[0][0] + "," + e.v[0][1]), r.lastPath !== a) { var n = ""; r.elem && (e.c && (n = t.inv ? this.solidPath + a : a), r.elem.setAttribute("d", n)), r.lastPath = a } }, MaskElement.prototype.destroy = function () { this.element = null, this.globalData = null, this.maskElement = null, this.data = null, this.masksProperties = null }, HierarchyElement.prototype = { initHierarchy: function () { this.hierarchy = [], this._isParent = !1, this.checkParenting() }, setHierarchy: function (t) { this.hierarchy = t }, setAsParent: function () { this._isParent = !0 }, checkParenting: function () { void 0 !== this.data.parent && this.comp.buildElementParenting(this, this.data.parent, []) } }, FrameElement.prototype = { initFrame: function () { this._isFirstFrame = !1, this.dynamicProperties = [], this._mdf = !1 }, prepareProperties: function (t, e) { var r, i = this.dynamicProperties.length; for (r = 0; r < i; r += 1)(e || this._isParent && "transform" === this.dynamicProperties[r].propType) && (this.dynamicProperties[r].getValue(), this.dynamicProperties[r]._mdf && (this.globalData._mdf = !0, this._mdf = !0)) }, addDynamicProperty: function (t) { -1 === this.dynamicProperties.indexOf(t) && this.dynamicProperties.push(t) } }, TransformElement.prototype = { initTransform: function () { this.finalTransform = { mProp: this.data.ks ? TransformPropertyFactory.getTransformProperty(this, this.data.ks, this) : { o: 0 }, _matMdf: !1, _opMdf: !1, mat: new Matrix }, this.data.ao && (this.finalTransform.mProp.autoOriented = !0), this.data.ty }, renderTransform: function () { if (this.finalTransform._opMdf = this.finalTransform.mProp.o._mdf || this._isFirstFrame, this.finalTransform._matMdf = this.finalTransform.mProp._mdf || this._isFirstFrame, this.hierarchy) { var t, e = this.finalTransform.mat, r = 0, i = this.hierarchy.length; if (!this.finalTransform._matMdf) for (; r < i;) { if (this.hierarchy[r].finalTransform.mProp._mdf) { this.finalTransform._matMdf = !0; break } r += 1 } if (this.finalTransform._matMdf) for (t = this.finalTransform.mProp.v.props, e.cloneFromProps(t), r = 0; r < i; r += 1)t = this.hierarchy[r].finalTransform.mProp.v.props, e.transform(t[0], t[1], t[2], t[3], t[4], t[5], t[6], t[7], t[8], t[9], t[10], t[11], t[12], t[13], t[14], t[15]) } }, globalToLocal: function (t) { var e = []; e.push(this.finalTransform); for (var r, i = !0, s = this.comp; i;)s.finalTransform ? (s.data.hasMask && e.splice(0, 0, s.finalTransform), s = s.comp) : i = !1; var a, n = e.length; for (r = 0; r < n; r += 1)a = e[r].mat.applyToPointArray(0, 0, 0), t = [t[0] - a[0], t[1] - a[1], 0]; return t }, mHelper: new Matrix }, RenderableElement.prototype = { initRenderable: function () { this.isInRange = !1, this.hidden = !1, this.isTransparent = !1, this.renderableComponents = [] }, addRenderableComponent: function (t) { -1 === this.renderableComponents.indexOf(t) && this.renderableComponents.push(t) }, removeRenderableComponent: function (t) { -1 !== this.renderableComponents.indexOf(t) && this.renderableComponents.splice(this.renderableComponents.indexOf(t), 1) }, prepareRenderableFrame: function (t) { this.checkLayerLimits(t) }, checkTransparency: function () { this.finalTransform.mProp.o.v <= 0 ? !this.isTransparent && this.globalData.renderConfig.hideOnTransparent && (this.isTransparent = !0, this.hide()) : this.isTransparent && (this.isTransparent = !1, this.show()) }, checkLayerLimits: function (t) { this.data.ip - this.data.st <= t && this.data.op - this.data.st > t ? !0 !== this.isInRange && (this.globalData._mdf = !0, this._mdf = !0, this.isInRange = !0, this.show()) : !1 !== this.isInRange && (this.globalData._mdf = !0, this.isInRange = !1, this.hide()) }, renderRenderable: function () { var t, e = this.renderableComponents.length; for (t = 0; t < e; t += 1)this.renderableComponents[t].renderFrame(this._isFirstFrame) }, sourceRectAtTime: function () { return { top: 0, left: 0, width: 100, height: 100 } }, getLayerSize: function () { return 5 === this.data.ty ? { w: this.data.textData.width, h: this.data.textData.height } : { w: this.data.width, h: this.data.height } } }, extendPrototype([RenderableElement, createProxyFunction({ initElement: function (t, e, r) { this.initFrame(), this.initBaseData(t, e, r), this.initTransform(t, e, r), this.initHierarchy(), this.initRenderable(), this.initRendererElement(), this.createContainerElements(), this.createRenderableComponents(), this.createContent(), this.hide() }, hide: function () { this.hidden || this.isInRange && !this.isTransparent || ((this.baseElement || this.layerElement).style.display = "none", this.hidden = !0) }, show: function () { this.isInRange && !this.isTransparent && (this.data.hd || ((this.baseElement || this.layerElement).style.display = "block"), this.hidden = !1, this._isFirstFrame = !0) }, renderFrame: function () { this.data.hd || this.hidden || (this.renderTransform(), this.renderRenderable(), this.renderElement(), this.renderInnerContent(), this._isFirstFrame && (this._isFirstFrame = !1)) }, renderInnerContent: function () { }, prepareFrame: function (t) { this._mdf = !1, this.prepareRenderableFrame(t), this.prepareProperties(t, this.isInRange), this.checkTransparency() }, destroy: function () { this.innerElem = null, this.destroyBaseElement() } })], RenderableDOMElement), SVGStyleData.prototype.reset = function () { this.d = "", this._mdf = !1 }, SVGShapeData.prototype.setAsAnimated = function () { this._isAnimated = !0 }, extendPrototype([DynamicPropertyContainer], SVGStrokeStyleData), extendPrototype([DynamicPropertyContainer], SVGFillStyleData), SVGGradientFillStyleData.prototype.initGradientData = function (t, e, r) { this.o = PropertyFactory.getProp(t, e.o, 0, .01, this), this.s = PropertyFactory.getProp(t, e.s, 1, null, this), this.e = PropertyFactory.getProp(t, e.e, 1, null, this), this.h = PropertyFactory.getProp(t, e.h || { k: 0 }, 0, .01, this), this.a = PropertyFactory.getProp(t, e.a || { k: 0 }, 0, degToRads, this), this.g = new GradientProperty(t, e.g, this), this.style = r, this.stops = [], this.setGradientData(r.pElem, e), this.setGradientOpacity(e, r), this._isAnimated = !!this._isAnimated }, SVGGradientFillStyleData.prototype.setGradientData = function (t, e) { var r = createElementID(), i = createNS(1 === e.t ? "linearGradient" : "radialGradient"); i.setAttribute("id", r), i.setAttribute("spreadMethod", "pad"), i.setAttribute("gradientUnits", "userSpaceOnUse"); var s, a, n, o = []; for (n = 4 * e.g.p, a = 0; a < n; a += 4)s = createNS("stop"), i.appendChild(s), o.push(s); t.setAttribute("gf" === e.ty ? "fill" : "stroke", "url(" + locationHref + "#" + r + ")"), this.gf = i, this.cst = o }, SVGGradientFillStyleData.prototype.setGradientOpacity = function (t, e) { if (this.g._hasOpacity && !this.g._collapsable) { var r, i, s, a = createNS("mask"), n = createNS("path"); a.appendChild(n); var o = createElementID(), h = createElementID(); a.setAttribute("id", h); var l = createNS(1 === t.t ? "linearGradient" : "radialGradient"); l.setAttribute("id", o), l.setAttribute("spreadMethod", "pad"), l.setAttribute("gradientUnits", "userSpaceOnUse"), s = t.g.k.k[0].s ? t.g.k.k[0].s.length : t.g.k.k.length; var p = this.stops; for (i = 4 * t.g.p; i < s; i += 2)(r = createNS("stop")).setAttribute("stop-color", "rgb(255,255,255)"), l.appendChild(r), p.push(r); n.setAttribute("gf" === t.ty ? "fill" : "stroke", "url(" + locationHref + "#" + o + ")"), "gs" === t.ty && (n.setAttribute("stroke-linecap", lineCapEnum[t.lc || 2]), n.setAttribute("stroke-linejoin", lineJoinEnum[t.lj || 2]), 1 === t.lj && n.setAttribute("stroke-miterlimit", t.ml)), this.of = l, this.ms = a, this.ost = p, this.maskId = h, e.msElem = n } }, extendPrototype([DynamicPropertyContainer], SVGGradientFillStyleData), extendPrototype([SVGGradientFillStyleData, DynamicPropertyContainer], SVGGradientStrokeStyleData); var SVGElementsRenderer = function () { var t = new Matrix, e = new Matrix; function r(t, e, r) { (r || e.transform.op._mdf) && e.transform.container.setAttribute("opacity", e.transform.op.v), (r || e.transform.mProps._mdf) && e.transform.container.setAttribute("transform", e.transform.mProps.v.to2dCSS()) } function i(r, i, s) { var a, n, o, h, l, p, c, f, d, m, u, y = i.styles.length, g = i.lvl; for (p = 0; p < y; p += 1) { if (h = i.sh._mdf || s, i.styles[p].lvl < g) { for (f = e.reset(), m = g - i.styles[p].lvl, u = i.transformers.length - 1; !h && m > 0;)h = i.transformers[u].mProps._mdf || h, m -= 1, u -= 1; if (h) for (m = g - i.styles[p].lvl, u = i.transformers.length - 1; m > 0;)d = i.transformers[u].mProps.v.props, f.transform(d[0], d[1], d[2], d[3], d[4], d[5], d[6], d[7], d[8], d[9], d[10], d[11], d[12], d[13], d[14], d[15]), m -= 1, u -= 1 } else f = t; if (n = (c = i.sh.paths)._length, h) { for (o = "", a = 0; a < n; a += 1)(l = c.shapes[a]) && l._length && (o += buildShapeString(l, l._length, l.c, f)); i.caches[p] = o } else o = i.caches[p]; i.styles[p].d += !0 === r.hd ? "" : o, i.styles[p]._mdf = h || i.styles[p]._mdf } } function s(t, e, r) { var i = e.style; (e.c._mdf || r) && i.pElem.setAttribute("fill", "rgb(" + bmFloor(e.c.v[0]) + "," + bmFloor(e.c.v[1]) + "," + bmFloor(e.c.v[2]) + ")"), (e.o._mdf || r) && i.pElem.setAttribute("fill-opacity", e.o.v) } function a(t, e, r) { n(t, e, r), o(0, e, r) } function n(t, e, r) { var i, s, a, n, o, h = e.gf, l = e.g._hasOpacity, p = e.s.v, c = e.e.v; if (e.o._mdf || r) { var f = "gf" === t.ty ? "fill-opacity" : "stroke-opacity"; e.style.pElem.setAttribute(f, e.o.v) } if (e.s._mdf || r) { var d = 1 === t.t ? "x1" : "cx", m = "x1" === d ? "y1" : "cy"; h.setAttribute(d, p[0]), h.setAttribute(m, p[1]), l && !e.g._collapsable && (e.of.setAttribute(d, p[0]), e.of.setAttribute(m, p[1])) } if (e.g._cmdf || r) { i = e.cst; var u = e.g.c; for (a = i.length, s = 0; s < a; s += 1)(n = i[s]).setAttribute("offset", u[4 * s] + "%"), n.setAttribute("stop-color", "rgb(" + u[4 * s + 1] + "," + u[4 * s + 2] + "," + u[4 * s + 3] + ")") } if (l && (e.g._omdf || r)) { var y = e.g.o; for (a = (i = e.g._collapsable ? e.cst : e.ost).length, s = 0; s < a; s += 1)n = i[s], e.g._collapsable || n.setAttribute("offset", y[2 * s] + "%"), n.setAttribute("stop-opacity", y[2 * s + 1]) } if (1 === t.t) (e.e._mdf || r) && (h.setAttribute("x2", c[0]), h.setAttribute("y2", c[1]), l && !e.g._collapsable && (e.of.setAttribute("x2", c[0]), e.of.setAttribute("y2", c[1]))); else if ((e.s._mdf || e.e._mdf || r) && (o = Math.sqrt(Math.pow(p[0] - c[0], 2) + Math.pow(p[1] - c[1], 2)), h.setAttribute("r", o), l && !e.g._collapsable && e.of.setAttribute("r", o)), e.e._mdf || e.h._mdf || e.a._mdf || r) { o || (o = Math.sqrt(Math.pow(p[0] - c[0], 2) + Math.pow(p[1] - c[1], 2))); var g = Math.atan2(c[1] - p[1], c[0] - p[0]), v = e.h.v; v >= 1 ? v = .99 : v <= -1 && (v = -.99); var b = o * v, P = Math.cos(g + e.a.v) * b + p[0], _ = Math.sin(g + e.a.v) * b + p[1]; h.setAttribute("fx", P), h.setAttribute("fy", _), l && !e.g._collapsable && (e.of.setAttribute("fx", P), e.of.setAttribute("fy", _)) } } function o(t, e, r) { var i = e.style, s = e.d; s && (s._mdf || r) && s.dashStr && (i.pElem.setAttribute("stroke-dasharray", s.dashStr), i.pElem.setAttribute("stroke-dashoffset", s.dashoffset[0])), e.c && (e.c._mdf || r) && i.pElem.setAttribute("stroke", "rgb(" + bmFloor(e.c.v[0]) + "," + bmFloor(e.c.v[1]) + "," + bmFloor(e.c.v[2]) + ")"), (e.o._mdf || r) && i.pElem.setAttribute("stroke-opacity", e.o.v), (e.w._mdf || r) && (i.pElem.setAttribute("stroke-width", e.w.v), i.msElem && i.msElem.setAttribute("stroke-width", e.w.v)) } return { createRenderFunction: function (t) { switch (t.ty) { case "fl": return s; case "gf": return n; case "gs": return a; case "st": return o; case "sh": case "el": case "rc": case "sr": return i; case "tr": return r; default: return null } } } }(); function ShapeTransformManager() { this.sequences = {}, this.sequenceList = [], this.transform_key_count = 0 } function CVShapeData(t, e, r, i) { this.styledShapes = [], this.tr = [0, 0, 0, 0, 0, 0]; var s, a = 4; "rc" === e.ty ? a = 5 : "el" === e.ty ? a = 6 : "sr" === e.ty && (a = 7), this.sh = ShapePropertyFactory.getShapeProp(t, e, a, t); var n, o = r.length; for (s = 0; s < o; s += 1)r[s].closed || (n = { transforms: i.addTransformSequence(r[s].transforms), trNodes: [] }, this.styledShapes.push(n), r[s].elements.push(n)) } function BaseElement() { } function NullElement(t, e, r) { this.initFrame(), this.initBaseData(t, e, r), this.initFrame(), this.initTransform(t, e, r), this.initHierarchy() } function SVGBaseElement() { } function IShapeElement() { } function ITextElement() { } function ICompElement() { } function IImageElement(t, e, r) { this.assetData = e.getAssetData(t.refId), this.initElement(t, e, r), this.sourceRect = { top: 0, left: 0, width: this.assetData.w, height: this.assetData.h } } function ISolidElement(t, e, r) { this.initElement(t, e, r) } function AudioElement(t, e, r) { this.initFrame(), this.initRenderable(), this.assetData = e.getAssetData(t.refId), this.initBaseData(t, e, r), this._isPlaying = !1, this._canPlay = !1; var i = this.globalData.getAssetsPath(this.assetData); this.audio = this.globalData.audioController.createAudio(i), this._currentTime = 0, this.globalData.audioController.addAudio(this), this.tm = t.tm ? PropertyFactory.getProp(this, t.tm, 0, e.frameRate, this) : { _placeholder: !0 } } function FootageElement(t, e, r) { this.initFrame(), this.initRenderable(), this.assetData = e.getAssetData(t.refId), this.footageData = e.imageLoader.getAsset(this.assetData), this.initBaseData(t, e, r) } function SVGCompElement(t, e, r) { this.layers = t.layers, this.supports3d = !0, this.completeLayers = !1, this.pendingElements = [], this.elements = this.layers ? createSizedArray(this.layers.length) : [], this.initElement(t, e, r), this.tm = t.tm ? PropertyFactory.getProp(this, t.tm, 0, e.frameRate, this) : { _placeholder: !0 } } function SVGTextLottieElement(t, e, r) { this.textSpans = [], this.renderType = "svg", this.initElement(t, e, r) } function SVGShapeElement(t, e, r) { this.shapes = [], this.shapesData = t.shapes, this.stylesList = [], this.shapeModifiers = [], this.itemsData = [], this.processedElements = [], this.animatedContents = [], this.initElement(t, e, r), this.prevViewData = [] } function SVGTintFilter(t, e) { this.filterManager = e; var r = createNS("feColorMatrix"); if (r.setAttribute("type", "matrix"), r.setAttribute("color-interpolation-filters", "linearRGB"), r.setAttribute("values", "0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"), r.setAttribute("result", "f1"), t.appendChild(r), (r = createNS("feColorMatrix")).setAttribute("type", "matrix"), r.setAttribute("color-interpolation-filters", "sRGB"), r.setAttribute("values", "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"), r.setAttribute("result", "f2"), t.appendChild(r), this.matrixFilter = r, 100 !== e.effectElements[2].p.v || e.effectElements[2].p.k) { var i, s = createNS("feMerge"); t.appendChild(s), (i = createNS("feMergeNode")).setAttribute("in", "SourceGraphic"), s.appendChild(i), (i = createNS("feMergeNode")).setAttribute("in", "f2"), s.appendChild(i) } } function SVGFillFilter(t, e) { this.filterManager = e; var r = createNS("feColorMatrix"); r.setAttribute("type", "matrix"), r.setAttribute("color-interpolation-filters", "sRGB"), r.setAttribute("values", "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"), t.appendChild(r), this.matrixFilter = r } function SVGGaussianBlurEffect(t, e) { t.setAttribute("x", "-100%"), t.setAttribute("y", "-100%"), t.setAttribute("width", "300%"), t.setAttribute("height", "300%"), this.filterManager = e; var r = createNS("feGaussianBlur"); t.appendChild(r), this.feGaussianBlur = r } function SVGStrokeEffect(t, e) { this.initialized = !1, this.filterManager = e, this.elem = t, this.paths = [] } function SVGTritoneFilter(t, e) { this.filterManager = e; var r = createNS("feColorMatrix"); r.setAttribute("type", "matrix"), r.setAttribute("color-interpolation-filters", "linearRGB"), r.setAttribute("values", "0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"), r.setAttribute("result", "f1"), t.appendChild(r); var i = createNS("feComponentTransfer"); i.setAttribute("color-interpolation-filters", "sRGB"), t.appendChild(i), this.matrixFilter = i; var s = createNS("feFuncR"); s.setAttribute("type", "table"), i.appendChild(s), this.feFuncR = s; var a = createNS("feFuncG"); a.setAttribute("type", "table"), i.appendChild(a), this.feFuncG = a; var n = createNS("feFuncB"); n.setAttribute("type", "table"), i.appendChild(n), this.feFuncB = n } function SVGProLevelsFilter(t, e) { this.filterManager = e; var r = this.filterManager.effectElements, i = createNS("feComponentTransfer"); (r[10].p.k || 0 !== r[10].p.v || r[11].p.k || 1 !== r[11].p.v || r[12].p.k || 1 !== r[12].p.v || r[13].p.k || 0 !== r[13].p.v || r[14].p.k || 1 !== r[14].p.v) && (this.feFuncR = this.createFeFunc("feFuncR", i)), (r[17].p.k || 0 !== r[17].p.v || r[18].p.k || 1 !== r[18].p.v || r[19].p.k || 1 !== r[19].p.v || r[20].p.k || 0 !== r[20].p.v || r[21].p.k || 1 !== r[21].p.v) && (this.feFuncG = this.createFeFunc("feFuncG", i)), (r[24].p.k || 0 !== r[24].p.v || r[25].p.k || 1 !== r[25].p.v || r[26].p.k || 1 !== r[26].p.v || r[27].p.k || 0 !== r[27].p.v || r[28].p.k || 1 !== r[28].p.v) && (this.feFuncB = this.createFeFunc("feFuncB", i)), (r[31].p.k || 0 !== r[31].p.v || r[32].p.k || 1 !== r[32].p.v || r[33].p.k || 1 !== r[33].p.v || r[34].p.k || 0 !== r[34].p.v || r[35].p.k || 1 !== r[35].p.v) && (this.feFuncA = this.createFeFunc("feFuncA", i)), (this.feFuncR || this.feFuncG || this.feFuncB || this.feFuncA) && (i.setAttribute("color-interpolation-filters", "sRGB"), t.appendChild(i), i = createNS("feComponentTransfer")), (r[3].p.k || 0 !== r[3].p.v || r[4].p.k || 1 !== r[4].p.v || r[5].p.k || 1 !== r[5].p.v || r[6].p.k || 0 !== r[6].p.v || r[7].p.k || 1 !== r[7].p.v) && (i.setAttribute("color-interpolation-filters", "sRGB"), t.appendChild(i), this.feFuncRComposed = this.createFeFunc("feFuncR", i), this.feFuncGComposed = this.createFeFunc("feFuncG", i), this.feFuncBComposed = this.createFeFunc("feFuncB", i)) } function SVGDropShadowEffect(t, e) { var r = e.container.globalData.renderConfig.filterSize; t.setAttribute("x", r.x), t.setAttribute("y", r.y), t.setAttribute("width", r.width), t.setAttribute("height", r.height), this.filterManager = e; var i = createNS("feGaussianBlur"); i.setAttribute("in", "SourceAlpha"), i.setAttribute("result", "drop_shadow_1"), i.setAttribute("stdDeviation", "0"), this.feGaussianBlur = i, t.appendChild(i); var s = createNS("feOffset"); s.setAttribute("dx", "25"), s.setAttribute("dy", "0"), s.setAttribute("in", "drop_shadow_1"), s.setAttribute("result", "drop_shadow_2"), this.feOffset = s, t.appendChild(s); var a = createNS("feFlood"); a.setAttribute("flood-color", "#00ff00"), a.setAttribute("flood-opacity", "1"), a.setAttribute("result", "drop_shadow_3"), this.feFlood = a, t.appendChild(a); var n = createNS("feComposite"); n.setAttribute("in", "drop_shadow_3"), n.setAttribute("in2", "drop_shadow_2"), n.setAttribute("operator", "in"), n.setAttribute("result", "drop_shadow_4"), t.appendChild(n); var o, h = createNS("feMerge"); t.appendChild(h), o = createNS("feMergeNode"), h.appendChild(o), (o = createNS("feMergeNode")).setAttribute("in", "SourceGraphic"), this.feMergeNode = o, this.feMerge = h, this.originalNodeAdded = !1, h.appendChild(o) } ShapeTransformManager.prototype = { addTransformSequence: function (t) { var e, r = t.length, i = "_"; for (e = 0; e < r; e += 1)i += t[e].transform.key + "_"; var s = this.sequences[i]; return s || (s = { transforms: [].concat(t), finalTransform: new Matrix, _mdf: !1 }, this.sequences[i] = s, this.sequenceList.push(s)), s }, processSequence: function (t, e) { for (var r, i = 0, s = t.transforms.length, a = e; i < s && !e;) { if (t.transforms[i].transform.mProps._mdf) { a = !0; break } i += 1 } if (a) for (t.finalTransform.reset(), i = s - 1; i >= 0; i -= 1)r = t.transforms[i].transform.mProps.v.props, t.finalTransform.transform(r[0], r[1], r[2], r[3], r[4], r[5], r[6], r[7], r[8], r[9], r[10], r[11], r[12], r[13], r[14], r[15]); t._mdf = a }, processSequences: function (t) { var e, r = this.sequenceList.length; for (e = 0; e < r; e += 1)this.processSequence(this.sequenceList[e], t) }, getNewKey: function () { return this.transform_key_count += 1, "_" + this.transform_key_count } }, CVShapeData.prototype.setAsAnimated = SVGShapeData.prototype.setAsAnimated, BaseElement.prototype = { checkMasks: function () { if (!this.data.hasMask) return !1; for (var t = 0, e = this.data.masksProperties.length; t < e;) { if ("n" !== this.data.masksProperties[t].mode && !1 !== this.data.masksProperties[t].cl) return !0; t += 1 } return !1 }, initExpressions: function () { this.layerInterface = LayerExpressionInterface(this), this.data.hasMask && this.maskManager && this.layerInterface.registerMaskInterface(this.maskManager); var t = EffectsExpressionInterface.createEffectsInterface(this, this.layerInterface); this.layerInterface.registerEffectsInterface(t), 0 === this.data.ty || this.data.xt ? this.compInterface = CompExpressionInterface(this) : 4 === this.data.ty ? (this.layerInterface.shapeInterface = ShapeExpressionInterface(this.shapesData, this.itemsData, this.layerInterface), this.layerInterface.content = this.layerInterface.shapeInterface) : 5 === this.data.ty && (this.layerInterface.textInterface = TextExpressionInterface(this), this.layerInterface.text = this.layerInterface.textInterface) }, setBlendMode: function () { var t = getBlendMode(this.data.bm); (this.baseElement || this.layerElement).style["mix-blend-mode"] = t }, initBaseData: function (t, e, r) { this.globalData = e, this.comp = r, this.data = t, this.layerId = createElementID(), this.data.sr || (this.data.sr = 1), this.effectsManager = new EffectsManager(this.data, this, this.dynamicProperties) }, getType: function () { return this.type }, sourceRectAtTime: function () { } }, NullElement.prototype.prepareFrame = function (t) { this.prepareProperties(t, !0) }, NullElement.prototype.renderFrame = function () { }, NullElement.prototype.getBaseElement = function () { return null }, NullElement.prototype.destroy = function () { }, NullElement.prototype.sourceRectAtTime = function () { }, NullElement.prototype.hide = function () { }, extendPrototype([BaseElement, TransformElement, HierarchyElement, FrameElement], NullElement), SVGBaseElement.prototype = { initRendererElement: function () { this.layerElement = createNS("g") }, createContainerElements: function () { this.matteElement = createNS("g"), this.transformedElement = this.layerElement, this.maskedElement = this.layerElement, this._sizeChanged = !1; var t, e, r, i = null; if (this.data.td) { if (3 == this.data.td || 1 == this.data.td) { var s = createNS("mask"); s.setAttribute("id", this.layerId), s.setAttribute("mask-type", 3 == this.data.td ? "luminance" : "alpha"), s.appendChild(this.layerElement), i = s, this.globalData.defs.appendChild(s), featureSupport.maskType || 1 != this.data.td || (s.setAttribute("mask-type", "luminance"), t = createElementID(), e = filtersFactory.createFilter(t), this.globalData.defs.appendChild(e), e.appendChild(filtersFactory.createAlphaToLuminanceFilter()), (r = createNS("g")).appendChild(this.layerElement), i = r, s.appendChild(r), r.setAttribute("filter", "url(" + locationHref + "#" + t + ")")) } else if (2 == this.data.td) { var a = createNS("mask"); a.setAttribute("id", this.layerId), a.setAttribute("mask-type", "alpha"); var n = createNS("g"); a.appendChild(n), t = createElementID(), e = filtersFactory.createFilter(t); var o = createNS("feComponentTransfer"); o.setAttribute("in", "SourceGraphic"), e.appendChild(o); var h = createNS("feFuncA"); h.setAttribute("type", "table"), h.setAttribute("tableValues", "1.0 0.0"), o.appendChild(h), this.globalData.defs.appendChild(e); var l = createNS("rect"); l.setAttribute("width", this.comp.data.w), l.setAttribute("height", this.comp.data.h), l.setAttribute("x", "0"), l.setAttribute("y", "0"), l.setAttribute("fill", "#ffffff"), l.setAttribute("opacity", "0"), n.setAttribute("filter", "url(" + locationHref + "#" + t + ")"), n.appendChild(l), n.appendChild(this.layerElement), i = n, featureSupport.maskType || (a.setAttribute("mask-type", "luminance"), e.appendChild(filtersFactory.createAlphaToLuminanceFilter()), r = createNS("g"), n.appendChild(l), r.appendChild(this.layerElement), i = r, n.appendChild(r)), this.globalData.defs.appendChild(a) } } else this.data.tt ? (this.matteElement.appendChild(this.layerElement), i = this.matteElement, this.baseElement = this.matteElement) : this.baseElement = this.layerElement; if (this.data.ln && this.layerElement.setAttribute("id", this.data.ln), this.data.cl && this.layerElement.setAttribute("class", this.data.cl), 0 === this.data.ty && !this.data.hd) { var p = createNS("clipPath"), c = createNS("path"); c.setAttribute("d", "M0,0 L" + this.data.w + ",0 L" + this.data.w + "," + this.data.h + " L0," + this.data.h + "z"); var f = createElementID(); if (p.setAttribute("id", f), p.appendChild(c), this.globalData.defs.appendChild(p), this.checkMasks()) { var d = createNS("g"); d.setAttribute("clip-path", "url(" + locationHref + "#" + f + ")"), d.appendChild(this.layerElement), this.transformedElement = d, i ? i.appendChild(this.transformedElement) : this.baseElement = this.transformedElement } else this.layerElement.setAttribute("clip-path", "url(" + locationHref + "#" + f + ")") } 0 !== this.data.bm && this.setBlendMode() }, renderElement: function () { this.finalTransform._matMdf && this.transformedElement.setAttribute("transform", this.finalTransform.mat.to2dCSS()), this.finalTransform._opMdf && this.transformedElement.setAttribute("opacity", this.finalTransform.mProp.o.v) }, destroyBaseElement: function () { this.layerElement = null, this.matteElement = null, this.maskManager.destroy() }, getBaseElement: function () { return this.data.hd ? null : this.baseElement }, createRenderableComponents: function () { this.maskManager = new MaskElement(this.data, this, this.globalData), this.renderableEffectsManager = new SVGEffects(this) }, setMatte: function (t) { this.matteElement && this.matteElement.setAttribute("mask", "url(" + locationHref + "#" + t + ")") } }, IShapeElement.prototype = { addShapeToModifiers: function (t) { var e, r = this.shapeModifiers.length; for (e = 0; e < r; e += 1)this.shapeModifiers[e].addShape(t) }, isShapeInAnimatedModifiers: function (t) { for (var e = this.shapeModifiers.length; 0 < e;)if (this.shapeModifiers[0].isAnimatedWithShape(t)) return !0; return !1 }, renderModifiers: function () { if (this.shapeModifiers.length) { var t, e = this.shapes.length; for (t = 0; t < e; t += 1)this.shapes[t].sh.reset(); for (t = (e = this.shapeModifiers.length) - 1; t >= 0 && !this.shapeModifiers[t].processShapes(this._isFirstFrame); t -= 1); } }, searchProcessedElement: function (t) { for (var e = this.processedElements, r = 0, i = e.length; r < i;) { if (e[r].elem === t) return e[r].pos; r += 1 } return 0 }, addProcessedElement: function (t, e) { for (var r = this.processedElements, i = r.length; i;)if (r[i -= 1].elem === t) return void (r[i].pos = e); r.push(new ProcessedElement(t, e)) }, prepareFrame: function (t) { this.prepareRenderableFrame(t), this.prepareProperties(t, this.isInRange) } }, ITextElement.prototype.initElement = function (t, e, r) { this.lettersChangedFlag = !0, this.initFrame(), this.initBaseData(t, e, r), this.textProperty = new TextProperty(this, t.t, this.dynamicProperties), this.textAnimator = new TextAnimatorProperty(t.t, this.renderType, this), this.initTransform(t, e, r), this.initHierarchy(), this.initRenderable(), this.initRendererElement(), this.createContainerElements(), this.createRenderableComponents(), this.createContent(), this.hide(), this.textAnimator.searchProperties(this.dynamicProperties) }, ITextElement.prototype.prepareFrame = function (t) { this._mdf = !1, this.prepareRenderableFrame(t), this.prepareProperties(t, this.isInRange), (this.textProperty._mdf || this.textProperty._isFirstFrame) && (this.buildNewText(), this.textProperty._isFirstFrame = !1, this.textProperty._mdf = !1) }, ITextElement.prototype.createPathShape = function (t, e) { var r, i, s = e.length, a = ""; for (r = 0; r < s; r += 1)i = e[r].ks.k, a += buildShapeString(i, i.i.length, !0, t); return a }, ITextElement.prototype.updateDocumentData = function (t, e) { this.textProperty.updateDocumentData(t, e) }, ITextElement.prototype.canResizeFont = function (t) { this.textProperty.canResizeFont(t) }, ITextElement.prototype.setMinimumFontSize = function (t) { this.textProperty.setMinimumFontSize(t) }, ITextElement.prototype.applyTextPropertiesToMatrix = function (t, e, r, i, s) { switch (t.ps && e.translate(t.ps[0], t.ps[1] + t.ascent, 0), e.translate(0, -t.ls, 0), t.j) { case 1: e.translate(t.justifyOffset + (t.boxWidth - t.lineWidths[r]), 0, 0); break; case 2: e.translate(t.justifyOffset + (t.boxWidth - t.lineWidths[r]) / 2, 0, 0) }e.translate(i, s, 0) }, ITextElement.prototype.buildColor = function (t) { return "rgb(" + Math.round(255 * t[0]) + "," + Math.round(255 * t[1]) + "," + Math.round(255 * t[2]) + ")" }, ITextElement.prototype.emptyProp = new LetterProps, ITextElement.prototype.destroy = function () { }, extendPrototype([BaseElement, TransformElement, HierarchyElement, FrameElement, RenderableDOMElement], ICompElement), ICompElement.prototype.initElement = function (t, e, r) { this.initFrame(), this.initBaseData(t, e, r), this.initTransform(t, e, r), this.initRenderable(), this.initHierarchy(), this.initRendererElement(), this.createContainerElements(), this.createRenderableComponents(), !this.data.xt && e.progressiveLoad || this.buildAllItems(), this.hide() }, ICompElement.prototype.prepareFrame = function (t) { if (this._mdf = !1, this.prepareRenderableFrame(t), this.prepareProperties(t, this.isInRange), this.isInRange || this.data.xt) { if (this.tm._placeholder) this.renderedFrame = t / this.data.sr; else { var e = this.tm.v; e === this.data.op && (e = this.data.op - 1), this.renderedFrame = e } var r, i = this.elements.length; for (this.completeLayers || this.checkLayers(this.renderedFrame), r = i - 1; r >= 0; r -= 1)(this.completeLayers || this.elements[r]) && (this.elements[r].prepareFrame(this.renderedFrame - this.layers[r].st), this.elements[r]._mdf && (this._mdf = !0)) } }, ICompElement.prototype.renderInnerContent = function () { var t, e = this.layers.length; for (t = 0; t < e; t += 1)(this.completeLayers || this.elements[t]) && this.elements[t].renderFrame() }, ICompElement.prototype.setElements = function (t) { this.elements = t }, ICompElement.prototype.getElements = function () { return this.elements }, ICompElement.prototype.destroyElements = function () { var t, e = this.layers.length; for (t = 0; t < e; t += 1)this.elements[t] && this.elements[t].destroy() }, ICompElement.prototype.destroy = function () { this.destroyElements(), this.destroyBaseElement() }, extendPrototype([BaseElement, TransformElement, SVGBaseElement, HierarchyElement, FrameElement, RenderableDOMElement], IImageElement), IImageElement.prototype.createContent = function () { var t = this.globalData.getAssetsPath(this.assetData); this.innerElem = createNS("image"), this.innerElem.setAttribute("width", this.assetData.w + "px"), this.innerElem.setAttribute("height", this.assetData.h + "px"), this.innerElem.setAttribute("preserveAspectRatio", this.assetData.pr || this.globalData.renderConfig.imagePreserveAspectRatio), this.innerElem.setAttributeNS("http://www.w3.org/1999/xlink", "href", t), this.layerElement.appendChild(this.innerElem) }, IImageElement.prototype.sourceRectAtTime = function () { return this.sourceRect }, extendPrototype([IImageElement], ISolidElement), ISolidElement.prototype.createContent = function () { var t = createNS("rect"); t.setAttribute("width", this.data.sw), t.setAttribute("height", this.data.sh), t.setAttribute("fill", this.data.sc), this.layerElement.appendChild(t) }, AudioElement.prototype.prepareFrame = function (t) { if (this.prepareRenderableFrame(t, !0), this.prepareProperties(t, !0), this.tm._placeholder) this._currentTime = t / this.data.sr; else { var e = this.tm.v; this._currentTime = e } }, extendPrototype([RenderableElement, BaseElement, FrameElement], AudioElement), AudioElement.prototype.renderFrame = function () { this.isInRange && this._canPlay && (this._isPlaying ? (!this.audio.playing() || Math.abs(this._currentTime / this.globalData.frameRate - this.audio.seek()) > .1) && this.audio.seek(this._currentTime / this.globalData.frameRate) : (this.audio.play(), this.audio.seek(this._currentTime / this.globalData.frameRate), this._isPlaying = !0)) }, AudioElement.prototype.show = function () { }, AudioElement.prototype.hide = function () { this.audio.pause(), this._isPlaying = !1 }, AudioElement.prototype.pause = function () { this.audio.pause(), this._isPlaying = !1, this._canPlay = !1 }, AudioElement.prototype.resume = function () { this._canPlay = !0 }, AudioElement.prototype.setRate = function (t) { this.audio.rate(t) }, AudioElement.prototype.volume = function (t) { this.audio.volume(t) }, AudioElement.prototype.getBaseElement = function () { return null }, AudioElement.prototype.destroy = function () { }, AudioElement.prototype.sourceRectAtTime = function () { }, AudioElement.prototype.initExpressions = function () { }, FootageElement.prototype.prepareFrame = function () { }, extendPrototype([RenderableElement, BaseElement, FrameElement], FootageElement), FootageElement.prototype.getBaseElement = function () { return null }, FootageElement.prototype.renderFrame = function () { }, FootageElement.prototype.destroy = function () { }, FootageElement.prototype.initExpressions = function () { this.layerInterface = FootageInterface(this) }, FootageElement.prototype.getFootageData = function () { return this.footageData }, extendPrototype([SVGRenderer, ICompElement, SVGBaseElement], SVGCompElement), extendPrototype([BaseElement, TransformElement, SVGBaseElement, HierarchyElement, FrameElement, RenderableDOMElement, ITextElement], SVGTextLottieElement), SVGTextLottieElement.prototype.createContent = function () { this.data.singleShape && !this.globalData.fontManager.chars && (this.textContainer = createNS("text")) }, SVGTextLottieElement.prototype.buildTextContents = function (t) { for (var e = 0, r = t.length, i = [], s = ""; e < r;)t[e] === String.fromCharCode(13) || t[e] === String.fromCharCode(3) ? (i.push(s), s = "") : s += t[e], e += 1; return i.push(s), i }, SVGTextLottieElement.prototype.buildNewText = function () { var t, e, r = this.textProperty.currentData; this.renderedLetters = createSizedArray(r ? r.l.length : 0), r.fc ? this.layerElement.setAttribute("fill", this.buildColor(r.fc)) : this.layerElement.setAttribute("fill", "rgba(0,0,0,0)"), r.sc && (this.layerElement.setAttribute("stroke", this.buildColor(r.sc)), this.layerElement.setAttribute("stroke-width", r.sw)), this.layerElement.setAttribute("font-size", r.finalSize); var i = this.globalData.fontManager.getFontByName(r.f); if (i.fClass) this.layerElement.setAttribute("class", i.fClass); else { this.layerElement.setAttribute("font-family", i.fFamily); var s = r.fWeight, a = r.fStyle; this.layerElement.setAttribute("font-style", a), this.layerElement.setAttribute("font-weight", s) } this.layerElement.setAttribute("aria-label", r.t); var n, o = r.l || [], h = !!this.globalData.fontManager.chars; e = o.length; var l, p = this.mHelper, c = "", f = this.data.singleShape, d = 0, m = 0, u = !0, y = .001 * r.tr * r.finalSize; if (!f || h || r.sz) { var g, v, b = this.textSpans.length; for (t = 0; t < e; t += 1)h && f && 0 !== t || (n = b > t ? this.textSpans[t] : createNS(h ? "path" : "text"), b <= t && (n.setAttribute("stroke-linecap", "butt"), n.setAttribute("stroke-linejoin", "round"), n.setAttribute("stroke-miterlimit", "4"), this.textSpans[t] = n, this.layerElement.appendChild(n)), n.style.display = "inherit"), p.reset(), p.scale(r.finalSize / 100, r.finalSize / 100), f && (o[t].n && (d = -y, m += r.yOffset, m += u ? 1 : 0, u = !1), this.applyTextPropertiesToMatrix(r, p, o[t].line, d, m), d += o[t].l || 0, d += y), h ? (l = (g = (v = this.globalData.fontManager.getCharData(r.finalText[t], i.fStyle, this.globalData.fontManager.getFontByName(r.f).fFamily)) && v.data || {}).shapes ? g.shapes[0].it : [], f ? c += this.createPathShape(p, l) : n.setAttribute("d", this.createPathShape(p, l))) : (f && n.setAttribute("transform", "translate(" + p.props[12] + "," + p.props[13] + ")"), n.textContent = o[t].val, n.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space", "preserve")); f && n && n.setAttribute("d", c) } else { var P = this.textContainer, _ = "start"; switch (r.j) { case 1: _ = "end"; break; case 2: _ = "middle"; break; default: _ = "start" }P.setAttribute("text-anchor", _), P.setAttribute("letter-spacing", y); var E = this.buildTextContents(r.finalText); for (e = E.length, m = r.ps ? r.ps[1] + r.ascent : 0, t = 0; t < e; t += 1)(n = this.textSpans[t] || createNS("tspan")).textContent = E[t], n.setAttribute("x", 0), n.setAttribute("y", m), n.style.display = "inherit", P.appendChild(n), this.textSpans[t] = n, m += r.finalLineHeight; this.layerElement.appendChild(P) } for (; t < this.textSpans.length;)this.textSpans[t].style.display = "none", t += 1; this._sizeChanged = !0 }, SVGTextLottieElement.prototype.sourceRectAtTime = function () { if (this.prepareFrame(this.comp.renderedFrame - this.data.st), this.renderInnerContent(), this._sizeChanged) { this._sizeChanged = !1; var t = this.layerElement.getBBox(); this.bbox = { top: t.y, left: t.x, width: t.width, height: t.height } } return this.bbox }, SVGTextLottieElement.prototype.renderInnerContent = function () { if (!this.data.singleShape && (this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag), this.lettersChangedFlag || this.textAnimator.lettersChangedFlag)) { var t, e; this._sizeChanged = !0; var r, i, s = this.textAnimator.renderedLetters, a = this.textProperty.currentData.l; for (e = a.length, t = 0; t < e; t += 1)a[t].n || (r = s[t], i = this.textSpans[t], r._mdf.m && i.setAttribute("transform", r.m), r._mdf.o && i.setAttribute("opacity", r.o), r._mdf.sw && i.setAttribute("stroke-width", r.sw), r._mdf.sc && i.setAttribute("stroke", r.sc), r._mdf.fc && i.setAttribute("fill", r.fc)) } }, extendPrototype([BaseElement, TransformElement, SVGBaseElement, IShapeElement, HierarchyElement, FrameElement, RenderableDOMElement], SVGShapeElement), SVGShapeElement.prototype.initSecondaryElement = function () { }, SVGShapeElement.prototype.identityMatrix = new Matrix, SVGShapeElement.prototype.buildExpressionInterface = function () { }, SVGShapeElement.prototype.createContent = function () { this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, this.layerElement, 0, [], !0), this.filterUniqueShapes() }, SVGShapeElement.prototype.filterUniqueShapes = function () { var t, e, r, i, s = this.shapes.length, a = this.stylesList.length, n = [], o = !1; for (r = 0; r < a; r += 1) { for (i = this.stylesList[r], o = !1, n.length = 0, t = 0; t < s; t += 1)-1 !== (e = this.shapes[t]).styles.indexOf(i) && (n.push(e), o = e._isAnimated || o); n.length > 1 && o && this.setShapesAsAnimated(n) } }, SVGShapeElement.prototype.setShapesAsAnimated = function (t) { var e, r = t.length; for (e = 0; e < r; e += 1)t[e].setAsAnimated() }, SVGShapeElement.prototype.createStyleElement = function (t, e) { var r, i = new SVGStyleData(t, e), s = i.pElem; return "st" === t.ty ? r = new SVGStrokeStyleData(this, t, i) : "fl" === t.ty ? r = new SVGFillStyleData(this, t, i) : "gf" !== t.ty && "gs" !== t.ty || (r = new ("gf" === t.ty ? SVGGradientFillStyleData : SVGGradientStrokeStyleData)(this, t, i), this.globalData.defs.appendChild(r.gf), r.maskId && (this.globalData.defs.appendChild(r.ms), this.globalData.defs.appendChild(r.of), s.setAttribute("mask", "url(" + locationHref + "#" + r.maskId + ")"))), "st" !== t.ty && "gs" !== t.ty || (s.setAttribute("stroke-linecap", lineCapEnum[t.lc || 2]), s.setAttribute("stroke-linejoin", lineJoinEnum[t.lj || 2]), s.setAttribute("fill-opacity", "0"), 1 === t.lj && s.setAttribute("stroke-miterlimit", t.ml)), 2 === t.r && s.setAttribute("fill-rule", "evenodd"), t.ln && s.setAttribute("id", t.ln), t.cl && s.setAttribute("class", t.cl), t.bm && (s.style["mix-blend-mode"] = getBlendMode(t.bm)), this.stylesList.push(i), this.addToAnimatedContents(t, r), r }, SVGShapeElement.prototype.createGroupElement = function (t) { var e = new ShapeGroupData; return t.ln && e.gr.setAttribute("id", t.ln), t.cl && e.gr.setAttribute("class", t.cl), t.bm && (e.gr.style["mix-blend-mode"] = getBlendMode(t.bm)), e }, SVGShapeElement.prototype.createTransformElement = function (t, e) { var r = TransformPropertyFactory.getTransformProperty(this, t, this), i = new SVGTransformData(r, r.o, e); return this.addToAnimatedContents(t, i), i }, SVGShapeElement.prototype.createShapeElement = function (t, e, r) { var i = 4; "rc" === t.ty ? i = 5 : "el" === t.ty ? i = 6 : "sr" === t.ty && (i = 7); var s = new SVGShapeData(e, r, ShapePropertyFactory.getShapeProp(this, t, i, this)); return this.shapes.push(s), this.addShapeToModifiers(s), this.addToAnimatedContents(t, s), s }, SVGShapeElement.prototype.addToAnimatedContents = function (t, e) { for (var r = 0, i = this.animatedContents.length; r < i;) { if (this.animatedContents[r].element === e) return; r += 1 } this.animatedContents.push({ fn: SVGElementsRenderer.createRenderFunction(t), element: e, data: t }) }, SVGShapeElement.prototype.setElementStyles = function (t) { var e, r = t.styles, i = this.stylesList.length; for (e = 0; e < i; e += 1)this.stylesList[e].closed || r.push(this.stylesList[e]) }, SVGShapeElement.prototype.reloadShapes = function () { var t; this._isFirstFrame = !0; var e = this.itemsData.length; for (t = 0; t < e; t += 1)this.prevViewData[t] = this.itemsData[t]; for (this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, this.layerElement, 0, [], !0), this.filterUniqueShapes(), e = this.dynamicProperties.length, t = 0; t < e; t += 1)this.dynamicProperties[t].getValue(); this.renderModifiers() }, SVGShapeElement.prototype.searchShapes = function (t, e, r, i, s, a, n) { var o, h, l, p, c, f, d = [].concat(a), m = t.length - 1, u = [], y = []; for (o = m; o >= 0; o -= 1) { if ((f = this.searchProcessedElement(t[o])) ? e[o] = r[f - 1] : t[o]._render = n, "fl" === t[o].ty || "st" === t[o].ty || "gf" === t[o].ty || "gs" === t[o].ty) f ? e[o].style.closed = !1 : e[o] = this.createStyleElement(t[o], s), t[o]._render && e[o].style.pElem.parentNode !== i && i.appendChild(e[o].style.pElem), u.push(e[o].style); else if ("gr" === t[o].ty) { if (f) for (l = e[o].it.length, h = 0; h < l; h += 1)e[o].prevViewData[h] = e[o].it[h]; else e[o] = this.createGroupElement(t[o]); this.searchShapes(t[o].it, e[o].it, e[o].prevViewData, e[o].gr, s + 1, d, n), t[o]._render && e[o].gr.parentNode !== i && i.appendChild(e[o].gr) } else "tr" === t[o].ty ? (f || (e[o] = this.createTransformElement(t[o], i)), p = e[o].transform, d.push(p)) : "sh" === t[o].ty || "rc" === t[o].ty || "el" === t[o].ty || "sr" === t[o].ty ? (f || (e[o] = this.createShapeElement(t[o], d, s)), this.setElementStyles(e[o])) : "tm" === t[o].ty || "rd" === t[o].ty || "ms" === t[o].ty || "pb" === t[o].ty ? (f ? (c = e[o]).closed = !1 : ((c = ShapeModifiers.getModifier(t[o].ty)).init(this, t[o]), e[o] = c, this.shapeModifiers.push(c)), y.push(c)) : "rp" === t[o].ty && (f ? (c = e[o]).closed = !0 : (c = ShapeModifiers.getModifier(t[o].ty), e[o] = c, c.init(this, t, o, e), this.shapeModifiers.push(c), n = !1), y.push(c)); this.addProcessedElement(t[o], o + 1) } for (m = u.length, o = 0; o < m; o += 1)u[o].closed = !0; for (m = y.length, o = 0; o < m; o += 1)y[o].closed = !0 }, SVGShapeElement.prototype.renderInnerContent = function () { var t; this.renderModifiers(); var e = this.stylesList.length; for (t = 0; t < e; t += 1)this.stylesList[t].reset(); for (this.renderShape(), t = 0; t < e; t += 1)(this.stylesList[t]._mdf || this._isFirstFrame) && (this.stylesList[t].msElem && (this.stylesList[t].msElem.setAttribute("d", this.stylesList[t].d), this.stylesList[t].d = "M0 0" + this.stylesList[t].d), this.stylesList[t].pElem.setAttribute("d", this.stylesList[t].d || "M0 0")) }, SVGShapeElement.prototype.renderShape = function () { var t, e, r = this.animatedContents.length; for (t = 0; t < r; t += 1)e = this.animatedContents[t], (this._isFirstFrame || e.element._isAnimated) && !0 !== e.data && e.fn(e.data, e.element, this._isFirstFrame) }, SVGShapeElement.prototype.destroy = function () { this.destroyBaseElement(), this.shapesData = null, this.itemsData = null }, SVGTintFilter.prototype.renderFrame = function (t) { if (t || this.filterManager._mdf) { var e = this.filterManager.effectElements[0].p.v, r = this.filterManager.effectElements[1].p.v, i = this.filterManager.effectElements[2].p.v / 100; this.matrixFilter.setAttribute("values", r[0] - e[0] + " 0 0 0 " + e[0] + " " + (r[1] - e[1]) + " 0 0 0 " + e[1] + " " + (r[2] - e[2]) + " 0 0 0 " + e[2] + " 0 0 0 " + i + " 0") } }, SVGFillFilter.prototype.renderFrame = function (t) { if (t || this.filterManager._mdf) { var e = this.filterManager.effectElements[2].p.v, r = this.filterManager.effectElements[6].p.v; this.matrixFilter.setAttribute("values", "0 0 0 0 " + e[0] + " 0 0 0 0 " + e[1] + " 0 0 0 0 " + e[2] + " 0 0 0 " + r + " 0") } }, SVGGaussianBlurEffect.prototype.renderFrame = function (t) { if (t || this.filterManager._mdf) { var e = .3 * this.filterManager.effectElements[0].p.v, r = this.filterManager.effectElements[1].p.v, i = 3 == r ? 0 : e, s = 2 == r ? 0 : e; this.feGaussianBlur.setAttribute("stdDeviation", i + " " + s); var a = 1 == this.filterManager.effectElements[2].p.v ? "wrap" : "duplicate"; this.feGaussianBlur.setAttribute("edgeMode", a) } }, SVGStrokeEffect.prototype.initialize = function () { var t, e, r, i, s = this.elem.layerElement.children || this.elem.layerElement.childNodes; for (1 === this.filterManager.effectElements[1].p.v ? (i = this.elem.maskManager.masksProperties.length, r = 0) : i = 1 + (r = this.filterManager.effectElements[0].p.v - 1), (e = createNS("g")).setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e.setAttribute("stroke-dashoffset", 1); r < i; r += 1)t = createNS("path"), e.appendChild(t), this.paths.push({ p: t, m: r }); if (3 === this.filterManager.effectElements[10].p.v) { var a = createNS("mask"), n = createElementID(); a.setAttribute("id", n), a.setAttribute("mask-type", "alpha"), a.appendChild(e), this.elem.globalData.defs.appendChild(a); var o = createNS("g"); for (o.setAttribute("mask", "url(" + locationHref + "#" + n + ")"); s[0];)o.appendChild(s[0]); this.elem.layerElement.appendChild(o), this.masker = a, e.setAttribute("stroke", "#fff") } else if (1 === this.filterManager.effectElements[10].p.v || 2 === this.filterManager.effectElements[10].p.v) { if (2 === this.filterManager.effectElements[10].p.v) for (s = this.elem.layerElement.children || this.elem.layerElement.childNodes; s.length;)this.elem.layerElement.removeChild(s[0]); this.elem.layerElement.appendChild(e), this.elem.layerElement.removeAttribute("mask"), e.setAttribute("stroke", "#fff") } this.initialized = !0, this.pathMasker = e }, SVGStrokeEffect.prototype.renderFrame = function (t) { var e; this.initialized || this.initialize(); var r, i, s = this.paths.length; for (e = 0; e < s; e += 1)if (-1 !== this.paths[e].m && (r = this.elem.maskManager.viewData[this.paths[e].m], i = this.paths[e].p, (t || this.filterManager._mdf || r.prop._mdf) && i.setAttribute("d", r.lastPath), t || this.filterManager.effectElements[9].p._mdf || this.filterManager.effectElements[4].p._mdf || this.filterManager.effectElements[7].p._mdf || this.filterManager.effectElements[8].p._mdf || r.prop._mdf)) { var a; if (0 !== this.filterManager.effectElements[7].p.v || 100 !== this.filterManager.effectElements[8].p.v) { var n = .01 * Math.min(this.filterManager.effectElements[7].p.v, this.filterManager.effectElements[8].p.v), o = .01 * Math.max(this.filterManager.effectElements[7].p.v, this.filterManager.effectElements[8].p.v), h = i.getTotalLength(); a = "0 0 0 " + h * n + " "; var l, p = h * (o - n), c = 1 + 2 * this.filterManager.effectElements[4].p.v * this.filterManager.effectElements[9].p.v * .01, f = Math.floor(p / c); for (l = 0; l < f; l += 1)a += "1 " + 2 * this.filterManager.effectElements[4].p.v * this.filterManager.effectElements[9].p.v * .01 + " "; a += "0 " + 10 * h + " 0 0" } else a = "1 " + 2 * this.filterManager.effectElements[4].p.v * this.filterManager.effectElements[9].p.v * .01; i.setAttribute("stroke-dasharray", a) } if ((t || this.filterManager.effectElements[4].p._mdf) && this.pathMasker.setAttribute("stroke-width", 2 * this.filterManager.effectElements[4].p.v), (t || this.filterManager.effectElements[6].p._mdf) && this.pathMasker.setAttribute("opacity", this.filterManager.effectElements[6].p.v), (1 === this.filterManager.effectElements[10].p.v || 2 === this.filterManager.effectElements[10].p.v) && (t || this.filterManager.effectElements[3].p._mdf)) { var d = this.filterManager.effectElements[3].p.v; this.pathMasker.setAttribute("stroke", "rgb(" + bmFloor(255 * d[0]) + "," + bmFloor(255 * d[1]) + "," + bmFloor(255 * d[2]) + ")") } }, SVGTritoneFilter.prototype.renderFrame = function (t) { if (t || this.filterManager._mdf) { var e = this.filterManager.effectElements[0].p.v, r = this.filterManager.effectElements[1].p.v, i = this.filterManager.effectElements[2].p.v, s = i[0] + " " + r[0] + " " + e[0], a = i[1] + " " + r[1] + " " + e[1], n = i[2] + " " + r[2] + " " + e[2]; this.feFuncR.setAttribute("tableValues", s), this.feFuncG.setAttribute("tableValues", a), this.feFuncB.setAttribute("tableValues", n) } }, SVGProLevelsFilter.prototype.createFeFunc = function (t, e) { var r = createNS(t); return r.setAttribute("type", "table"), e.appendChild(r), r }, SVGProLevelsFilter.prototype.getTableValue = function (t, e, r, i, s) { for (var a, n, o = 0, h = Math.min(t, e), l = Math.max(t, e), p = Array.call(null, { length: 256 }), c = 0, f = s - i, d = e - t; o <= 256;)n = (a = o / 256) <= h ? d < 0 ? s : i : a >= l ? d < 0 ? i : s : i + f * Math.pow((a - t) / d, 1 / r), p[c] = n, c += 1, o += 256 / 255; return p.join(" ") }, SVGProLevelsFilter.prototype.renderFrame = function (t) { if (t || this.filterManager._mdf) { var e, r = this.filterManager.effectElements; this.feFuncRComposed && (t || r[3].p._mdf || r[4].p._mdf || r[5].p._mdf || r[6].p._mdf || r[7].p._mdf) && (e = this.getTableValue(r[3].p.v, r[4].p.v, r[5].p.v, r[6].p.v, r[7].p.v), this.feFuncRComposed.setAttribute("tableValues", e), this.feFuncGComposed.setAttribute("tableValues", e), this.feFuncBComposed.setAttribute("tableValues", e)), this.feFuncR && (t || r[10].p._mdf || r[11].p._mdf || r[12].p._mdf || r[13].p._mdf || r[14].p._mdf) && (e = this.getTableValue(r[10].p.v, r[11].p.v, r[12].p.v, r[13].p.v, r[14].p.v), this.feFuncR.setAttribute("tableValues", e)), this.feFuncG && (t || r[17].p._mdf || r[18].p._mdf || r[19].p._mdf || r[20].p._mdf || r[21].p._mdf) && (e = this.getTableValue(r[17].p.v, r[18].p.v, r[19].p.v, r[20].p.v, r[21].p.v), this.feFuncG.setAttribute("tableValues", e)), this.feFuncB && (t || r[24].p._mdf || r[25].p._mdf || r[26].p._mdf || r[27].p._mdf || r[28].p._mdf) && (e = this.getTableValue(r[24].p.v, r[25].p.v, r[26].p.v, r[27].p.v, r[28].p.v), this.feFuncB.setAttribute("tableValues", e)), this.feFuncA && (t || r[31].p._mdf || r[32].p._mdf || r[33].p._mdf || r[34].p._mdf || r[35].p._mdf) && (e = this.getTableValue(r[31].p.v, r[32].p.v, r[33].p.v, r[34].p.v, r[35].p.v), this.feFuncA.setAttribute("tableValues", e)) } }, SVGDropShadowEffect.prototype.renderFrame = function (t) { if (t || this.filterManager._mdf) { if ((t || this.filterManager.effectElements[4].p._mdf) && this.feGaussianBlur.setAttribute("stdDeviation", this.filterManager.effectElements[4].p.v / 4), t || this.filterManager.effectElements[0].p._mdf) { var e = this.filterManager.effectElements[0].p.v; this.feFlood.setAttribute("flood-color", rgbToHex(Math.round(255 * e[0]), Math.round(255 * e[1]), Math.round(255 * e[2]))) } if ((t || this.filterManager.effectElements[1].p._mdf) && this.feFlood.setAttribute("flood-opacity", this.filterManager.effectElements[1].p.v / 255), t || this.filterManager.effectElements[2].p._mdf || this.filterManager.effectElements[3].p._mdf) { var r = this.filterManager.effectElements[3].p.v, i = (this.filterManager.effectElements[2].p.v - 90) * degToRads, s = r * Math.cos(i), a = r * Math.sin(i); this.feOffset.setAttribute("dx", s), this.feOffset.setAttribute("dy", a) } } }; var _svgMatteSymbols = []; function SVGMatte3Effect(t, e, r) { this.initialized = !1, this.filterManager = e, this.filterElem = t, this.elem = r, r.matteElement = createNS("g"), r.matteElement.appendChild(r.layerElement), r.matteElement.appendChild(r.transformedElement), r.baseElement = r.matteElement } function SVGEffects(t) { var e, r, i = t.data.ef ? t.data.ef.length : 0, s = createElementID(), a = filtersFactory.createFilter(s, !0), n = 0; for (this.filters = [], e = 0; e < i; e += 1)r = null, 20 === t.data.ef[e].ty ? (n += 1, r = new SVGTintFilter(a, t.effectsManager.effectElements[e])) : 21 === t.data.ef[e].ty ? (n += 1, r = new SVGFillFilter(a, t.effectsManager.effectElements[e])) : 22 === t.data.ef[e].ty ? r = new SVGStrokeEffect(t, t.effectsManager.effectElements[e]) : 23 === t.data.ef[e].ty ? (n += 1, r = new SVGTritoneFilter(a, t.effectsManager.effectElements[e])) : 24 === t.data.ef[e].ty ? (n += 1, r = new SVGProLevelsFilter(a, t.effectsManager.effectElements[e])) : 25 === t.data.ef[e].ty ? (n += 1, r = new SVGDropShadowEffect(a, t.effectsManager.effectElements[e])) : 28 === t.data.ef[e].ty ? r = new SVGMatte3Effect(a, t.effectsManager.effectElements[e], t) : 29 === t.data.ef[e].ty && (n += 1, r = new SVGGaussianBlurEffect(a, t.effectsManager.effectElements[e])), r && this.filters.push(r); n && (t.globalData.defs.appendChild(a), t.layerElement.setAttribute("filter", "url(" + locationHref + "#" + s + ")")), this.filters.length && t.addRenderableComponent(this) } function CVContextData() { var t; for (this.saved = [], this.cArrPos = 0, this.cTr = new Matrix, this.cO = 1, this.savedOp = createTypedArray("float32", 15), t = 0; t < 15; t += 1)this.saved[t] = createTypedArray("float32", 16); this._length = 15 } function CVBaseElement() { } function CVImageElement(t, e, r) { this.assetData = e.getAssetData(t.refId), this.img = e.imageLoader.getAsset(this.assetData), this.initElement(t, e, r) } function CVCompElement(t, e, r) { this.completeLayers = !1, this.layers = t.layers, this.pendingElements = [], this.elements = createSizedArray(this.layers.length), this.initElement(t, e, r), this.tm = t.tm ? PropertyFactory.getProp(this, t.tm, 0, e.frameRate, this) : { _placeholder: !0 } } function CVMaskElement(t, e) { var r; this.data = t, this.element = e, this.masksProperties = this.data.masksProperties || [], this.viewData = createSizedArray(this.masksProperties.length); var i = this.masksProperties.length, s = !1; for (r = 0; r < i; r += 1)"n" !== this.masksProperties[r].mode && (s = !0), this.viewData[r] = ShapePropertyFactory.getShapeProp(this.element, this.masksProperties[r], 3); this.hasMasks = s, s && this.element.addRenderableComponent(this) } function CVShapeElement(t, e, r) { this.shapes = [], this.shapesData = t.shapes, this.stylesList = [], this.itemsData = [], this.prevViewData = [], this.shapeModifiers = [], this.processedElements = [], this.transformsManager = new ShapeTransformManager, this.initElement(t, e, r) } function CVSolidElement(t, e, r) { this.initElement(t, e, r) } function CVTextElement(t, e, r) { this.textSpans = [], this.yOffset = 0, this.fillColorAnim = !1, this.strokeColorAnim = !1, this.strokeWidthAnim = !1, this.stroke = !1, this.fill = !1, this.justifyOffset = 0, this.currentRender = null, this.renderType = "canvas", this.values = { fill: "rgba(0,0,0,0)", stroke: "rgba(0,0,0,0)", sWidth: 0, fValue: "" }, this.initElement(t, e, r) } function CVEffects() { } function HBaseElement() { } function HSolidElement(t, e, r) { this.initElement(t, e, r) } function HCompElement(t, e, r) { this.layers = t.layers, this.supports3d = !t.hasMask, this.completeLayers = !1, this.pendingElements = [], this.elements = this.layers ? createSizedArray(this.layers.length) : [], this.initElement(t, e, r), this.tm = t.tm ? PropertyFactory.getProp(this, t.tm, 0, e.frameRate, this) : { _placeholder: !0 } } function HShapeElement(t, e, r) { this.shapes = [], this.shapesData = t.shapes, this.stylesList = [], this.shapeModifiers = [], this.itemsData = [], this.processedElements = [], this.animatedContents = [], this.shapesContainer = createNS("g"), this.initElement(t, e, r), this.prevViewData = [], this.currentBBox = { x: 999999, y: -999999, h: 0, w: 0 } } function HTextElement(t, e, r) { this.textSpans = [], this.textPaths = [], this.currentBBox = { x: 999999, y: -999999, h: 0, w: 0 }, this.renderType = "svg", this.isMasked = !1, this.initElement(t, e, r) } function HImageElement(t, e, r) { this.assetData = e.getAssetData(t.refId), this.initElement(t, e, r) } function HCameraElement(t, e, r) { this.initFrame(), this.initBaseData(t, e, r), this.initHierarchy(); var i = PropertyFactory.getProp; if (this.pe = i(this, t.pe, 0, 0, this), t.ks.p.s ? (this.px = i(this, t.ks.p.x, 1, 0, this), this.py = i(this, t.ks.p.y, 1, 0, this), this.pz = i(this, t.ks.p.z, 1, 0, this)) : this.p = i(this, t.ks.p, 1, 0, this), t.ks.a && (this.a = i(this, t.ks.a, 1, 0, this)), t.ks.or.k.length && t.ks.or.k[0].to) { var s, a = t.ks.or.k.length; for (s = 0; s < a; s += 1)t.ks.or.k[s].to = null, t.ks.or.k[s].ti = null } this.or = i(this, t.ks.or, 1, degToRads, this), this.or.sh = !0, this.rx = i(this, t.ks.rx, 0, degToRads, this), this.ry = i(this, t.ks.ry, 0, degToRads, this), this.rz = i(this, t.ks.rz, 0, degToRads, this), this.mat = new Matrix, this._prevMat = new Matrix, this._isFirstFrame = !0, this.finalTransform = { mProp: this } } function HEffects() { } SVGMatte3Effect.prototype.findSymbol = function (t) { for (var e = 0, r = _svgMatteSymbols.length; e < r;) { if (_svgMatteSymbols[e] === t) return _svgMatteSymbols[e]; e += 1 } return null }, SVGMatte3Effect.prototype.replaceInParent = function (t, e) { var r = t.layerElement.parentNode; if (r) { for (var i, s = r.children, a = 0, n = s.length; a < n && s[a] !== t.layerElement;)a += 1; a <= n - 2 && (i = s[a + 1]); var o = createNS("use"); o.setAttribute("href", "#" + e), i ? r.insertBefore(o, i) : r.appendChild(o) } }, SVGMatte3Effect.prototype.setElementAsMask = function (t, e) { if (!this.findSymbol(e)) { var r = createElementID(), i = createNS("mask"); i.setAttribute("id", e.layerId), i.setAttribute("mask-type", "alpha"), _svgMatteSymbols.push(e); var s = t.globalData.defs; s.appendChild(i); var a = createNS("symbol"); a.setAttribute("id", r), this.replaceInParent(e, r), a.appendChild(e.layerElement), s.appendChild(a); var n = createNS("use"); n.setAttribute("href", "#" + r), i.appendChild(n), e.data.hd = !1, e.show() } t.setMatte(e.layerId) }, SVGMatte3Effect.prototype.initialize = function () { for (var t = this.filterManager.effectElements[0].p.v, e = this.elem.comp.elements, r = 0, i = e.length; r < i;)e[r] && e[r].data.ind === t && this.setElementAsMask(this.elem, e[r]), r += 1; this.initialized = !0 }, SVGMatte3Effect.prototype.renderFrame = function () { this.initialized || this.initialize() }, SVGEffects.prototype.renderFrame = function (t) { var e, r = this.filters.length; for (e = 0; e < r; e += 1)this.filters[e].renderFrame(t) }, CVContextData.prototype.duplicate = function () { var t = 2 * this._length, e = this.savedOp; this.savedOp = createTypedArray("float32", t), this.savedOp.set(e); var r = 0; for (r = this._length; r < t; r += 1)this.saved[r] = createTypedArray("float32", 16); this._length = t }, CVContextData.prototype.reset = function () { this.cArrPos = 0, this.cTr.reset(), this.cO = 1 }, CVBaseElement.prototype = { createElements: function () { }, initRendererElement: function () { }, createContainerElements: function () { this.canvasContext = this.globalData.canvasContext, this.renderableEffectsManager = new CVEffects(this) }, createContent: function () { }, setBlendMode: function () { var t = this.globalData; if (t.blendMode !== this.data.bm) { t.blendMode = this.data.bm; var e = getBlendMode(this.data.bm); t.canvasContext.globalCompositeOperation = e } }, createRenderableComponents: function () { this.maskManager = new CVMaskElement(this.data, this) }, hideElement: function () { this.hidden || this.isInRange && !this.isTransparent || (this.hidden = !0) }, showElement: function () { this.isInRange && !this.isTransparent && (this.hidden = !1, this._isFirstFrame = !0, this.maskManager._isFirstFrame = !0) }, renderFrame: function () { if (!this.hidden && !this.data.hd) { this.renderTransform(), this.renderRenderable(), this.setBlendMode(); var t = 0 === this.data.ty; this.globalData.renderer.save(t), this.globalData.renderer.ctxTransform(this.finalTransform.mat.props), this.globalData.renderer.ctxOpacity(this.finalTransform.mProp.o.v), this.renderInnerContent(), this.globalData.renderer.restore(t), this.maskManager.hasMasks && this.globalData.renderer.restore(!0), this._isFirstFrame && (this._isFirstFrame = !1) } }, destroy: function () { this.canvasContext = null, this.data = null, this.globalData = null, this.maskManager.destroy() }, mHelper: new Matrix }, CVBaseElement.prototype.hide = CVBaseElement.prototype.hideElement, CVBaseElement.prototype.show = CVBaseElement.prototype.showElement, extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement], CVImageElement), CVImageElement.prototype.initElement = SVGShapeElement.prototype.initElement, CVImageElement.prototype.prepareFrame = IImageElement.prototype.prepareFrame, CVImageElement.prototype.createContent = function () { if (this.img.width && (this.assetData.w !== this.img.width || this.assetData.h !== this.img.height)) { var t = createTag("canvas"); t.width = this.assetData.w, t.height = this.assetData.h; var e, r, i = t.getContext("2d"), s = this.img.width, a = this.img.height, n = s / a, o = this.assetData.w / this.assetData.h, h = this.assetData.pr || this.globalData.renderConfig.imagePreserveAspectRatio; n > o && "xMidYMid slice" === h || n < o && "xMidYMid slice" !== h ? e = (r = a) * o : r = (e = s) / o, i.drawImage(this.img, (s - e) / 2, (a - r) / 2, e, r, 0, 0, this.assetData.w, this.assetData.h), this.img = t } }, CVImageElement.prototype.renderInnerContent = function () { this.canvasContext.drawImage(this.img, 0, 0) }, CVImageElement.prototype.destroy = function () { this.img = null }, extendPrototype([CanvasRenderer, ICompElement, CVBaseElement], CVCompElement), CVCompElement.prototype.renderInnerContent = function () { var t, e = this.canvasContext; for (e.beginPath(), e.moveTo(0, 0), e.lineTo(this.data.w, 0), e.lineTo(this.data.w, this.data.h), e.lineTo(0, this.data.h), e.lineTo(0, 0), e.clip(), t = this.layers.length - 1; t >= 0; t -= 1)(this.completeLayers || this.elements[t]) && this.elements[t].renderFrame() }, CVCompElement.prototype.destroy = function () { var t; for (t = this.layers.length - 1; t >= 0; t -= 1)this.elements[t] && this.elements[t].destroy(); this.layers = null, this.elements = null }, CVMaskElement.prototype.renderFrame = function () { if (this.hasMasks) { var t, e, r, i, s = this.element.finalTransform.mat, a = this.element.canvasContext, n = this.masksProperties.length; for (a.beginPath(), t = 0; t < n; t += 1)if ("n" !== this.masksProperties[t].mode) { var o; this.masksProperties[t].inv && (a.moveTo(0, 0), a.lineTo(this.element.globalData.compSize.w, 0), a.lineTo(this.element.globalData.compSize.w, this.element.globalData.compSize.h), a.lineTo(0, this.element.globalData.compSize.h), a.lineTo(0, 0)), i = this.viewData[t].v, e = s.applyToPointArray(i.v[0][0], i.v[0][1], 0), a.moveTo(e[0], e[1]); var h = i._length; for (o = 1; o < h; o += 1)r = s.applyToTriplePoints(i.o[o - 1], i.i[o], i.v[o]), a.bezierCurveTo(r[0], r[1], r[2], r[3], r[4], r[5]); r = s.applyToTriplePoints(i.o[o - 1], i.i[0], i.v[0]), a.bezierCurveTo(r[0], r[1], r[2], r[3], r[4], r[5]) } this.element.globalData.renderer.save(!0), a.clip() } }, CVMaskElement.prototype.getMaskProperty = MaskElement.prototype.getMaskProperty, CVMaskElement.prototype.destroy = function () { this.element = null }, extendPrototype([BaseElement, TransformElement, CVBaseElement, IShapeElement, HierarchyElement, FrameElement, RenderableElement], CVShapeElement), CVShapeElement.prototype.initElement = RenderableDOMElement.prototype.initElement, CVShapeElement.prototype.transformHelper = { opacity: 1, _opMdf: !1 }, CVShapeElement.prototype.dashResetter = [], CVShapeElement.prototype.createContent = function () { this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, !0, []) }, CVShapeElement.prototype.createStyleElement = function (t, e) { var r = { data: t, type: t.ty, preTransforms: this.transformsManager.addTransformSequence(e), transforms: [], elements: [], closed: !0 === t.hd }, i = {}; if ("fl" === t.ty || "st" === t.ty ? (i.c = PropertyFactory.getProp(this, t.c, 1, 255, this), i.c.k || (r.co = "rgb(" + bmFloor(i.c.v[0]) + "," + bmFloor(i.c.v[1]) + "," + bmFloor(i.c.v[2]) + ")")) : "gf" !== t.ty && "gs" !== t.ty || (i.s = PropertyFactory.getProp(this, t.s, 1, null, this), i.e = PropertyFactory.getProp(this, t.e, 1, null, this), i.h = PropertyFactory.getProp(this, t.h || { k: 0 }, 0, .01, this), i.a = PropertyFactory.getProp(this, t.a || { k: 0 }, 0, degToRads, this), i.g = new GradientProperty(this, t.g, this)), i.o = PropertyFactory.getProp(this, t.o, 0, .01, this), "st" === t.ty || "gs" === t.ty) { if (r.lc = lineCapEnum[t.lc || 2], r.lj = lineJoinEnum[t.lj || 2], 1 == t.lj && (r.ml = t.ml), i.w = PropertyFactory.getProp(this, t.w, 0, null, this), i.w.k || (r.wi = i.w.v), t.d) { var s = new DashProperty(this, t.d, "canvas", this); i.d = s, i.d.k || (r.da = i.d.dashArray, r.do = i.d.dashoffset[0]) } } else r.r = 2 === t.r ? "evenodd" : "nonzero"; return this.stylesList.push(r), i.style = r, i }, CVShapeElement.prototype.createGroupElement = function () { return { it: [], prevViewData: [] } }, CVShapeElement.prototype.createTransformElement = function (t) { return { transform: { opacity: 1, _opMdf: !1, key: this.transformsManager.getNewKey(), op: PropertyFactory.getProp(this, t.o, 0, .01, this), mProps: TransformPropertyFactory.getTransformProperty(this, t, this) } } }, CVShapeElement.prototype.createShapeElement = function (t) { var e = new CVShapeData(this, t, this.stylesList, this.transformsManager); return this.shapes.push(e), this.addShapeToModifiers(e), e }, CVShapeElement.prototype.reloadShapes = function () { var t; this._isFirstFrame = !0; var e = this.itemsData.length; for (t = 0; t < e; t += 1)this.prevViewData[t] = this.itemsData[t]; for (this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, !0, []), e = this.dynamicProperties.length, t = 0; t < e; t += 1)this.dynamicProperties[t].getValue(); this.renderModifiers(), this.transformsManager.processSequences(this._isFirstFrame) }, CVShapeElement.prototype.addTransformToStyleList = function (t) { var e, r = this.stylesList.length; for (e = 0; e < r; e += 1)this.stylesList[e].closed || this.stylesList[e].transforms.push(t) }, CVShapeElement.prototype.removeTransformFromStyleList = function () { var t, e = this.stylesList.length; for (t = 0; t < e; t += 1)this.stylesList[t].closed || this.stylesList[t].transforms.pop() }, CVShapeElement.prototype.closeStyles = function (t) { var e, r = t.length; for (e = 0; e < r; e += 1)t[e].closed = !0 }, CVShapeElement.prototype.searchShapes = function (t, e, r, i, s) { var a, n, o, h, l, p, c = t.length - 1, f = [], d = [], m = [].concat(s); for (a = c; a >= 0; a -= 1) { if ((h = this.searchProcessedElement(t[a])) ? e[a] = r[h - 1] : t[a]._shouldRender = i, "fl" === t[a].ty || "st" === t[a].ty || "gf" === t[a].ty || "gs" === t[a].ty) h ? e[a].style.closed = !1 : e[a] = this.createStyleElement(t[a], m), f.push(e[a].style); else if ("gr" === t[a].ty) { if (h) for (o = e[a].it.length, n = 0; n < o; n += 1)e[a].prevViewData[n] = e[a].it[n]; else e[a] = this.createGroupElement(t[a]); this.searchShapes(t[a].it, e[a].it, e[a].prevViewData, i, m) } else "tr" === t[a].ty ? (h || (p = this.createTransformElement(t[a]), e[a] = p), m.push(e[a]), this.addTransformToStyleList(e[a])) : "sh" === t[a].ty || "rc" === t[a].ty || "el" === t[a].ty || "sr" === t[a].ty ? h || (e[a] = this.createShapeElement(t[a])) : "tm" === t[a].ty || "rd" === t[a].ty || "pb" === t[a].ty ? (h ? (l = e[a]).closed = !1 : ((l = ShapeModifiers.getModifier(t[a].ty)).init(this, t[a]), e[a] = l, this.shapeModifiers.push(l)), d.push(l)) : "rp" === t[a].ty && (h ? (l = e[a]).closed = !0 : (l = ShapeModifiers.getModifier(t[a].ty), e[a] = l, l.init(this, t, a, e), this.shapeModifiers.push(l), i = !1), d.push(l)); this.addProcessedElement(t[a], a + 1) } for (this.removeTransformFromStyleList(), this.closeStyles(f), c = d.length, a = 0; a < c; a += 1)d[a].closed = !0 }, CVShapeElement.prototype.renderInnerContent = function () { this.transformHelper.opacity = 1, this.transformHelper._opMdf = !1, this.renderModifiers(), this.transformsManager.processSequences(this._isFirstFrame), this.renderShape(this.transformHelper, this.shapesData, this.itemsData, !0) }, CVShapeElement.prototype.renderShapeTransform = function (t, e) { (t._opMdf || e.op._mdf || this._isFirstFrame) && (e.opacity = t.opacity, e.opacity *= e.op.v, e._opMdf = !0) }, CVShapeElement.prototype.drawLayer = function () { var t, e, r, i, s, a, n, o, h, l = this.stylesList.length, p = this.globalData.renderer, c = this.globalData.canvasContext; for (t = 0; t < l; t += 1)if (("st" !== (o = (h = this.stylesList[t]).type) && "gs" !== o || 0 !== h.wi) && h.data._shouldRender && 0 !== h.coOp && 0 !== this.globalData.currentGlobalAlpha) { for (p.save(), a = h.elements, "st" === o || "gs" === o ? (c.strokeStyle = "st" === o ? h.co : h.grd, c.lineWidth = h.wi, c.lineCap = h.lc, c.lineJoin = h.lj, c.miterLimit = h.ml || 0) : c.fillStyle = "fl" === o ? h.co : h.grd, p.ctxOpacity(h.coOp), "st" !== o && "gs" !== o && c.beginPath(), p.ctxTransform(h.preTransforms.finalTransform.props), r = a.length, e = 0; e < r; e += 1) { for ("st" !== o && "gs" !== o || (c.beginPath(), h.da && (c.setLineDash(h.da), c.lineDashOffset = h.do)), s = (n = a[e].trNodes).length, i = 0; i < s; i += 1)"m" === n[i].t ? c.moveTo(n[i].p[0], n[i].p[1]) : "c" === n[i].t ? c.bezierCurveTo(n[i].pts[0], n[i].pts[1], n[i].pts[2], n[i].pts[3], n[i].pts[4], n[i].pts[5]) : c.closePath(); "st" !== o && "gs" !== o || (c.stroke(), h.da && c.setLineDash(this.dashResetter)) } "st" !== o && "gs" !== o && c.fill(h.r), p.restore() } }, CVShapeElement.prototype.renderShape = function (t, e, r, i) { var s, a; for (a = t, s = e.length - 1; s >= 0; s -= 1)"tr" === e[s].ty ? (a = r[s].transform, this.renderShapeTransform(t, a)) : "sh" === e[s].ty || "el" === e[s].ty || "rc" === e[s].ty || "sr" === e[s].ty ? this.renderPath(e[s], r[s]) : "fl" === e[s].ty ? this.renderFill(e[s], r[s], a) : "st" === e[s].ty ? this.renderStroke(e[s], r[s], a) : "gf" === e[s].ty || "gs" === e[s].ty ? this.renderGradientFill(e[s], r[s], a) : "gr" === e[s].ty ? this.renderShape(a, e[s].it, r[s].it) : e[s].ty; i && this.drawLayer() }, CVShapeElement.prototype.renderStyledShape = function (t, e) { if (this._isFirstFrame || e._mdf || t.transforms._mdf) { var r, i, s, a = t.trNodes, n = e.paths, o = n._length; a.length = 0; var h = t.transforms.finalTransform; for (s = 0; s < o; s += 1) { var l = n.shapes[s]; if (l && l.v) { for (i = l._length, r = 1; r < i; r += 1)1 === r && a.push({ t: "m", p: h.applyToPointArray(l.v[0][0], l.v[0][1], 0) }), a.push({ t: "c", pts: h.applyToTriplePoints(l.o[r - 1], l.i[r], l.v[r]) }); 1 === i && a.push({ t: "m", p: h.applyToPointArray(l.v[0][0], l.v[0][1], 0) }), l.c && i && (a.push({ t: "c", pts: h.applyToTriplePoints(l.o[r - 1], l.i[0], l.v[0]) }), a.push({ t: "z" })) } } t.trNodes = a } }, CVShapeElement.prototype.renderPath = function (t, e) { if (!0 !== t.hd && t._shouldRender) { var r, i = e.styledShapes.length; for (r = 0; r < i; r += 1)this.renderStyledShape(e.styledShapes[r], e.sh) } }, CVShapeElement.prototype.renderFill = function (t, e, r) { var i = e.style; (e.c._mdf || this._isFirstFrame) && (i.co = "rgb(" + bmFloor(e.c.v[0]) + "," + bmFloor(e.c.v[1]) + "," + bmFloor(e.c.v[2]) + ")"), (e.o._mdf || r._opMdf || this._isFirstFrame) && (i.coOp = e.o.v * r.opacity) }, CVShapeElement.prototype.renderGradientFill = function (t, e, r) { var i, s = e.style; if (!s.grd || e.g._mdf || e.s._mdf || e.e._mdf || 1 !== t.t && (e.h._mdf || e.a._mdf)) { var a, n = this.globalData.canvasContext, o = e.s.v, h = e.e.v; if (1 === t.t) i = n.createLinearGradient(o[0], o[1], h[0], h[1]); else { var l = Math.sqrt(Math.pow(o[0] - h[0], 2) + Math.pow(o[1] - h[1], 2)), p = Math.atan2(h[1] - o[1], h[0] - o[0]), c = e.h.v; c >= 1 ? c = .99 : c <= -1 && (c = -.99); var f = l * c, d = Math.cos(p + e.a.v) * f + o[0], m = Math.sin(p + e.a.v) * f + o[1]; i = n.createRadialGradient(d, m, 0, o[0], o[1], l) } var u = t.g.p, y = e.g.c, g = 1; for (a = 0; a < u; a += 1)e.g._hasOpacity && e.g._collapsable && (g = e.g.o[2 * a + 1]), i.addColorStop(y[4 * a] / 100, "rgba(" + y[4 * a + 1] + "," + y[4 * a + 2] + "," + y[4 * a + 3] + "," + g + ")"); s.grd = i } s.coOp = e.o.v * r.opacity }, CVShapeElement.prototype.renderStroke = function (t, e, r) { var i = e.style, s = e.d; s && (s._mdf || this._isFirstFrame) && (i.da = s.dashArray, i.do = s.dashoffset[0]), (e.c._mdf || this._isFirstFrame) && (i.co = "rgb(" + bmFloor(e.c.v[0]) + "," + bmFloor(e.c.v[1]) + "," + bmFloor(e.c.v[2]) + ")"), (e.o._mdf || r._opMdf || this._isFirstFrame) && (i.coOp = e.o.v * r.opacity), (e.w._mdf || this._isFirstFrame) && (i.wi = e.w.v) }, CVShapeElement.prototype.destroy = function () { this.shapesData = null, this.globalData = null, this.canvasContext = null, this.stylesList.length = 0, this.itemsData.length = 0 }, extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement], CVSolidElement), CVSolidElement.prototype.initElement = SVGShapeElement.prototype.initElement, CVSolidElement.prototype.prepareFrame = IImageElement.prototype.prepareFrame, CVSolidElement.prototype.renderInnerContent = function () { var t = this.canvasContext; t.fillStyle = this.data.sc, t.fillRect(0, 0, this.data.sw, this.data.sh) }, extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement, ITextElement], CVTextElement), CVTextElement.prototype.tHelper = createTag("canvas").getContext("2d"), CVTextElement.prototype.buildNewText = function () { var t = this.textProperty.currentData; this.renderedLetters = createSizedArray(t.l ? t.l.length : 0); var e = !1; t.fc ? (e = !0, this.values.fill = this.buildColor(t.fc)) : this.values.fill = "rgba(0,0,0,0)", this.fill = e; var r = !1; t.sc && (r = !0, this.values.stroke = this.buildColor(t.sc), this.values.sWidth = t.sw); var i, s, a, n, o, h, l, p, c, f, d, m, u = this.globalData.fontManager.getFontByName(t.f), y = t.l, g = this.mHelper; this.stroke = r, this.values.fValue = t.finalSize + "px " + this.globalData.fontManager.getFontByName(t.f).fFamily, s = t.finalText.length; var v = this.data.singleShape, b = .001 * t.tr * t.finalSize, P = 0, _ = 0, E = !0, S = 0; for (i = 0; i < s; i += 1) { for (n = (a = this.globalData.fontManager.getCharData(t.finalText[i], u.fStyle, this.globalData.fontManager.getFontByName(t.f).fFamily)) && a.data || {}, g.reset(), v && y[i].n && (P = -b, _ += t.yOffset, _ += E ? 1 : 0, E = !1), c = (l = n.shapes ? n.shapes[0].it : []).length, g.scale(t.finalSize / 100, t.finalSize / 100), v && this.applyTextPropertiesToMatrix(t, g, y[i].line, P, _), d = createSizedArray(c), p = 0; p < c; p += 1) { for (h = l[p].ks.k.i.length, f = l[p].ks.k, m = [], o = 1; o < h; o += 1)1 === o && m.push(g.applyToX(f.v[0][0], f.v[0][1], 0), g.applyToY(f.v[0][0], f.v[0][1], 0)), m.push(g.applyToX(f.o[o - 1][0], f.o[o - 1][1], 0), g.applyToY(f.o[o - 1][0], f.o[o - 1][1], 0), g.applyToX(f.i[o][0], f.i[o][1], 0), g.applyToY(f.i[o][0], f.i[o][1], 0), g.applyToX(f.v[o][0], f.v[o][1], 0), g.applyToY(f.v[o][0], f.v[o][1], 0)); m.push(g.applyToX(f.o[o - 1][0], f.o[o - 1][1], 0), g.applyToY(f.o[o - 1][0], f.o[o - 1][1], 0), g.applyToX(f.i[0][0], f.i[0][1], 0), g.applyToY(f.i[0][0], f.i[0][1], 0), g.applyToX(f.v[0][0], f.v[0][1], 0), g.applyToY(f.v[0][0], f.v[0][1], 0)), d[p] = m } v && (P += y[i].l, P += b), this.textSpans[S] ? this.textSpans[S].elem = d : this.textSpans[S] = { elem: d }, S += 1 } }, CVTextElement.prototype.renderInnerContent = function () { var t, e, r, i, s, a, n = this.canvasContext; n.font = this.values.fValue, n.lineCap = "butt", n.lineJoin = "miter", n.miterLimit = 4, this.data.singleShape || this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag); var o, h = this.textAnimator.renderedLetters, l = this.textProperty.currentData.l; e = l.length; var p, c, f = null, d = null, m = null; for (t = 0; t < e; t += 1)if (!l[t].n) { if ((o = h[t]) && (this.globalData.renderer.save(), this.globalData.renderer.ctxTransform(o.p), this.globalData.renderer.ctxOpacity(o.o)), this.fill) { for (o && o.fc ? f !== o.fc && (f = o.fc, n.fillStyle = o.fc) : f !== this.values.fill && (f = this.values.fill, n.fillStyle = this.values.fill), i = (p = this.textSpans[t].elem).length, this.globalData.canvasContext.beginPath(), r = 0; r < i; r += 1)for (a = (c = p[r]).length, this.globalData.canvasContext.moveTo(c[0], c[1]), s = 2; s < a; s += 6)this.globalData.canvasContext.bezierCurveTo(c[s], c[s + 1], c[s + 2], c[s + 3], c[s + 4], c[s + 5]); this.globalData.canvasContext.closePath(), this.globalData.canvasContext.fill() } if (this.stroke) { for (o && o.sw ? m !== o.sw && (m = o.sw, n.lineWidth = o.sw) : m !== this.values.sWidth && (m = this.values.sWidth, n.lineWidth = this.values.sWidth), o && o.sc ? d !== o.sc && (d = o.sc, n.strokeStyle = o.sc) : d !== this.values.stroke && (d = this.values.stroke, n.strokeStyle = this.values.stroke), i = (p = this.textSpans[t].elem).length, this.globalData.canvasContext.beginPath(), r = 0; r < i; r += 1)for (a = (c = p[r]).length, this.globalData.canvasContext.moveTo(c[0], c[1]), s = 2; s < a; s += 6)this.globalData.canvasContext.bezierCurveTo(c[s], c[s + 1], c[s + 2], c[s + 3], c[s + 4], c[s + 5]); this.globalData.canvasContext.closePath(), this.globalData.canvasContext.stroke() } o && this.globalData.renderer.restore() } }, CVEffects.prototype.renderFrame = function () { }, HBaseElement.prototype = { checkBlendMode: function () { }, initRendererElement: function () { this.baseElement = createTag(this.data.tg || "div"), this.data.hasMask ? (this.svgElement = createNS("svg"), this.layerElement = createNS("g"), this.maskedElement = this.layerElement, this.svgElement.appendChild(this.layerElement), this.baseElement.appendChild(this.svgElement)) : this.layerElement = this.baseElement, styleDiv(this.baseElement) }, createContainerElements: function () { this.renderableEffectsManager = new CVEffects(this), this.transformedElement = this.baseElement, this.maskedElement = this.layerElement, this.data.ln && this.layerElement.setAttribute("id", this.data.ln), this.data.cl && this.layerElement.setAttribute("class", this.data.cl), 0 !== this.data.bm && this.setBlendMode() }, renderElement: function () { var t = this.transformedElement ? this.transformedElement.style : {}; if (this.finalTransform._matMdf) { var e = this.finalTransform.mat.toCSS(); t.transform = e, t.webkitTransform = e } this.finalTransform._opMdf && (t.opacity = this.finalTransform.mProp.o.v) }, renderFrame: function () { this.data.hd || this.hidden || (this.renderTransform(), this.renderRenderable(), this.renderElement(), this.renderInnerContent(), this._isFirstFrame && (this._isFirstFrame = !1)) }, destroy: function () { this.layerElement = null, this.transformedElement = null, this.matteElement && (this.matteElement = null), this.maskManager && (this.maskManager.destroy(), this.maskManager = null) }, createRenderableComponents: function () { this.maskManager = new MaskElement(this.data, this, this.globalData) }, addEffects: function () { }, setMatte: function () { } }, HBaseElement.prototype.getBaseElement = SVGBaseElement.prototype.getBaseElement, HBaseElement.prototype.destroyBaseElement = HBaseElement.prototype.destroy, HBaseElement.prototype.buildElementParenting = HybridRenderer.prototype.buildElementParenting, extendPrototype([BaseElement, TransformElement, HBaseElement, HierarchyElement, FrameElement, RenderableDOMElement], HSolidElement), HSolidElement.prototype.createContent = function () { var t; this.data.hasMask ? ((t = createNS("rect")).setAttribute("width", this.data.sw), t.setAttribute("height", this.data.sh), t.setAttribute("fill", this.data.sc), this.svgElement.setAttribute("width", this.data.sw), this.svgElement.setAttribute("height", this.data.sh)) : ((t = createTag("div")).style.width = this.data.sw + "px", t.style.height = this.data.sh + "px", t.style.backgroundColor = this.data.sc), this.layerElement.appendChild(t) }, extendPrototype([HybridRenderer, ICompElement, HBaseElement], HCompElement), HCompElement.prototype._createBaseContainerElements = HCompElement.prototype.createContainerElements, HCompElement.prototype.createContainerElements = function () { this._createBaseContainerElements(), this.data.hasMask ? (this.svgElement.setAttribute("width", this.data.w), this.svgElement.setAttribute("height", this.data.h), this.transformedElement = this.baseElement) : this.transformedElement = this.layerElement }, HCompElement.prototype.addTo3dContainer = function (t, e) { for (var r, i = 0; i < e;)this.elements[i] && this.elements[i].getBaseElement && (r = this.elements[i].getBaseElement()), i += 1; r ? this.layerElement.insertBefore(t, r) : this.layerElement.appendChild(t) }, extendPrototype([BaseElement, TransformElement, HSolidElement, SVGShapeElement, HBaseElement, HierarchyElement, FrameElement, RenderableElement], HShapeElement), HShapeElement.prototype._renderShapeFrame = HShapeElement.prototype.renderInnerContent, HShapeElement.prototype.createContent = function () { var t; if (this.baseElement.style.fontSize = 0, this.data.hasMask) this.layerElement.appendChild(this.shapesContainer), t = this.svgElement; else { t = createNS("svg"); var e = this.comp.data ? this.comp.data : this.globalData.compSize; t.setAttribute("width", e.w), t.setAttribute("height", e.h), t.appendChild(this.shapesContainer), this.layerElement.appendChild(t) } this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, this.shapesContainer, 0, [], !0), this.filterUniqueShapes(), this.shapeCont = t }, HShapeElement.prototype.getTransformedPoint = function (t, e) { var r, i = t.length; for (r = 0; r < i; r += 1)e = t[r].mProps.v.applyToPointArray(e[0], e[1], 0); return e }, HShapeElement.prototype.calculateShapeBoundingBox = function (t, e) { var r, i, s, a, n, o = t.sh.v, h = t.transformers, l = o._length; if (!(l <= 1)) { for (r = 0; r < l - 1; r += 1)i = this.getTransformedPoint(h, o.v[r]), s = this.getTransformedPoint(h, o.o[r]), a = this.getTransformedPoint(h, o.i[r + 1]), n = this.getTransformedPoint(h, o.v[r + 1]), this.checkBounds(i, s, a, n, e); o.c && (i = this.getTransformedPoint(h, o.v[r]), s = this.getTransformedPoint(h, o.o[r]), a = this.getTransformedPoint(h, o.i[0]), n = this.getTransformedPoint(h, o.v[0]), this.checkBounds(i, s, a, n, e)) } }, HShapeElement.prototype.checkBounds = function (t, e, r, i, s) { this.getBoundsOfCurve(t, e, r, i); var a = this.shapeBoundingBox; s.x = bmMin(a.left, s.x), s.xMax = bmMax(a.right, s.xMax), s.y = bmMin(a.top, s.y), s.yMax = bmMax(a.bottom, s.yMax) }, HShapeElement.prototype.shapeBoundingBox = { left: 0, right: 0, top: 0, bottom: 0 }, HShapeElement.prototype.tempBoundingBox = { x: 0, xMax: 0, y: 0, yMax: 0, width: 0, height: 0 }, HShapeElement.prototype.getBoundsOfCurve = function (t, e, r, i) { for (var s, a, n, o, h, l, p, c = [[t[0], i[0]], [t[1], i[1]]], f = 0; f < 2; ++f)a = 6 * t[f] - 12 * e[f] + 6 * r[f], s = -3 * t[f] + 9 * e[f] - 9 * r[f] + 3 * i[f], n = 3 * e[f] - 3 * t[f], a |= 0, n |= 0, 0 == (s |= 0) && 0 === a || (0 === s ? (o = -n / a) > 0 && o < 1 && c[f].push(this.calculateF(o, t, e, r, i, f)) : (h = a * a - 4 * n * s) >= 0 && ((l = (-a + bmSqrt(h)) / (2 * s)) > 0 && l < 1 && c[f].push(this.calculateF(l, t, e, r, i, f)), (p = (-a - bmSqrt(h)) / (2 * s)) > 0 && p < 1 && c[f].push(this.calculateF(p, t, e, r, i, f)))); this.shapeBoundingBox.left = bmMin.apply(null, c[0]), this.shapeBoundingBox.top = bmMin.apply(null, c[1]), this.shapeBoundingBox.right = bmMax.apply(null, c[0]), this.shapeBoundingBox.bottom = bmMax.apply(null, c[1]) }, HShapeElement.prototype.calculateF = function (t, e, r, i, s, a) { return bmPow(1 - t, 3) * e[a] + 3 * bmPow(1 - t, 2) * t * r[a] + 3 * (1 - t) * bmPow(t, 2) * i[a] + bmPow(t, 3) * s[a] }, HShapeElement.prototype.calculateBoundingBox = function (t, e) { var r, i = t.length; for (r = 0; r < i; r += 1)t[r] && t[r].sh ? this.calculateShapeBoundingBox(t[r], e) : t[r] && t[r].it && this.calculateBoundingBox(t[r].it, e) }, HShapeElement.prototype.currentBoxContains = function (t) { return this.currentBBox.x <= t.x && this.currentBBox.y <= t.y && this.currentBBox.width + this.currentBBox.x >= t.x + t.width && this.currentBBox.height + this.currentBBox.y >= t.y + t.height }, HShapeElement.prototype.renderInnerContent = function () { if (this._renderShapeFrame(), !this.hidden && (this._isFirstFrame || this._mdf)) { var t = this.tempBoundingBox, e = 999999; if (t.x = e, t.xMax = -e, t.y = e, t.yMax = -e, this.calculateBoundingBox(this.itemsData, t), t.width = t.xMax < t.x ? 0 : t.xMax - t.x, t.height = t.yMax < t.y ? 0 : t.yMax - t.y, this.currentBoxContains(t)) return; var r = !1; if (this.currentBBox.w !== t.width && (this.currentBBox.w = t.width, this.shapeCont.setAttribute("width", t.width), r = !0), this.currentBBox.h !== t.height && (this.currentBBox.h = t.height, this.shapeCont.setAttribute("height", t.height), r = !0), r || this.currentBBox.x !== t.x || this.currentBBox.y !== t.y) { this.currentBBox.w = t.width, this.currentBBox.h = t.height, this.currentBBox.x = t.x, this.currentBBox.y = t.y, this.shapeCont.setAttribute("viewBox", this.currentBBox.x + " " + this.currentBBox.y + " " + this.currentBBox.w + " " + this.currentBBox.h); var i = this.shapeCont.style, s = "translate(" + this.currentBBox.x + "px," + this.currentBBox.y + "px)"; i.transform = s, i.webkitTransform = s } } }, extendPrototype([BaseElement, TransformElement, HBaseElement, HierarchyElement, FrameElement, RenderableDOMElement, ITextElement], HTextElement), HTextElement.prototype.createContent = function () { if (this.isMasked = this.checkMasks(), this.isMasked) { this.renderType = "svg", this.compW = this.comp.data.w, this.compH = this.comp.data.h, this.svgElement.setAttribute("width", this.compW), this.svgElement.setAttribute("height", this.compH); var t = createNS("g"); this.maskedElement.appendChild(t), this.innerElem = t } else this.renderType = "html", this.innerElem = this.layerElement; this.checkParenting() }, HTextElement.prototype.buildNewText = function () { var t = this.textProperty.currentData; this.renderedLetters = createSizedArray(t.l ? t.l.length : 0); var e = this.innerElem.style, r = t.fc ? this.buildColor(t.fc) : "rgba(0,0,0,0)"; e.fill = r, e.color = r, t.sc && (e.stroke = this.buildColor(t.sc), e.strokeWidth = t.sw + "px"); var i, s, a = this.globalData.fontManager.getFontByName(t.f); if (!this.globalData.fontManager.chars) if (e.fontSize = t.finalSize + "px", e.lineHeight = t.finalSize + "px", a.fClass) this.innerElem.className = a.fClass; else { e.fontFamily = a.fFamily; var n = t.fWeight, o = t.fStyle; e.fontStyle = o, e.fontWeight = n } var h, l, p, c = t.l; s = c.length; var f, d = this.mHelper, m = "", u = 0; for (i = 0; i < s; i += 1) { if (this.globalData.fontManager.chars ? (this.textPaths[u] ? h = this.textPaths[u] : ((h = createNS("path")).setAttribute("stroke-linecap", lineCapEnum[1]), h.setAttribute("stroke-linejoin", lineJoinEnum[2]), h.setAttribute("stroke-miterlimit", "4")), this.isMasked || (this.textSpans[u] ? p = (l = this.textSpans[u]).children[0] : ((l = createTag("div")).style.lineHeight = 0, (p = createNS("svg")).appendChild(h), styleDiv(l)))) : this.isMasked ? h = this.textPaths[u] ? this.textPaths[u] : createNS("text") : this.textSpans[u] ? (l = this.textSpans[u], h = this.textPaths[u]) : (styleDiv(l = createTag("span")), styleDiv(h = createTag("span")), l.appendChild(h)), this.globalData.fontManager.chars) { var y, g = this.globalData.fontManager.getCharData(t.finalText[i], a.fStyle, this.globalData.fontManager.getFontByName(t.f).fFamily); if (y = g ? g.data : null, d.reset(), y && y.shapes && (f = y.shapes[0].it, d.scale(t.finalSize / 100, t.finalSize / 100), m = this.createPathShape(d, f), h.setAttribute("d", m)), this.isMasked) this.innerElem.appendChild(h); else { if (this.innerElem.appendChild(l), y && y.shapes) { document.body.appendChild(p); var v = p.getBBox(); p.setAttribute("width", v.width + 2), p.setAttribute("height", v.height + 2), p.setAttribute("viewBox", v.x - 1 + " " + (v.y - 1) + " " + (v.width + 2) + " " + (v.height + 2)); var b = p.style, P = "translate(" + (v.x - 1) + "px," + (v.y - 1) + "px)"; b.transform = P, b.webkitTransform = P, c[i].yOffset = v.y - 1 } else p.setAttribute("width", 1), p.setAttribute("height", 1); l.appendChild(p) } } else if (h.textContent = c[i].val, h.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space", "preserve"), this.isMasked) this.innerElem.appendChild(h); else { this.innerElem.appendChild(l); var _ = h.style, E = "translate3d(0," + -t.finalSize / 1.2 + "px,0)"; _.transform = E, _.webkitTransform = E } this.isMasked ? this.textSpans[u] = h : this.textSpans[u] = l, this.textSpans[u].style.display = "block", this.textPaths[u] = h, u += 1 } for (; u < this.textSpans.length;)this.textSpans[u].style.display = "none", u += 1 }, HTextElement.prototype.renderInnerContent = function () { var t; if (this.data.singleShape) { if (!this._isFirstFrame && !this.lettersChangedFlag) return; if (this.isMasked && this.finalTransform._matMdf) { this.svgElement.setAttribute("viewBox", -this.finalTransform.mProp.p.v[0] + " " + -this.finalTransform.mProp.p.v[1] + " " + this.compW + " " + this.compH), t = this.svgElement.style; var e = "translate(" + -this.finalTransform.mProp.p.v[0] + "px," + -this.finalTransform.mProp.p.v[1] + "px)"; t.transform = e, t.webkitTransform = e } } if (this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag), this.lettersChangedFlag || this.textAnimator.lettersChangedFlag) { var r, i, s, a, n, o = 0, h = this.textAnimator.renderedLetters, l = this.textProperty.currentData.l; for (i = l.length, r = 0; r < i; r += 1)l[r].n ? o += 1 : (a = this.textSpans[r], n = this.textPaths[r], s = h[o], o += 1, s._mdf.m && (this.isMasked ? a.setAttribute("transform", s.m) : (a.style.webkitTransform = s.m, a.style.transform = s.m)), a.style.opacity = s.o, s.sw && s._mdf.sw && n.setAttribute("stroke-width", s.sw), s.sc && s._mdf.sc && n.setAttribute("stroke", s.sc), s.fc && s._mdf.fc && (n.setAttribute("fill", s.fc), n.style.color = s.fc)); if (this.innerElem.getBBox && !this.hidden && (this._isFirstFrame || this._mdf)) { var p = this.innerElem.getBBox(); if (this.currentBBox.w !== p.width && (this.currentBBox.w = p.width, this.svgElement.setAttribute("width", p.width)), this.currentBBox.h !== p.height && (this.currentBBox.h = p.height, this.svgElement.setAttribute("height", p.height)), this.currentBBox.w !== p.width + 2 || this.currentBBox.h !== p.height + 2 || this.currentBBox.x !== p.x - 1 || this.currentBBox.y !== p.y - 1) { this.currentBBox.w = p.width + 2, this.currentBBox.h = p.height + 2, this.currentBBox.x = p.x - 1, this.currentBBox.y = p.y - 1, this.svgElement.setAttribute("viewBox", this.currentBBox.x + " " + this.currentBBox.y + " " + this.currentBBox.w + " " + this.currentBBox.h), t = this.svgElement.style; var c = "translate(" + this.currentBBox.x + "px," + this.currentBBox.y + "px)"; t.transform = c, t.webkitTransform = c } } } }, extendPrototype([BaseElement, TransformElement, HBaseElement, HSolidElement, HierarchyElement, FrameElement, RenderableElement], HImageElement), HImageElement.prototype.createContent = function () { var t = this.globalData.getAssetsPath(this.assetData), e = new Image; this.data.hasMask ? (this.imageElem = createNS("image"), this.imageElem.setAttribute("width", this.assetData.w + "px"), this.imageElem.setAttribute("height", this.assetData.h + "px"), this.imageElem.setAttributeNS("http://www.w3.org/1999/xlink", "href", t), this.layerElement.appendChild(this.imageElem), this.baseElement.setAttribute("width", this.assetData.w), this.baseElement.setAttribute("height", this.assetData.h)) : this.layerElement.appendChild(e), e.crossOrigin = "anonymous", e.src = t, this.data.ln && this.baseElement.setAttribute("id", this.data.ln) }, extendPrototype([BaseElement, FrameElement, HierarchyElement], HCameraElement), HCameraElement.prototype.setup = function () { var t, e, r, i, s = this.comp.threeDElements.length; for (t = 0; t < s; t += 1)if ("3d" === (e = this.comp.threeDElements[t]).type) { r = e.perspectiveElem.style, i = e.container.style; var a = this.pe.v + "px", n = "0px 0px 0px", o = "matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)"; r.perspective = a, r.webkitPerspective = a, i.transformOrigin = n, i.mozTransformOrigin = n, i.webkitTransformOrigin = n, r.transform = o, r.webkitTransform = o } }, HCameraElement.prototype.createElements = function () { }, HCameraElement.prototype.hide = function () { }, HCameraElement.prototype.renderFrame = function () { var t, e, r = this._isFirstFrame; if (this.hierarchy) for (e = this.hierarchy.length, t = 0; t < e; t += 1)r = this.hierarchy[t].finalTransform.mProp._mdf || r; if (r || this.pe._mdf || this.p && this.p._mdf || this.px && (this.px._mdf || this.py._mdf || this.pz._mdf) || this.rx._mdf || this.ry._mdf || this.rz._mdf || this.or._mdf || this.a && this.a._mdf) { if (this.mat.reset(), this.hierarchy) for (t = e = this.hierarchy.length - 1; t >= 0; t -= 1) { var i = this.hierarchy[t].finalTransform.mProp; this.mat.translate(-i.p.v[0], -i.p.v[1], i.p.v[2]), this.mat.rotateX(-i.or.v[0]).rotateY(-i.or.v[1]).rotateZ(i.or.v[2]), this.mat.rotateX(-i.rx.v).rotateY(-i.ry.v).rotateZ(i.rz.v), this.mat.scale(1 / i.s.v[0], 1 / i.s.v[1], 1 / i.s.v[2]), this.mat.translate(i.a.v[0], i.a.v[1], i.a.v[2]) } if (this.p ? this.mat.translate(-this.p.v[0], -this.p.v[1], this.p.v[2]) : this.mat.translate(-this.px.v, -this.py.v, this.pz.v), this.a) { var s; s = this.p ? [this.p.v[0] - this.a.v[0], this.p.v[1] - this.a.v[1], this.p.v[2] - this.a.v[2]] : [this.px.v - this.a.v[0], this.py.v - this.a.v[1], this.pz.v - this.a.v[2]]; var a = Math.sqrt(Math.pow(s[0], 2) + Math.pow(s[1], 2) + Math.pow(s[2], 2)), n = [s[0] / a, s[1] / a, s[2] / a], o = Math.sqrt(n[2] * n[2] + n[0] * n[0]), h = Math.atan2(n[1], o), l = Math.atan2(n[0], -n[2]); this.mat.rotateY(l).rotateX(-h) } this.mat.rotateX(-this.rx.v).rotateY(-this.ry.v).rotateZ(this.rz.v), this.mat.rotateX(-this.or.v[0]).rotateY(-this.or.v[1]).rotateZ(this.or.v[2]), this.mat.translate(this.globalData.compSize.w / 2, this.globalData.compSize.h / 2, 0), this.mat.translate(0, 0, this.pe.v); var p = !this._prevMat.equals(this.mat); if ((p || this.pe._mdf) && this.comp.threeDElements) { var c, f, d; for (e = this.comp.threeDElements.length, t = 0; t < e; t += 1)if ("3d" === (c = this.comp.threeDElements[t]).type) { if (p) { var m = this.mat.toCSS(); (d = c.container.style).transform = m, d.webkitTransform = m } this.pe._mdf && ((f = c.perspectiveElem.style).perspective = this.pe.v + "px", f.webkitPerspective = this.pe.v + "px") } this.mat.clone(this._prevMat) } } this._isFirstFrame = !1 }, HCameraElement.prototype.prepareFrame = function (t) { this.prepareProperties(t, !0) }, HCameraElement.prototype.destroy = function () { }, HCameraElement.prototype.getBaseElement = function () { return null }, HEffects.prototype.renderFrame = function () { }; var animationManager = function () { var t = {}, e = [], r = 0, i = 0, s = 0, a = !0, n = !1; function o(t) { for (var r = 0, s = t.target; r < i;)e[r].animation === s && (e.splice(r, 1), r -= 1, i -= 1, s.isPaused || p()), r += 1 } function h(t, r) { if (!t) return null; for (var s = 0; s < i;) { if (e[s].elem === t && null !== e[s].elem) return e[s].animation; s += 1 } var a = new AnimationItem; return c(a, t), a.setData(t, r), a } function l() { s += 1, m() } function p() { s -= 1 } function c(t, r) { t.addEventListener("destroy", o), t.addEventListener("_active", l), t.addEventListener("_idle", p), e.push({ elem: r, animation: t }), i += 1 } function f(t) { var o, h = t - r; for (o = 0; o < i; o += 1)e[o].animation.advanceTime(h); r = t, s && !n ? window.requestAnimationFrame(f) : a = !0 } function d(t) { r = t, window.requestAnimationFrame(f) } function m() { !n && s && a && (window.requestAnimationFrame(d), a = !1) } return t.registerAnimation = h, t.loadAnimation = function (t) { var e = new AnimationItem; return c(e, null), e.setParams(t), e }, t.setSpeed = function (t, r) { var s; for (s = 0; s < i; s += 1)e[s].animation.setSpeed(t, r) }, t.setDirection = function (t, r) { var s; for (s = 0; s < i; s += 1)e[s].animation.setDirection(t, r) }, t.play = function (t) { var r; for (r = 0; r < i; r += 1)e[r].animation.play(t) }, t.pause = function (t) { var r; for (r = 0; r < i; r += 1)e[r].animation.pause(t) }, t.stop = function (t) { var r; for (r = 0; r < i; r += 1)e[r].animation.stop(t) }, t.togglePause = function (t) { var r; for (r = 0; r < i; r += 1)e[r].animation.togglePause(t) }, t.searchAnimations = function (t, e, r) { var i, s = [].concat([].slice.call(document.getElementsByClassName("lottie")), [].slice.call(document.getElementsByClassName("bodymovin"))), a = s.length; for (i = 0; i < a; i += 1)r && s[i].setAttribute("data-bm-type", r), h(s[i], t); if (e && 0 === a) { r || (r = "svg"); var n = document.getElementsByTagName("body")[0]; n.innerText = ""; var o = createTag("div"); o.style.width = "100%", o.style.height = "100%", o.setAttribute("data-bm-type", r), n.appendChild(o), h(o, t) } }, t.resize = function () { var t; for (t = 0; t < i; t += 1)e[t].animation.resize() }, t.goToAndStop = function (t, r, s) { var a; for (a = 0; a < i; a += 1)e[a].animation.goToAndStop(t, r, s) }, t.destroy = function (t) { var r; for (r = i - 1; r >= 0; r -= 1)e[r].animation.destroy(t) }, t.freeze = function () { n = !0 }, t.unfreeze = function () { n = !1, m() }, t.setVolume = function (t, r) { var s; for (s = 0; s < i; s += 1)e[s].animation.setVolume(t, r) }, t.mute = function (t) { var r; for (r = 0; r < i; r += 1)e[r].animation.mute(t) }, t.unmute = function (t) { var r; for (r = 0; r < i; r += 1)e[r].animation.unmute(t) }, t.getRegisteredAnimations = function () { var t, r = e.length, i = []; for (t = 0; t < r; t += 1)i.push(e[t].animation); return i }, t }(), AnimationItem = function () { this._cbs = [], this.name = "", this.path = "", this.isLoaded = !1, this.currentFrame = 0, this.currentRawFrame = 0, this.firstFrame = 0, this.totalFrames = 0, this.frameRate = 0, this.frameMult = 0, this.playSpeed = 1, this.playDirection = 1, this.playCount = 0, this.animationData = {}, this.assets = [], this.isPaused = !0, this.autoplay = !1, this.loop = !0, this.renderer = null, this.animationID = createElementID(), this.assetsPath = "", this.timeCompleted = 0, this.segmentPos = 0, this.isSubframeEnabled = subframeEnabled, this.segments = [], this._idle = !0, this._completedLoop = !1, this.projectInterface = ProjectInterface(), this.imagePreloader = new ImagePreloader, this.audioController = audioControllerFactory(), this.markers = [], this.configAnimation = this.configAnimation.bind(this), this.onSetupError = this.onSetupError.bind(this), this.onSegmentComplete = this.onSegmentComplete.bind(this) }; extendPrototype([BaseEvent], AnimationItem), AnimationItem.prototype.setParams = function (t) { (t.wrapper || t.container) && (this.wrapper = t.wrapper || t.container); var e = "svg"; switch (t.animType ? e = t.animType : t.renderer && (e = t.renderer), e) { case "canvas": this.renderer = new CanvasRenderer(this, t.rendererSettings); break; case "svg": this.renderer = new SVGRenderer(this, t.rendererSettings); break; default: this.renderer = new HybridRenderer(this, t.rendererSettings) }this.imagePreloader.setCacheType(e, this.renderer.globalData.defs), this.renderer.setProjectInterface(this.projectInterface), this.animType = e, "" === t.loop || null === t.loop || void 0 === t.loop || !0 === t.loop ? this.loop = !0 : !1 === t.loop ? this.loop = !1 : this.loop = parseInt(t.loop, 10), this.autoplay = !("autoplay" in t) || t.autoplay, this.name = t.name ? t.name : "", this.autoloadSegments = !Object.prototype.hasOwnProperty.call(t, "autoloadSegments") || t.autoloadSegments, this.assetsPath = t.assetsPath, this.initialSegment = t.initialSegment, t.audioFactory && this.audioController.setAudioFactory(t.audioFactory), t.animationData ? this.setupAnimation(t.animationData) : t.path && (-1 !== t.path.lastIndexOf("\\") ? this.path = t.path.substr(0, t.path.lastIndexOf("\\") + 1) : this.path = t.path.substr(0, t.path.lastIndexOf("/") + 1), this.fileName = t.path.substr(t.path.lastIndexOf("/") + 1), this.fileName = this.fileName.substr(0, this.fileName.lastIndexOf(".json")), dataManager.loadAnimation(t.path, this.configAnimation, this.onSetupError)) }, AnimationItem.prototype.onSetupError = function () { this.trigger("data_failed") }, AnimationItem.prototype.setupAnimation = function (t) { dataManager.completeAnimation(t, this.configAnimation) }, AnimationItem.prototype.setData = function (t, e) { e && "object" != typeof e && (e = JSON.parse(e)); var r = { wrapper: t, animationData: e }, i = t.attributes; r.path = i.getNamedItem("data-animation-path") ? i.getNamedItem("data-animation-path").value : i.getNamedItem("data-bm-path") ? i.getNamedItem("data-bm-path").value : i.getNamedItem("bm-path") ? i.getNamedItem("bm-path").value : "", r.animType = i.getNamedItem("data-anim-type") ? i.getNamedItem("data-anim-type").value : i.getNamedItem("data-bm-type") ? i.getNamedItem("data-bm-type").value : i.getNamedItem("bm-type") ? i.getNamedItem("bm-type").value : i.getNamedItem("data-bm-renderer") ? i.getNamedItem("data-bm-renderer").value : i.getNamedItem("bm-renderer") ? i.getNamedItem("bm-renderer").value : "canvas"; var s = i.getNamedItem("data-anim-loop") ? i.getNamedItem("data-anim-loop").value : i.getNamedItem("data-bm-loop") ? i.getNamedItem("data-bm-loop").value : i.getNamedItem("bm-loop") ? i.getNamedItem("bm-loop").value : ""; "false" === s ? r.loop = !1 : "true" === s ? r.loop = !0 : "" !== s && (r.loop = parseInt(s, 10)); var a = i.getNamedItem("data-anim-autoplay") ? i.getNamedItem("data-anim-autoplay").value : i.getNamedItem("data-bm-autoplay") ? i.getNamedItem("data-bm-autoplay").value : !i.getNamedItem("bm-autoplay") || i.getNamedItem("bm-autoplay").value; r.autoplay = "false" !== a, r.name = i.getNamedItem("data-name") ? i.getNamedItem("data-name").value : i.getNamedItem("data-bm-name") ? i.getNamedItem("data-bm-name").value : i.getNamedItem("bm-name") ? i.getNamedItem("bm-name").value : "", "false" === (i.getNamedItem("data-anim-prerender") ? i.getNamedItem("data-anim-prerender").value : i.getNamedItem("data-bm-prerender") ? i.getNamedItem("data-bm-prerender").value : i.getNamedItem("bm-prerender") ? i.getNamedItem("bm-prerender").value : "") && (r.prerender = !1), this.setParams(r) }, AnimationItem.prototype.includeLayers = function (t) { t.op > this.animationData.op && (this.animationData.op = t.op, this.totalFrames = Math.floor(t.op - this.animationData.ip)); var e, r, i = this.animationData.layers, s = i.length, a = t.layers, n = a.length; for (r = 0; r < n; r += 1)for (e = 0; e < s;) { if (i[e].id === a[r].id) { i[e] = a[r]; break } e += 1 } if ((t.chars || t.fonts) && (this.renderer.globalData.fontManager.addChars(t.chars), this.renderer.globalData.fontManager.addFonts(t.fonts, this.renderer.globalData.defs)), t.assets) for (s = t.assets.length, e = 0; e < s; e += 1)this.animationData.assets.push(t.assets[e]); this.animationData.__complete = !1, dataManager.completeAnimation(this.animationData, this.onSegmentComplete) }, AnimationItem.prototype.onSegmentComplete = function (t) { this.animationData = t, expressionsPlugin && expressionsPlugin.initExpressions(this), this.loadNextSegment() }, AnimationItem.prototype.loadNextSegment = function () { var t = this.animationData.segments; if (!t || 0 === t.length || !this.autoloadSegments) return this.trigger("data_ready"), void (this.timeCompleted = this.totalFrames); var e = t.shift(); this.timeCompleted = e.time * this.frameRate; var r = this.path + this.fileName + "_" + this.segmentPos + ".json"; this.segmentPos += 1, dataManager.loadData(r, this.includeLayers.bind(this), function () { this.trigger("data_failed") }.bind(this)) }, AnimationItem.prototype.loadSegments = function () { this.animationData.segments || (this.timeCompleted = this.totalFrames), this.loadNextSegment() }, AnimationItem.prototype.imagesLoaded = function () { this.trigger("loaded_images"), this.checkLoaded() }, AnimationItem.prototype.preloadImages = function () { this.imagePreloader.setAssetsPath(this.assetsPath), this.imagePreloader.setPath(this.path), this.imagePreloader.loadAssets(this.animationData.assets, this.imagesLoaded.bind(this)) }, AnimationItem.prototype.configAnimation = function (t) { if (this.renderer) try { this.animationData = t, this.initialSegment ? (this.totalFrames = Math.floor(this.initialSegment[1] - this.initialSegment[0]), this.firstFrame = Math.round(this.initialSegment[0])) : (this.totalFrames = Math.floor(this.animationData.op - this.animationData.ip), this.firstFrame = Math.round(this.animationData.ip)), this.renderer.configAnimation(t), t.assets || (t.assets = []), this.assets = this.animationData.assets, this.frameRate = this.animationData.fr, this.frameMult = this.animationData.fr / 1e3, this.renderer.searchExtraCompositions(t.assets), this.markers = markerParser(t.markers || []), this.trigger("config_ready"), this.preloadImages(), this.loadSegments(), this.updaFrameModifier(), this.waitForFontsLoaded(), this.isPaused && this.audioController.pause() } catch (t) { this.triggerConfigError(t) } }, AnimationItem.prototype.waitForFontsLoaded = function () { this.renderer && (this.renderer.globalData.fontManager.isLoaded ? this.checkLoaded() : setTimeout(this.waitForFontsLoaded.bind(this), 20)) }, AnimationItem.prototype.checkLoaded = function () { !this.isLoaded && this.renderer.globalData.fontManager.isLoaded && (this.imagePreloader.loadedImages() || "canvas" !== this.renderer.rendererType) && this.imagePreloader.loadedFootages() && (this.isLoaded = !0, expressionsPlugin && expressionsPlugin.initExpressions(this), this.renderer.initItems(), setTimeout(function () { this.trigger("DOMLoaded") }.bind(this), 0), this.gotoFrame(), this.autoplay && this.play()) }, AnimationItem.prototype.resize = function () { this.renderer.updateContainerSize() }, AnimationItem.prototype.setSubframe = function (t) { this.isSubframeEnabled = !!t }, AnimationItem.prototype.gotoFrame = function () { this.currentFrame = this.isSubframeEnabled ? this.currentRawFrame : ~~this.currentRawFrame, this.timeCompleted !== this.totalFrames && this.currentFrame > this.timeCompleted && (this.currentFrame = this.timeCompleted), this.trigger("enterFrame"), this.renderFrame(), this.trigger("drawnFrame") }, AnimationItem.prototype.renderFrame = function () { if (!1 !== this.isLoaded && this.renderer) try { this.renderer.renderFrame(this.currentFrame + this.firstFrame) } catch (t) { this.triggerRenderFrameError(t) } }, AnimationItem.prototype.play = function (t) { t && this.name !== t || !0 === this.isPaused && (this.isPaused = !1, this.audioController.resume(), this._idle && (this._idle = !1, this.trigger("_active"))) }, AnimationItem.prototype.pause = function (t) { t && this.name !== t || !1 === this.isPaused && (this.isPaused = !0, this._idle = !0, this.trigger("_idle"), this.audioController.pause()) }, AnimationItem.prototype.togglePause = function (t) { t && this.name !== t || (!0 === this.isPaused ? this.play() : this.pause()) }, AnimationItem.prototype.stop = function (t) { t && this.name !== t || (this.pause(), this.playCount = 0, this._completedLoop = !1, this.setCurrentRawFrameValue(0)) }, AnimationItem.prototype.getMarkerData = function (t) { for (var e, r = 0; r < this.markers.length; r += 1)if ((e = this.markers[r]).payload && e.payload.name === t) return e; return null }, AnimationItem.prototype.goToAndStop = function (t, e, r) { if (!r || this.name === r) { var i = Number(t); if (isNaN(i)) { var s = this.getMarkerData(t); s && this.goToAndStop(s.time, !0) } else e ? this.setCurrentRawFrameValue(t) : this.setCurrentRawFrameValue(t * this.frameModifier); this.pause() } }, AnimationItem.prototype.goToAndPlay = function (t, e, r) { if (!r || this.name === r) { var i = Number(t); if (isNaN(i)) { var s = this.getMarkerData(t); s && (s.duration ? this.playSegments([s.time, s.time + s.duration], !0) : this.goToAndStop(s.time, !0)) } else this.goToAndStop(i, e, r); this.play() } }, AnimationItem.prototype.advanceTime = function (t) { if (!0 !== this.isPaused && !1 !== this.isLoaded) { var e = this.currentRawFrame + t * this.frameModifier, r = !1; e >= this.totalFrames - 1 && this.frameModifier > 0 ? this.loop && this.playCount !== this.loop ? e >= this.totalFrames ? (this.playCount += 1, this.checkSegments(e % this.totalFrames) || (this.setCurrentRawFrameValue(e % this.totalFrames), this._completedLoop = !0, this.trigger("loopComplete"))) : this.setCurrentRawFrameValue(e) : this.checkSegments(e > this.totalFrames ? e % this.totalFrames : 0) || (r = !0, e = this.totalFrames - 1) : e < 0 ? this.checkSegments(e % this.totalFrames) || (!this.loop || this.playCount-- <= 0 && !0 !== this.loop ? (r = !0, e = 0) : (this.setCurrentRawFrameValue(this.totalFrames + e % this.totalFrames), this._completedLoop ? this.trigger("loopComplete") : this._completedLoop = !0)) : this.setCurrentRawFrameValue(e), r && (this.setCurrentRawFrameValue(e), this.pause(), this.trigger("complete")) } }, AnimationItem.prototype.adjustSegment = function (t, e) { this.playCount = 0, t[1] < t[0] ? (this.frameModifier > 0 && (this.playSpeed < 0 ? this.setSpeed(-this.playSpeed) : this.setDirection(-1)), this.totalFrames = t[0] - t[1], this.timeCompleted = this.totalFrames, this.firstFrame = t[1], this.setCurrentRawFrameValue(this.totalFrames - .001 - e)) : t[1] > t[0] && (this.frameModifier < 0 && (this.playSpeed < 0 ? this.setSpeed(-this.playSpeed) : this.setDirection(1)), this.totalFrames = t[1] - t[0], this.timeCompleted = this.totalFrames, this.firstFrame = t[0], this.setCurrentRawFrameValue(.001 + e)), this.trigger("segmentStart") }, AnimationItem.prototype.setSegment = function (t, e) { var r = -1; this.isPaused && (this.currentRawFrame + this.firstFrame < t ? r = t : this.currentRawFrame + this.firstFrame > e && (r = e - t)), this.firstFrame = t, this.totalFrames = e - t, this.timeCompleted = this.totalFrames, -1 !== r && this.goToAndStop(r, !0) }, AnimationItem.prototype.playSegments = function (t, e) { if (e && (this.segments.length = 0), "object" == typeof t[0]) { var r, i = t.length; for (r = 0; r < i; r += 1)this.segments.push(t[r]) } else this.segments.push(t); this.segments.length && e && this.adjustSegment(this.segments.shift(), 0), this.isPaused && this.play() }, AnimationItem.prototype.resetSegments = function (t) { this.segments.length = 0, this.segments.push([this.animationData.ip, this.animationData.op]), t && this.checkSegments(0) }, AnimationItem.prototype.checkSegments = function (t) { return !!this.segments.length && (this.adjustSegment(this.segments.shift(), t), !0) }, AnimationItem.prototype.destroy = function (t) { t && this.name !== t || !this.renderer || (this.renderer.destroy(), this.imagePreloader.destroy(), this.trigger("destroy"), this._cbs = null, this.onEnterFrame = null, this.onLoopComplete = null, this.onComplete = null, this.onSegmentStart = null, this.onDestroy = null, this.renderer = null, this.renderer = null, this.imagePreloader = null, this.projectInterface = null) }, AnimationItem.prototype.setCurrentRawFrameValue = function (t) { this.currentRawFrame = t, this.gotoFrame() }, AnimationItem.prototype.setSpeed = function (t) { this.playSpeed = t, this.updaFrameModifier() }, AnimationItem.prototype.setDirection = function (t) { this.playDirection = t < 0 ? -1 : 1, this.updaFrameModifier() }, AnimationItem.prototype.setVolume = function (t, e) { e && this.name !== e || this.audioController.setVolume(t) }, AnimationItem.prototype.getVolume = function () { return this.audioController.getVolume() }, AnimationItem.prototype.mute = function (t) { t && this.name !== t || this.audioController.mute() }, AnimationItem.prototype.unmute = function (t) { t && this.name !== t || this.audioController.unmute() }, AnimationItem.prototype.updaFrameModifier = function () { this.frameModifier = this.frameMult * this.playSpeed * this.playDirection, this.audioController.setRate(this.playSpeed * this.playDirection) }, AnimationItem.prototype.getPath = function () { return this.path }, AnimationItem.prototype.getAssetsPath = function (t) { var e = ""; if (t.e) e = t.p; else if (this.assetsPath) { var r = t.p; -1 !== r.indexOf("images/") && (r = r.split("/")[1]), e = this.assetsPath + r } else e = this.path, e += t.u ? t.u : "", e += t.p; return e }, AnimationItem.prototype.getAssetData = function (t) { for (var e = 0, r = this.assets.length; e < r;) { if (t === this.assets[e].id) return this.assets[e]; e += 1 } return null }, AnimationItem.prototype.hide = function () { this.renderer.hide() }, AnimationItem.prototype.show = function () { this.renderer.show() }, AnimationItem.prototype.getDuration = function (t) { return t ? this.totalFrames : this.totalFrames / this.frameRate }, AnimationItem.prototype.trigger = function (t) { if (this._cbs && this._cbs[t]) switch (t) { case "enterFrame": case "drawnFrame": this.triggerEvent(t, new BMEnterFrameEvent(t, this.currentFrame, this.totalFrames, this.frameModifier)); break; case "loopComplete": this.triggerEvent(t, new BMCompleteLoopEvent(t, this.loop, this.playCount, this.frameMult)); break; case "complete": this.triggerEvent(t, new BMCompleteEvent(t, this.frameMult)); break; case "segmentStart": this.triggerEvent(t, new BMSegmentStartEvent(t, this.firstFrame, this.totalFrames)); break; case "destroy": this.triggerEvent(t, new BMDestroyEvent(t, this)); break; default: this.triggerEvent(t) }"enterFrame" === t && this.onEnterFrame && this.onEnterFrame.call(this, new BMEnterFrameEvent(t, this.currentFrame, this.totalFrames, this.frameMult)), "loopComplete" === t && this.onLoopComplete && this.onLoopComplete.call(this, new BMCompleteLoopEvent(t, this.loop, this.playCount, this.frameMult)), "complete" === t && this.onComplete && this.onComplete.call(this, new BMCompleteEvent(t, this.frameMult)), "segmentStart" === t && this.onSegmentStart && this.onSegmentStart.call(this, new BMSegmentStartEvent(t, this.firstFrame, this.totalFrames)), "destroy" === t && this.onDestroy && this.onDestroy.call(this, new BMDestroyEvent(t, this)) }, AnimationItem.prototype.triggerRenderFrameError = function (t) { var e = new BMRenderFrameErrorEvent(t, this.currentFrame); this.triggerEvent("error", e), this.onError && this.onError.call(this, e) }, AnimationItem.prototype.triggerConfigError = function (t) { var e = new BMConfigErrorEvent(t, this.currentFrame); this.triggerEvent("error", e), this.onError && this.onError.call(this, e) }; var Expressions = function () { var t = { initExpressions: function (t) { var e = 0, r = []; t.renderer.compInterface = CompExpressionInterface(t.renderer), t.renderer.globalData.projectInterface.registerComposition(t.renderer), t.renderer.globalData.pushExpression = function () { e += 1 }, t.renderer.globalData.popExpression = function () { 0 == (e -= 1) && function () { var t, e = r.length; for (t = 0; t < e; t += 1)r[t].release(); r.length = 0 }() }, t.renderer.globalData.registerExpressionProperty = function (t) { -1 === r.indexOf(t) && r.push(t) } } }; return t }(); expressionsPlugin = Expressions; var ExpressionManager = function () { var ob = {}, Math = BMMath, window = null, document = null, XMLHttpRequest = null, fetch = null, frames = null; function $bm_isInstanceOfArray(t) { return t.constructor === Array || t.constructor === Float32Array } function isNumerable(t, e) { return "number" === t || "boolean" === t || "string" === t || e instanceof Number } function $bm_neg(t) { var e = typeof t; if ("number" === e || "boolean" === e || t instanceof Number) return -t; if ($bm_isInstanceOfArray(t)) { var r, i = t.length, s = []; for (r = 0; r < i; r += 1)s[r] = -t[r]; return s } return t.propType ? t.v : -t } var easeInBez = BezierFactory.getBezierEasing(.333, 0, .833, .833, "easeIn").get, easeOutBez = BezierFactory.getBezierEasing(.167, .167, .667, 1, "easeOut").get, easeInOutBez = BezierFactory.getBezierEasing(.33, 0, .667, 1, "easeInOut").get; function sum(t, e) { var r = typeof t, i = typeof e; if ("string" === r || "string" === i) return t + e; if (isNumerable(r, t) && isNumerable(i, e)) return t + e; if ($bm_isInstanceOfArray(t) && isNumerable(i, e)) return (t = t.slice(0))[0] += e, t; if (isNumerable(r, t) && $bm_isInstanceOfArray(e)) return (e = e.slice(0))[0] = t + e[0], e; if ($bm_isInstanceOfArray(t) && $bm_isInstanceOfArray(e)) { for (var s = 0, a = t.length, n = e.length, o = []; s < a || s < n;)("number" == typeof t[s] || t[s] instanceof Number) && ("number" == typeof e[s] || e[s] instanceof Number) ? o[s] = t[s] + e[s] : o[s] = void 0 === e[s] ? t[s] : t[s] || e[s], s += 1; return o } return 0 } var add = sum; function sub(t, e) { var r = typeof t, i = typeof e; if (isNumerable(r, t) && isNumerable(i, e)) return "string" === r && (t = parseInt(t, 10)), "string" === i && (e = parseInt(e, 10)), t - e; if ($bm_isInstanceOfArray(t) && isNumerable(i, e)) return (t = t.slice(0))[0] -= e, t; if (isNumerable(r, t) && $bm_isInstanceOfArray(e)) return (e = e.slice(0))[0] = t - e[0], e; if ($bm_isInstanceOfArray(t) && $bm_isInstanceOfArray(e)) { for (var s = 0, a = t.length, n = e.length, o = []; s < a || s < n;)("number" == typeof t[s] || t[s] instanceof Number) && ("number" == typeof e[s] || e[s] instanceof Number) ? o[s] = t[s] - e[s] : o[s] = void 0 === e[s] ? t[s] : t[s] || e[s], s += 1; return o } return 0 } function mul(t, e) { var r, i, s, a = typeof t, n = typeof e; if (isNumerable(a, t) && isNumerable(n, e)) return t * e; if ($bm_isInstanceOfArray(t) && isNumerable(n, e)) { for (s = t.length, r = createTypedArray("float32", s), i = 0; i < s; i += 1)r[i] = t[i] * e; return r } if (isNumerable(a, t) && $bm_isInstanceOfArray(e)) { for (s = e.length, r = createTypedArray("float32", s), i = 0; i < s; i += 1)r[i] = t * e[i]; return r } return 0 } function div(t, e) { var r, i, s, a = typeof t, n = typeof e; if (isNumerable(a, t) && isNumerable(n, e)) return t / e; if ($bm_isInstanceOfArray(t) && isNumerable(n, e)) { for (s = t.length, r = createTypedArray("float32", s), i = 0; i < s; i += 1)r[i] = t[i] / e; return r } if (isNumerable(a, t) && $bm_isInstanceOfArray(e)) { for (s = e.length, r = createTypedArray("float32", s), i = 0; i < s; i += 1)r[i] = t / e[i]; return r } return 0 } function mod(t, e) { return "string" == typeof t && (t = parseInt(t, 10)), "string" == typeof e && (e = parseInt(e, 10)), t % e } var $bm_sum = sum, $bm_sub = sub, $bm_mul = mul, $bm_div = div, $bm_mod = mod; function clamp(t, e, r) { if (e > r) { var i = r; r = e, e = i } return Math.min(Math.max(t, e), r) } function radiansToDegrees(t) { return t / degToRads } var radians_to_degrees = radiansToDegrees; function degreesToRadians(t) { return t * degToRads } var degrees_to_radians = radiansToDegrees, helperLengthArray = [0, 0, 0, 0, 0, 0]; function length(t, e) { if ("number" == typeof t || t instanceof Number) return e = e || 0, Math.abs(t - e); var r; e || (e = helperLengthArray); var i = Math.min(t.length, e.length), s = 0; for (r = 0; r < i; r += 1)s += Math.pow(e[r] - t[r], 2); return Math.sqrt(s) } function normalize(t) { return div(t, length(t)) } function rgbToHsl(t) { var e, r, i = t[0], s = t[1], a = t[2], n = Math.max(i, s, a), o = Math.min(i, s, a), h = (n + o) / 2; if (n === o) e = 0, r = 0; else { var l = n - o; switch (r = h > .5 ? l / (2 - n - o) : l / (n + o), n) { case i: e = (s - a) / l + (s < a ? 6 : 0); break; case s: e = (a - i) / l + 2; break; case a: e = (i - s) / l + 4 }e /= 6 } return [e, r, h, t[3]] } function hue2rgb(t, e, r) { return r < 0 && (r += 1), r > 1 && (r -= 1), r < 1 / 6 ? t + 6 * (e - t) * r : r < .5 ? e : r < 2 / 3 ? t + (e - t) * (2 / 3 - r) * 6 : t } function hslToRgb(t) { var e, r, i, s = t[0], a = t[1], n = t[2]; if (0 === a) e = n, i = n, r = n; else { var o = n < .5 ? n * (1 + a) : n + a - n * a, h = 2 * n - o; e = hue2rgb(h, o, s + 1 / 3), r = hue2rgb(h, o, s), i = hue2rgb(h, o, s - 1 / 3) } return [e, r, i, t[3]] } function linear(t, e, r, i, s) { if (void 0 !== i && void 0 !== s || (i = e, s = r, e = 0, r = 1), r < e) { var a = r; r = e, e = a } if (t <= e) return i; if (t >= r) return s; var n, o = r === e ? 0 : (t - e) / (r - e); if (!i.length) return i + (s - i) * o; var h = i.length, l = createTypedArray("float32", h); for (n = 0; n < h; n += 1)l[n] = i[n] + (s[n] - i[n]) * o; return l } function random(t, e) { if (void 0 === e && (void 0 === t ? (t = 0, e = 1) : (e = t, t = void 0)), e.length) { var r, i = e.length; t || (t = createTypedArray("float32", i)); var s = createTypedArray("float32", i), a = BMMath.random(); for (r = 0; r < i; r += 1)s[r] = t[r] + a * (e[r] - t[r]); return s } return void 0 === t && (t = 0), t + BMMath.random() * (e - t) } function createPath(t, e, r, i) { var s, a = t.length, n = shapePool.newElement(); n.setPathData(!!i, a); var o, h, l = [0, 0]; for (s = 0; s < a; s += 1)o = e && e[s] ? e[s] : l, h = r && r[s] ? r[s] : l, n.setTripleAt(t[s][0], t[s][1], h[0] + t[s][0], h[1] + t[s][1], o[0] + t[s][0], o[1] + t[s][1], s, !0); return n } function initiateExpression(elem, data, property) { var val = data.x, needsVelocity = /velocity(?![\w\d])/.test(val), _needsRandom = -1 !== val.indexOf("random"), elemType = elem.data.ty, transform, $bm_transform, content, effect, thisProperty = property; thisProperty.valueAtTime = thisProperty.getValueAtTime, Object.defineProperty(thisProperty, "value", { get: function () { return thisProperty.v } }), elem.comp.frameDuration = 1 / elem.comp.globalData.frameRate, elem.comp.displayStartTime = 0; var inPoint = elem.data.ip / elem.comp.globalData.frameRate, outPoint = elem.data.op / elem.comp.globalData.frameRate, width = elem.data.sw ? elem.data.sw : 0, height = elem.data.sh ? elem.data.sh : 0, name = elem.data.nm, loopIn, loop_in, loopOut, loop_out, smooth, toWorld, fromWorld, fromComp, toComp, fromCompToSurface, position, rotation, anchorPoint, scale, thisLayer, thisComp, mask, valueAtTime, velocityAtTime, scoped_bm_rt, expression_function = eval("[function _expression_function(){" + val + ";scoped_bm_rt=$bm_rt}]")[0], numKeys = property.kf ? data.k.length : 0, active = !this.data || !0 !== this.data.hd, wiggle = function (t, e) { var r, i, s = this.pv.length ? this.pv.length : 1, a = createTypedArray("float32", s), n = Math.floor(5 * time); for (r = 0, i = 0; r < n;) { for (i = 0; i < s; i += 1)a[i] += -e + 2 * e * BMMath.random(); r += 1 } var o = 5 * time, h = o - Math.floor(o), l = createTypedArray("float32", s); if (s > 1) { for (i = 0; i < s; i += 1)l[i] = this.pv[i] + a[i] + (-e + 2 * e * BMMath.random()) * h; return l } return this.pv + a[0] + (-e + 2 * e * BMMath.random()) * h }.bind(this); function loopInDuration(t, e) { return loopIn(t, e, !0) } function loopOutDuration(t, e) { return loopOut(t, e, !0) } thisProperty.loopIn && (loopIn = thisProperty.loopIn.bind(thisProperty), loop_in = loopIn), thisProperty.loopOut && (loopOut = thisProperty.loopOut.bind(thisProperty), loop_out = loopOut), thisProperty.smooth && (smooth = thisProperty.smooth.bind(thisProperty)), this.getValueAtTime && (valueAtTime = this.getValueAtTime.bind(this)), this.getVelocityAtTime && (velocityAtTime = this.getVelocityAtTime.bind(this)); var comp = elem.comp.globalData.projectInterface.bind(elem.comp.globalData.projectInterface), time, velocity, value, text, textIndex, textTotal, selectorValue; function lookAt(t, e) { var r = [e[0] - t[0], e[1] - t[1], e[2] - t[2]], i = Math.atan2(r[0], Math.sqrt(r[1] * r[1] + r[2] * r[2])) / degToRads; return [-Math.atan2(r[1], r[2]) / degToRads, i, 0] } function easeOut(t, e, r, i, s) { return applyEase(easeOutBez, t, e, r, i, s) } function easeIn(t, e, r, i, s) { return applyEase(easeInBez, t, e, r, i, s) } function ease(t, e, r, i, s) { return applyEase(easeInOutBez, t, e, r, i, s) } function applyEase(t, e, r, i, s, a) { void 0 === s ? (s = r, a = i) : e = (e - r) / (i - r), e > 1 ? e = 1 : e < 0 && (e = 0); var n = t(e); if ($bm_isInstanceOfArray(s)) { var o, h = s.length, l = createTypedArray("float32", h); for (o = 0; o < h; o += 1)l[o] = (a[o] - s[o]) * n + s[o]; return l } return (a - s) * n + s } function nearestKey(t) { var e, r, i, s = data.k.length; if (data.k.length && "number" != typeof data.k[0]) if (r = -1, (t *= elem.comp.globalData.frameRate) < data.k[0].t) r = 1, i = data.k[0].t; else { for (e = 0; e < s - 1; e += 1) { if (t === data.k[e].t) { r = e + 1, i = data.k[e].t; break } if (t > data.k[e].t && t < data.k[e + 1].t) { t - data.k[e].t > data.k[e + 1].t - t ? (r = e + 2, i = data.k[e + 1].t) : (r = e + 1, i = data.k[e].t); break } } -1 === r && (r = e + 1, i = data.k[e].t) } else r = 0, i = 0; var a = {}; return a.index = r, a.time = i / elem.comp.globalData.frameRate, a } function key(t) { var e, r, i; if (!data.k.length || "number" == typeof data.k[0]) throw new Error("The property has no keyframe at index " + t); t -= 1, e = { time: data.k[t].t / elem.comp.globalData.frameRate, value: [] }; var s = Object.prototype.hasOwnProperty.call(data.k[t], "s") ? data.k[t].s : data.k[t - 1].e; for (i = s.length, r = 0; r < i; r += 1)e[r] = s[r], e.value[r] = s[r]; return e } function framesToTime(t, e) { return e || (e = elem.comp.globalData.frameRate), t / e } function timeToFrames(t, e) { return t || 0 === t || (t = time), e || (e = elem.comp.globalData.frameRate), t * e } function seedRandom(t) { BMMath.seedrandom(randSeed + t) } function sourceRectAtTime() { return elem.sourceRectAtTime() } function substring(t, e) { return "string" == typeof value ? void 0 === e ? value.substring(t) : value.substring(t, e) : "" } function substr(t, e) { return "string" == typeof value ? void 0 === e ? value.substr(t) : value.substr(t, e) : "" } function posterizeTime(t) { time = 0 === t ? 0 : Math.floor(time * t) / t, value = valueAtTime(time) } var index = elem.data.ind, hasParent = !(!elem.hierarchy || !elem.hierarchy.length), parent, randSeed = Math.floor(1e6 * Math.random()), globalData = elem.globalData; function executeExpression(t) { return value = t, this.frameExpressionId === elem.globalData.frameId && "textSelector" !== this.propType ? value : ("textSelector" === this.propType && (textIndex = this.textIndex, textTotal = this.textTotal, selectorValue = this.selectorValue), thisLayer || (text = elem.layerInterface.text, thisLayer = elem.layerInterface, thisComp = elem.comp.compInterface, toWorld = thisLayer.toWorld.bind(thisLayer), fromWorld = thisLayer.fromWorld.bind(thisLayer), fromComp = thisLayer.fromComp.bind(thisLayer), toComp = thisLayer.toComp.bind(thisLayer), mask = thisLayer.mask ? thisLayer.mask.bind(thisLayer) : null, fromCompToSurface = fromComp), transform || (transform = elem.layerInterface("ADBE Transform Group"), $bm_transform = transform, transform && (anchorPoint = transform.anchorPoint)), 4 !== elemType || content || (content = thisLayer("ADBE Root Vectors Group")), effect || (effect = thisLayer(4)), (hasParent = !(!elem.hierarchy || !elem.hierarchy.length)) && !parent && (parent = elem.hierarchy[0].layerInterface), time = this.comp.renderedFrame / this.comp.globalData.frameRate, _needsRandom && seedRandom(randSeed + time), needsVelocity && (velocity = velocityAtTime(time)), expression_function(), this.frameExpressionId = elem.globalData.frameId, "shape" === scoped_bm_rt.propType && (scoped_bm_rt = scoped_bm_rt.v), scoped_bm_rt) } return executeExpression } return ob.initiateExpression = initiateExpression, ob }(), expressionHelpers = { searchExpressions: function (t, e, r) { e.x && (r.k = !0, r.x = !0, r.initiateExpression = ExpressionManager.initiateExpression, r.effectsSequence.push(r.initiateExpression(t, e, r).bind(r))) }, getSpeedAtTime: function (t) { var e = this.getValueAtTime(t), r = this.getValueAtTime(t + -.01), i = 0; if (e.length) { var s; for (s = 0; s < e.length; s += 1)i += Math.pow(r[s] - e[s], 2); i = 100 * Math.sqrt(i) } else i = 0; return i }, getVelocityAtTime: function (t) { if (void 0 !== this.vel) return this.vel; var e, r, i = -.001, s = this.getValueAtTime(t), a = this.getValueAtTime(t + i); if (s.length) for (e = createTypedArray("float32", s.length), r = 0; r < s.length; r += 1)e[r] = (a[r] - s[r]) / i; else e = (a - s) / i; return e }, getValueAtTime: function (t) { return t *= this.elem.globalData.frameRate, (t -= this.offsetTime) !== this._cachingAtTime.lastFrame && (this._cachingAtTime.lastIndex = this._cachingAtTime.lastFrame < t ? this._cachingAtTime.lastIndex : 0, this._cachingAtTime.value = this.interpolateValue(t, this._cachingAtTime), this._cachingAtTime.lastFrame = t), this._cachingAtTime.value }, getStaticValueAtTime: function () { return this.pv }, setGroupProperty: function (t) { this.propertyGroup = t } }; !function () { function t(t, e, r) { if (!this.k || !this.keyframes) return this.pv; t = t ? t.toLowerCase() : ""; var i, s, a, n, o, h = this.comp.renderedFrame, l = this.keyframes, p = l[l.length - 1].t; if (h <= p) return this.pv; if (r ? s = p - (i = e ? Math.abs(p - this.elem.comp.globalData.frameRate * e) : Math.max(0, p - this.elem.data.ip)) : ((!e || e > l.length - 1) && (e = l.length - 1), i = p - (s = l[l.length - 1 - e].t)), "pingpong" === t) { if (Math.floor((h - s) / i) % 2 != 0) return this.getValueAtTime((i - (h - s) % i + s) / this.comp.globalData.frameRate, 0) } else { if ("offset" === t) { var c = this.getValueAtTime(s / this.comp.globalData.frameRate, 0), f = this.getValueAtTime(p / this.comp.globalData.frameRate, 0), d = this.getValueAtTime(((h - s) % i + s) / this.comp.globalData.frameRate, 0), m = Math.floor((h - s) / i); if (this.pv.length) { for (n = (o = new Array(c.length)).length, a = 0; a < n; a += 1)o[a] = (f[a] - c[a]) * m + d[a]; return o } return (f - c) * m + d } if ("continue" === t) { var u = this.getValueAtTime(p / this.comp.globalData.frameRate, 0), y = this.getValueAtTime((p - .001) / this.comp.globalData.frameRate, 0); if (this.pv.length) { for (n = (o = new Array(u.length)).length, a = 0; a < n; a += 1)o[a] = u[a] + (u[a] - y[a]) * ((h - p) / this.comp.globalData.frameRate) / 5e-4; return o } return u + (h - p) / .001 * (u - y) } } return this.getValueAtTime(((h - s) % i + s) / this.comp.globalData.frameRate, 0) } function e(t, e, r) { if (!this.k) return this.pv; t = t ? t.toLowerCase() : ""; var i, s, a, n, o, h = this.comp.renderedFrame, l = this.keyframes, p = l[0].t; if (h >= p) return this.pv; if (r ? s = p + (i = e ? Math.abs(this.elem.comp.globalData.frameRate * e) : Math.max(0, this.elem.data.op - p)) : ((!e || e > l.length - 1) && (e = l.length - 1), i = (s = l[e].t) - p), "pingpong" === t) { if (Math.floor((p - h) / i) % 2 == 0) return this.getValueAtTime(((p - h) % i + p) / this.comp.globalData.frameRate, 0) } else { if ("offset" === t) { var c = this.getValueAtTime(p / this.comp.globalData.frameRate, 0), f = this.getValueAtTime(s / this.comp.globalData.frameRate, 0), d = this.getValueAtTime((i - (p - h) % i + p) / this.comp.globalData.frameRate, 0), m = Math.floor((p - h) / i) + 1; if (this.pv.length) { for (n = (o = new Array(c.length)).length, a = 0; a < n; a += 1)o[a] = d[a] - (f[a] - c[a]) * m; return o } return d - (f - c) * m } if ("continue" === t) { var u = this.getValueAtTime(p / this.comp.globalData.frameRate, 0), y = this.getValueAtTime((p + .001) / this.comp.globalData.frameRate, 0); if (this.pv.length) { for (n = (o = new Array(u.length)).length, a = 0; a < n; a += 1)o[a] = u[a] + (u[a] - y[a]) * (p - h) / .001; return o } return u + (u - y) * (p - h) / .001 } } return this.getValueAtTime((i - ((p - h) % i + p)) / this.comp.globalData.frameRate, 0) } function r(t, e) { if (!this.k) return this.pv; if (t = .5 * (t || .4), (e = Math.floor(e || 5)) <= 1) return this.pv; var r, i, s = this.comp.renderedFrame / this.comp.globalData.frameRate, a = s - t, n = e > 1 ? (s + t - a) / (e - 1) : 1, o = 0, h = 0; for (r = this.pv.length ? createTypedArray("float32", this.pv.length) : 0; o < e;) { if (i = this.getValueAtTime(a + o * n), this.pv.length) for (h = 0; h < this.pv.length; h += 1)r[h] += i[h]; else r += i; o += 1 } if (this.pv.length) for (h = 0; h < this.pv.length; h += 1)r[h] /= e; else r /= e; return r } function i(t) { this._transformCachingAtTime || (this._transformCachingAtTime = { v: new Matrix }); var e = this._transformCachingAtTime.v; if (e.cloneFromProps(this.pre.props), this.appliedTransformations < 1) { var r = this.a.getValueAtTime(t); e.translate(-r[0] * this.a.mult, -r[1] * this.a.mult, r[2] * this.a.mult) } if (this.appliedTransformations < 2) { var i = this.s.getValueAtTime(t); e.scale(i[0] * this.s.mult, i[1] * this.s.mult, i[2] * this.s.mult) } if (this.sk && this.appliedTransformations < 3) { var s = this.sk.getValueAtTime(t), a = this.sa.getValueAtTime(t); e.skewFromAxis(-s * this.sk.mult, a * this.sa.mult) } if (this.r && this.appliedTransformations < 4) { var n = this.r.getValueAtTime(t); e.rotate(-n * this.r.mult) } else if (!this.r && this.appliedTransformations < 4) { var o = this.rz.getValueAtTime(t), h = this.ry.getValueAtTime(t), l = this.rx.getValueAtTime(t), p = this.or.getValueAtTime(t); e.rotateZ(-o * this.rz.mult).rotateY(h * this.ry.mult).rotateX(l * this.rx.mult).rotateZ(-p[2] * this.or.mult).rotateY(p[1] * this.or.mult).rotateX(p[0] * this.or.mult) } if (this.data.p && this.data.p.s) { var c = this.px.getValueAtTime(t), f = this.py.getValueAtTime(t); if (this.data.p.z) { var d = this.pz.getValueAtTime(t); e.translate(c * this.px.mult, f * this.py.mult, -d * this.pz.mult) } else e.translate(c * this.px.mult, f * this.py.mult, 0) } else { var m = this.p.getValueAtTime(t); e.translate(m[0] * this.p.mult, m[1] * this.p.mult, -m[2] * this.p.mult) } return e } function s() { return this.v.clone(new Matrix) } var a = TransformPropertyFactory.getTransformProperty; TransformPropertyFactory.getTransformProperty = function (t, e, r) { var n = a(t, e, r); return n.dynamicProperties.length ? n.getValueAtTime = i.bind(n) : n.getValueAtTime = s.bind(n), n.setGroupProperty = expressionHelpers.setGroupProperty, n }; var n = PropertyFactory.getProp; PropertyFactory.getProp = function (i, s, a, o, h) { var l = n(i, s, a, o, h); l.kf ? l.getValueAtTime = expressionHelpers.getValueAtTime.bind(l) : l.getValueAtTime = expressionHelpers.getStaticValueAtTime.bind(l), l.setGroupProperty = expressionHelpers.setGroupProperty, l.loopOut = t, l.loopIn = e, l.smooth = r, l.getVelocityAtTime = expressionHelpers.getVelocityAtTime.bind(l), l.getSpeedAtTime = expressionHelpers.getSpeedAtTime.bind(l), l.numKeys = 1 === s.a ? s.k.length : 0, l.propertyIndex = s.ix; var p = 0; return 0 !== a && (p = createTypedArray("float32", 1 === s.a ? s.k[0].s.length : s.k.length)), l._cachingAtTime = { lastFrame: initialDefaultFrame, lastIndex: 0, value: p }, expressionHelpers.searchExpressions(i, s, l), l.k && h.addDynamicProperty(l), l }; var o = ShapePropertyFactory.getConstructorFunction(), h = ShapePropertyFactory.getKeyframedConstructorFunction(); function l() { } l.prototype = { vertices: function (t, e) { this.k && this.getValue(); var r, i = this.v; void 0 !== e && (i = this.getValueAtTime(e, 0)); var s = i._length, a = i[t], n = i.v, o = createSizedArray(s); for (r = 0; r < s; r += 1)o[r] = "i" === t || "o" === t ? [a[r][0] - n[r][0], a[r][1] - n[r][1]] : [a[r][0], a[r][1]]; return o }, points: function (t) { return this.vertices("v", t) }, inTangents: function (t) { return this.vertices("i", t) }, outTangents: function (t) { return this.vertices("o", t) }, isClosed: function () { return this.v.c }, pointOnPath: function (t, e) { var r = this.v; void 0 !== e && (r = this.getValueAtTime(e, 0)), this._segmentsLength || (this._segmentsLength = bez.getSegmentsLength(r)); for (var i, s = this._segmentsLength, a = s.lengths, n = s.totalLength * t, o = 0, h = a.length, l = 0; o < h;) { if (l + a[o].addedLength > n) { var p = o, c = r.c && o === h - 1 ? 0 : o + 1, f = (n - l) / a[o].addedLength; i = bez.getPointInSegment(r.v[p], r.v[c], r.o[p], r.i[c], f, a[o]); break } l += a[o].addedLength, o += 1 } return i || (i = r.c ? [r.v[0][0], r.v[0][1]] : [r.v[r._length - 1][0], r.v[r._length - 1][1]]), i }, vectorOnPath: function (t, e, r) { 1 == t ? t = this.v.c : 0 == t && (t = .999); var i = this.pointOnPath(t, e), s = this.pointOnPath(t + .001, e), a = s[0] - i[0], n = s[1] - i[1], o = Math.sqrt(Math.pow(a, 2) + Math.pow(n, 2)); return 0 === o ? [0, 0] : "tangent" === r ? [a / o, n / o] : [-n / o, a / o] }, tangentOnPath: function (t, e) { return this.vectorOnPath(t, e, "tangent") }, normalOnPath: function (t, e) { return this.vectorOnPath(t, e, "normal") }, setGroupProperty: expressionHelpers.setGroupProperty, getValueAtTime: expressionHelpers.getStaticValueAtTime }, extendPrototype([l], o), extendPrototype([l], h), h.prototype.getValueAtTime = function (t) { return this._cachingAtTime || (this._cachingAtTime = { shapeValue: shapePool.clone(this.pv), lastIndex: 0, lastTime: initialDefaultFrame }), t *= this.elem.globalData.frameRate, (t -= this.offsetTime) !== this._cachingAtTime.lastTime && (this._cachingAtTime.lastIndex = this._cachingAtTime.lastTime < t ? this._caching.lastIndex : 0, this._cachingAtTime.lastTime = t, this.interpolateShape(t, this._cachingAtTime.shapeValue, this._cachingAtTime)), this._cachingAtTime.shapeValue }, h.prototype.initiateExpression = ExpressionManager.initiateExpression; var p = ShapePropertyFactory.getShapeProp; ShapePropertyFactory.getShapeProp = function (t, e, r, i, s) { var a = p(t, e, r, i, s); return a.propertyIndex = e.ix, a.lock = !1, 3 === r ? expressionHelpers.searchExpressions(t, e.pt, a) : 4 === r && expressionHelpers.searchExpressions(t, e.ks, a), a.k && t.addDynamicProperty(a), a } }(), TextProperty.prototype.getExpressionValue = function (t, e) { var r = this.calculateExpression(e); if (t.t !== r) { var i = {}; return this.copyData(i, t), i.t = r.toString(), i.__complete = !1, i } return t }, TextProperty.prototype.searchProperty = function () { var t = this.searchKeyframes(), e = this.searchExpressions(); return this.kf = t || e, this.kf }, TextProperty.prototype.searchExpressions = function () { return this.data.d.x ? (this.calculateExpression = ExpressionManager.initiateExpression.bind(this)(this.elem, this.data.d, this), this.addEffect(this.getExpressionValue.bind(this)), !0) : null }; var ShapePathInterface = function (t, e, r) { var i = e.sh; function s(t) { return "Shape" === t || "shape" === t || "Path" === t || "path" === t || "ADBE Vector Shape" === t || 2 === t ? s.path : null } var a = propertyGroupFactory(s, r); return i.setGroupProperty(PropertyInterface("Path", a)), Object.defineProperties(s, { path: { get: function () { return i.k && i.getValue(), i } }, shape: { get: function () { return i.k && i.getValue(), i } }, _name: { value: t.nm }, ix: { value: t.ix }, propertyIndex: { value: t.ix }, mn: { value: t.mn }, propertyGroup: { value: r } }), s }, propertyGroupFactory = function (t, e) { return function (r) { return (r = void 0 === r ? 1 : r) <= 0 ? t : e(r - 1) } }, PropertyInterface = function (t, e) { var r = { _name: t }; return function (t) { return (t = void 0 === t ? 1 : t) <= 0 ? r : e(t - 1) } }, ShapeExpressionInterface = function () { function t(t, n, f) { var d, m = [], u = t ? t.length : 0; for (d = 0; d < u; d += 1)"gr" === t[d].ty ? m.push(e(t[d], n[d], f)) : "fl" === t[d].ty ? m.push(r(t[d], n[d], f)) : "st" === t[d].ty ? m.push(s(t[d], n[d], f)) : "tm" === t[d].ty ? m.push(a(t[d], n[d], f)) : "tr" === t[d].ty || ("el" === t[d].ty ? m.push(o(t[d], n[d], f)) : "sr" === t[d].ty ? m.push(h(t[d], n[d], f)) : "sh" === t[d].ty ? m.push(ShapePathInterface(t[d], n[d], f)) : "rc" === t[d].ty ? m.push(l(t[d], n[d], f)) : "rd" === t[d].ty ? m.push(p(t[d], n[d], f)) : "rp" === t[d].ty ? m.push(c(t[d], n[d], f)) : "gf" === t[d].ty ? m.push(i(t[d], n[d], f)) : m.push((t[d], n[d], function () { return null }))); return m } function e(e, r, i) { var s = function (t) { switch (t) { case "ADBE Vectors Group": case "Contents": case 2: return s.content; default: return s.transform } }; s.propertyGroup = propertyGroupFactory(s, i); var a = function (e, r, i) { var s, a = function (t) { for (var e = 0, r = s.length; e < r;) { if (s[e]._name === t || s[e].mn === t || s[e].propertyIndex === t || s[e].ix === t || s[e].ind === t) return s[e]; e += 1 } return "number" == typeof t ? s[t - 1] : null }; a.propertyGroup = propertyGroupFactory(a, i), s = t(e.it, r.it, a.propertyGroup), a.numProperties = s.length; var o = n(e.it[e.it.length - 1], r.it[r.it.length - 1], a.propertyGroup); return a.transform = o, a.propertyIndex = e.cix, a._name = e.nm, a }(e, r, s.propertyGroup), o = n(e.it[e.it.length - 1], r.it[r.it.length - 1], s.propertyGroup); return s.content = a, s.transform = o, Object.defineProperty(s, "_name", { get: function () { return e.nm } }), s.numProperties = e.np, s.propertyIndex = e.ix, s.nm = e.nm, s.mn = e.mn, s } function r(t, e, r) { function i(t) { return "Color" === t || "color" === t ? i.color : "Opacity" === t || "opacity" === t ? i.opacity : null } return Object.defineProperties(i, { color: { get: ExpressionPropertyInterface(e.c) }, opacity: { get: ExpressionPropertyInterface(e.o) }, _name: { value: t.nm }, mn: { value: t.mn } }), e.c.setGroupProperty(PropertyInterface("Color", r)), e.o.setGroupProperty(PropertyInterface("Opacity", r)), i } function i(t, e, r) { function i(t) { return "Start Point" === t || "start point" === t ? i.startPoint : "End Point" === t || "end point" === t ? i.endPoint : "Opacity" === t || "opacity" === t ? i.opacity : null } return Object.defineProperties(i, { startPoint: { get: ExpressionPropertyInterface(e.s) }, endPoint: { get: ExpressionPropertyInterface(e.e) }, opacity: { get: ExpressionPropertyInterface(e.o) }, type: { get: function () { return "a" } }, _name: { value: t.nm }, mn: { value: t.mn } }), e.s.setGroupProperty(PropertyInterface("Start Point", r)), e.e.setGroupProperty(PropertyInterface("End Point", r)), e.o.setGroupProperty(PropertyInterface("Opacity", r)), i } function s(t, e, r) { var i, s = propertyGroupFactory(l, r), a = propertyGroupFactory(h, s); function n(r) { Object.defineProperty(h, t.d[r].nm, { get: ExpressionPropertyInterface(e.d.dataProps[r].p) }) } var o = t.d ? t.d.length : 0, h = {}; for (i = 0; i < o; i += 1)n(i), e.d.dataProps[i].p.setGroupProperty(a); function l(t) { return "Color" === t || "color" === t ? l.color : "Opacity" === t || "opacity" === t ? l.opacity : "Stroke Width" === t || "stroke width" === t ? l.strokeWidth : null } return Object.defineProperties(l, { color: { get: ExpressionPropertyInterface(e.c) }, opacity: { get: ExpressionPropertyInterface(e.o) }, strokeWidth: { get: ExpressionPropertyInterface(e.w) }, dash: { get: function () { return h } }, _name: { value: t.nm }, mn: { value: t.mn } }), e.c.setGroupProperty(PropertyInterface("Color", s)), e.o.setGroupProperty(PropertyInterface("Opacity", s)), e.w.setGroupProperty(PropertyInterface("Stroke Width", s)), l } function a(t, e, r) { function i(e) { return e === t.e.ix || "End" === e || "end" === e ? i.end : e === t.s.ix ? i.start : e === t.o.ix ? i.offset : null } var s = propertyGroupFactory(i, r); return i.propertyIndex = t.ix, e.s.setGroupProperty(PropertyInterface("Start", s)), e.e.setGroupProperty(PropertyInterface("End", s)), e.o.setGroupProperty(PropertyInterface("Offset", s)), i.propertyIndex = t.ix, i.propertyGroup = r, Object.defineProperties(i, { start: { get: ExpressionPropertyInterface(e.s) }, end: { get: ExpressionPropertyInterface(e.e) }, offset: { get: ExpressionPropertyInterface(e.o) }, _name: { value: t.nm } }), i.mn = t.mn, i } function n(t, e, r) { function i(e) { return t.a.ix === e || "Anchor Point" === e ? i.anchorPoint : t.o.ix === e || "Opacity" === e ? i.opacity : t.p.ix === e || "Position" === e ? i.position : t.r.ix === e || "Rotation" === e || "ADBE Vector Rotation" === e ? i.rotation : t.s.ix === e || "Scale" === e ? i.scale : t.sk && t.sk.ix === e || "Skew" === e ? i.skew : t.sa && t.sa.ix === e || "Skew Axis" === e ? i.skewAxis : null } var s = propertyGroupFactory(i, r); return e.transform.mProps.o.setGroupProperty(PropertyInterface("Opacity", s)), e.transform.mProps.p.setGroupProperty(PropertyInterface("Position", s)), e.transform.mProps.a.setGroupProperty(PropertyInterface("Anchor Point", s)), e.transform.mProps.s.setGroupProperty(PropertyInterface("Scale", s)), e.transform.mProps.r.setGroupProperty(PropertyInterface("Rotation", s)), e.transform.mProps.sk && (e.transform.mProps.sk.setGroupProperty(PropertyInterface("Skew", s)), e.transform.mProps.sa.setGroupProperty(PropertyInterface("Skew Angle", s))), e.transform.op.setGroupProperty(PropertyInterface("Opacity", s)), Object.defineProperties(i, { opacity: { get: ExpressionPropertyInterface(e.transform.mProps.o) }, position: { get: ExpressionPropertyInterface(e.transform.mProps.p) }, anchorPoint: { get: ExpressionPropertyInterface(e.transform.mProps.a) }, scale: { get: ExpressionPropertyInterface(e.transform.mProps.s) }, rotation: { get: ExpressionPropertyInterface(e.transform.mProps.r) }, skew: { get: ExpressionPropertyInterface(e.transform.mProps.sk) }, skewAxis: { get: ExpressionPropertyInterface(e.transform.mProps.sa) }, _name: { value: t.nm } }), i.ty = "tr", i.mn = t.mn, i.propertyGroup = r, i } function o(t, e, r) { function i(e) { return t.p.ix === e ? i.position : t.s.ix === e ? i.size : null } var s = propertyGroupFactory(i, r); i.propertyIndex = t.ix; var a = "tm" === e.sh.ty ? e.sh.prop : e.sh; return a.s.setGroupProperty(PropertyInterface("Size", s)), a.p.setGroupProperty(PropertyInterface("Position", s)), Object.defineProperties(i, { size: { get: ExpressionPropertyInterface(a.s) }, position: { get: ExpressionPropertyInterface(a.p) }, _name: { value: t.nm } }), i.mn = t.mn, i } function h(t, e, r) { function i(e) { return t.p.ix === e ? i.position : t.r.ix === e ? i.rotation : t.pt.ix === e ? i.points : t.or.ix === e || "ADBE Vector Star Outer Radius" === e ? i.outerRadius : t.os.ix === e ? i.outerRoundness : !t.ir || t.ir.ix !== e && "ADBE Vector Star Inner Radius" !== e ? t.is && t.is.ix === e ? i.innerRoundness : null : i.innerRadius } var s = propertyGroupFactory(i, r), a = "tm" === e.sh.ty ? e.sh.prop : e.sh; return i.propertyIndex = t.ix, a.or.setGroupProperty(PropertyInterface("Outer Radius", s)), a.os.setGroupProperty(PropertyInterface("Outer Roundness", s)), a.pt.setGroupProperty(PropertyInterface("Points", s)), a.p.setGroupProperty(PropertyInterface("Position", s)), a.r.setGroupProperty(PropertyInterface("Rotation", s)), t.ir && (a.ir.setGroupProperty(PropertyInterface("Inner Radius", s)), a.is.setGroupProperty(PropertyInterface("Inner Roundness", s))), Object.defineProperties(i, { position: { get: ExpressionPropertyInterface(a.p) }, rotation: { get: ExpressionPropertyInterface(a.r) }, points: { get: ExpressionPropertyInterface(a.pt) }, outerRadius: { get: ExpressionPropertyInterface(a.or) }, outerRoundness: { get: ExpressionPropertyInterface(a.os) }, innerRadius: { get: ExpressionPropertyInterface(a.ir) }, innerRoundness: { get: ExpressionPropertyInterface(a.is) }, _name: { value: t.nm } }), i.mn = t.mn, i } function l(t, e, r) { function i(e) { return t.p.ix === e ? i.position : t.r.ix === e ? i.roundness : t.s.ix === e || "Size" === e || "ADBE Vector Rect Size" === e ? i.size : null } var s = propertyGroupFactory(i, r), a = "tm" === e.sh.ty ? e.sh.prop : e.sh; return i.propertyIndex = t.ix, a.p.setGroupProperty(PropertyInterface("Position", s)), a.s.setGroupProperty(PropertyInterface("Size", s)), a.r.setGroupProperty(PropertyInterface("Rotation", s)), Object.defineProperties(i, { position: { get: ExpressionPropertyInterface(a.p) }, roundness: { get: ExpressionPropertyInterface(a.r) }, size: { get: ExpressionPropertyInterface(a.s) }, _name: { value: t.nm } }), i.mn = t.mn, i } function p(t, e, r) { function i(e) { return t.r.ix === e || "Round Corners 1" === e ? i.radius : null } var s = propertyGroupFactory(i, r), a = e; return i.propertyIndex = t.ix, a.rd.setGroupProperty(PropertyInterface("Radius", s)), Object.defineProperties(i, { radius: { get: ExpressionPropertyInterface(a.rd) }, _name: { value: t.nm } }), i.mn = t.mn, i } function c(t, e, r) { function i(e) { return t.c.ix === e || "Copies" === e ? i.copies : t.o.ix === e || "Offset" === e ? i.offset : null } var s = propertyGroupFactory(i, r), a = e; return i.propertyIndex = t.ix, a.c.setGroupProperty(PropertyInterface("Copies", s)), a.o.setGroupProperty(PropertyInterface("Offset", s)), Object.defineProperties(i, { copies: { get: ExpressionPropertyInterface(a.c) }, offset: { get: ExpressionPropertyInterface(a.o) }, _name: { value: t.nm } }), i.mn = t.mn, i } return function (e, r, i) { var s; function a(t) { if ("number" == typeof t) return 0 === (t = void 0 === t ? 1 : t) ? i : s[t - 1]; for (var e = 0, r = s.length; e < r;) { if (s[e]._name === t) return s[e]; e += 1 } return null } return a.propertyGroup = propertyGroupFactory(a, (function () { return i })), s = t(e, r, a.propertyGroup), a.numProperties = s.length, a._name = "Contents", a } }(), TextExpressionInterface = function (t) { var e, r; function i(t) { return "ADBE Text Document" === t ? i.sourceText : null } return Object.defineProperty(i, "sourceText", { get: function () { t.textProperty.getValue(); var i = t.textProperty.currentData.t; return i !== e && (t.textProperty.currentData.t = e, (r = new String(i)).value = i || new String(i)), r } }), i }, LayerExpressionInterface = function () { function t(t) { var e = new Matrix; return void 0 !== t ? this._elem.finalTransform.mProp.getValueAtTime(t).clone(e) : this._elem.finalTransform.mProp.applyToMatrix(e), e } function e(t, e) { var r = this.getMatrix(e); return r.props[12] = 0, r.props[13] = 0, r.props[14] = 0, this.applyPoint(r, t) } function r(t, e) { var r = this.getMatrix(e); return this.applyPoint(r, t) } function i(t, e) { var r = this.getMatrix(e); return r.props[12] = 0, r.props[13] = 0, r.props[14] = 0, this.invertPoint(r, t) } function s(t, e) { var r = this.getMatrix(e); return this.invertPoint(r, t) } function a(t, e) { if (this._elem.hierarchy && this._elem.hierarchy.length) { var r, i = this._elem.hierarchy.length; for (r = 0; r < i; r += 1)this._elem.hierarchy[r].finalTransform.mProp.applyToMatrix(t) } return t.applyToPointArray(e[0], e[1], e[2] || 0) } function n(t, e) { if (this._elem.hierarchy && this._elem.hierarchy.length) { var r, i = this._elem.hierarchy.length; for (r = 0; r < i; r += 1)this._elem.hierarchy[r].finalTransform.mProp.applyToMatrix(t) } return t.inversePoint(e) } function o(t) { var e = new Matrix; if (e.reset(), this._elem.finalTransform.mProp.applyToMatrix(e), this._elem.hierarchy && this._elem.hierarchy.length) { var r, i = this._elem.hierarchy.length; for (r = 0; r < i; r += 1)this._elem.hierarchy[r].finalTransform.mProp.applyToMatrix(e); return e.inversePoint(t) } return e.inversePoint(t) } function h() { return [1, 1, 1, 1] } return function (l) { var p; function c(t) { switch (t) { case "ADBE Root Vectors Group": case "Contents": case 2: return c.shapeInterface; case 1: case 6: case "Transform": case "transform": case "ADBE Transform Group": return p; case 4: case "ADBE Effect Parade": case "effects": case "Effects": return c.effect; case "ADBE Text Properties": return c.textInterface; default: return null } } c.getMatrix = t, c.invertPoint = n, c.applyPoint = a, c.toWorld = r, c.toWorldVec = e, c.fromWorld = s, c.fromWorldVec = i, c.toComp = r, c.fromComp = o, c.sampleImage = h, c.sourceRectAtTime = l.sourceRectAtTime.bind(l), c._elem = l; var f = getDescriptor(p = TransformExpressionInterface(l.finalTransform.mProp), "anchorPoint"); return Object.defineProperties(c, { hasParent: { get: function () { return l.hierarchy.length } }, parent: { get: function () { return l.hierarchy[0].layerInterface } }, rotation: getDescriptor(p, "rotation"), scale: getDescriptor(p, "scale"), position: getDescriptor(p, "position"), opacity: getDescriptor(p, "opacity"), anchorPoint: f, anchor_point: f, transform: { get: function () { return p } }, active: { get: function () { return l.isInRange } } }), c.startTime = l.data.st, c.index = l.data.ind, c.source = l.data.refId, c.height = 0 === l.data.ty ? l.data.h : 100, c.width = 0 === l.data.ty ? l.data.w : 100, c.inPoint = l.data.ip / l.comp.globalData.frameRate, c.outPoint = l.data.op / l.comp.globalData.frameRate, c._name = l.data.nm, c.registerMaskInterface = function (t) { c.mask = new MaskManagerInterface(t, l) }, c.registerEffectsInterface = function (t) { c.effect = t }, c } }(), FootageInterface = (dataInterfaceFactory = function (t) { function e(t) { return "Outline" === t ? e.outlineInterface() : null } return e._name = "Outline", e.outlineInterface = function (t) { var e = "", r = t.getFootageData(); function i(t) { if (r[t]) return e = t, "object" == typeof (r = r[t]) ? i : r; var s = t.indexOf(e); if (-1 !== s) { var a = parseInt(t.substr(s + e.length), 10); return "object" == typeof (r = r[a]) ? i : r } return "" } return function () { return e = "", r = t.getFootageData(), i } }(t), e }, function (t) { function e(t) { return "Data" === t ? e.dataInterface : null } return e._name = "Data", e.dataInterface = dataInterfaceFactory(t), e }), dataInterfaceFactory, CompExpressionInterface = function (t) { function e(e) { for (var r = 0, i = t.layers.length; r < i;) { if (t.layers[r].nm === e || t.layers[r].ind === e) return t.elements[r].layerInterface; r += 1 } return null } return Object.defineProperty(e, "_name", { value: t.data.nm }), e.layer = e, e.pixelAspect = 1, e.height = t.data.h || t.globalData.compSize.h, e.width = t.data.w || t.globalData.compSize.w, e.pixelAspect = 1, e.frameDuration = 1 / t.globalData.frameRate, e.displayStartTime = 0, e.numLayers = t.layers.length, e }, TransformExpressionInterface = function (t) { function e(t) { switch (t) { case "scale": case "Scale": case "ADBE Scale": case 6: return e.scale; case "rotation": case "Rotation": case "ADBE Rotation": case "ADBE Rotate Z": case 10: return e.rotation; case "ADBE Rotate X": return e.xRotation; case "ADBE Rotate Y": return e.yRotation; case "position": case "Position": case "ADBE Position": case 2: return e.position; case "ADBE Position_0": return e.xPosition; case "ADBE Position_1": return e.yPosition; case "ADBE Position_2": return e.zPosition; case "anchorPoint": case "AnchorPoint": case "Anchor Point": case "ADBE AnchorPoint": case 1: return e.anchorPoint; case "opacity": case "Opacity": case 11: return e.opacity; default: return null } } var r, i, s, a; return Object.defineProperty(e, "rotation", { get: ExpressionPropertyInterface(t.r || t.rz) }), Object.defineProperty(e, "zRotation", { get: ExpressionPropertyInterface(t.rz || t.r) }), Object.defineProperty(e, "xRotation", { get: ExpressionPropertyInterface(t.rx) }), Object.defineProperty(e, "yRotation", { get: ExpressionPropertyInterface(t.ry) }), Object.defineProperty(e, "scale", { get: ExpressionPropertyInterface(t.s) }), t.p ? a = ExpressionPropertyInterface(t.p) : (r = ExpressionPropertyInterface(t.px), i = ExpressionPropertyInterface(t.py), t.pz && (s = ExpressionPropertyInterface(t.pz))), Object.defineProperty(e, "position", { get: function () { return t.p ? a() : [r(), i(), s ? s() : 0] } }), Object.defineProperty(e, "xPosition", { get: ExpressionPropertyInterface(t.px) }), Object.defineProperty(e, "yPosition", { get: ExpressionPropertyInterface(t.py) }), Object.defineProperty(e, "zPosition", { get: ExpressionPropertyInterface(t.pz) }), Object.defineProperty(e, "anchorPoint", { get: ExpressionPropertyInterface(t.a) }), Object.defineProperty(e, "opacity", { get: ExpressionPropertyInterface(t.o) }), Object.defineProperty(e, "skew", { get: ExpressionPropertyInterface(t.sk) }), Object.defineProperty(e, "skewAxis", { get: ExpressionPropertyInterface(t.sa) }), Object.defineProperty(e, "orientation", { get: ExpressionPropertyInterface(t.or) }), e }, ProjectInterface = function () { function t(t) { this.compositions.push(t) } return function () { function e(t) { for (var e = 0, r = this.compositions.length; e < r;) { if (this.compositions[e].data && this.compositions[e].data.nm === t) return this.compositions[e].prepareFrame && this.compositions[e].data.xt && this.compositions[e].prepareFrame(this.currentFrame), this.compositions[e].compInterface; e += 1 } return null } return e.compositions = [], e.currentFrame = 0, e.registerComposition = t, e } }(), EffectsExpressionInterface = function () { var t = { createEffectsInterface: function (t, r) { if (t.effectsManager) { var i, s = [], a = t.data.ef, n = t.effectsManager.effectElements.length; for (i = 0; i < n; i += 1)s.push(e(a[i], t.effectsManager.effectElements[i], r, t)); var o = t.data.ef || [], h = function (t) { for (i = 0, n = o.length; i < n;) { if (t === o[i].nm || t === o[i].mn || t === o[i].ix) return s[i]; i += 1 } return null }; return Object.defineProperty(h, "numProperties", { get: function () { return o.length } }), h } return null } }; function e(t, i, s, a) { function n(e) { for (var r = t.ef, i = 0, s = r.length; i < s;) { if (e === r[i].nm || e === r[i].mn || e === r[i].ix) return 5 === r[i].ty ? l[i] : l[i](); i += 1 } throw new Error } var o, h = propertyGroupFactory(n, s), l = [], p = t.ef.length; for (o = 0; o < p; o += 1)5 === t.ef[o].ty ? l.push(e(t.ef[o], i.effectElements[o], i.effectElements[o].propertyGroup, a)) : l.push(r(i.effectElements[o], t.ef[o].ty, a, h)); return "ADBE Color Control" === t.mn && Object.defineProperty(n, "color", { get: function () { return l[0]() } }), Object.defineProperties(n, { numProperties: { get: function () { return t.np } }, _name: { value: t.nm }, propertyGroup: { value: h } }), n.enabled = 0 !== t.en, n.active = n.enabled, n } function r(t, e, r, i) { var s = ExpressionPropertyInterface(t.p); return t.p.setGroupProperty && t.p.setGroupProperty(PropertyInterface("", i)), function () { return 10 === e ? r.comp.compInterface(t.p.v) : s() } } return t }(), MaskManagerInterface = function () { function t(t, e) { this._mask = t, this._data = e } return Object.defineProperty(t.prototype, "maskPath", { get: function () { return this._mask.prop.k && this._mask.prop.getValue(), this._mask.prop } }), Object.defineProperty(t.prototype, "maskOpacity", { get: function () { return this._mask.op.k && this._mask.op.getValue(), 100 * this._mask.op.v } }), function (e) { var r, i = createSizedArray(e.viewData.length), s = e.viewData.length; for (r = 0; r < s; r += 1)i[r] = new t(e.viewData[r], e.masksProperties[r]); return function (t) { for (r = 0; r < s;) { if (e.masksProperties[r].nm === t) return i[r]; r += 1 } return null } } }(), ExpressionPropertyInterface = function () { var t = { pv: 0, v: 0, mult: 1 }, e = { pv: [0, 0, 0], v: [0, 0, 0], mult: 1 }; function r(t, e, r) { Object.defineProperty(t, "velocity", { get: function () { return e.getVelocityAtTime(e.comp.currentFrame) } }), t.numKeys = e.keyframes ? e.keyframes.length : 0, t.key = function (i) { if (!t.numKeys) return 0; var s = ""; s = "s" in e.keyframes[i - 1] ? e.keyframes[i - 1].s : "e" in e.keyframes[i - 2] ? e.keyframes[i - 2].e : e.keyframes[i - 2].s; var a = "unidimensional" === r ? new Number(s) : Object.assign({}, s); return a.time = e.keyframes[i - 1].t / e.elem.comp.globalData.frameRate, a.value = "unidimensional" === r ? s[0] : s, a }, t.valueAtTime = e.getValueAtTime, t.speedAtTime = e.getSpeedAtTime, t.velocityAtTime = e.getVelocityAtTime, t.propertyGroup = e.propertyGroup } function i() { return t } return function (s) { return s ? "unidimensional" === s.propType ? function (e) { e && "pv" in e || (e = t); var i = 1 / e.mult, s = e.pv * i, a = new Number(s); return a.value = s, r(a, e, "unidimensional"), function () { return e.k && e.getValue(), s = e.v * i, a.value !== s && ((a = new Number(s)).value = s, r(a, e, "unidimensional")), a } }(s) : function (t) { t && "pv" in t || (t = e); var i = 1 / t.mult, s = t.data && t.data.l || t.pv.length, a = createTypedArray("float32", s), n = createTypedArray("float32", s); return a.value = n, r(a, t, "multidimensional"), function () { t.k && t.getValue(); for (var e = 0; e < s; e += 1)n[e] = t.v[e] * i, a[e] = n[e]; return a } }(s) : i } }(), TextExpressionSelectorPropFactory = function () { function t(t, e) { return this.textIndex = t + 1, this.textTotal = e, this.v = this.getValue() * this.mult, this.v } return function (e, r) { this.pv = 1, this.comp = e.comp, this.elem = e, this.mult = .01, this.propType = "textSelector", this.textTotal = r.totalChars, this.selectorValue = 100, this.lastValue = [1, 1, 1], this.k = !0, this.x = !0, this.getValue = ExpressionManager.initiateExpression.bind(this)(e, r, this), this.getMult = t, this.getVelocityAtTime = expressionHelpers.getVelocityAtTime, this.kf ? this.getValueAtTime = expressionHelpers.getValueAtTime.bind(this) : this.getValueAtTime = expressionHelpers.getStaticValueAtTime.bind(this), this.setGroupProperty = expressionHelpers.setGroupProperty } }(), propertyGetTextProp = TextSelectorProp.getTextSelectorProp; function SliderEffect(t, e, r) { this.p = PropertyFactory.getProp(e, t.v, 0, 0, r) } function AngleEffect(t, e, r) { this.p = PropertyFactory.getProp(e, t.v, 0, 0, r) } function ColorEffect(t, e, r) { this.p = PropertyFactory.getProp(e, t.v, 1, 0, r) } function PointEffect(t, e, r) { this.p = PropertyFactory.getProp(e, t.v, 1, 0, r) } function LayerIndexEffect(t, e, r) { this.p = PropertyFactory.getProp(e, t.v, 0, 0, r) } function MaskIndexEffect(t, e, r) { this.p = PropertyFactory.getProp(e, t.v, 0, 0, r) } function CheckboxEffect(t, e, r) { this.p = PropertyFactory.getProp(e, t.v, 0, 0, r) } function NoValueEffect() { this.p = {} } function EffectsManager(t, e) { var r, i = t.ef || []; this.effectElements = []; var s, a = i.length; for (r = 0; r < a; r += 1)s = new GroupEffect(i[r], e), this.effectElements.push(s) } function GroupEffect(t, e) { this.init(t, e) } TextSelectorProp.getTextSelectorProp = function (t, e, r) { return 1 === e.t ? new TextExpressionSelectorPropFactory(t, e, r) : propertyGetTextProp(t, e, r) }, extendPrototype([DynamicPropertyContainer], GroupEffect), GroupEffect.prototype.getValue = GroupEffect.prototype.iterateDynamicProperties, GroupEffect.prototype.init = function (t, e) { var r; this.data = t, this.effectElements = [], this.initDynamicPropertyContainer(e); var i, s = this.data.ef.length, a = this.data.ef; for (r = 0; r < s; r += 1) { switch (i = null, a[r].ty) { case 0: i = new SliderEffect(a[r], e, this); break; case 1: i = new AngleEffect(a[r], e, this); break; case 2: i = new ColorEffect(a[r], e, this); break; case 3: i = new PointEffect(a[r], e, this); break; case 4: case 7: i = new CheckboxEffect(a[r], e, this); break; case 10: i = new LayerIndexEffect(a[r], e, this); break; case 11: i = new MaskIndexEffect(a[r], e, this); break; case 5: i = new EffectsManager(a[r], e, this); break; default: i = new NoValueEffect(a[r], e, this) }i && this.effectElements.push(i) } }; var lottie = {}; function setLocationHref(t) { locationHref = t } function searchAnimations() { !0 === standalone ? animationManager.searchAnimations(animationData, standalone, renderer) : animationManager.searchAnimations() } function setSubframeRendering(t) { subframeEnabled = t } function setIDPrefix(t) { idPrefix = t } function loadAnimation(t) { return !0 === standalone && (t.animationData = JSON.parse(animationData)), animationManager.loadAnimation(t) } function setQuality(t) { if ("string" == typeof t) switch (t) { case "high": defaultCurveSegments = 200; break; default: case "medium": defaultCurveSegments = 50; break; case "low": defaultCurveSegments = 10 } else !isNaN(t) && t > 1 && (defaultCurveSegments = t); roundValues(!(defaultCurveSegments >= 50)) } function inBrowser() { return "undefined" != typeof navigator } function installPlugin(t, e) { "expressions" === t && (expressionsPlugin = e) } function getFactory(t) { switch (t) { case "propertyFactory": return PropertyFactory; case "shapePropertyFactory": return ShapePropertyFactory; case "matrix": return Matrix; default: return null } } function checkReady() { "complete" === document.readyState && (clearInterval(readyStateCheckInterval), searchAnimations()) } function getQueryVariable(t) { for (var e = queryString.split("&"), r = 0; r < e.length; r += 1) { var i = e[r].split("="); if (decodeURIComponent(i[0]) == t) return decodeURIComponent(i[1]) } return null } lottie.play = animationManager.play, lottie.pause = animationManager.pause, lottie.setLocationHref = setLocationHref, lottie.togglePause = animationManager.togglePause, lottie.setSpeed = animationManager.setSpeed, lottie.setDirection = animationManager.setDirection, lottie.stop = animationManager.stop, lottie.searchAnimations = searchAnimations, lottie.registerAnimation = animationManager.registerAnimation, lottie.loadAnimation = loadAnimation, lottie.setSubframeRendering = setSubframeRendering, lottie.resize = animationManager.resize, lottie.goToAndStop = animationManager.goToAndStop, lottie.destroy = animationManager.destroy, lottie.setQuality = setQuality, lottie.inBrowser = inBrowser, lottie.installPlugin = installPlugin, lottie.freeze = animationManager.freeze, lottie.unfreeze = animationManager.unfreeze, lottie.setVolume = animationManager.setVolume, lottie.mute = animationManager.mute, lottie.unmute = animationManager.unmute, lottie.getRegisteredAnimations = animationManager.getRegisteredAnimations, lottie.useWebWorker = function (t) { _useWebWorker = t }, lottie.setIDPrefix = setIDPrefix, lottie.__getFactory = getFactory, lottie.version = "5.8.1"; var standalone = "__[STANDALONE]__", animationData = "__[ANIMATIONDATA]__", renderer = "", queryString; if (standalone) { var scripts = document.getElementsByTagName("script"), index = scripts.length - 1, myScript = scripts[index] || { src: "" }; queryString = myScript.src.replace(/^[^\?]+\??/, ""), renderer = getQueryVariable("renderer") } var readyStateCheckInterval = setInterval(checkReady, 100); return lottie }, module.exports ? module.exports = factory(root) : (root.lottie = factory(root), root.bodymovin = root.lottie)) })(lottie$1); var lottie = lottie$1.exports, _templateObject$1, styles = r$3(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n * {\n box-sizing: border-box;\n }\n\n :host {\n --lottie-player-toolbar-height: 35px;\n --lottie-player-toolbar-background-color: transparent;\n --lottie-player-toolbar-icon-color: #999;\n --lottie-player-toolbar-icon-hover-color: #222;\n --lottie-player-toolbar-icon-active-color: #555;\n --lottie-player-seeker-track-color: #ccc;\n --lottie-player-seeker-thumb-color: rgba(0, 107, 120, 0.8);\n --lottie-player-seeker-display: block;\n\n display: block;\n width: 100%;\n height: 100%;\n }\n\n .main {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n }\n\n .animation {\n width: 100%;\n height: 100%;\n display: flex;\n }\n .animation.controls {\n height: calc(100% - 35px);\n }\n\n .toolbar {\n display: flex;\n align-items: center;\n justify-items: center;\n background-color: var(--lottie-player-toolbar-background-color);\n margin: 0 5px;\n height: 35px;\n }\n\n .toolbar button {\n cursor: pointer;\n fill: var(--lottie-player-toolbar-icon-color);\n display: flex;\n background: none;\n border: 0;\n padding: 0;\n outline: none;\n height: 100%;\n }\n\n .toolbar button:hover {\n fill: var(--lottie-player-toolbar-icon-hover-color);\n }\n\n .toolbar button.active {\n fill: var(--lottie-player-toolbar-icon-active-color);\n }\n\n .toolbar button.active:hover {\n fill: var(--lottie-player-toolbar-icon-hover-color);\n }\n\n .toolbar button:focus {\n outline: 1px dotted var(--lottie-player-toolbar-icon-active-color);\n }\n\n .toolbar button svg {\n }\n\n .toolbar button.disabled svg {\n display: none;\n }\n\n .seeker {\n -webkit-appearance: none;\n width: 95%;\n outline: none;\n background-color: var(--lottie-player-toolbar-background-color);\n display: var(--lottie-player-seeker-display);\n }\n\n .seeker::-webkit-slider-runnable-track {\n width: 100%;\n height: 5px;\n cursor: pointer;\n background: var(--lottie-player-seeker-track-color);\n border-radius: 3px;\n }\n .seeker::-webkit-slider-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -webkit-appearance: none;\n margin-top: -5px;\n }\n .seeker:focus::-webkit-slider-runnable-track {\n background: #999;\n }\n .seeker::-moz-range-track {\n width: 100%;\n height: 5px;\n cursor: pointer;\n background: var(--lottie-player-seeker-track-color);\n border-radius: 3px;\n }\n .seeker::-moz-range-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n }\n .seeker::-ms-track {\n width: 100%;\n height: 5px;\n cursor: pointer;\n background: transparent;\n border-color: transparent;\n color: transparent;\n }\n .seeker::-ms-fill-lower {\n background: var(--lottie-player-seeker-track-color);\n border-radius: 3px;\n }\n .seeker::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n border-radius: 3px;\n }\n .seeker::-ms-thumb {\n border: 0;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n }\n .seeker:focus::-ms-fill-lower {\n background: var(--lottie-player-seeker-track-color);\n }\n .seeker:focus::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n }\n\n .error {\n display: flex;\n justify-content: center;\n height: 100%;\n align-items: center;\n }\n"]))), _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, PlayerState, PlayMode, PlayerEvents; function parseSrc(t) { if ("object" == typeof t) return t; try { return JSON.parse(t) } catch (e) { return new URL(t, window.location.href).toString() } } function isLottie(t) { return ["v", "ip", "op", "layers", "fr", "w", "h"].every((e => Object.prototype.hasOwnProperty.call(t, e))) } function fromURL(t) { return _fromURL.apply(this, arguments) } function _fromURL() { return (_fromURL = _asyncToGenerator((function* (t) { if ("string" != typeof t) throw new Error("The url value must be a string"); var e; try { var r = new URL(t), i = yield fetch(r.toString()); e = yield i.json() } catch (t) { throw new Error("An error occurred while trying to load the Lottie file from URL") } return e }))).apply(this, arguments) } exports.PlayerState = void 0, PlayerState = exports.PlayerState || (exports.PlayerState = {}), PlayerState.Destroyed = "destroyed", PlayerState.Error = "error", PlayerState.Frozen = "frozen", PlayerState.Loading = "loading", PlayerState.Paused = "paused", PlayerState.Playing = "playing", PlayerState.Stopped = "stopped", exports.PlayMode = void 0, PlayMode = exports.PlayMode || (exports.PlayMode = {}), PlayMode.Bounce = "bounce", PlayMode.Normal = "normal", exports.PlayerEvents = void 0, PlayerEvents = exports.PlayerEvents || (exports.PlayerEvents = {}), PlayerEvents.Complete = "complete", PlayerEvents.Destroyed = "destroyed", PlayerEvents.Error = "error", PlayerEvents.Frame = "frame", PlayerEvents.Freeze = "freeze", PlayerEvents.Load = "load", PlayerEvents.Loop = "loop", PlayerEvents.Pause = "pause", PlayerEvents.Play = "play", PlayerEvents.Ready = "ready", PlayerEvents.Rendered = "rendered", PlayerEvents.Stop = "stop", exports.LottiePlayer = class extends s { constructor() { super(...arguments), this.autoplay = !1, this.background = "transparent", this.controls = !1, this.currentState = exports.PlayerState.Loading, this.description = "Lottie animation", this.direction = 1, this.hover = !1, this.intermission = 1, this.loop = !1, this.mode = exports.PlayMode.Normal, this.preserveAspectRatio = "xMidYMid meet", this.renderer = "svg", this.speed = 1, this._io = void 0, this._counter = 1 } load(t) { var e = this; return _asyncToGenerator((function* () { if (e.shadowRoot) { var r = { container: e.container, loop: !1, autoplay: !1, renderer: e.renderer, rendererSettings: { preserveAspectRatio: e.preserveAspectRatio, clearCanvas: !1, progressiveLoad: !0, hideOnTransparent: !0 } }; try { var i = parseSrc(t), s = {}, a = "string" == typeof i ? "path" : "animationData"; e._lottie && e._lottie.destroy(), e.webworkers && lottie$1.exports.useWebWorker(!0), e._lottie = lottie$1.exports.loadAnimation(Object.assign(Object.assign({}, r), { [a]: i })), e._attachEventListeners(), "path" === a ? (s = yield fromURL(i), a = "animationData") : s = i, isLottie(s) || (e.currentState = exports.PlayerState.Error, e.dispatchEvent(new CustomEvent(exports.PlayerEvents.Error))) } catch (t) { e.currentState = exports.PlayerState.Error, e.dispatchEvent(new CustomEvent(exports.PlayerEvents.Error)) } } }))() } getLottie() { return this._lottie } play() { this._lottie && (this._lottie.play(), this.currentState = exports.PlayerState.Playing, this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Play))) } pause() { this._lottie && (this._lottie.pause(), this.currentState = exports.PlayerState.Paused, this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Pause))) } stop() { this._lottie && (this._counter = 1, this._lottie.stop(), this.currentState = exports.PlayerState.Stopped, this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Stop))) } destroy() { this._lottie && (this._lottie.destroy(), this._lottie = null, this.currentState = exports.PlayerState.Destroyed, this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Destroyed)), this.remove()) } seek(t) { if (this._lottie) { var e = /^(\d+)(%?)$/.exec(t.toString()); if (e) { var r = "%" === e[2] ? this._lottie.totalFrames * Number(e[1]) / 100 : Number(e[1]); this.seeker = r, this.currentState === exports.PlayerState.Playing ? this._lottie.goToAndPlay(r, !0) : (this._lottie.goToAndStop(r, !0), this._lottie.pause()) } } } snapshot() { var t = !(arguments.length > 0 && void 0 !== arguments[0]) || arguments[0]; if (this.shadowRoot) { var e = this.shadowRoot.querySelector(".animation svg"), r = (new XMLSerializer).serializeToString(e); if (t) { var i = document.createElement("a"); i.href = "data:image/svg+xml;charset=utf-8,".concat(encodeURIComponent(r)), i.download = "download_".concat(this.seeker, ".svg"), document.body.appendChild(i), i.click(), document.body.removeChild(i) } return r } } setSpeed() { var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 1; this._lottie && this._lottie.setSpeed(t) } setDirection(t) { this._lottie && this._lottie.setDirection(t) } setLooping(t) { this._lottie && (this.loop = t, this._lottie.loop = t) } togglePlay() { return this.currentState === exports.PlayerState.Playing ? this.pause() : this.play() } toggleLooping() { this.setLooping(!this.loop) } resize() { this._lottie && this._lottie.resize() } static get styles() { return styles } disconnectedCallback() { this._io && (this._io.disconnect(), this._io = void 0), document.removeEventListener("visibilitychange", (() => this._onVisibilityChange())), this.destroy() } render() { var t = this.controls ? "main controls" : "main", e = this.controls ? "animation controls" : "animation"; return $(_templateObject || (_templateObject = _taggedTemplateLiteral([' \n \n ', "\n \n ", "\n "])), t, this.description, e, this.background, this.currentState === exports.PlayerState.Error ? $(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(['
⚠️
']))) : void 0, this.controls ? this.renderControls() : void 0) } firstUpdated() { "IntersectionObserver" in window && (this._io = new IntersectionObserver((t => { t[0].isIntersecting ? this.currentState === exports.PlayerState.Frozen && this.play() : this.currentState === exports.PlayerState.Playing && this.freeze() })), this._io.observe(this.container)), void 0 !== document.hidden && document.addEventListener("visibilitychange", (() => this._onVisibilityChange())), this.src && this.load(this.src), this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Rendered)) } renderControls() { var t = this.currentState === exports.PlayerState.Playing, e = this.currentState === exports.PlayerState.Paused, r = this.currentState === exports.PlayerState.Stopped; return $(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(['\n \n \n ', '\n \n \n \n \n \n \n \n \n \n '])), this.togglePlay, t || e ? "active" : "", $(t ? _templateObject4 || (_templateObject4 = _taggedTemplateLiteral(['