@claspo/document-connector 16.7.18 → 16.7.19-scf2

package/StaticDocumentConnector.d.ts

@@ -3,12 +3,14 @@ import { WidgetInitConfigI } from "@claspo/common/WidgetInitConfig.interface";
 import WcResolver from '@claspo/renderer/wc-renderer/WcResolver';
 import { WcRegister } from '@claspo/renderer/wc-renderer/WcRegister';
 import GoogleFontsLoader from './layouts/GoogleFontsLoader';
+import CustomFontsLoader from './layouts/CustomFontsLoader';
 import { DocumentConnectorEventName } from './DocumentConnectorEvents.interface';
 export default class StaticDocumentConnector extends BaseDocumentConnector {
     componentRegister: WcRegister;
     componentResolver: WcResolver;
     googleFontsLoader: GoogleFontsLoader | null;
     closeSubmitPromise: Promise<boolean> | null;
+    customFontsLoader: CustomFontsLoader | null;
     constructor(params: WidgetInitConfigI);
     emit(eventName: string, value: any, params?: any): void;
     connect(containerElement: HTMLElement): Promise<any>;

package/StaticDocumentConnector.js

@@ -1 +1 @@
-import BaseDocumentConnector from"./BaseDocumentConnector";import DocumentConnectorEventType from"./DocumentConnectorEventType";import{getZIndexByLayoutType}from"./layouts/getZindex";import LayoutFactory from"./layouts/LayoutFactory";import StaticEntryModule from"@claspo/renderer/StaticEntryModule";import WcResolver from"@claspo/renderer/wc-renderer/WcResolver";import{RenderMode}from"@claspo/common/RenderMode";import{WcRegister}from"@claspo/renderer/wc-renderer/WcRegister";import GoogleFontsLoader from"./layouts/GoogleFontsLoader";import ThemeCssVars from"@claspo/common/element/ThemeCssVars";const DIRTY_SUBMIT_STATE="dirty",SUBMITTING_SUBMIT_STATE="submitting";export default class StaticDocumentConnector extends BaseDocumentConnector{constructor(e){super(e),this.componentResolver=null,this.googleFontsLoader=null,this.closeSubmitPromise=null;const{documentModel:t,translations:o,trackingService:s,layoutType:n,bundledComponentClasses:r}=e;this.componentRegister=new WcRegister(r,e.productKeyPrefix),this.componentResolver=new WcResolver(RenderMode.STATIC,this.componentRegister,e.productKeyPrefix);const i=new StaticEntryModule(t,this.componentResolver,this.componentRegister,e,o,s,n);this.setEntryModule(i)}emit(e,t,o=null){e!==DocumentConnectorEventType.CLOSE_WIDGET?super.emit(e,t,o):this.handleCloseWidget(t)}async connect(e){this.googleFontsLoader=new GoogleFontsLoader({widgetId:this.params.widgetId,siteId:this.params.siteId});const t=e.getRootNode();if(!this.params.disableGoogleFonts){const e=GoogleFontsLoader.getUsedGoogleFonts(this.params.documentModel);await this.googleFontsLoader.load(e,t)}return this._initializeRenderer(e,t)}disconnect(){var e;super.disconnect(),this.controllers[0]&&this.controllers[0].disconnect(()=>{this.entryModule&&this.entryModule.viewRouter&&this.entryModule.compositionRoot&&this.entryModule.destroy()}),this.controllers=[],null===(e=this.googleFontsLoader)||void 0===e||e.cleanup()}destroy(){this.disconnect()}on(e,t){return super.on(e,t)}async _initializeRenderer(e,t){var o,s,n,r;await this.componentResolver.loadComponentsIfNecessary(this.params.documentModel,this.params.staticResourcesUrl);const i=this.entryModule.init(t);i.style.display="flex";const{layoutFactoryClass:l=LayoutFactory,layoutType:a,documentModel:d}=this.params,c=Object.assign(Object.assign({},this.params),{zIndex:null!==(s=null===(o=null==d?void 0:d.shared)||void 0===o?void 0:o.zIndex)&&void 0!==s?s:getZIndexByLayoutType(a)}),m=l.create(Object.assign(Object.assign({},c),{layoutType:this.params.layoutType,widgetType:this.params.widgetType,viewIndex:0,renderMode:this.entryModule.renderMode}),this,this.entryModule.viewRouter,this.entryModule.compositionRoot.services.documentModel,this.entryModule.compositionRoot.services.resizeListener);return this.controllers.push(m),super.addPropsRequestEventListener(i),this.params.formVariantId?i.classList.add("cl-widget-"+this.params.formVariantId):i.classList.add("cl-widget"),this.entryModule.listenAction("*",(e,t)=>{this.emit(t,e)}),m.connect(i,e,this.entryModule),(null===(r=null===(n=d.shared)||void 0===n?void 0:n.theme)||void 0===r?void 0:r.schema)&&ThemeCssVars.override(d.shared.theme.schema,m.getConnectedElement()),m.getConnectedElement()}handleCloseWidget(e){this.trySubmitOnClose();try{super.emit(DocumentConnectorEventType.CLOSE_WIDGET,e)}finally{"function"==typeof e&&e()}}trySubmitOnClose(){const e=this.params.submitOnClose||{enabled:!1,skipValidation:!0},t=this.getSubmitState();e.enabled&&!this.closeSubmitPromise&&"submitting"!==t&&"dirty"===t&&this.hasDirtyFormData()&&(this.closeSubmitPromise=Promise.resolve(this.submitOnClose()).catch(e=>(console.error(e),!1)).finally(()=>{this.closeSubmitPromise=null}))}}
+import BaseDocumentConnector from"./BaseDocumentConnector";import DocumentConnectorEventType from"./DocumentConnectorEventType";import{getZIndexByLayoutType}from"./layouts/getZindex";import LayoutFactory from"./layouts/LayoutFactory";import StaticEntryModule from"@claspo/renderer/StaticEntryModule";import WcResolver from"@claspo/renderer/wc-renderer/WcResolver";import{RenderMode}from"@claspo/common/RenderMode";import{WcRegister}from"@claspo/renderer/wc-renderer/WcRegister";import GoogleFontsLoader from"./layouts/GoogleFontsLoader";import CustomFontsLoader from"./layouts/CustomFontsLoader";import ThemeCssVars from"@claspo/common/element/ThemeCssVars";const DIRTY_SUBMIT_STATE="dirty",SUBMITTING_SUBMIT_STATE="submitting";export default class StaticDocumentConnector extends BaseDocumentConnector{constructor(e){super(e),this.componentResolver=null,this.googleFontsLoader=null,this.closeSubmitPromise=null,this.customFontsLoader=null;const{documentModel:t,translations:o,trackingService:s,layoutType:n,bundledComponentClasses:r}=e;this.componentRegister=new WcRegister(r,e.productKeyPrefix),this.componentResolver=new WcResolver(RenderMode.STATIC,this.componentRegister,e.productKeyPrefix);const i=new StaticEntryModule(t,this.componentResolver,this.componentRegister,e,o,s,n);this.setEntryModule(i)}emit(e,t,o=null){e!==DocumentConnectorEventType.CLOSE_WIDGET?super.emit(e,t,o):this.handleCloseWidget(t)}async connect(e){this.googleFontsLoader=new GoogleFontsLoader({widgetId:this.params.widgetId,siteId:this.params.siteId}),this.customFontsLoader=new CustomFontsLoader;const t=e.getRootNode(),o=CustomFontsLoader.getUsedCustomFonts(this.params.documentModel),s=[this.customFontsLoader.load(o,t)];if(!this.params.disableGoogleFonts){const e=GoogleFontsLoader.getUsedGoogleFonts(this.params.documentModel);s.push(this.googleFontsLoader.load(e,t))}return await Promise.all(s),this._initializeRenderer(e,t)}disconnect(){var e,t;super.disconnect(),this.controllers[0]&&this.controllers[0].disconnect(()=>{this.entryModule&&this.entryModule.viewRouter&&this.entryModule.compositionRoot&&this.entryModule.destroy()}),this.controllers=[],null===(e=this.googleFontsLoader)||void 0===e||e.cleanup(),null===(t=this.customFontsLoader)||void 0===t||t.cleanup()}destroy(){this.disconnect()}on(e,t){return super.on(e,t)}async _initializeRenderer(e,t){var o,s,n,r;await this.componentResolver.loadComponentsIfNecessary(this.params.documentModel,this.params.staticResourcesUrl);const i=this.entryModule.init(t);i.style.display="flex";const{layoutFactoryClass:a=LayoutFactory,layoutType:l,documentModel:d}=this.params,c=Object.assign(Object.assign({},this.params),{zIndex:null!==(s=null===(o=null==d?void 0:d.shared)||void 0===o?void 0:o.zIndex)&&void 0!==s?s:getZIndexByLayoutType(l)}),m=a.create(Object.assign(Object.assign({},c),{layoutType:this.params.layoutType,widgetType:this.params.widgetType,viewIndex:0,renderMode:this.entryModule.renderMode}),this,this.entryModule.viewRouter,this.entryModule.compositionRoot.services.documentModel,this.entryModule.compositionRoot.services.resizeListener);return this.controllers.push(m),super.addPropsRequestEventListener(i),this.params.formVariantId?i.classList.add("cl-widget-"+this.params.formVariantId):i.classList.add("cl-widget"),this.entryModule.listenAction("*",(e,t)=>{this.emit(t,e)}),m.connect(i,e,this.entryModule),(null===(r=null===(n=d.shared)||void 0===n?void 0:n.theme)||void 0===r?void 0:r.schema)&&ThemeCssVars.override(d.shared.theme.schema,m.getConnectedElement()),m.getConnectedElement()}handleCloseWidget(e){this.trySubmitOnClose();try{super.emit(DocumentConnectorEventType.CLOSE_WIDGET,e)}finally{"function"==typeof e&&e()}}trySubmitOnClose(){const e=this.params.submitOnClose||{enabled:!1,skipValidation:!0},t=this.getSubmitState();e.enabled&&!this.closeSubmitPromise&&"submitting"!==t&&"dirty"===t&&this.hasDirtyFormData()&&(this.closeSubmitPromise=Promise.resolve(this.submitOnClose()).catch(e=>(console.error(e),!1)).finally(()=>{this.closeSubmitPromise=null}))}}

package/layouts/BaseFontsLoader.d.ts

@@ -0,0 +1,16 @@
+export interface FontsLoaderOptionsI {
+    widgetId?: number;
+    siteId?: string;
+}
+export default class BaseFontsLoader {
+    widgetId?: number;
+    siteId?: string;
+    ownerId: string;
+    protected htmlDocumentObject?: Document;
+    protected loadedStylesheetElements: HTMLElement[];
+    constructor(options?: FontsLoaderOptionsI);
+    protected getOwnerIdPrefix(): string;
+    protected setHtmlDocumentObject(htmlDocumentObject?: Document): Document;
+    protected addStylesheetLinks(urls: string[], htmlDocumentObject: Document): Promise<void>;
+    protected cleanupStylesheetElements(): void;
+}

package/layouts/BaseFontsLoader.js

@@ -0,0 +1 @@
+let nextFontsLoaderOwnerId=1;export default class BaseFontsLoader{constructor(e){this.loadedStylesheetElements=[],e=e||{},this.widgetId=e.widgetId,this.siteId=e.siteId,this.ownerId=`${this.getOwnerIdPrefix()}-${nextFontsLoaderOwnerId++}`}getOwnerIdPrefix(){return"fonts-loader"}setHtmlDocumentObject(e){return this.htmlDocumentObject=e||document,this.htmlDocumentObject}async addStylesheetLinks(e,t){if(!t.head||!(e||[]).length)return;const s=new Set(Array.from(t.querySelectorAll('link[rel="stylesheet"]')).map(e=>e.href)),r=Array.from(new Set(e.filter(e=>e&&!s.has(e)))).map(e=>{const s=document.createElement("link");s.rel="stylesheet",s.href=e;const r=new Promise((t,r)=>{s.onload=()=>t({url:e,success:!0}),s.onerror=()=>r(new Error(`Failed to load font stylesheet: ${e}`))}),n=new Promise((t,s)=>setTimeout(()=>s(new Error(`Timeout while loading font stylesheet: ${e}`)),2e3));return t.head.appendChild(s),this.loadedStylesheetElements.push(s),Promise.race([r,n])});await Promise.allSettled(r)}cleanupStylesheetElements(){this.loadedStylesheetElements.forEach(e=>e.remove()),this.loadedStylesheetElements=[]}}

package/layouts/BaseLayout.d.ts

@@ -29,6 +29,7 @@ export default class BaseLayout {
     getCurrentViewIndex(): any;
     getActualSizeByEnv(isMobileEnv: any): ClDocumentEnvironmentActualSize | null | undefined;
     getViewContentContainer(): any;
+    hasVerticalFlowOverflow(container: HTMLElement): boolean;
     changeViewAlignToTop(): void;
     addWidgetContentClickEventListener(widgetContentElement: any): void;
     getDocumentModel(): ClDocumentI;

package/layouts/BaseLayout.js

@@ -1 +1 @@
-import DocumentConnectorEventType from"../DocumentConnectorEventType";import{RenderMode}from"@claspo/common/RenderMode";export default class BaseLayout{constructor(e,n,t,i,r){this.params=e,this.eventEmitter=n,this.viewRouter=t,this.documentModel=i,this.resizeListener=r,this.connectedElement=null}createSvgElement(e,n,t){const i=document.createElementNS("http://www.w3.org/2000/svg","svg");return i.setAttributeNS(null,"viewBox","0 0 "+e+" "+n),i.setAttributeNS(null,"width",e),i.setAttributeNS(null,"height",n),i.innerHTML=t,i}getHideIcon(){return this.createSvgElement(21,21,'<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5582 11.167C13.6018 10.9519 13.6247 10.7293 13.6247 10.5013C13.6247 8.66035 12.1323 7.16797 10.2913 7.16797C10.0634 7.16797 9.84072 7.19086 9.6256 7.23446L10.3945 8.00339C11.6932 8.05612 12.7365 9.09947 12.7892 10.3981L13.5582 11.167ZM8.1189 9.2633C7.91046 9.62829 7.79134 10.0509 7.79134 10.5013C7.79134 11.882 8.91063 13.0013 10.2913 13.0013C10.7418 13.0013 11.1644 12.8822 11.5293 12.6737L12.1346 13.279C11.6067 13.6301 10.9729 13.8346 10.2913 13.8346C8.45039 13.8346 6.95801 12.3423 6.95801 10.5013C6.95801 9.81975 7.16256 9.18597 7.51361 8.65801L8.1189 9.2633Z" fill="#2C2C2C"/>\n        <path fill-rule="evenodd" clip-rule="evenodd" d="M15.7837 13.3901C16.4728 12.7662 17.0357 12.1378 17.4361 11.6517L17.4851 11.5924C17.7606 11.2595 18.0164 10.9504 18.0164 10.4987C18.0164 10.047 17.7606 9.73786 17.4851 9.40501L17.4361 9.3457C16.832 8.61222 15.8577 7.55476 14.6386 6.67763C13.4227 5.80287 11.9277 5.08203 10.2911 5.08203C9.46902 5.08203 8.68264 5.26393 7.94942 5.55587L8.59862 6.20507C9.14557 6.02176 9.71248 5.91536 10.2911 5.91536C11.6843 5.91536 13.0094 6.53209 14.1519 7.35408C15.2911 8.17371 16.2136 9.1722 16.7929 9.8755C17.1465 10.3049 17.183 10.3791 17.183 10.4987C17.183 10.6183 17.1465 10.6925 16.7929 11.1219C16.4027 11.5957 15.8567 12.2034 15.1937 12.8001L15.7837 13.3901ZM6.30424 7.44623C5.22306 8.24755 4.34715 9.19835 3.78941 9.8755C3.43577 10.3049 3.39925 10.3791 3.39925 10.4987C3.39925 10.6183 3.43577 10.6925 3.78941 11.1219C4.36868 11.8252 5.29119 12.8237 6.43042 13.6433C7.57294 14.4653 8.89795 15.082 10.2911 15.082C11.2901 15.082 12.2539 14.765 13.1406 14.2826L13.7526 14.8946C12.7242 15.4892 11.5495 15.9154 10.2911 15.9154C8.65456 15.9154 7.1596 15.1945 5.94374 14.3198C4.72459 13.4426 3.7503 12.3852 3.14617 11.6517L3.09716 11.5924C2.82173 11.2595 2.56592 10.9504 2.56592 10.4987C2.56592 10.047 2.82172 9.73786 3.09716 9.40501L3.14617 9.3457C3.711 8.65993 4.5994 7.69096 5.70897 6.85095L6.30424 7.44623Z" fill="#2C2C2C"/>\n        <path d="M4.45752 2.16602L17.7909 15.4993" stroke="#2C2C2C" stroke-width="0.833333"/>')}getClaspoIcon(){return this.createSvgElement(17,10,'<path d="M13.8946 6.59451C13.337 7.15222 12.5956 7.45921 11.807 7.45921H3.68778C3.09624 7.45921 2.54034 7.22894 2.12199 6.81068C1.70373 6.39243 1.52894 5.83644 1.52894 5.24489C1.52894 4.65345 1.70373 4.09746 2.12199 3.67911C2.54034 3.26095 3.09624 3.03058 3.68778 3.03058C4.23793 3.03058 4.75748 3.23004 5.16396 3.59453V5.36522L10.1517 2.06086L10.1518 2.06116C10.6365 1.73171 11.2081 1.5544 11.807 1.5544C12.5956 1.5544 13.337 1.8614 13.8946 2.4191C14.4524 2.97671 14.7436 3.71827 14.7436 4.50686C14.7436 5.29544 14.4524 6.0369 13.8946 6.59451ZM11.807 0.078125C10.8924 0.078125 10.0424 0.355518 9.33667 0.830762L9.33636 0.830259L5.16396 3.59443V1.8617C4.71187 1.66425 4.21276 1.5544 3.68778 1.5544C1.64956 1.5544 0 3.20678 0 5.24489C0 7.28311 1.64956 8.93549 3.68778 8.93549H11.807C14.2529 8.93549 16.2911 6.95275 16.2911 4.50686C16.2911 2.06086 14.2529 0.078125 11.807 0.078125Z" fill="#F3492C"/>')}addBrandingUTMParametersToURL(e,n){const t={utm_campaign:"Powered_by_promo",utm_medium:"referral",utm_source:n},i=new URL(e);return i.search?i.search+=`&${new URLSearchParams(t).toString()}`:i.search=`?${new URLSearchParams(t).toString()}`,i.toString()}createBrandingElement(){const e=this.getClaspoIcon(),n=this.getHideIcon();this.brandingElement=document.createElement("div"),this.brandingElement.classList.add("cl-branding");const t=document.createElement("button");t.classList.add("cl-link"),t.addEventListener("click",()=>{window.open(this.addBrandingUTMParametersToURL("https://claspo.io/",this.params.siteId),"_blank","noopener,noreferrer")});const i=document.createElement("span");i.classList.add("cl-branding-text"),i.innerText="Powered by ",t.append(i),t.append(e);const r=document.createElement("span");if(r.classList.add("cl-branding-brand"),r.innerText="Claspo",t.append(r),this.brandingElement.append(t),this.params.upgradePlanButton){const e=document.createElement("div");e.classList.add("cl-branding-upgrade-overlay");const t=document.createElement("div");t.classList.add("cl-branding-upgrade"),t.appendChild(n),this.brandingElement.append(t),this.brandingElement.append(e)}}addBrandingElementListeners(){this.brandingElement.addEventListener("click",()=>{this.eventEmitter.emit(DocumentConnectorEventType.BRANDING_ELEMENT_CLICKED,this.params.layoutType)})}isMobileEnv(){return this.resizeListener.isMobile()}setConnectedElement(e){this.connectedElement=e}getConnectedElement(){return this.connectedElement}getDisabledWidgetStyles(e){return`${e}:after {\n      content: '';\n      height: 100%;\n      width: 100%;\n      position: absolute;\n      left: 0;\n      top: 0;\n      z-index: 1;\n    }`}getBrandingStyles(){return".cl-branding {\n          display: flex;\n          flex-direction: row;\n          align-items: center;\n          border-radius: 20px;\n          background: #FFFFFF;\n          height: 21px;\n          line-height: 21px !important;\n          font-family: Arial, sans-serif !important;\n          letter-spacing: 0.3px !important;\n          font-size: 10px !important;\n          font-weight: 400 !important;\n          padding: 0 10px !important;\n          gap: 8px;\n          position: absolute;\n          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n          z-index: 1;\n        }\n        \n        .cl-link {\n          background: none !important;\n          border: none !important;\n          padding: 0 !important;\n          margin: 0 !important;\n          font: inherit !important;\n          \n          display: flex;\n          align-items: center;\n          gap: 5px;\n          text-decoration: none;\n          cursor: pointer;\n        }\n\n      .cl-branding-text {\n        color: #121221;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n        font-size: 10px !important;\n        font-family: Arial, sans-serif !important;\n        font-weight: 400 !important;\n        font-style: normal !important;\n      }\n\n      .cl-branding-brand{\n        display: flex;\n        align-items: center;\n        gap: 2px;\n        color: #F3492C;\n        flex: none;\n        order: 1;\n        flex-grow: 0;\n        font-size: 10px !important;\n        font-family: Arial, sans-serif !important;\n        font-weight: 400;\n        font-style: normal !important;\n      }\n\n      .cl-branding-link-overlay,\n      .cl-branding-upgrade-overlay {\n        width: 100%;\n        height: 100%;\n        position: absolute;\n        cursor: pointer;\n      }\n\n      .cl-branding-upgrade {\n        display: flex;\n        align-items: center;\n        order: 2;\n        flex-grow: 0;\n      }\n\n      .cl-branding:hover {\n        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.07);\n      }"}getGameSpotlightStyles(){var e,n;const t=null===(n=null===(e=this.getDocumentModel())||void 0===e?void 0:e.views)||void 0===n?void 0:n.length;let i=this.isStaticRenderMode()?"\n        .cl-game-spotlight-widget {\n          animation: unlock 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;\n        }\n        \n        .cl-game-spotlight-skip-scale {\n          animation: none !important;\n        }\n        \n        @keyframes unlock {\n          0% { transform: scale(1); }\n          100% { transform: scale(0.95); }\n        }\n       ":"";if(i)for(let e=0;e<t;e++)i+=`\n          .cl-game-spotlight-widget:has([cl-type="VIEW"][cl-path="${e}"])::after {\n            content: "";\n            position: absolute;\n            background-size: 100% 100%;\n            background-repeat: no-repeat;\n            overflow: visible;\n            \n            backdrop-filter: blur(4px);\n            \n            inset: -30px;\n            mask-image: \n              linear-gradient(to bottom, transparent, grey 30px, grey calc(100% - 30px), transparent),\n              linear-gradient(to right, transparent, grey 30px, grey calc(100% - 30px), transparent);\n            mask-composite: intersect;\n            -webkit-mask-composite: source-in; /* for Chrome/Safari */\n            \n            transition: opacity 0.35s ease;\n            pointer-events: auto;\n          }`;return i}getViewportWidth(e,n){return Math.max((e||document).documentElement.clientWidth,(n||window).innerWidth||0)}getContainerElementHeight(){return"BODY"===this.containerElement.tagName?Math.max(document.documentElement.clientHeight,window.innerHeight||0):this.containerElement.getBoundingClientRect().height}isStaticRenderMode(){return this.params.renderMode===RenderMode.STATIC}getCurrentViewIndex(){return this.isStaticRenderMode()?this.viewRouter.getCurrentViewIndex():this.params.viewIndex}getActualSizeByEnv(e){var n,t,i;const r=this.getDocumentModel();if(!r.shared.actualSize)return null;const o=e?"mobile":"desktop";return Array.isArray(r.shared.actualSize)?null===(t=null===(n=r.shared.actualSize)||void 0===n?void 0:n[this.getCurrentViewIndex()])||void 0===t?void 0:t[o]:null===(i=r.shared.actualSize)||void 0===i?void 0:i[o]}getViewContentContainer(){var e;return null===(e=this.documentElement.querySelector('[cl-type="VIEW"]'))||void 0===e?void 0:e.shadowRoot.querySelector("[cl-content-container]")}changeViewAlignToTop(){const e=this.documentElement.querySelector('[cl-type="VIEW"]');"row"===getComputedStyle(e).flexDirection?e.style.alignItems="flex-start":e.style.justifyContent="flex-start"}addWidgetContentClickEventListener(e){e.addEventListener("click",()=>{this.eventEmitter.emit(DocumentConnectorEventType.WIDGET_CONTENT_CLICKED,e)})}getDocumentModel(){return this.documentModel.getModel()}}
+import DocumentConnectorEventType from"../DocumentConnectorEventType";import{RenderMode}from"@claspo/common/RenderMode";export default class BaseLayout{constructor(e,n,t,i,r){this.params=e,this.eventEmitter=n,this.viewRouter=t,this.documentModel=i,this.resizeListener=r,this.connectedElement=null}createSvgElement(e,n,t){const i=document.createElementNS("http://www.w3.org/2000/svg","svg");return i.setAttributeNS(null,"viewBox","0 0 "+e+" "+n),i.setAttributeNS(null,"width",e),i.setAttributeNS(null,"height",n),i.innerHTML=t,i}getHideIcon(){return this.createSvgElement(21,21,'<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5582 11.167C13.6018 10.9519 13.6247 10.7293 13.6247 10.5013C13.6247 8.66035 12.1323 7.16797 10.2913 7.16797C10.0634 7.16797 9.84072 7.19086 9.6256 7.23446L10.3945 8.00339C11.6932 8.05612 12.7365 9.09947 12.7892 10.3981L13.5582 11.167ZM8.1189 9.2633C7.91046 9.62829 7.79134 10.0509 7.79134 10.5013C7.79134 11.882 8.91063 13.0013 10.2913 13.0013C10.7418 13.0013 11.1644 12.8822 11.5293 12.6737L12.1346 13.279C11.6067 13.6301 10.9729 13.8346 10.2913 13.8346C8.45039 13.8346 6.95801 12.3423 6.95801 10.5013C6.95801 9.81975 7.16256 9.18597 7.51361 8.65801L8.1189 9.2633Z" fill="#2C2C2C"/>\n        <path fill-rule="evenodd" clip-rule="evenodd" d="M15.7837 13.3901C16.4728 12.7662 17.0357 12.1378 17.4361 11.6517L17.4851 11.5924C17.7606 11.2595 18.0164 10.9504 18.0164 10.4987C18.0164 10.047 17.7606 9.73786 17.4851 9.40501L17.4361 9.3457C16.832 8.61222 15.8577 7.55476 14.6386 6.67763C13.4227 5.80287 11.9277 5.08203 10.2911 5.08203C9.46902 5.08203 8.68264 5.26393 7.94942 5.55587L8.59862 6.20507C9.14557 6.02176 9.71248 5.91536 10.2911 5.91536C11.6843 5.91536 13.0094 6.53209 14.1519 7.35408C15.2911 8.17371 16.2136 9.1722 16.7929 9.8755C17.1465 10.3049 17.183 10.3791 17.183 10.4987C17.183 10.6183 17.1465 10.6925 16.7929 11.1219C16.4027 11.5957 15.8567 12.2034 15.1937 12.8001L15.7837 13.3901ZM6.30424 7.44623C5.22306 8.24755 4.34715 9.19835 3.78941 9.8755C3.43577 10.3049 3.39925 10.3791 3.39925 10.4987C3.39925 10.6183 3.43577 10.6925 3.78941 11.1219C4.36868 11.8252 5.29119 12.8237 6.43042 13.6433C7.57294 14.4653 8.89795 15.082 10.2911 15.082C11.2901 15.082 12.2539 14.765 13.1406 14.2826L13.7526 14.8946C12.7242 15.4892 11.5495 15.9154 10.2911 15.9154C8.65456 15.9154 7.1596 15.1945 5.94374 14.3198C4.72459 13.4426 3.7503 12.3852 3.14617 11.6517L3.09716 11.5924C2.82173 11.2595 2.56592 10.9504 2.56592 10.4987C2.56592 10.047 2.82172 9.73786 3.09716 9.40501L3.14617 9.3457C3.711 8.65993 4.5994 7.69096 5.70897 6.85095L6.30424 7.44623Z" fill="#2C2C2C"/>\n        <path d="M4.45752 2.16602L17.7909 15.4993" stroke="#2C2C2C" stroke-width="0.833333"/>')}getClaspoIcon(){return this.createSvgElement(17,10,'<path d="M13.8946 6.59451C13.337 7.15222 12.5956 7.45921 11.807 7.45921H3.68778C3.09624 7.45921 2.54034 7.22894 2.12199 6.81068C1.70373 6.39243 1.52894 5.83644 1.52894 5.24489C1.52894 4.65345 1.70373 4.09746 2.12199 3.67911C2.54034 3.26095 3.09624 3.03058 3.68778 3.03058C4.23793 3.03058 4.75748 3.23004 5.16396 3.59453V5.36522L10.1517 2.06086L10.1518 2.06116C10.6365 1.73171 11.2081 1.5544 11.807 1.5544C12.5956 1.5544 13.337 1.8614 13.8946 2.4191C14.4524 2.97671 14.7436 3.71827 14.7436 4.50686C14.7436 5.29544 14.4524 6.0369 13.8946 6.59451ZM11.807 0.078125C10.8924 0.078125 10.0424 0.355518 9.33667 0.830762L9.33636 0.830259L5.16396 3.59443V1.8617C4.71187 1.66425 4.21276 1.5544 3.68778 1.5544C1.64956 1.5544 0 3.20678 0 5.24489C0 7.28311 1.64956 8.93549 3.68778 8.93549H11.807C14.2529 8.93549 16.2911 6.95275 16.2911 4.50686C16.2911 2.06086 14.2529 0.078125 11.807 0.078125Z" fill="#F3492C"/>')}addBrandingUTMParametersToURL(e,n){const t={utm_campaign:"Powered_by_promo",utm_medium:"referral",utm_source:n},i=new URL(e);return i.search?i.search+=`&${new URLSearchParams(t).toString()}`:i.search=`?${new URLSearchParams(t).toString()}`,i.toString()}createBrandingElement(){const e=this.getClaspoIcon(),n=this.getHideIcon();this.brandingElement=document.createElement("div"),this.brandingElement.classList.add("cl-branding");const t=document.createElement("button");t.classList.add("cl-link"),t.addEventListener("click",()=>{window.open(this.addBrandingUTMParametersToURL("https://claspo.io/",this.params.siteId),"_blank","noopener,noreferrer")});const i=document.createElement("span");i.classList.add("cl-branding-text"),i.innerText="Powered by ",t.append(i),t.append(e);const r=document.createElement("span");if(r.classList.add("cl-branding-brand"),r.innerText="Claspo",t.append(r),this.brandingElement.append(t),this.params.upgradePlanButton){const e=document.createElement("div");e.classList.add("cl-branding-upgrade-overlay");const t=document.createElement("div");t.classList.add("cl-branding-upgrade"),t.appendChild(n),this.brandingElement.append(t),this.brandingElement.append(e)}}addBrandingElementListeners(){this.brandingElement.addEventListener("click",()=>{this.eventEmitter.emit(DocumentConnectorEventType.BRANDING_ELEMENT_CLICKED,this.params.layoutType)})}isMobileEnv(){return this.resizeListener.isMobile()}setConnectedElement(e){this.connectedElement=e}getConnectedElement(){return this.connectedElement}getDisabledWidgetStyles(e){return`${e}:after {\n      content: '';\n      height: 100%;\n      width: 100%;\n      position: absolute;\n      left: 0;\n      top: 0;\n      z-index: 1;\n    }`}getBrandingStyles(){return".cl-branding {\n          display: flex;\n          flex-direction: row;\n          align-items: center;\n          border-radius: 20px;\n          background: #FFFFFF;\n          height: 21px;\n          line-height: 21px !important;\n          font-family: Arial, sans-serif !important;\n          letter-spacing: 0.3px !important;\n          font-size: 10px !important;\n          font-weight: 400 !important;\n          padding: 0 10px !important;\n          gap: 8px;\n          position: absolute;\n          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n          z-index: 1;\n        }\n        \n        .cl-link {\n          background: none !important;\n          border: none !important;\n          padding: 0 !important;\n          margin: 0 !important;\n          font: inherit !important;\n          \n          display: flex;\n          align-items: center;\n          gap: 5px;\n          text-decoration: none;\n          cursor: pointer;\n        }\n\n      .cl-branding-text {\n        color: #121221;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n        font-size: 10px !important;\n        font-family: Arial, sans-serif !important;\n        font-weight: 400 !important;\n        font-style: normal !important;\n      }\n\n      .cl-branding-brand{\n        display: flex;\n        align-items: center;\n        gap: 2px;\n        color: #F3492C;\n        flex: none;\n        order: 1;\n        flex-grow: 0;\n        font-size: 10px !important;\n        font-family: Arial, sans-serif !important;\n        font-weight: 400;\n        font-style: normal !important;\n      }\n\n      .cl-branding-link-overlay,\n      .cl-branding-upgrade-overlay {\n        width: 100%;\n        height: 100%;\n        position: absolute;\n        cursor: pointer;\n      }\n\n      .cl-branding-upgrade {\n        display: flex;\n        align-items: center;\n        order: 2;\n        flex-grow: 0;\n      }\n\n      .cl-branding:hover {\n        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.07);\n      }"}getGameSpotlightStyles(){var e,n;const t=null===(n=null===(e=this.getDocumentModel())||void 0===e?void 0:e.views)||void 0===n?void 0:n.length;let i=this.isStaticRenderMode()?"\n        .cl-game-spotlight-widget {\n          animation: unlock 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;\n        }\n        \n        .cl-game-spotlight-skip-scale {\n          animation: none !important;\n        }\n        \n        @keyframes unlock {\n          0% { transform: scale(1); }\n          100% { transform: scale(0.95); }\n        }\n       ":"";if(i)for(let e=0;e<t;e++)i+=`\n          .cl-game-spotlight-widget:has([cl-type="VIEW"][cl-path="${e}"])::after {\n            content: "";\n            position: absolute;\n            background-size: 100% 100%;\n            background-repeat: no-repeat;\n            overflow: visible;\n            \n            backdrop-filter: blur(4px);\n            \n            inset: -30px;\n            mask-image: \n              linear-gradient(to bottom, transparent, grey 30px, grey calc(100% - 30px), transparent),\n              linear-gradient(to right, transparent, grey 30px, grey calc(100% - 30px), transparent);\n            mask-composite: intersect;\n            -webkit-mask-composite: source-in; /* for Chrome/Safari */\n            \n            transition: opacity 0.35s ease;\n            pointer-events: auto;\n          }`;return i}getViewportWidth(e,n){return Math.max((e||document).documentElement.clientWidth,(n||window).innerWidth||0)}getContainerElementHeight(){return"BODY"===this.containerElement.tagName?Math.max(document.documentElement.clientHeight,window.innerHeight||0):this.containerElement.getBoundingClientRect().height}isStaticRenderMode(){return this.params.renderMode===RenderMode.STATIC}getCurrentViewIndex(){return this.isStaticRenderMode()?this.viewRouter.getCurrentViewIndex():this.params.viewIndex}getActualSizeByEnv(e){var n,t,i;const r=this.getDocumentModel();if(!r.shared.actualSize)return null;const o=e?"mobile":"desktop";return Array.isArray(r.shared.actualSize)?null===(t=null===(n=r.shared.actualSize)||void 0===n?void 0:n[this.getCurrentViewIndex()])||void 0===t?void 0:t[o]:null===(i=r.shared.actualSize)||void 0===i?void 0:i[o]}getViewContentContainer(){var e;return null===(e=this.documentElement.querySelector('[cl-type="VIEW"]'))||void 0===e?void 0:e.shadowRoot.querySelector("[cl-content-container]")}hasVerticalFlowOverflow(e){const n=getComputedStyle(e),t=e.getBoundingClientRect().bottom-(parseFloat(n.paddingBottom)||0)-(parseFloat(n.borderBottomWidth)||0);return Array.from(e.children).some(e=>{const n=getComputedStyle(e);if("absolute"===n.position||"fixed"===n.position)return!1;return e.getBoundingClientRect().bottom+(parseFloat(n.marginBottom)||0)>t+1})}changeViewAlignToTop(){const e=this.documentElement.querySelector('[cl-type="VIEW"]');"row"===getComputedStyle(e).flexDirection?e.style.alignItems="flex-start":e.style.justifyContent="flex-start"}addWidgetContentClickEventListener(e){e.addEventListener("click",()=>{this.eventEmitter.emit(DocumentConnectorEventType.WIDGET_CONTENT_CLICKED,e)})}getDocumentModel(){return this.documentModel.getModel()}}

package/layouts/CustomFontsLoader.d.ts

@@ -0,0 +1,9 @@
+import { ClDocumentCustomFontResourceI } from '@claspo/common/document/Document.interface';
+import BaseFontsLoader, { FontsLoaderOptionsI } from './BaseFontsLoader';
+export default class CustomFontsLoader extends BaseFontsLoader {
+    static getUsedCustomFonts(documentModel: any): ClDocumentCustomFontResourceI[];
+    constructor(options?: FontsLoaderOptionsI);
+    protected getOwnerIdPrefix(): string;
+    load(customFonts: ClDocumentCustomFontResourceI[], htmlDocumentObject?: Document): Promise<void>;
+    cleanup(): void;
+}

package/layouts/CustomFontsLoader.js

@@ -0,0 +1 @@
+import BaseFontsLoader from"./BaseFontsLoader";import{getUsedFontFamilies}from"./UsedFontFamiliesResolver";import{extractFirstCssFontFamily,normalizeFontFamilyName}from"./google-fonts/GoogleFontsUtils";export default class CustomFontsLoader extends BaseFontsLoader{static getUsedCustomFonts(t){const e=t.shared.customFontResources||[];if(!e.length)return[];const o=getUsedFontFamilies(t),s=new Set(Array.from(o).map(t=>normalizeFontFamilyName(extractFirstCssFontFamily(t))));return e.filter(t=>{if(!(null==t?void 0:t.fontFamily)||!(null==t?void 0:t.url))return!1;const e=normalizeFontFamilyName(extractFirstCssFontFamily(t.fontFamily));return s.has(e)})}constructor(t){super(t)}getOwnerIdPrefix(){return"custom-fonts-loader"}async load(t,e){try{const o=this.setHtmlDocumentObject(e);if(!(t||[]).length)return;const s=Array.from(new Set(t.map(t=>t.url).filter(Boolean)));await this.addStylesheetLinks(s,o)}catch(t){console.error("Error while loading custom fonts",t)}}cleanup(){this.cleanupStylesheetElements(),this.htmlDocumentObject=void 0}}

package/layouts/GoogleFontsLoader.d.ts

@@ -1,11 +1,9 @@
 import { GoogleFontInput, GoogleFontsLoaderOptionsI, ResolvedGoogleFontRequestI } from './google-fonts/GoogleFonts.types';
-export default class GoogleFontsLoader {
+import BaseFontsLoader from './BaseFontsLoader';
+export default class GoogleFontsLoader extends BaseFontsLoader {
     static getUsedGoogleFonts(documentModel: any): ResolvedGoogleFontRequestI[];
-    widgetId?: number;
-    siteId?: string;
-    ownerId: string;
-    htmlDocumentObject?: Document;
     constructor(options?: GoogleFontsLoaderOptionsI);
+    protected getOwnerIdPrefix(): string;
     load(fonts: GoogleFontInput[], htmlDocumentObject?: Document): Promise<void>;
     cleanup(): void;
 }

package/layouts/GoogleFontsLoader.js

@@ -1 +1 @@
-import GoogleFontsRegistry from"./google-fonts/GoogleFontsRegistry";import{getUsedGoogleFonts}from"./google-fonts/GoogleFontsUsageExtractor";let nextGoogleFontsLoaderOwnerId=1;export default class GoogleFontsLoader{static getUsedGoogleFonts(t){return getUsedGoogleFonts(t)}constructor(t){t=t||{},this.widgetId=t.widgetId,this.siteId=t.siteId,this.ownerId="google-fonts-loader-"+nextGoogleFontsLoaderOwnerId++}async load(t,o){this.htmlDocumentObject=o||document,await GoogleFontsRegistry.loadFonts({ownerId:this.ownerId,document:this.htmlDocumentObject,fonts:t,context:{widgetId:this.widgetId,siteId:this.siteId}})}cleanup(){GoogleFontsRegistry.releaseOwner({ownerId:this.ownerId,document:this.htmlDocumentObject}),this.htmlDocumentObject=void 0}}
+import GoogleFontsRegistry from"./google-fonts/GoogleFontsRegistry";import{getUsedGoogleFonts}from"./google-fonts/GoogleFontsUsageExtractor";import BaseFontsLoader from"./BaseFontsLoader";export default class GoogleFontsLoader extends BaseFontsLoader{static getUsedGoogleFonts(t){return getUsedGoogleFonts(t)}constructor(t){super(t)}getOwnerIdPrefix(){return"google-fonts-loader"}async load(t,o){this.htmlDocumentObject=this.setHtmlDocumentObject(o),await GoogleFontsRegistry.loadFonts({ownerId:this.ownerId,document:this.htmlDocumentObject,fonts:t,context:{widgetId:this.widgetId,siteId:this.siteId}})}cleanup(){GoogleFontsRegistry.releaseOwner({ownerId:this.ownerId,document:this.htmlDocumentObject}),this.htmlDocumentObject=void 0}}

package/layouts/UsedFontFamiliesResolver.d.ts

@@ -0,0 +1 @@
+export declare function getUsedFontFamilies(documentModel: any): Set<string>;

package/layouts/UsedFontFamiliesResolver.js

@@ -0,0 +1 @@
+import DocumentUtils from"@claspo/common/document/DocumentUtils";import{getEnabledStyleEntries,splitClassNames}from"./google-fonts/GoogleFontsUsageExtractor";export function getUsedFontFamilies(t){const e=new Set,s=new Set;for(const o of t.views||[])DocumentUtils.iterateDepthFirst(o,t=>{const o=getEnabledStyleEntries(t);for(const t of o){if(t.classes)for(const e of splitClassNames(t.classes))e&&e.startsWith("cl-")&&s.add(e);t.styleAttributes&&t.styleAttributes.fontFamily&&e.add(t.styleAttributes.fontFamily)}});const o=t.shared;for(const t of s){const s=o.textClasses&&o.textClasses[t];s&&(s.styleAttributes&&s.styleAttributes.fontFamily?e.add(s.styleAttributes.fontFamily):(s.isHeader&&o.headerFontFamily&&e.add(o.headerFontFamily),!s.isHeader&&o.textFontFamily&&e.add(o.textFontFamily)))}return o.textFontFamily&&e.add(o.textFontFamily),e}

package/layouts/detached/DialogLayout.js

@@ -1 +1 @@
-import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import DocumentConnectorEventType from"../../DocumentConnectorEventType";import{LayoutType}from"@claspo/common/LayoutType";import{WidgetToEditorEventType}from"@claspo/renderer/renderer/WidgetToEditorEventType";import{EditorToWidgetEventType}from"@claspo/renderer/document-model/DocumentModelService";import debounce from"@claspo/common/async/debounce";import GlobalScrollBlocker from"../GlobalScrollBlocker";import trapFocus from"../trapFocus";class DialogLayout extends LayoutWithCloseIcon{constructor(e,t,n,o,i){super(e,t,n,o,i),this.entryAndDestroyAnimationDurationInSeconds=.3,this.widgetIsShown=!1,this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel()),this.dialogRootElement=document.createElement("div"),this.dialogRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.dialogElement=this.dialogRootElement.querySelector(DialogLayout.dialogSelector),this.dialogElement.style.background=this.getDocumentModel().shared.dialog.background,this.dialogElement.setAttribute("cl-connector-root-element",LayoutType.DETACHED),this.params.formVariantId&&this.dialogElement.setAttribute("cl-widget-id",this.params.formVariantId),this.closeIconElement=this.dialogElement.querySelector(DialogLayout.dialogCloseIconSelector),this.addBackDropClickEventListener(),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.dialogRootElement.querySelector(DialogLayout.dialogContentSelector)),this.setCloseIconParams(this.isMobileEnv()),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(),this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector).appendChild(this.brandingElement),this.addBrandingElementListeners()),this.boundEscapeListener=this.escapeListenerCallback.bind(this),window.addEventListener("keyup",this.boundEscapeListener)}adjustBrandingPosition(){this.brandingElement.style.position="relative",this.brandingElement.style.marginTop="10px"}getDocumentModel(){return this.migratedDocumentModel||super.getDocumentModel()}migrateDocumentModel(e){return e=this.migrateDialogParams(e),e=this.migrateCloseIconParams(e)}migrateDialogParams(e){return e.shared.dialog?e:Object.assign(Object.assign({},e),{shared:Object.assign(Object.assign({},e.shared),{dialog:{background:"rgba(0, 0, 0, 0.7)"}})})}migrateCloseIconParams(e){if(e.shared.closeIcon)return e;const t=this.getDefaultCloseIconParams();return Object.assign(Object.assign({},e),{shared:Object.assign(Object.assign({},e.shared),{closeIcon:{desktop:t.desktop,mobile:t.mobile}})})}addBackDropClickEventListener(){this.dialogElement.addEventListener("click",e=>{const t="cl-widget-id";e.target!==this.dialogElement||document.activeElement&&document.activeElement!==this.dialogElement&&document.activeElement.closest(`[${t}=${this.dialogElement.getAttribute(t)}]`)===this.dialogElement||this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)})}setCloseIconParams(e){const t=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,t,e)}connect(e,t,n){this.dialogElement.style.visibility="hidden",n.compositionRoot.services.eventEmitter.on(WidgetToEditorEventType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.showDialog()}),this.documentElement=e,this.containerElement=t,this.params.disableGlobalScroll&&GlobalScrollBlocker.block();return this.dialogRootElement.querySelector(DialogLayout.dialogContentSelector).appendChild(e),t.appendChild(this.dialogElement),this.setConnectedElement(this.dialogElement),this.updateScrollbar(this.isMobileEnv()),this.sharedUpdateListener=this.documentModel.on(EditorToWidgetEventType.SHARED_UPDATE_ALL,debounce(()=>{this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel()),this.setCloseIconParams(this.isMobileEnv())},5)),this.environmentUpdateListener=this.documentModel.on(EditorToWidgetEventType.ENVIRONMENT_UPDATE,debounce(e=>{this.setCloseIconParams(e.isMobileEnv),this.updateScrollbar(e.isMobileEnv)},5)),this.dialogElement}disconnect(e){var t;super.disconnect(e),window.removeEventListener("keyup",this.boundEscapeListener),null===(t=this.removeFocusTrap)||void 0===t||t.call(this);const n=()=>{var t,n;null==e||e(),this.dialogElement.remove(),null===(t=this.sharedUpdateListener)||void 0===t||t.off(),null===(n=this.environmentUpdateListener)||void 0===n||n.off()};if(this.params.disableLayoutAnimations)return void n();const o=this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector);this.dialogElement.style.animation=`fadeInDialog ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out reverse`,o.style.animation=`zoomInContent ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out reverse`,setTimeout(()=>{this.params.disableGlobalScroll&&GlobalScrollBlocker.restore(),n()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}updateScrollbar(e){if(this.params.disableScrollbarCalculation)return;const t=this.getViewContentContainer();if(!t)return;const n=this.getActualSizeByEnv(e);if(!n)return;const o=.9*this.getContainerElementHeight();o>parseFloat(n.height)||(t.style.overflowY="auto",t.style.overflowX="hidden",this._extendContainerOuterSizeToFitInnerContentShadows(t),this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector).style.maxHeight=`${o}px`,this.dialogElement.style.overflowY="auto",this.dialogElement.style.overflowX="hidden",this.changeViewAlignToTop())}escapeListenerCallback(e){"Escape"===e.key&&this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)}showDialog(){if(this.widgetIsShown)return;this.widgetIsShown=!0;!this.params.disableEntryAnimation&&!this.params.disableLayoutAnimations?setTimeout(()=>{this.dialogElement.style.visibility="visible";const e=this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector);this.dialogElement.style.animation=`fadeInDialog ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out forwards`,e.style.animation=`zoomInContent ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out forwards`,setTimeout(()=>{this.dialogElement.style.animation="",e.style.animation="",this.isStaticRenderMode()&&(this.dialogElement.focus(),this.removeFocusTrap=trapFocus(this.dialogElement))},1e3*this.entryAndDestroyAnimationDurationInSeconds)},50):(this.dialogElement.style.visibility="visible",this.isStaticRenderMode()&&(this.dialogElement.focus(),this.removeFocusTrap=trapFocus(this.dialogElement)))}_extendContainerOuterSizeToFitInnerContentShadows(e){e.style.width="calc(100% + 40px)",e.style.margin="-20px",e.style.padding="20px"}getOtherStyles(){return""}_getTemplate(e){var t;return`\n<div class="cl-dialog" role="dialog" aria-modal="true" aria-label="Popup" ${this.isStaticRenderMode()?'tabindex="0"':""}>\n  <style>\n  .cl-dialog {\n    top: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n    position: ${null!==(t=e.displayPosition)&&void 0!==t?t:"fixed"};\n    z-index: ${e.zIndex};\n  }\n\n  .cl-dialog:focus {\n    outline: none;\n  }\n\n  ${e.disabled?this.getDisabledWidgetStyles(DialogLayout.dialogSelector):""}\n\n  .cl-dialog-inner-content-wrapper {\n     display: flex;\n     flex-direction: column;\n     align-items: end;\n  }\n  \n  .cl-dialog-inner-content {\n     position: relative;\n     max-width: 100vw;\n  }\n\n  .cl-dialog-close-icon {\n    z-index: 99;\n    position: absolute;\n    cursor: pointer;\n  }\n\n  ${this.getBrandingStyles()}\n\n  ${this.getGameSpotlightStyles()}\n\n  ${this.getOtherStyles()}\n  \n  ${this.getEntryAndDestroyAnimations()}\n  </style>\n\n  <div class="cl-dialog-inner-content-wrapper">\n    <div class="cl-dialog-inner-content">\n      <div class="cl-dialog-close-icon"></div>\n      <div class="cl-dialog-content"></div>\n    </div>\n  </div>\n</div>\n`}getEntryAndDestroyAnimations(){return"\n@keyframes fadeInDialog {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes zoomInContent {\n  0% {\n    transform: scale(0.5);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n    "}}DialogLayout.dialogSelector=".cl-dialog",DialogLayout.dialogContentWrapperSelector=".cl-dialog-inner-content-wrapper",DialogLayout.dialogContentSelector=".cl-dialog-content",DialogLayout.dialogCloseIconSelector=".cl-dialog-close-icon";export default DialogLayout;
+import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import DocumentConnectorEventType from"../../DocumentConnectorEventType";import{LayoutType}from"@claspo/common/LayoutType";import{WidgetToEditorEventType}from"@claspo/renderer/renderer/WidgetToEditorEventType";import{EditorToWidgetEventType}from"@claspo/renderer/document-model/DocumentModelService";import debounce from"@claspo/common/async/debounce";import GlobalScrollBlocker from"../GlobalScrollBlocker";import trapFocus from"../trapFocus";class DialogLayout extends LayoutWithCloseIcon{constructor(e,t,n,o,i){super(e,t,n,o,i),this.entryAndDestroyAnimationDurationInSeconds=.3,this.widgetIsShown=!1,this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel()),this.dialogRootElement=document.createElement("div"),this.dialogRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.dialogElement=this.dialogRootElement.querySelector(DialogLayout.dialogSelector),this.dialogElement.style.background=this.getDocumentModel().shared.dialog.background,this.dialogElement.setAttribute("cl-connector-root-element",LayoutType.DETACHED),this.params.formVariantId&&this.dialogElement.setAttribute("cl-widget-id",this.params.formVariantId),this.closeIconElement=this.dialogElement.querySelector(DialogLayout.dialogCloseIconSelector),this.addBackDropClickEventListener(),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.dialogRootElement.querySelector(DialogLayout.dialogContentSelector)),this.setCloseIconParams(this.isMobileEnv()),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(),this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector).appendChild(this.brandingElement),this.addBrandingElementListeners()),this.boundEscapeListener=this.escapeListenerCallback.bind(this),window.addEventListener("keyup",this.boundEscapeListener)}adjustBrandingPosition(){this.brandingElement.style.position="relative",this.brandingElement.style.marginTop="10px"}getDocumentModel(){return this.migratedDocumentModel||super.getDocumentModel()}migrateDocumentModel(e){return e=this.migrateDialogParams(e),e=this.migrateCloseIconParams(e)}migrateDialogParams(e){return e.shared.dialog?e:Object.assign(Object.assign({},e),{shared:Object.assign(Object.assign({},e.shared),{dialog:{background:"rgba(0, 0, 0, 0.7)"}})})}migrateCloseIconParams(e){if(e.shared.closeIcon)return e;const t=this.getDefaultCloseIconParams();return Object.assign(Object.assign({},e),{shared:Object.assign(Object.assign({},e.shared),{closeIcon:{desktop:t.desktop,mobile:t.mobile}})})}addBackDropClickEventListener(){this.dialogElement.addEventListener("click",e=>{const t="cl-widget-id";e.target!==this.dialogElement||document.activeElement&&document.activeElement!==this.dialogElement&&document.activeElement.closest(`[${t}=${this.dialogElement.getAttribute(t)}]`)===this.dialogElement||this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)})}setCloseIconParams(e){const t=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,t,e)}connect(e,t,n){this.dialogElement.style.visibility="hidden",n.compositionRoot.services.eventEmitter.on(WidgetToEditorEventType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.updateScrollbar(this.isMobileEnv()),this.showDialog()}),this.documentElement=e,this.containerElement=t,this.params.disableGlobalScroll&&GlobalScrollBlocker.block();return this.dialogRootElement.querySelector(DialogLayout.dialogContentSelector).appendChild(e),t.appendChild(this.dialogElement),this.setConnectedElement(this.dialogElement),this.updateScrollbar(this.isMobileEnv()),this.sharedUpdateListener=this.documentModel.on(EditorToWidgetEventType.SHARED_UPDATE_ALL,debounce(()=>{this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel()),this.setCloseIconParams(this.isMobileEnv())},5)),this.environmentUpdateListener=this.documentModel.on(EditorToWidgetEventType.ENVIRONMENT_UPDATE,debounce(e=>{this.setCloseIconParams(e.isMobileEnv),this.updateScrollbar(e.isMobileEnv)},5)),this.dialogElement}disconnect(e){var t;super.disconnect(e),window.removeEventListener("keyup",this.boundEscapeListener),null===(t=this.removeFocusTrap)||void 0===t||t.call(this);const n=()=>{var t,n;null==e||e(),this.dialogElement.remove(),null===(t=this.sharedUpdateListener)||void 0===t||t.off(),null===(n=this.environmentUpdateListener)||void 0===n||n.off()};if(this.params.disableLayoutAnimations)return void n();const o=this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector);this.dialogElement.style.animation=`fadeInDialog ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out reverse`,o.style.animation=`zoomInContent ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out reverse`,setTimeout(()=>{this.params.disableGlobalScroll&&GlobalScrollBlocker.restore(),n()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}updateScrollbar(e){if(this.params.disableScrollbarCalculation)return;const t=this.getViewContentContainer();if(!t)return;const n=this.getActualSizeByEnv(e);if(!n)return;const o=.9*this.getContainerElementHeight();o>parseFloat(n.height)||(this.hasVerticalFlowOverflow(t)&&(t.style.overflowY="auto",t.style.overflowX="hidden",this._extendContainerOuterSizeToFitInnerContentShadows(t),this.changeViewAlignToTop()),this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector).style.maxHeight=`${o}px`,this.dialogElement.style.overflowY="auto",this.dialogElement.style.overflowX="hidden")}escapeListenerCallback(e){"Escape"===e.key&&this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)}showDialog(){if(this.widgetIsShown)return;this.widgetIsShown=!0;!this.params.disableEntryAnimation&&!this.params.disableLayoutAnimations?setTimeout(()=>{this.dialogElement.style.visibility="visible";const e=this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector);this.dialogElement.style.animation=`fadeInDialog ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out forwards`,e.style.animation=`zoomInContent ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out forwards`,setTimeout(()=>{this.dialogElement.style.animation="",e.style.animation="",this.isStaticRenderMode()&&(this.dialogElement.focus(),this.removeFocusTrap=trapFocus(this.dialogElement))},1e3*this.entryAndDestroyAnimationDurationInSeconds)},50):(this.dialogElement.style.visibility="visible",this.isStaticRenderMode()&&(this.dialogElement.focus(),this.removeFocusTrap=trapFocus(this.dialogElement)))}_extendContainerOuterSizeToFitInnerContentShadows(e){e.style.width="calc(100% + 40px)",e.style.margin="-20px",e.style.padding="20px"}getOtherStyles(){return""}_getTemplate(e){var t;return`\n<div class="cl-dialog" role="dialog" aria-modal="true" aria-label="Popup" ${this.isStaticRenderMode()?'tabindex="0"':""}>\n  <style>\n  .cl-dialog {\n    top: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n    position: ${null!==(t=e.displayPosition)&&void 0!==t?t:"fixed"};\n    z-index: ${e.zIndex};\n  }\n\n  .cl-dialog:focus {\n    outline: none;\n  }\n\n  ${e.disabled?this.getDisabledWidgetStyles(DialogLayout.dialogSelector):""}\n\n  .cl-dialog-inner-content-wrapper {\n     display: flex;\n     flex-direction: column;\n     align-items: end;\n  }\n  \n  .cl-dialog-inner-content {\n     position: relative;\n     max-width: 100vw;\n  }\n\n  .cl-dialog-close-icon {\n    z-index: 99;\n    position: absolute;\n    cursor: pointer;\n  }\n\n  ${this.getBrandingStyles()}\n\n  ${this.getGameSpotlightStyles()}\n\n  ${this.getOtherStyles()}\n  \n  ${this.getEntryAndDestroyAnimations()}\n  </style>\n\n  <div class="cl-dialog-inner-content-wrapper">\n    <div class="cl-dialog-inner-content">\n      <div class="cl-dialog-close-icon"></div>\n      <div class="cl-dialog-content"></div>\n    </div>\n  </div>\n</div>\n`}getEntryAndDestroyAnimations(){return"\n@keyframes fadeInDialog {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes zoomInContent {\n  0% {\n    transform: scale(0.5);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n    "}}DialogLayout.dialogSelector=".cl-dialog",DialogLayout.dialogContentWrapperSelector=".cl-dialog-inner-content-wrapper",DialogLayout.dialogContentSelector=".cl-dialog-content",DialogLayout.dialogCloseIconSelector=".cl-dialog-close-icon";export default DialogLayout;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claspo/document-connector",
-  "version": "16.7.18",
+  "version": "16.7.19-scf2",
   "scripts": {
     "test": "jest --no-cache --coverage",
     "build": "rm -rf out && tsc --project tsconfig.json && npm run minify",
@@ -14,8 +14,8 @@
     "node": ">=18.16.0"
   },
   "dependencies": {
-    "@claspo/common": "7.3.0",
-    "@claspo/renderer": "18.7.8"
+    "@claspo/common": "7.3.0-scf2",
+    "@claspo/renderer": "18.7.9-scf2"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",