@claspo/document-connector 15.0.6-rc1 → 15.0.6-theme.36

package/BaseDocumentConnector.js

@@ -1 +1 @@
-import CssVarsOperations from"@claspo/common/element/CssVarsOperations";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";import DocumentUtils from"@claspo/common/document/DocumentUtils";export default class BaseDocumentConnector extends DefaultEventEmitter{constructor(e){super(),this.propsRequestListener=e=>{e.stopPropagation();let t=e.detail.id,o=e.detail.widgetId;if(o&&this.params.formVariantId&&this.params.formVariantId!==o)return;let r=DocumentUtils.getNodeById(this.entryModule.compositionRoot.services.documentModel.getViews(),t);r&&(e.detail.props=this.entryModule.componentFactory.constructProps(r,this.entryModule.viewRenderer.viewResourceManager))},this.params=e,this.entryModule=null,this.controllers=[],this.container=null}disconnect(){var e;null===(e=this.container)||void 0===e||e.removeEventListener("cl-props-request",this.propsRequestListener)}addPropsRequestEventListener(e){this.container=e,e.addEventListener("cl-props-request",this.propsRequestListener)}setEntryModule(e){this.entryModule=e}navigate(e){this.entryModule&&this.entryModule.viewRouter&&this.entryModule.viewRouter.navigate(e)}performAction(e,t){const o=this.entryModule.performAction(e,t);return this.controllers.forEach(o=>{if(e===DocumentModelUpdateType.COLOR_SCHEMA_UPDATE)CssVarsOperations.override(t,o.getConnectedElement())}),o}setEnvironment(e){this.entryModule.performAction(DocumentModelUpdateType.ENVIRONMENT_UPDATE,e)}getComponentManifests(){return this.componentResolver.getComponentManifests()}}
+import ThemeCssVars from"@claspo/common/element/ThemeCssVars";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";import DocumentUtils from"@claspo/common/document/DocumentUtils";export default class BaseDocumentConnector extends DefaultEventEmitter{constructor(e){super(),this.propsRequestListener=e=>{e.stopPropagation();let t=e.detail.id,o=e.detail.widgetId;if(o&&this.params.formVariantId&&this.params.formVariantId!==o)return;let r=DocumentUtils.getNodeById(this.entryModule.compositionRoot.services.documentModel.getViews(),t);r&&(e.detail.props=this.entryModule.componentFactory.constructProps(r,this.entryModule.viewRenderer.viewResourceManager))},this.params=e,this.entryModule=null,this.controllers=[],this.container=null}disconnect(){var e;null===(e=this.container)||void 0===e||e.removeEventListener("cl-props-request",this.propsRequestListener)}addPropsRequestEventListener(e){this.container=e,e.addEventListener("cl-props-request",this.propsRequestListener)}setEntryModule(e){this.entryModule=e}navigate(e){this.entryModule&&this.entryModule.viewRouter&&this.entryModule.viewRouter.navigate(e)}performAction(e,t){const o=this.entryModule.performAction(e,t);return this.controllers.forEach(o=>{if(e===DocumentModelUpdateType.THEME_UPDATE)ThemeCssVars.override(t.schema,o.getConnectedElement())}),o}setEnvironment(e){this.entryModule.performAction(DocumentModelUpdateType.ENVIRONMENT_UPDATE,e)}getComponentManifests(){return this.componentResolver.getComponentManifests()}}

package/DocumentConnectorEventType.d.ts

@@ -1,10 +1,10 @@
-declare const DocumentConnectorEventType: {
-    CONTACT_ID_WAS_RECEIVED: string;
-    CLOSE_WIDGET: string;
-    SHOW_WIDGET: string;
-    CLOSE_ICON_CLICKED: string;
-    BRANDING_ELEMENT_CLICKED: string;
-    CONTACT_DATA_SUBMIT: string;
-    WIDGET_CONTENT_CLICKED: string;
-};
+declare enum DocumentConnectorEventType {
+    CONTACT_ID_WAS_RECEIVED = "CONTACT_ID_WAS_RECEIVED",
+    CLOSE_WIDGET = "CLOSE_WIDGET",
+    SHOW_WIDGET = "SHOW_WIDGET",
+    CLOSE_ICON_CLICKED = "CLOSE_ICON_CLICKED",
+    BRANDING_ELEMENT_CLICKED = "BRANDING_ELEMENT_CLICKED",
+    CONTACT_DATA_SUBMIT = "CONTACT_DATA_SUBMIT",
+    WIDGET_CONTENT_CLICKED = "WIDGET_CONTENT_CLICKED"
+}
 export default DocumentConnectorEventType;

package/DocumentConnectorEventType.js

@@ -1 +1 @@
-const DocumentConnectorEventType={CONTACT_ID_WAS_RECEIVED:"CONTACT_ID_WAS_RECEIVED",CLOSE_WIDGET:"CLOSE_WIDGET",SHOW_WIDGET:"SHOW_WIDGET",CLOSE_ICON_CLICKED:"CLOSE_ICON_CLICKED",BRANDING_ELEMENT_CLICKED:"BRANDING_ELEMENT_CLICKED",CONTACT_DATA_SUBMIT:"CONTACT_DATA_SUBMIT",WIDGET_CONTENT_CLICKED:"WIDGET_CONTENT_CLICKED"};export default DocumentConnectorEventType;
+var DocumentConnectorEventType;!function(C){C.CONTACT_ID_WAS_RECEIVED="CONTACT_ID_WAS_RECEIVED",C.CLOSE_WIDGET="CLOSE_WIDGET",C.SHOW_WIDGET="SHOW_WIDGET",C.CLOSE_ICON_CLICKED="CLOSE_ICON_CLICKED",C.BRANDING_ELEMENT_CLICKED="BRANDING_ELEMENT_CLICKED",C.CONTACT_DATA_SUBMIT="CONTACT_DATA_SUBMIT",C.WIDGET_CONTENT_CLICKED="WIDGET_CONTENT_CLICKED"}(DocumentConnectorEventType||(DocumentConnectorEventType={}));export default DocumentConnectorEventType;

package/DocumentConnectorEvents.interface.d.ts

@@ -0,0 +1,5 @@
+import DocumentConnectorEventType from './DocumentConnectorEventType';
+import SysActionTypes from '@claspo/renderer/action/SysActionTypes';
+import SysEventTypes from '@claspo/renderer/common/SysEventTypes';
+import SysRouterEvent from '@claspo/renderer/RouterEvent';
+export type DocumentConnectorEventName = DocumentConnectorEventType | SysActionTypes | SysEventTypes | SysRouterEvent;

package/DocumentConnectorEvents.interface.js

@@ -0,0 +1 @@
+export{};

package/LICENSE.md

@@ -0,0 +1,64 @@
+Claspo SDK License Agreement (Proprietary)
+Version 1.0 — Effective Date: 2026-01-26
+
+Copyright (c) 2026 Claspo Inc. All rights reserved.
+
+IMPORTANT: This Claspo SDK and related packages (the “SDK”) are licensed, not sold.
+By downloading, installing, accessing, or using the SDK, you agree to this Agreement.
+
+1. Definitions
+   1.1 “Claspo” means Claspo Inc.
+   1.2 “SDK” means the software packages published under the @claspo npm scope (and any related documentation, examples, headers, type definitions, and updates), excluding third-party dependencies under their own licenses.
+   1.3 “Claspo Platform” means the Claspo product and services accessible through claspo.io and official Claspo applications.
+   1.4 “Authorized White-Label Product” means a third-party product that embeds the Claspo builder under a valid paid agreement/subscription with Claspo for white-label embedding.
+   1.5 “Permitted Environment” means (a) the Claspo Platform, and/or (b) an Authorized White-Label Product.
+   1.6 “Component” means code created by you that integrates with the Claspo builder using the SDK APIs.
+
+2. License Grant
+   2.1 Subject to your continuous compliance with this Agreement, Claspo grants you a limited, worldwide, non-exclusive, non-transferable, non-sublicensable, revocable license to:
+   (a) install and use the SDK solely to develop, test, and build Components; and
+   (b) deploy and run Components solely within the Permitted Environment.
+
+2.2 You may distribute your own Component code to end users or customers under your chosen terms, provided you do NOT distribute the SDK itself (Section 3).
+
+3. Restrictions
+   You must NOT, and must NOT permit any third party to:
+   3.1 Redistribute, resell, rent, lease, sublicense, or otherwise make the SDK available to any third party, including by bundling, vendoring, mirroring, publishing, or hosting it (except as required for normal installation via npm from the official registry).
+   3.2 Use the SDK outside the Permitted Environment, including to build, operate, or enable any product or service that is not the Claspo Platform or an Authorized White-Label Product.
+   3.3 Use the SDK to develop or operate a competing product, service, editor/builder, or platform that offers substantially similar functionality to the Claspo builder, widgets, popup/onsite campaign tooling, or component framework.
+   3.4 Reverse engineer, decompile, disassemble, or otherwise attempt to derive the source code, underlying ideas, algorithms, or structure of the SDK, except to the extent such restriction is prohibited by applicable law.
+   3.5 Remove, obscure, or alter any proprietary notices, trademarks, or branding included in the SDK.
+   3.6 Use the SDK in violation of law, to infringe rights, or to enable security exploits.
+
+4. Ownership; No Transfer
+   4.1 The SDK is and remains the exclusive property of Claspo and its licensors. All rights not expressly granted are reserved.
+   4.2 No ownership interest in the SDK is transferred to you.
+
+5. Feedback
+   If you provide suggestions, ideas, or feedback regarding the SDK, you grant Claspo a perpetual, irrevocable, worldwide, royalty-free right to use and incorporate it without restriction.
+
+6. Updates
+   Claspo may provide updates or changes to the SDK. Claspo may change or discontinue any part of the SDK at any time.
+
+7. Support
+   Claspo has no obligation to provide support, maintenance, or updates unless separately agreed in writing.
+
+8. Disclaimer of Warranties
+   THE SDK IS PROVIDED “AS IS” AND “AS AVAILABLE”. TO THE MAXIMUM EXTENT PERMITTED BY LAW, CLASPO DISCLAIMS ALL WARRANTIES, EXPRESS OR IMPLIED, INCLUDING IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE, AND NON-INFRINGEMENT.
+
+9. Limitation of Liability
+   TO THE MAXIMUM EXTENT PERMITTED BY LAW, IN NO EVENT WILL CLASPO BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES, OR ANY LOSS OF PROFITS, REVENUE, DATA, OR GOODWILL, ARISING OUT OF OR RELATED TO THE SDK OR THIS AGREEMENT, EVEN IF ADVISED OF THE POSSIBILITY.
+   CLASPO’S TOTAL LIABILITY UNDER THIS AGREEMENT WILL NOT EXCEED USD $100.
+
+10. Termination
+    10.1 This Agreement is effective until terminated.
+    10.2 Claspo may terminate or suspend this Agreement immediately if you breach it.
+    10.3 Upon termination, you must stop using the SDK and destroy all copies in your possession or control.
+    10.4 Sections 4, 5, 8, 9, 10, and 11 survive termination.
+
+11. Governing Law; Venue
+    This Agreement is governed by the laws of the State of Delaware, USA, without regard to conflict of laws principles. You agree to exclusive venue in state or federal courts located in Delaware for any dispute arising out of this Agreement.
+
+12. Contact
+    Claspo Inc.
+    Legal: legal@claspo.io

package/PreviewBackgroundStyles.js

@@ -1 +1 @@
-export default class PreviewBackgroundStyles{static getFullScreen(){return`\n\n  <style>\n\n  .holder {\n    height: 100%;\n    overflow: hidden;\n    max-width: 100%;\n    border-radius: 4px;\n    box-sizing: border-box;\n  }\n\n  .cover-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 5px;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    box-sizing: border-box;\n  }\n\n  .cover-row-small {\n    height: 10%;\n    border-radius: 4px;\n    background: ${PreviewBackgroundStyles.blockBackground};\n  }\n\n  .cover-row {\n    width: 100%;\n    height: 37%;\n    border-radius: 4px;\n    background: ${PreviewBackgroundStyles.blockBackground};\n  }\n\n\n  .d-flex {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n  }\n  \n  .d-flex--height {\n    gap: 5px;\n    height: 37%;\n  }\n\n  .cover-col {\n    height: 100%;\n    background: ${PreviewBackgroundStyles.blockBackground};\n    width: 100%;\n    border-radius: 4px;\n  }\n\n  </style>\n\n  <div class="holder">\n    <div class="cover-wrapper">\n        <div class="cover-row-small"></div>\n        <div class="cover-row"></div>\n        <div class="cover-row-small"></div>\n        <div class="d-flex d-flex--height flex-row justify-content-between">\n            <div class="cover-col"></div>\n            <div class="cover-col"></div>\n            <div class="cover-col"></div>\n        </div>\n    </div>\n  </div>\n          `}static getBuiltInTopSection(){const e=document.createElement("div");return e.className="preview-placeholder-element",e.style.width="100%",e.style.height="100%",e.style.borderRadius="4px",e.style.background=PreviewBackgroundStyles.blockBackground,e}static getBuiltInBottomSection(){const e=document.createElement("div");e.className="preview-placeholder-element",e.style.display="flex",e.style.flexDirection="row",e.style.justifyContent="space-between",e.style.gap="15px",e.style.width="100%",e.style.height="100%",e.style.borderRadius="4px";for(let n=0;n<3;n++){const n=document.createElement("div");n.style.background=PreviewBackgroundStyles.blockBackground,n.style.width="100%",n.style.height="100%",e.appendChild(n)}return e}}PreviewBackgroundStyles.blockBackground="#EDEDED";
+class PreviewBackgroundStyles{static getFullScreen(){return`\n\n  <style>\n\n  .holder {\n    height: 100%;\n    overflow: hidden;\n    max-width: 100%;\n    border-radius: 4px;\n    box-sizing: border-box;\n  }\n\n  .cover-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 5px;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    box-sizing: border-box;\n  }\n\n  .cover-row-small {\n    height: 10%;\n    border-radius: 4px;\n    background: ${PreviewBackgroundStyles.blockBackground};\n  }\n\n  .cover-row {\n    width: 100%;\n    height: 37%;\n    border-radius: 4px;\n    background: ${PreviewBackgroundStyles.blockBackground};\n  }\n\n\n  .d-flex {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n  }\n  \n  .d-flex--height {\n    gap: 5px;\n    height: 37%;\n  }\n\n  .cover-col {\n    height: 100%;\n    background: ${PreviewBackgroundStyles.blockBackground};\n    width: 100%;\n    border-radius: 4px;\n  }\n\n  </style>\n\n  <div class="holder">\n    <div class="cover-wrapper">\n        <div class="cover-row-small"></div>\n        <div class="cover-row"></div>\n        <div class="cover-row-small"></div>\n        <div class="d-flex d-flex--height flex-row justify-content-between">\n            <div class="cover-col"></div>\n            <div class="cover-col"></div>\n            <div class="cover-col"></div>\n        </div>\n    </div>\n  </div>\n          `}static getBuiltInTopSection(){const e=document.createElement("div");return e.className="preview-placeholder-element",e.style.width="100%",e.style.height="100%",e.style.borderRadius="4px",e.style.background=PreviewBackgroundStyles.blockBackground,e}static getBuiltInBottomSection(){const e=document.createElement("div");e.className="preview-placeholder-element",e.style.display="flex",e.style.flexDirection="row",e.style.justifyContent="space-between",e.style.gap="15px",e.style.width="100%",e.style.height="100%",e.style.borderRadius="4px";for(let n=0;n<3;n++){const n=document.createElement("div");n.style.background=PreviewBackgroundStyles.blockBackground,n.style.width="100%",n.style.height="100%",e.appendChild(n)}return e}}PreviewBackgroundStyles.blockBackground="#EDEDED";export default PreviewBackgroundStyles;

package/README.md

@@ -0,0 +1,35 @@
+# @claspo/document-connector
+
+Script SDK Connection layer between Claspo widgets and the host document. Manages widget layouts, positioning, and resource loading.
+
+## Installation
+
+```bash
+npm install @claspo/document-connector
+```
+
+## Architecture
+
+```
+┌─────────────────────────────────────────────────────────┐
+│                    Host Document                         │
+├─────────────────────────────────────────────────────────┤
+│  ┌───────────────────────────────────────────────────┐  │
+│  │              Document Connector                    │  │
+│  │  ┌─────────────┐  ┌─────────────┐  ┌───────────┐  │  │
+│  │  │   Layout    │  │  Resource   │  │   Event   │  │  │
+│  │  │   Manager   │  │   Loader    │  │   System  │  │  │
+│  │  └─────────────┘  └─────────────┘  └───────────┘  │  │
+│  └───────────────────────────────────────────────────┘  │
+│                          │                               │
+│  ┌───────────────────────▼───────────────────────────┐  │
+│  │                 @claspo/renderer                   │  │
+│  │            (Web Components Engine)                 │  │
+│  └───────────────────────────────────────────────────┘  │
+└─────────────────────────────────────────────────────────┘
+```
+
+
+## Links
+
+- [Documentation](https://docs.claspo.io/docs/claspodocument-connector)

package/StaticDocumentConnector.d.ts

@@ -3,6 +3,7 @@ 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 { DocumentConnectorEventName } from './DocumentConnectorEvents.interface';
 export default class StaticDocumentConnector extends BaseDocumentConnector {
     componentRegister: WcRegister;
     componentResolver: WcResolver;
@@ -11,5 +12,8 @@ export default class StaticDocumentConnector extends BaseDocumentConnector {
     connect(containerElement: HTMLElement): Promise<any>;
     disconnect(): void;
     destroy(): void;
+    on(eventName: DocumentConnectorEventName | '*', listener: (value: any, eventName: string, params?: any) => void): {
+        off: () => void;
+    };
     _initializeRenderer(containerElement: HTMLElement, htmlDocumentObject: Document): 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";export default class StaticDocumentConnector extends BaseDocumentConnector{constructor(e){super(e),this.googleFontsLoader=null;const{documentModel:o,translations:t,trackingService:s,layoutType:n,bundledComponentClasses:r}=e;this.componentRegister=new WcRegister(r),this.componentResolver=new WcResolver(RenderMode.STATIC,this.componentRegister);const i=new StaticEntryModule(o,this.componentResolver,this.componentRegister,e,t,s,n);this.setEntryModule(i)}async connect(e){this.googleFontsLoader=new GoogleFontsLoader;const o=e.getRootNode();return this.params.disableGoogleFonts||await this.googleFontsLoader.load(this.params.documentModel.shared.googleFonts,o),this._initializeRenderer(e,o)}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()}async _initializeRenderer(e,o){var t,s,n;await this.componentResolver.loadComponentsIfNecessary(this.params.documentModel,this.params.staticResourcesUrl);const r=this.entryModule.init(o);r.style.display="flex";const{layoutFactoryClass:i=LayoutFactory,layoutType:a,documentModel:c}=this.params,d=Object.assign(Object.assign({},this.params),{zIndex:null!==(s=null===(t=null==c?void 0:c.shared)||void 0===t?void 0:t.zIndex)&&void 0!==s?s:getZIndexByLayoutType(a)});return this.controllers.push(i.create(Object.assign(Object.assign({},d),{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)),super.addPropsRequestEventListener(r),this.params.formVariantId?r.classList.add("cl-widget-"+this.params.formVariantId):r.classList.add("cl-widget"),this.entryModule.listenAction("*",(e,o)=>{this.emit(o,e),o===DocumentConnectorEventType.CLOSE_WIDGET&&e&&"function"==typeof e&&e()}),null===(n=this.controllers[0])||void 0===n?void 0:n.connect(r,e,this.entryModule)}}
+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";export default class StaticDocumentConnector extends BaseDocumentConnector{constructor(e){super(e),this.googleFontsLoader=null;const{documentModel:o,translations:t,trackingService:s,layoutType:n,bundledComponentClasses:r}=e;this.componentRegister=new WcRegister(r),this.componentResolver=new WcResolver(RenderMode.STATIC,this.componentRegister);const i=new StaticEntryModule(o,this.componentResolver,this.componentRegister,e,t,s,n);this.setEntryModule(i)}async connect(e){this.googleFontsLoader=new GoogleFontsLoader;const o=e.getRootNode();return this.params.disableGoogleFonts||await this.googleFontsLoader.load(this.params.documentModel.shared.googleFonts,o),this._initializeRenderer(e,o)}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,o){return super.on(e,o)}async _initializeRenderer(e,o){var t,s,n;await this.componentResolver.loadComponentsIfNecessary(this.params.documentModel,this.params.staticResourcesUrl);const r=this.entryModule.init(o);r.style.display="flex";const{layoutFactoryClass:i=LayoutFactory,layoutType:a,documentModel:c}=this.params,d=Object.assign(Object.assign({},this.params),{zIndex:null!==(s=null===(t=null==c?void 0:c.shared)||void 0===t?void 0:t.zIndex)&&void 0!==s?s:getZIndexByLayoutType(a)});return this.controllers.push(i.create(Object.assign(Object.assign({},d),{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)),super.addPropsRequestEventListener(r),this.params.formVariantId?r.classList.add("cl-widget-"+this.params.formVariantId):r.classList.add("cl-widget"),this.entryModule.listenAction("*",(e,o)=>{this.emit(o,e),o===DocumentConnectorEventType.CLOSE_WIDGET&&e&&"function"==typeof e&&e()}),null===(n=this.controllers[0])||void 0===n?void 0:n.connect(r,e,this.entryModule)}}

package/layouts/content-locker/ContentLockerLayout.js

@@ -1 +1 @@
-import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import debounce from"@claspo/common/async/debounce";import SysRouterEvent from"@claspo/renderer/RouterEvent";import{RenderMode}from"@claspo/common/RenderMode";export default class ContentLockerLayout extends LayoutWithCloseIcon{constructor(e,t,n,o,i){var s,l;super(e,t,n,o,i),this.contentLockerRootElement=document.createElement("div"),this.contentLockerRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.contentLockerElement=this.contentLockerRootElement.querySelector(ContentLockerLayout.contentLockerSelector),this.contentLockerContentElement=this.contentLockerRootElement.querySelector(ContentLockerLayout.contentLockerContentSelector),this.contentLockerElement.setAttribute("cl-connector-root-element",LayoutType.CONTENT_LOCKER),this.params.formVariantId&&this.contentLockerElement.setAttribute("cl-widget-id",this.params.formVariantId),this.contentLockerElement.style.position=null!==(s=this.params.displayPosition)&&void 0!==s?s:"fixed",this.contentLockerElement.style.zIndex=String(null!==(l=this.params.zIndex)&&void 0!==l?l:Number.MAX_SAFE_INTEGER),this.getDocumentModel().shared.closeIcon&&(this.closeIconElement=document.createElement("div"),this.closeIconElement.classList.add("cl-content-locker-close-icon"),this.contentLockerContentElement.appendChild(this.closeIconElement),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.contentLockerElement.querySelector(ContentLockerLayout.contentLockerContentSelector)),this.setCloseIconParams(this.isMobileEnv())),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(),this.contentLockerElement.appendChild(this.brandingElement),this.addBrandingElementListeners())}adjustBrandingPosition(){this.brandingElement.style.right="10px",this.brandingElement.style.bottom="10px"}addBlurryBackdrop(e){const t="backdropFilter",n="blur(20px)";e.style[t]=n;const o=new MutationObserver(o=>{o.forEach(o=>{var i;"attributes"===o.type&&"style"===o.attributeName&&((null===(i=e.style[t])||void 0===i?void 0:i.includes(n))||(e.style[t]=n))})});return o.observe(e,{attributes:!0,attributeFilter:["style"]}),()=>o.disconnect()}setCloseIconParams(e){const t=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,t,e)}connect(e,t,n){this.documentElement=e,this.containerElement=t,this.params.disableGlobalScroll&&document.body.classList.add("cl-noscroll"),this.removeBlurryBackdrop=this.addBlurryBackdrop(this.contentLockerElement),this.contentLockerContentElement.appendChild(e),t.appendChild(this.contentLockerElement),this.setConnectedElement(this.contentLockerElement),this.updateScrollbar(this.isMobileEnv()),this.contentLockerContentElement.style.visibility="hidden",n.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.contentLockerContentElement.style.visibility="visible"}),this.sharedUpdateListener=this.documentModel.on(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(()=>{this.setCloseIconParams(this.isMobileEnv())},5)),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,debounce(e=>{this.setCloseIconParams(e.isMobileEnv),this.updateScrollbar(e.isMobileEnv),this.centerContentIfNeeded(this.getCurrentViewIndex())},5));const o=this.params.renderMode===RenderMode.STATIC;return this.centerContentIfNeeded(this.getCurrentViewIndex()),o&&(this.navigationEndListener=this.eventEmitter.on(SysRouterEvent.NAVIGATION_END,()=>{this.centerContentIfNeeded(this.getCurrentViewIndex())})),this.contentLockerElement}disconnect(e){var t,n,o,i;super.disconnect(e),null==e||e(),this.params.disableGlobalScroll&&document.body.classList.remove("cl-noscroll"),null===(t=this.removeBlurryBackdrop)||void 0===t||t.call(this),this.contentLockerElement.remove(),null===(n=this.sharedUpdateListener)||void 0===n||n.off(),null===(o=this.environmentUpdateListener)||void 0===o||o.off(),null===(i=this.navigationEndListener)||void 0===i||i.off()}centerContentIfNeeded(e){const t=this.getDocumentModel().views[e],n=this.isMobileEnv()?t.props.adaptiveStyles.mobile[0].styleAttributes:t.props.adaptiveStyles.desktop[0].styleAttributes;"100%"===n.width&&"100%"===n.height?this.resetCustomContentSize():this.setCustomSizeForContent(n)}resetCustomContentSize(){this.originalDocumentElementStyles&&(this.documentElement.style.width=this.originalDocumentElementStyles.width,this.documentElement.style.minWidth=this.originalDocumentElementStyles.minWidth,this.documentElement.style.height=this.originalDocumentElementStyles.height,this.documentElement.style.minHeight=this.originalDocumentElementStyles.minHeight),this.contentLockerElement.style.display="",this.contentLockerElement.style.justifyContent="",this.contentLockerElement.style.alignItems="",this.contentLockerContentElement.style.width="100%",this.contentLockerContentElement.style.minWidth="",this.contentLockerContentElement.style.height="100%",this.contentLockerContentElement.style.minHeight=""}setCustomSizeForContent(e){this.originalDocumentElementStyles={width:this.documentElement.style.width,minWidth:this.documentElement.style.minWidth,height:this.documentElement.style.height,minHeight:this.documentElement.style.minHeight},this.documentElement.style.width=e.width,this.documentElement.style.minWidth=e.minWidth,this.documentElement.style.height=e.height,this.documentElement.style.minHeight=e.minHeight,this.contentLockerElement.style.display="flex",this.contentLockerElement.style.justifyContent="center",this.contentLockerElement.style.alignItems="center",this.contentLockerContentElement.style.width=e.width,this.contentLockerContentElement.style.minWidth=e.minWidth,this.contentLockerContentElement.style.height=e.height,this.contentLockerContentElement.style.minHeight=e.minHeight}updateScrollbar(e){if(this.params.disableScrollbarCalculation)return;const t=this.getViewContentContainer();if(!t||!this.getDocumentModel().shared.actualSize)return;const n=this.getActualSizeByEnv(e);if(!n)return;const o=this.getContainerElementHeight();o>parseFloat(n.height)||(t.style.overflowY="auto",t.style.overflowX="hidden",t.style.minHeight=`${o}px`,this.changeViewAlignToTop())}_getTemplate(e){return`\n      <div class="cl-content-locker">\n        <style>\n        .cl-content-locker {\n          display: block;\n          top: 0;\n          left: 0;\n          bottom: 0;\n          right: 0;\n          width: 100%;\n          height: 100%;\n        }\n\n        ${e.disabled?this.getDisabledWidgetStyles(ContentLockerLayout.contentLockerSelector):""}\n\n        .cl-content-locker-content {\n            width: 100%;\n            height: 100%;\n            min-height: fit-content;\n        }\n\n        .cl-noscroll {\n          overflow: hidden !important;\n        }\n\n        .cl-content-locker-close-icon {\n          z-index: 99;\n          position: absolute;\n          cursor: pointer;\n        }\n\n        ${this.getBrandingStyles()}\n\n        </style>\n\n          <div class="cl-content-locker-content"></div>\n      </div>`}}ContentLockerLayout.contentLockerSelector=".cl-content-locker",ContentLockerLayout.contentLockerContentSelector=".cl-content-locker-content",ContentLockerLayout.contentLockerCloseIconSelector=".cl-content-locker-close-icon";
+import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import debounce from"@claspo/common/async/debounce";import SysRouterEvent from"@claspo/renderer/RouterEvent";import{RenderMode}from"@claspo/common/RenderMode";class ContentLockerLayout extends LayoutWithCloseIcon{constructor(e,t,n,o,i){var s,l;super(e,t,n,o,i),this.contentLockerRootElement=document.createElement("div"),this.contentLockerRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.contentLockerElement=this.contentLockerRootElement.querySelector(ContentLockerLayout.contentLockerSelector),this.contentLockerContentElement=this.contentLockerRootElement.querySelector(ContentLockerLayout.contentLockerContentSelector),this.contentLockerElement.setAttribute("cl-connector-root-element",LayoutType.CONTENT_LOCKER),this.params.formVariantId&&this.contentLockerElement.setAttribute("cl-widget-id",this.params.formVariantId),this.contentLockerElement.style.position=null!==(s=this.params.displayPosition)&&void 0!==s?s:"fixed",this.contentLockerElement.style.zIndex=String(null!==(l=this.params.zIndex)&&void 0!==l?l:Number.MAX_SAFE_INTEGER),this.getDocumentModel().shared.closeIcon&&(this.closeIconElement=document.createElement("div"),this.closeIconElement.classList.add("cl-content-locker-close-icon"),this.contentLockerContentElement.appendChild(this.closeIconElement),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.contentLockerElement.querySelector(ContentLockerLayout.contentLockerContentSelector)),this.setCloseIconParams(this.isMobileEnv())),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(),this.contentLockerElement.appendChild(this.brandingElement),this.addBrandingElementListeners())}adjustBrandingPosition(){this.brandingElement.style.right="10px",this.brandingElement.style.bottom="10px"}addBlurryBackdrop(e){const t="backdropFilter",n="blur(20px)";e.style[t]=n;const o=new MutationObserver(o=>{o.forEach(o=>{var i;"attributes"===o.type&&"style"===o.attributeName&&((null===(i=e.style[t])||void 0===i?void 0:i.includes(n))||(e.style[t]=n))})});return o.observe(e,{attributes:!0,attributeFilter:["style"]}),()=>o.disconnect()}setCloseIconParams(e){const t=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,t,e)}connect(e,t,n){this.documentElement=e,this.containerElement=t,this.params.disableGlobalScroll&&document.body.classList.add("cl-noscroll"),this.removeBlurryBackdrop=this.addBlurryBackdrop(this.contentLockerElement),this.contentLockerContentElement.appendChild(e),t.appendChild(this.contentLockerElement),this.setConnectedElement(this.contentLockerElement),this.updateScrollbar(this.isMobileEnv()),this.contentLockerContentElement.style.visibility="hidden",n.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.contentLockerContentElement.style.visibility="visible"}),this.sharedUpdateListener=this.documentModel.on(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(()=>{this.setCloseIconParams(this.isMobileEnv())},5)),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,debounce(e=>{this.setCloseIconParams(e.isMobileEnv),this.updateScrollbar(e.isMobileEnv),this.centerContentIfNeeded(this.getCurrentViewIndex())},5));const o=this.params.renderMode===RenderMode.STATIC;return this.centerContentIfNeeded(this.getCurrentViewIndex()),o&&(this.navigationEndListener=this.eventEmitter.on(SysRouterEvent.NAVIGATION_END,()=>{this.centerContentIfNeeded(this.getCurrentViewIndex())})),this.contentLockerElement}disconnect(e){var t,n,o,i;super.disconnect(e),null==e||e(),this.params.disableGlobalScroll&&document.body.classList.remove("cl-noscroll"),null===(t=this.removeBlurryBackdrop)||void 0===t||t.call(this),this.contentLockerElement.remove(),null===(n=this.sharedUpdateListener)||void 0===n||n.off(),null===(o=this.environmentUpdateListener)||void 0===o||o.off(),null===(i=this.navigationEndListener)||void 0===i||i.off()}centerContentIfNeeded(e){const t=this.getDocumentModel().views[e],n=this.isMobileEnv()?t.props.adaptiveStyles.mobile[0].styleAttributes:t.props.adaptiveStyles.desktop[0].styleAttributes;"100%"===n.width&&"100%"===n.height?this.resetCustomContentSize():this.setCustomSizeForContent(n)}resetCustomContentSize(){this.originalDocumentElementStyles&&(this.documentElement.style.width=this.originalDocumentElementStyles.width,this.documentElement.style.minWidth=this.originalDocumentElementStyles.minWidth,this.documentElement.style.height=this.originalDocumentElementStyles.height,this.documentElement.style.minHeight=this.originalDocumentElementStyles.minHeight),this.contentLockerElement.style.display="",this.contentLockerElement.style.justifyContent="",this.contentLockerElement.style.alignItems="",this.contentLockerContentElement.style.width="100%",this.contentLockerContentElement.style.minWidth="",this.contentLockerContentElement.style.height="100%",this.contentLockerContentElement.style.minHeight=""}setCustomSizeForContent(e){this.originalDocumentElementStyles={width:this.documentElement.style.width,minWidth:this.documentElement.style.minWidth,height:this.documentElement.style.height,minHeight:this.documentElement.style.minHeight},this.documentElement.style.width=e.width,this.documentElement.style.minWidth=e.minWidth,this.documentElement.style.height=e.height,this.documentElement.style.minHeight=e.minHeight,this.contentLockerElement.style.display="flex",this.contentLockerElement.style.justifyContent="center",this.contentLockerElement.style.alignItems="center",this.contentLockerContentElement.style.width=e.width,this.contentLockerContentElement.style.minWidth=e.minWidth,this.contentLockerContentElement.style.height=e.height,this.contentLockerContentElement.style.minHeight=e.minHeight}updateScrollbar(e){if(this.params.disableScrollbarCalculation)return;const t=this.getViewContentContainer();if(!t||!this.getDocumentModel().shared.actualSize)return;const n=this.getActualSizeByEnv(e);if(!n)return;const o=this.getContainerElementHeight();o>parseFloat(n.height)||(t.style.overflowY="auto",t.style.overflowX="hidden",t.style.minHeight=`${o}px`,this.changeViewAlignToTop())}_getTemplate(e){return`\n      <div class="cl-content-locker">\n        <style>\n        .cl-content-locker {\n          display: block;\n          top: 0;\n          left: 0;\n          bottom: 0;\n          right: 0;\n          width: 100%;\n          height: 100%;\n        }\n\n        ${e.disabled?this.getDisabledWidgetStyles(ContentLockerLayout.contentLockerSelector):""}\n\n        .cl-content-locker-content {\n            width: 100%;\n            height: 100%;\n            min-height: fit-content;\n        }\n\n        .cl-noscroll {\n          overflow: hidden !important;\n        }\n\n        .cl-content-locker-close-icon {\n          z-index: 99;\n          position: absolute;\n          cursor: pointer;\n        }\n\n        ${this.getBrandingStyles()}\n\n        </style>\n\n          <div class="cl-content-locker-content"></div>\n      </div>`}}ContentLockerLayout.contentLockerSelector=".cl-content-locker",ContentLockerLayout.contentLockerContentSelector=".cl-content-locker-content",ContentLockerLayout.contentLockerCloseIconSelector=".cl-content-locker-close-icon";export default ContentLockerLayout;

package/layouts/detached/DialogLayout.js

@@ -1 +1 @@
-import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import DocumentConnectorEventType from"../../DocumentConnectorEventType";import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import debounce from"@claspo/common/async/debounce";export default class DialogLayout extends LayoutWithCloseIcon{constructor(e,t,n,i,o){var s;super(e,t,n,i,o),this.entryAndDestroyAnimationDurationInSeconds=.3,this.widgetIsShown=!1,this.zIndex=this.params.zIndex,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.style.zIndex=this.zIndex,this.dialogElement.setAttribute("cl-connector-root-element",LayoutType.DETACHED),this.params.formVariantId&&this.dialogElement.setAttribute("cl-widget-id",this.params.formVariantId),this.dialogElement.style.position=null!==(s=this.params.displayPosition)&&void 0!==s?s:"fixed",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.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(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.showDialog()}),this.documentElement=e,this.containerElement=t,this.params.disableGlobalScroll&&document.body.classList.add("cl-noscroll");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(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(()=>{this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel()),this.setCloseIconParams(this.isMobileEnv())},5)),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,debounce(e=>{this.setCloseIconParams(e.isMobileEnv),this.updateScrollbar(e.isMobileEnv)},5)),this.dialogElement}disconnect(e){super.disconnect(e),window.removeEventListener("keyup",this.boundEscapeListener);const t=()=>{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 t();const n=this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector);this.dialogElement.style.animation=`fadeInDialog ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out reverse`,n.style.animation=`zoomInContent ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out reverse`,setTimeout(()=>{this.params.disableGlobalScroll&&document.body.classList.remove("cl-noscroll"),t()},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 i=.9*this.getContainerElementHeight();i>parseFloat(n.height)||(t.style.overflowY="auto",t.style.overflowX="hidden",this._extendContainerOuterSizeToFitInnerContentShadows(t),this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector).style.maxHeight=`${i}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=""},1e3*this.entryAndDestroyAnimationDurationInSeconds)},50):this.dialogElement.style.visibility="visible"}_extendContainerOuterSizeToFitInnerContentShadows(e){e.style.width="calc(100% + 40px)",e.style.margin="-20px",e.style.padding="20px"}getOtherStyles(){return""}_getTemplate(e){return`\n<div class="cl-dialog">\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  }\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.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";
+import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import DocumentConnectorEventType from"../../DocumentConnectorEventType";import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import debounce from"@claspo/common/async/debounce";class DialogLayout extends LayoutWithCloseIcon{constructor(e,t,n,o,i){var s;super(e,t,n,o,i),this.entryAndDestroyAnimationDurationInSeconds=.3,this.widgetIsShown=!1,this.zIndex=this.params.zIndex,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.style.zIndex=this.zIndex,this.dialogElement.setAttribute("cl-connector-root-element",LayoutType.DETACHED),this.params.formVariantId&&this.dialogElement.setAttribute("cl-widget-id",this.params.formVariantId),this.dialogElement.style.position=null!==(s=this.params.displayPosition)&&void 0!==s?s:"fixed",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.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(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.showDialog()}),this.documentElement=e,this.containerElement=t,this.params.disableGlobalScroll&&document.body.classList.add("cl-noscroll");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(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(()=>{this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel()),this.setCloseIconParams(this.isMobileEnv())},5)),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,debounce(e=>{this.setCloseIconParams(e.isMobileEnv),this.updateScrollbar(e.isMobileEnv)},5)),this.dialogElement}disconnect(e){super.disconnect(e),window.removeEventListener("keyup",this.boundEscapeListener);const t=()=>{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 t();const n=this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector);this.dialogElement.style.animation=`fadeInDialog ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out reverse`,n.style.animation=`zoomInContent ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out reverse`,setTimeout(()=>{this.params.disableGlobalScroll&&document.body.classList.remove("cl-noscroll"),t()},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=""},1e3*this.entryAndDestroyAnimationDurationInSeconds)},50):this.dialogElement.style.visibility="visible"}_extendContainerOuterSizeToFitInnerContentShadows(e){e.style.width="calc(100% + 40px)",e.style.margin="-20px",e.style.padding="20px"}getOtherStyles(){return""}_getTemplate(e){return`\n<div class="cl-dialog">\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  }\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.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/layouts/floating-bar/FloatingBarLayout.js

@@ -1 +1 @@
-import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import{WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";export default class FloatingBarLayout extends LayoutWithCloseIcon{constructor(t,e,i,n,o){super(t,e,i,n,o),this.entryAndDestroyAnimationDurationInSeconds=.3,this.zIndex=this.params.zIndex,this.floatingBarRootElement=document.createElement("div"),this.floatingBarRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.floatingBarElement=this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarSelector),this.floatingBarElement.setAttribute("cl-connector-root-element",LayoutType.FLOATING_BAR),this.params.formVariantId&&this.floatingBarElement.setAttribute("cl-widget-id",this.params.formVariantId);const s=this.isMobileEnv();this.closeIconElement=this.floatingBarElement.querySelector(FloatingBarLayout.floatingBarCloseIconSelector),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarContentSelector)),this.setCloseIconParams(s),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(s),this.floatingBarElement.appendChild(this.brandingElement),this.addBrandingElementListeners())}getSharedParams(){return this.getDocumentModel().shared.floatingBar}isBottomPosition(t){return t.verticalPosition===WidgetVerticalPosition.BOTTOM}adjustBrandingPosition(t){const e=this.getSharedParams(),i=t?e.mobile:e.desktop;this.brandingElement.style.right="10px",this.brandingElement.style.zIndex="2",this.isBottomPosition(i)?this.brandingElement.style.top="-30px":this.brandingElement.style.bottom="-30px"}clearPosition(){var t;this.floatingBarElement.removeAttribute("style"),this.floatingBarElement.style.zIndex=this.zIndex,this.floatingBarElement.style.position=null!==(t=this.params.displayPosition)&&void 0!==t?t:"fixed",this.modifiedFloatingElement&&(this.modifiedFloatingElement.style.top=this.originalModifiedFloatingElementTop)}restoreHtmlBodyStyles(){this.modifiedHtmlBodyElement&&this.originalHtmlBodyElementMarginTop&&(this.modifiedHtmlBodyElement.style.marginTop=this.originalHtmlBodyElementMarginTop)}setTopPosition(t){this.floatingBarElement.style.left="0px",this.floatingBarElement.style.top="0px"}setBottomPosition(t){this.floatingBarElement.style.left="0px",this.floatingBarElement.style.bottom="0px"}setPosition(t){this.clearPosition(),this.restoreHtmlBodyStyles();const e=this.getSharedParams(),i=t?e.mobile:e.desktop,n=this.isBottomPosition(i);return n?(this.setBottomPosition(i),{isBottomPosition:n}):(this._setTopPosition(t,i),{isBottomPosition:n})}getOtherStyles(){return""}_setTopPosition(t,e){if(this.modifiedFloatingElement=null,this.modifiedHtmlBodyElement=null,this.calculatedOverflowAbove=0,"body"!==this.containerElement.tagName.toLowerCase()||!this.getDocumentModel().shared.actualSize||this.params.disableSmartPosition)return void this.setTopPosition(e);const i=this.getActualSizeByEnv(t);if(!i)return void this.setTopPosition(e);const n=i.height,o=parseFloat(n),s=this.containerElement.getRootNode(),a=this._getElementAtTheTopOfTheViewport(s);if(a){const t=this._findFloatingElement(a);if(t){const e=this._getVisualOverflowAbove(t);this.calculatedOverflowAbove=e;const i=o+e;this.modifiedFloatingElement=t,this.originalModifiedFloatingElementTop=getComputedStyle(t).top,t.style.top=i+"px"}}this.modifiedHtmlBodyElement=s.body,this.originalHtmlBodyElementMarginTop=getComputedStyle(this.modifiedHtmlBodyElement).marginTop;const l=o+this.calculatedOverflowAbove;this.modifiedHtmlBodyElement.style.marginTop=l+"px",this.setTopPosition(e)}_getElementAtTheTopOfTheViewport(t){const e=this.getViewportWidth(t,t.defaultView||t.parentWindow)/2,i=t.elementFromPoint(e,0);return i!==t.body?i:t.elementFromPoint(e,50)}_findFloatingElement(t){let e=t,i=null;for(;e;){const t=getComputedStyle(e);if(!(e&&e.getAttribute("cl-connector-root-element"))&&"fixed"===t.position||"sticky"===t.position){i=e;break}e=e.parentElement}return i}_getVisualOverflowAbove(t){const e=t.getBoundingClientRect();let i=e.top;const n=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,null);let o;for(;o=n.nextNode();){let n=0,s=o;for(;s!==t&&n<10;)s=s.parentElement,n++;if(n>=10)continue;const a=getComputedStyle(o);if("none"===a.display||"hidden"===a.visibility||0===parseFloat(a.opacity))continue;const l=o.getBoundingClientRect();l.right>e.left+.1*e.width&&l.left<e.right-.1*e.width&&(l.height>0&&l.width>0&&l.top<i&&l.top>e.top-150&&(i=l.top))}return Math.max(0,e.top-i)}setCloseIconParams(t){const e=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,e,t)}connect(t,e,i){this.containerElement=e,this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarContentSelector).appendChild(t),e.appendChild(this.floatingBarElement),this.setConnectedElement(this.floatingBarElement);const{isBottomPosition:n}=this.setPosition(this.isMobileEnv());return this.floatingBarElement.style.visibility="hidden",i.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.floatingBarElement.style.visibility="visible",this.playEntryAnimation(n)}),this.sharedUpdateListener=this.documentModel.on(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(()=>{const t=this.isMobileEnv();this.setPosition(t),this.setCloseIconParams(t)},5)),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,debounce(t=>{this.setPosition(t.isMobileEnv),this.setCloseIconParams(t.isMobileEnv)},5)),this.floatingBarElement}disconnect(t){super.disconnect(t);const e=()=>{var e,i;null==t||t(),this.clearPosition(),this.floatingBarElement.remove(),null===(e=this.sharedUpdateListener)||void 0===e||e.off(),null===(i=this.environmentUpdateListener)||void 0===i||i.off()};if(this.restoreHtmlBodyStyles(),this.params.disableLayoutAnimations)return void e();const i=this.getSharedParams(),n=this.isMobileEnv()?i.mobile:i.desktop,o=this.isBottomPosition(n)?"slideInBottom":"slideInTop";this.floatingBarElement.style.animation=`${o} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out reverse`,setTimeout(()=>{e()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}_getTemplate(t){return`\n      <div class="cl-floating-bar">\n        <style>\n        .cl-floating-bar {\n          width: 100%;\n        }\n\n        ${t.disabled?this.getDisabledWidgetStyles(FloatingBarLayout.floatingBarSelector):""}\n\n        .cl-floating-bar-inner-content {\n           position: relative;\n           max-width: 100vw;\n           z-index: 1;\n        }\n\n        .cl-floating-bar-close-icon {\n          position: absolute;\n          cursor: pointer;\n          z-index: 99;\n        }\n\n      ${this.getOtherStyles()}\n\n       ${this.getBrandingStyles()}\n       \n       ${this.getEntryAndDestroyAnimations()}\n        </style>\n\n        <div class="cl-floating-bar-inner-content">\n          <div class="cl-floating-bar-close-icon"></div>\n          <div class="cl-floating-bar-content"></div>\n        </div>\n      </div>\n    `}playEntryAnimation(t){if(!this.params.disableEntryAnimation&&!this.params.disableLayoutAnimations){const e=t?"slideInBottom":"slideInTop";this.floatingBarElement.style.animation=`${e} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out forwards`,setTimeout(()=>{this.floatingBarElement.style.animation=""},1e3*this.entryAndDestroyAnimationDurationInSeconds)}}getEntryAndDestroyAnimations(){return"\n@keyframes slideInTop {\n  0% {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n    \n@keyframes slideInBottom {\n  0% {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n    "}}FloatingBarLayout.floatingBarSelector=".cl-floating-bar",FloatingBarLayout.floatingBarContentSelector=".cl-floating-bar-content",FloatingBarLayout.floatingBarCloseIconSelector=".cl-floating-bar-close-icon";
+import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import{WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";class FloatingBarLayout extends LayoutWithCloseIcon{constructor(t,e,i,n,o){super(t,e,i,n,o),this.entryAndDestroyAnimationDurationInSeconds=.3,this.zIndex=this.params.zIndex,this.floatingBarRootElement=document.createElement("div"),this.floatingBarRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.floatingBarElement=this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarSelector),this.floatingBarElement.setAttribute("cl-connector-root-element",LayoutType.FLOATING_BAR),this.params.formVariantId&&this.floatingBarElement.setAttribute("cl-widget-id",this.params.formVariantId);const s=this.isMobileEnv();this.closeIconElement=this.floatingBarElement.querySelector(FloatingBarLayout.floatingBarCloseIconSelector),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarContentSelector)),this.setCloseIconParams(s),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(s),this.floatingBarElement.appendChild(this.brandingElement),this.addBrandingElementListeners())}getSharedParams(){return this.getDocumentModel().shared.floatingBar}isBottomPosition(t){return t.verticalPosition===WidgetVerticalPosition.BOTTOM}adjustBrandingPosition(t){const e=this.getSharedParams(),i=t?e.mobile:e.desktop;this.brandingElement.style.right="10px",this.brandingElement.style.zIndex="2",this.isBottomPosition(i)?this.brandingElement.style.top="-30px":this.brandingElement.style.bottom="-30px"}clearPosition(){var t;this.floatingBarElement.removeAttribute("style"),this.floatingBarElement.style.zIndex=this.zIndex,this.floatingBarElement.style.position=null!==(t=this.params.displayPosition)&&void 0!==t?t:"fixed",this.modifiedFloatingElement&&(this.modifiedFloatingElement.style.top=this.originalModifiedFloatingElementTop)}restoreHtmlBodyStyles(){this.modifiedHtmlBodyElement&&this.originalHtmlBodyElementMarginTop&&(this.modifiedHtmlBodyElement.style.marginTop=this.originalHtmlBodyElementMarginTop)}setTopPosition(t){this.floatingBarElement.style.left="0px",this.floatingBarElement.style.top="0px"}setBottomPosition(t){this.floatingBarElement.style.left="0px",this.floatingBarElement.style.bottom="0px"}setPosition(t){this.clearPosition(),this.restoreHtmlBodyStyles();const e=this.getSharedParams(),i=t?e.mobile:e.desktop,n=this.isBottomPosition(i);return n?(this.setBottomPosition(i),{isBottomPosition:n}):(this._setTopPosition(t,i),{isBottomPosition:n})}getOtherStyles(){return""}_setTopPosition(t,e){if(this.modifiedFloatingElement=null,this.modifiedHtmlBodyElement=null,this.calculatedOverflowAbove=0,"body"!==this.containerElement.tagName.toLowerCase()||!this.getDocumentModel().shared.actualSize||this.params.disableSmartPosition)return void this.setTopPosition(e);const i=this.getActualSizeByEnv(t);if(!i)return void this.setTopPosition(e);const n=i.height,o=parseFloat(n),s=this.containerElement.getRootNode(),a=this._getElementAtTheTopOfTheViewport(s);if(a){const t=this._findFloatingElement(a);if(t){const e=this._getVisualOverflowAbove(t);this.calculatedOverflowAbove=e;const i=o+e;this.modifiedFloatingElement=t,this.originalModifiedFloatingElementTop=getComputedStyle(t).top,t.style.top=i+"px"}}this.modifiedHtmlBodyElement=s.body,this.originalHtmlBodyElementMarginTop=getComputedStyle(this.modifiedHtmlBodyElement).marginTop;const l=o+this.calculatedOverflowAbove;this.modifiedHtmlBodyElement.style.marginTop=l+"px",this.setTopPosition(e)}_getElementAtTheTopOfTheViewport(t){const e=this.getViewportWidth(t,t.defaultView||t.parentWindow)/2,i=t.elementFromPoint(e,0);return i!==t.body?i:t.elementFromPoint(e,50)}_findFloatingElement(t){let e=t,i=null;for(;e;){const t=getComputedStyle(e);if(!(e&&e.getAttribute("cl-connector-root-element"))&&"fixed"===t.position||"sticky"===t.position){i=e;break}e=e.parentElement}return i}_getVisualOverflowAbove(t){const e=t.getBoundingClientRect();let i=e.top;const n=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,null);let o;for(;o=n.nextNode();){let n=0,s=o;for(;s!==t&&n<10;)s=s.parentElement,n++;if(n>=10)continue;const a=getComputedStyle(o);if("none"===a.display||"hidden"===a.visibility||0===parseFloat(a.opacity))continue;const l=o.getBoundingClientRect();l.right>e.left+.1*e.width&&l.left<e.right-.1*e.width&&(l.height>0&&l.width>0&&l.top<i&&l.top>e.top-150&&(i=l.top))}return Math.max(0,e.top-i)}setCloseIconParams(t){const e=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,e,t)}connect(t,e,i){this.containerElement=e,this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarContentSelector).appendChild(t),e.appendChild(this.floatingBarElement),this.setConnectedElement(this.floatingBarElement);const{isBottomPosition:n}=this.setPosition(this.isMobileEnv());return this.floatingBarElement.style.visibility="hidden",i.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.floatingBarElement.style.visibility="visible",this.playEntryAnimation(n)}),this.sharedUpdateListener=this.documentModel.on(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(()=>{const t=this.isMobileEnv();this.setPosition(t),this.setCloseIconParams(t)},5)),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,debounce(t=>{this.setPosition(t.isMobileEnv),this.setCloseIconParams(t.isMobileEnv)},5)),this.floatingBarElement}disconnect(t){super.disconnect(t);const e=()=>{var e,i;null==t||t(),this.clearPosition(),this.floatingBarElement.remove(),null===(e=this.sharedUpdateListener)||void 0===e||e.off(),null===(i=this.environmentUpdateListener)||void 0===i||i.off()};if(this.restoreHtmlBodyStyles(),this.params.disableLayoutAnimations)return void e();const i=this.getSharedParams(),n=this.isMobileEnv()?i.mobile:i.desktop,o=this.isBottomPosition(n)?"slideInBottom":"slideInTop";this.floatingBarElement.style.animation=`${o} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out reverse`,setTimeout(()=>{e()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}_getTemplate(t){return`\n      <div class="cl-floating-bar">\n        <style>\n        .cl-floating-bar {\n          width: 100%;\n        }\n\n        ${t.disabled?this.getDisabledWidgetStyles(FloatingBarLayout.floatingBarSelector):""}\n\n        .cl-floating-bar-inner-content {\n           position: relative;\n           max-width: 100vw;\n           z-index: 1;\n        }\n\n        .cl-floating-bar-close-icon {\n          position: absolute;\n          cursor: pointer;\n          z-index: 99;\n        }\n\n      ${this.getOtherStyles()}\n\n       ${this.getBrandingStyles()}\n       \n       ${this.getEntryAndDestroyAnimations()}\n        </style>\n\n        <div class="cl-floating-bar-inner-content">\n          <div class="cl-floating-bar-close-icon"></div>\n          <div class="cl-floating-bar-content"></div>\n        </div>\n      </div>\n    `}playEntryAnimation(t){if(!this.params.disableEntryAnimation&&!this.params.disableLayoutAnimations){const e=t?"slideInBottom":"slideInTop";this.floatingBarElement.style.animation=`${e} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out forwards`,setTimeout(()=>{this.floatingBarElement.style.animation=""},1e3*this.entryAndDestroyAnimationDurationInSeconds)}}getEntryAndDestroyAnimations(){return"\n@keyframes slideInTop {\n  0% {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n    \n@keyframes slideInBottom {\n  0% {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n    "}}FloatingBarLayout.floatingBarSelector=".cl-floating-bar",FloatingBarLayout.floatingBarContentSelector=".cl-floating-bar-content",FloatingBarLayout.floatingBarCloseIconSelector=".cl-floating-bar-close-icon";export default FloatingBarLayout;

package/layouts/floating-box/FloatingBoxLayout.js

@@ -1 +1 @@
-import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import{WidgetHorizontalPosition,WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";import{WidgetType}from"@claspo/common/WidgetType";export default class FloatingBoxLayout extends LayoutWithCloseIcon{constructor(t,e,o,i,n){super(t,e,o,i,n),this.entryAndDestroyAnimationDurationInSeconds=.3,this.widgetIsShown=!1,this._onZoomChange=()=>{this.setPosition(this.isMobileEnv()),this.setCloseIconParams(this.isMobileEnv())},this.zIndex=this.params.zIndex,this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel()),this.floatingBoxRootElement=document.createElement("div"),this.floatingBoxRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.floatingBoxElement=this.floatingBoxRootElement.querySelector(FloatingBoxLayout.floatingBoxSelector),this.floatingBoxElement.setAttribute("cl-connector-root-element",LayoutType.FLOATING_BOX),this.params.formVariantId&&this.floatingBoxElement.setAttribute("cl-widget-id",this.params.formVariantId),this.closeIconElement=this.floatingBoxElement.querySelector(FloatingBoxLayout.floatingBoxCloseIconSelector),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.floatingBoxRootElement.querySelector(FloatingBoxLayout.floatingBoxContentSelector)),this.setCloseIconParams(this.isMobileEnv()),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(),this.floatingBoxElement.appendChild(this.brandingElement),this.addBrandingElementListeners())}adjustBrandingPosition(){this.brandingElement.style.bottom="-30px",this.brandingElement.style.right="0"}clearPosition(){var t;this.floatingBoxElement.removeAttribute("style"),this.floatingBoxElement.style.zIndex=this.zIndex,this.floatingBoxElement.style.position=null!==(t=this.params.displayPosition)&&void 0!==t?t:"fixed"}getMinVerticalOffset(){return this.params.branded?32:0}getVerticalOffset(t){const e=this.getDocumentModel().shared.floatingBox,o=t?e.mobile.verticalOffset:e.verticalOffset,i=this.getMinVerticalOffset();return parseFloat(o)<i?`${i}px`:o}setPosition(t){this.clearPosition();const e=this.getDocumentModel().shared.floatingBox,o=this.getActualSizeByEnv(t);let i=t?e.mobile.horizontalOffset:e.horizontalOffset;const n=t?e.mobile.verticalPosition:e.verticalPosition,s={horizontalPosition:t?e.mobile.horizontalPosition:e.horizontalPosition,verticalPosition:n,horizontalOffset:i,verticalOffset:this.getVerticalOffset(t),actualSizeByEnv:o};this.params.widgetType===WidgetType.TEASER?(this.setTeaserPosition(s),this.floatingBoxElement.style.cursor="pointer"):this.setRegularPosition(s)}setTeaserPosition(t){const{horizontalPosition:e,verticalPosition:o,actualSizeByEnv:i}=t;let n=t.horizontalOffset;if(o===WidgetVerticalPosition.CENTER&&e===WidgetHorizontalPosition.RIGHT&&i&&(n=`${parseFloat(i.height)+parseFloat(n)}px`),this.setHorizontalPosition(Object.assign(Object.assign({},t),{horizontalOffset:n})),o===WidgetVerticalPosition.CENTER)if(i&&this.containerElement){const t=parseFloat(i.width),o=this.getContainerHeight(),n=e===WidgetHorizontalPosition.LEFT?t/2:-t/2;this.floatingBoxElement.style.top=`${o/2+n}px`,this.floatingBoxElement.style.transform=FloatingBoxLayout.verticalCenterPositionRotationCss,this.floatingBoxElement.style.transformOrigin=e===WidgetHorizontalPosition.LEFT?"left top":"right top"}else this.setVerticalPositionFallback();else this.setVerticalPositionNearScreenEdge(t)}setRegularPosition(t){const{verticalPosition:e,actualSizeByEnv:o}=t;if(this.setHorizontalPosition(t),e===WidgetVerticalPosition.CENTER)if(o&&this.containerElement){const t=parseFloat(o.height),e=this.getContainerHeight();this.floatingBoxElement.style.top=e/2-t/2+"px"}else this.setVerticalPositionFallback();else this.setVerticalPositionNearScreenEdge(t)}setVerticalPositionFallback(){this.floatingBoxElement.style.bottom="20px"}setVerticalPositionNearScreenEdge(t){const{verticalPosition:e,verticalOffset:o}=t;this.floatingBoxElement.style[e.toLowerCase()]=o}getContainerHeight(){return"BODY"===this.containerElement.tagName?(this.containerElement.ownerDocument.defaultView||this.containerElement.ownerDocument.parentWindow).innerHeight:this.containerElement.clientHeight}setHorizontalPosition(t){const{horizontalPosition:e,horizontalOffset:o,actualSizeByEnv:i}=t;if(e===WidgetHorizontalPosition.CENTER)if(i&&this.containerElement){const t=parseFloat(i.width),e=this.containerElement.getBoundingClientRect().width;this.floatingBoxElement.style.left=e/2-t/2+"px"}else this.floatingBoxElement.style.left="20px";else this.floatingBoxElement.style[e.toLowerCase()]=o}migrateDocumentModel(t){return t=this.migrateCloseIconParams(t),t=this.migrateMobilePosition(t)}migrateMobilePosition(t){var e;if(null===(e=t.shared.floatingBox)||void 0===e?void 0:e.mobile)return t;const o={verticalPosition:WidgetVerticalPosition.BOTTOM,horizontalPosition:WidgetHorizontalPosition.LEFT,verticalOffset:this.getMinVerticalOffset(),horizontalOffset:"0px"};return Object.assign(Object.assign({},t),{shared:Object.assign(Object.assign({},t.shared),{floatingBox:Object.assign(Object.assign({},t.shared.floatingBox),{mobile:Object.assign({},o)})})})}migrateCloseIconParams(t){if(t.shared.closeIcon)return t;const e=this.getDefaultCloseIconParams();return Object.assign(Object.assign({},t),{shared:Object.assign(Object.assign({},t.shared),{closeIcon:Object.assign(Object.assign({},e),{desktop:Object.assign(Object.assign({},e.desktop),{color:"rgb(0, 0, 0)"}),mobile:Object.assign(Object.assign({},e.mobile),{color:"rgb(0, 0, 0)"})})})})}setCloseIconParams(t){const e=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,e,t)}connect(t,e,o){return this.documentElement=t,this.containerElement=e,this.floatingBoxRootElement.querySelector(FloatingBoxLayout.floatingBoxContentSelector).appendChild(t),e.appendChild(this.floatingBoxElement),this.setConnectedElement(this.floatingBoxElement),this.floatingBoxElement.style.visibility="hidden",o.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{setTimeout(()=>{const t=this.isMobileEnv();this.setPosition(t),this.showFloatingBox(t)})}),this.updateScrollbar(this.isMobileEnv()),this.sharedUpdateListener=this.documentModel.on(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(()=>{this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel());const t=this.isMobileEnv();this.setPosition(t),this.setCloseIconParams(t)},5)),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,debounce(t=>{this.setPosition(t.isMobileEnv),this.setCloseIconParams(t.isMobileEnv),this.updateScrollbar(t.isMobileEnv)},5)),window.addEventListener("resize",this._onZoomChange),this.floatingBoxElement}disconnect(t){super.disconnect(t);const e=()=>{var e,o;null==t||t(),this.floatingBoxElement.remove(),null===(e=this.sharedUpdateListener)||void 0===e||e.off(),null===(o=this.environmentUpdateListener)||void 0===o||o.off(),window.removeEventListener("resize",this._onZoomChange)};if(this.params.disableLayoutAnimations)return void e();const o=this.getEntryAnimationName(this.isMobileEnv());this.floatingBoxElement.style.animation=`${o} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out reverse`,setTimeout(()=>{e()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}getDocumentModel(){return this.migratedDocumentModel||super.getDocumentModel()}showFloatingBox(t){if(!this.widgetIsShown&&(this.widgetIsShown=!0,this.floatingBoxElement.style.visibility="visible",!this.params.disableEntryAnimation&&!this.params.disableLayoutAnimations)){const e=this.getEntryAnimationName(t);this.floatingBoxElement.style.animation=`${e} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out forwards`,setTimeout(()=>{this.floatingBoxElement.style.animation=""},1e3*this.entryAndDestroyAnimationDurationInSeconds)}}getEntryAnimationName(t){const e=this.getDocumentModel().shared.floatingBox,o=t?e.mobile.verticalPosition:e.verticalPosition,i=t?e.mobile.horizontalPosition:e.horizontalPosition,n=this.getActualSizeByEnv(t);return o===WidgetVerticalPosition.CENTER&&n&&this.containerElement?i===WidgetHorizontalPosition.LEFT?this.params.widgetType===WidgetType.TEASER?"slideInLeftTeaser":"slideInLeftRegular":this.params.widgetType===WidgetType.TEASER?"slideInRightTeaser":"slideInRightRegular":o===WidgetVerticalPosition.TOP?"slideInTop":"slideInBottom"}updateScrollbar(t){if(this.params.disableScrollbarCalculation)return;const e=this.getViewContentContainer();if(!e)return;const o=this.getActualSizeByEnv(t);if(!o)return;const i=parseFloat(this.closeIconElement.style.top),n=this.getVerticalOffset(t),s=parseFloat(n),a=this.getContainerElementHeight()-(i>0?0:Math.abs(i))-s;a>parseFloat(o.height)||(e.style.overflowY="auto",e.style.overflowX="hidden",e.style.maxHeight=`${a}px`,this.changeViewAlignToTop())}_getTemplate(t){return`\n<div class="cl-floating-box">\n  <style>\n  ${t.disabled?this.getDisabledWidgetStyles(FloatingBoxLayout.floatingBoxSelector):""}\n\n  .cl-floating-box-inner-content {\n     position: relative;\n     max-width: 100vw;\n     z-index: 1;\n  }\n\n  .cl-floating-box-close-icon {\n    position: absolute;\n    cursor: pointer;\n    z-index: 99;\n  }\n\n  ${this.getBrandingStyles()}\n\n  ${this.getEntryAndDestroyAnimations()}\n  </style>\n\n  <div class="cl-floating-box-inner-content">\n    <div class="cl-floating-box-close-icon"></div>\n    <div class="cl-floating-box-content"></div>\n  </div>\n</div>\n`}getEntryAndDestroyAnimations(){return`\n@keyframes slideInTop {\n  0% {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}    \n    \n@keyframes slideInBottom {\n  0% {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideInLeftTeaser {\n  0% {\n    opacity: 0;\n    transform: translateX(-100%) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n    transform-origin: left top;\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n    transform-origin: left top;\n  }\n}\n\n@keyframes slideInRightTeaser {\n  0% {\n    opacity: 0;\n    transform: translateX(100%) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n    transform-origin: right top;\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n    transform-origin: right top;\n  }\n}\n\n@keyframes slideInLeftRegular {\n  0% {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideInRightRegular {\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n    `}}FloatingBoxLayout.floatingBoxSelector=".cl-floating-box",FloatingBoxLayout.floatingBoxContentSelector=".cl-floating-box-content",FloatingBoxLayout.floatingBoxCloseIconSelector=".cl-floating-box-close-icon",FloatingBoxLayout.verticalCenterPositionRotationCss="rotate(-90deg)";
+import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import{WidgetHorizontalPosition,WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";import{WidgetType}from"@claspo/common/WidgetType";class FloatingBoxLayout extends LayoutWithCloseIcon{constructor(t,e,o,i,n){super(t,e,o,i,n),this.entryAndDestroyAnimationDurationInSeconds=.3,this.widgetIsShown=!1,this._onZoomChange=()=>{this.setPosition(this.isMobileEnv()),this.setCloseIconParams(this.isMobileEnv())},this.zIndex=this.params.zIndex,this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel()),this.floatingBoxRootElement=document.createElement("div"),this.floatingBoxRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.floatingBoxElement=this.floatingBoxRootElement.querySelector(FloatingBoxLayout.floatingBoxSelector),this.floatingBoxElement.setAttribute("cl-connector-root-element",LayoutType.FLOATING_BOX),this.params.formVariantId&&this.floatingBoxElement.setAttribute("cl-widget-id",this.params.formVariantId),this.closeIconElement=this.floatingBoxElement.querySelector(FloatingBoxLayout.floatingBoxCloseIconSelector),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.floatingBoxRootElement.querySelector(FloatingBoxLayout.floatingBoxContentSelector)),this.setCloseIconParams(this.isMobileEnv()),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(),this.floatingBoxElement.appendChild(this.brandingElement),this.addBrandingElementListeners())}adjustBrandingPosition(){this.brandingElement.style.bottom="-30px",this.brandingElement.style.right="0"}clearPosition(){var t;this.floatingBoxElement.removeAttribute("style"),this.floatingBoxElement.style.zIndex=this.zIndex,this.floatingBoxElement.style.position=null!==(t=this.params.displayPosition)&&void 0!==t?t:"fixed"}getMinVerticalOffset(){return this.params.branded?32:0}getVerticalOffset(t){const e=this.getDocumentModel().shared.floatingBox,o=t?e.mobile.verticalOffset:e.verticalOffset,i=this.getMinVerticalOffset();return parseFloat(o)<i?`${i}px`:o}setPosition(t){this.clearPosition();const e=this.getDocumentModel().shared.floatingBox,o=this.getActualSizeByEnv(t);let i=t?e.mobile.horizontalOffset:e.horizontalOffset;const n=t?e.mobile.verticalPosition:e.verticalPosition,s={horizontalPosition:t?e.mobile.horizontalPosition:e.horizontalPosition,verticalPosition:n,horizontalOffset:i,verticalOffset:this.getVerticalOffset(t),actualSizeByEnv:o};this.params.widgetType===WidgetType.TEASER?(this.setTeaserPosition(s),this.floatingBoxElement.style.cursor="pointer"):this.setRegularPosition(s)}setTeaserPosition(t){const{horizontalPosition:e,verticalPosition:o,actualSizeByEnv:i}=t;let n=t.horizontalOffset;if(o===WidgetVerticalPosition.CENTER&&e===WidgetHorizontalPosition.RIGHT&&i&&(n=`${parseFloat(i.height)+parseFloat(n)}px`),this.setHorizontalPosition(Object.assign(Object.assign({},t),{horizontalOffset:n})),o===WidgetVerticalPosition.CENTER)if(i&&this.containerElement){const t=parseFloat(i.width),o=this.getContainerHeight(),n=e===WidgetHorizontalPosition.LEFT?t/2:-t/2;this.floatingBoxElement.style.top=`${o/2+n}px`,this.floatingBoxElement.style.transform=FloatingBoxLayout.verticalCenterPositionRotationCss,this.floatingBoxElement.style.transformOrigin=e===WidgetHorizontalPosition.LEFT?"left top":"right top"}else this.setVerticalPositionFallback();else this.setVerticalPositionNearScreenEdge(t)}setRegularPosition(t){const{verticalPosition:e,actualSizeByEnv:o}=t;if(this.setHorizontalPosition(t),e===WidgetVerticalPosition.CENTER)if(o&&this.containerElement){const t=parseFloat(o.height),e=this.getContainerHeight();this.floatingBoxElement.style.top=e/2-t/2+"px"}else this.setVerticalPositionFallback();else this.setVerticalPositionNearScreenEdge(t)}setVerticalPositionFallback(){this.floatingBoxElement.style.bottom="20px"}setVerticalPositionNearScreenEdge(t){const{verticalPosition:e,verticalOffset:o}=t;this.floatingBoxElement.style[e.toLowerCase()]=o}getContainerHeight(){return"BODY"===this.containerElement.tagName?(this.containerElement.ownerDocument.defaultView||this.containerElement.ownerDocument.parentWindow).innerHeight:this.containerElement.clientHeight}setHorizontalPosition(t){const{horizontalPosition:e,horizontalOffset:o,actualSizeByEnv:i}=t;if(e===WidgetHorizontalPosition.CENTER)if(i&&this.containerElement){const t=parseFloat(i.width),e=this.containerElement.getBoundingClientRect().width;this.floatingBoxElement.style.left=e/2-t/2+"px"}else this.floatingBoxElement.style.left="20px";else this.floatingBoxElement.style[e.toLowerCase()]=o}migrateDocumentModel(t){return t=this.migrateCloseIconParams(t),t=this.migrateMobilePosition(t)}migrateMobilePosition(t){var e;if(null===(e=t.shared.floatingBox)||void 0===e?void 0:e.mobile)return t;const o={verticalPosition:WidgetVerticalPosition.BOTTOM,horizontalPosition:WidgetHorizontalPosition.LEFT,verticalOffset:this.getMinVerticalOffset(),horizontalOffset:"0px"};return Object.assign(Object.assign({},t),{shared:Object.assign(Object.assign({},t.shared),{floatingBox:Object.assign(Object.assign({},t.shared.floatingBox),{mobile:Object.assign({},o)})})})}migrateCloseIconParams(t){if(t.shared.closeIcon)return t;const e=this.getDefaultCloseIconParams();return Object.assign(Object.assign({},t),{shared:Object.assign(Object.assign({},t.shared),{closeIcon:Object.assign(Object.assign({},e),{desktop:Object.assign(Object.assign({},e.desktop),{color:"rgb(0, 0, 0)"}),mobile:Object.assign(Object.assign({},e.mobile),{color:"rgb(0, 0, 0)"})})})})}setCloseIconParams(t){const e=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,e,t)}connect(t,e,o){return this.documentElement=t,this.containerElement=e,this.floatingBoxRootElement.querySelector(FloatingBoxLayout.floatingBoxContentSelector).appendChild(t),e.appendChild(this.floatingBoxElement),this.setConnectedElement(this.floatingBoxElement),this.floatingBoxElement.style.visibility="hidden",o.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{setTimeout(()=>{const t=this.isMobileEnv();this.setPosition(t),this.showFloatingBox(t)})}),this.updateScrollbar(this.isMobileEnv()),this.sharedUpdateListener=this.documentModel.on(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(()=>{this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel());const t=this.isMobileEnv();this.setPosition(t),this.setCloseIconParams(t)},5)),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,debounce(t=>{this.setPosition(t.isMobileEnv),this.setCloseIconParams(t.isMobileEnv),this.updateScrollbar(t.isMobileEnv)},5)),window.addEventListener("resize",this._onZoomChange),this.floatingBoxElement}disconnect(t){super.disconnect(t);const e=()=>{var e,o;null==t||t(),this.floatingBoxElement.remove(),null===(e=this.sharedUpdateListener)||void 0===e||e.off(),null===(o=this.environmentUpdateListener)||void 0===o||o.off(),window.removeEventListener("resize",this._onZoomChange)};if(this.params.disableLayoutAnimations)return void e();const o=this.getEntryAnimationName(this.isMobileEnv());this.floatingBoxElement.style.animation=`${o} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out reverse`,setTimeout(()=>{e()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}getDocumentModel(){return this.migratedDocumentModel||super.getDocumentModel()}showFloatingBox(t){if(!this.widgetIsShown&&(this.widgetIsShown=!0,this.floatingBoxElement.style.visibility="visible",!this.params.disableEntryAnimation&&!this.params.disableLayoutAnimations)){const e=this.getEntryAnimationName(t);this.floatingBoxElement.style.animation=`${e} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out forwards`,setTimeout(()=>{this.floatingBoxElement.style.animation=""},1e3*this.entryAndDestroyAnimationDurationInSeconds)}}getEntryAnimationName(t){const e=this.getDocumentModel().shared.floatingBox,o=t?e.mobile.verticalPosition:e.verticalPosition,i=t?e.mobile.horizontalPosition:e.horizontalPosition,n=this.getActualSizeByEnv(t);return o===WidgetVerticalPosition.CENTER&&n&&this.containerElement?i===WidgetHorizontalPosition.LEFT?this.params.widgetType===WidgetType.TEASER?"slideInLeftTeaser":"slideInLeftRegular":this.params.widgetType===WidgetType.TEASER?"slideInRightTeaser":"slideInRightRegular":o===WidgetVerticalPosition.TOP?"slideInTop":"slideInBottom"}updateScrollbar(t){if(this.params.disableScrollbarCalculation)return;const e=this.getViewContentContainer();if(!e)return;const o=this.getActualSizeByEnv(t);if(!o)return;const i=parseFloat(this.closeIconElement.style.top),n=this.getVerticalOffset(t),s=parseFloat(n),a=this.getContainerElementHeight()-(i>0?0:Math.abs(i))-s;a>parseFloat(o.height)||(e.style.overflowY="auto",e.style.overflowX="hidden",e.style.maxHeight=`${a}px`,this.changeViewAlignToTop())}_getTemplate(t){return`\n<div class="cl-floating-box">\n  <style>\n  ${t.disabled?this.getDisabledWidgetStyles(FloatingBoxLayout.floatingBoxSelector):""}\n\n  .cl-floating-box-inner-content {\n     position: relative;\n     max-width: 100vw;\n     z-index: 1;\n  }\n\n  .cl-floating-box-close-icon {\n    position: absolute;\n    cursor: pointer;\n    z-index: 99;\n  }\n\n  ${this.getBrandingStyles()}\n\n  ${this.getEntryAndDestroyAnimations()}\n  </style>\n\n  <div class="cl-floating-box-inner-content">\n    <div class="cl-floating-box-close-icon"></div>\n    <div class="cl-floating-box-content"></div>\n  </div>\n</div>\n`}getEntryAndDestroyAnimations(){return`\n@keyframes slideInTop {\n  0% {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}    \n    \n@keyframes slideInBottom {\n  0% {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideInLeftTeaser {\n  0% {\n    opacity: 0;\n    transform: translateX(-100%) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n    transform-origin: left top;\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n    transform-origin: left top;\n  }\n}\n\n@keyframes slideInRightTeaser {\n  0% {\n    opacity: 0;\n    transform: translateX(100%) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n    transform-origin: right top;\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n    transform-origin: right top;\n  }\n}\n\n@keyframes slideInLeftRegular {\n  0% {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideInRightRegular {\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n    `}}FloatingBoxLayout.floatingBoxSelector=".cl-floating-box",FloatingBoxLayout.floatingBoxContentSelector=".cl-floating-box-content",FloatingBoxLayout.floatingBoxCloseIconSelector=".cl-floating-box-close-icon",FloatingBoxLayout.verticalCenterPositionRotationCss="rotate(-90deg)";export default FloatingBoxLayout;

package/layouts/launcher/LauncherLayout.js

@@ -1 +1 @@
-import BaseLayout from"../BaseLayout";import{LoopAnimationStylesService}from"@claspo/renderer/renderer/style/LoopAnimationStylesService";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import{LayoutType}from"@claspo/common/LayoutType";import{WidgetHorizontalPosition,WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";import insertHtmlIntoElement from"@claspo/common/dom/insertHtmlIntoElement";export default class LauncherLayout extends BaseLayout{constructor(e,t,n,i,o){super(e,t,n,i,o),this.zIndex=this.params.zIndex,this.launcherRootElement=document.createElement("div"),this.launcherRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.launcherElement=this.launcherRootElement.querySelector(LauncherLayout.launcherSelector),this.launcherElement.setAttribute("cl-connector-root-element",LayoutType.LAUNCHER),this.params.formVariantId&&this.launcherElement.setAttribute("cl-widget-id",this.params.formVariantId),this.defaultStylesElement=this.launcherElement.querySelector(LauncherLayout.launcherStylesSelector).cloneNode(!0),this.addWidgetContentClickEventListener(this.launcherRootElement.querySelector(LauncherLayout.launcherContentSelector))}connect(e,t,n){return this.launcherRootElement.querySelector(LauncherLayout.launcherContentSelector).appendChild(e),t.appendChild(this.launcherElement),this.setEntryAnimationAndPosition(this.isMobileEnv()),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(e=>{this.setEntryAnimationAndPosition(this.isMobileEnv())},5)),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,debounce(e=>{this.setEntryAnimationAndPosition(e.isMobileEnv)},5)),this.setConnectedElement(this.launcherElement),this.launcherElement.style.visibility="hidden",n.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.launcherElement.style.visibility="visible"}),this.launcherElement}disconnect(e){var t;null==e||e(),this.launcherElement.remove(),null===(t=this.environmentUpdateListener)||void 0===t||t.off()}setEntryAnimationAndPosition(e){const t=this.getDocumentModel().shared.launcher;this.setLoopAnimation(t.loopAnimation);const n=e?t.mobile:t.desktop,i=n.verticalPosition.toLowerCase(),o=n.horizontalPosition.toLowerCase();if(this.params.disableLayoutAnimations||!["SLIDE_TO_TOP","SLIDE_TO_BOTTOM","SLIDE_TO_LEFT","SLIDE_TO_RIGHT"].includes(t.entryAnimation.type))return this.launcherElement.style[o]=n.horizontalOffset,this.launcherElement.style[i]=n.verticalOffset,void(this.launcherElement.style.opacity="1");let l,s,a,r,c;"SLIDE_TO_TOP"===t.entryAnimation.type||"SLIDE_TO_BOTTOM"===t.entryAnimation.type?(l=o,s=n.horizontalOffset,a=i,r=n.verticalOffset,c="SLIDE_TO_TOP"===t.entryAnimation.type?n.verticalPosition===WidgetVerticalPosition.TOP?20:-20:n.verticalPosition===WidgetVerticalPosition.TOP?-20:20):(l=i,s=n.verticalOffset,a=o,r=n.horizontalOffset,c="SLIDE_TO_LEFT"===t.entryAnimation.type?n.horizontalPosition===WidgetHorizontalPosition.LEFT?20:-20:n.horizontalPosition===WidgetHorizontalPosition.LEFT?-20:20),this.launcherElement.style[l]=s,this.launcherElement.style[a]=`${parseFloat(r)+c}px`,setTimeout(()=>{this.launcherElement.style[a]=r,this.launcherElement.style.opacity="1"},50)}clearLoopAnimations(){var e;const t=[];this.launcherElement.classList.forEach(e=>{e.startsWith(LoopAnimationStylesService.animationClassPrefix)&&t.push(e)}),this.launcherElement.classList.remove(...t);const n=this.launcherElement.querySelector(LauncherLayout.launcherStylesSelector);insertHtmlIntoElement({element:n,html:this.defaultStylesElement.innerHTML}),this.launcherElement.removeAttribute("style"),this.launcherElement.style.zIndex=this.zIndex,this.launcherElement.style.position=null!==(e=this.params.displayPosition)&&void 0!==e?e:"fixed"}setLoopAnimation(e){this.clearLoopAnimations(),this.params.disableLayoutAnimations||(this._applyLoopAnimationParams(e),this.launcherElement.classList.add(LoopAnimationStylesService.animationClassPrefix+e.type))}_applyLoopAnimationParams(e){e.params&&Object.keys(e.params).forEach(t=>{const n=e.params[t];this.launcherElement.style.setProperty(`--cl-${e.type}-${t}`,`${n||LoopAnimationStylesService.getDefaultParamValueByAnimationType(e.type,t)}`)})}_getTemplate(e){var t;const n=e.documentModel.shared.launcher;return`\n      <div class="cl-launcher">\n        <style class="cl-launcher-styles">\n\n        ${LoopAnimationStylesService.constructAnimationStylesByTypes([null===(t=n.loopAnimation)||void 0===t?void 0:t.type])}\n\n        .cl-launcher {\n          ${this.params.disableLayoutAnimations?"":"transition: 0.3s;"}\n          cursor: pointer;\n          opacity: 0;\n        }\n\n        ${e.disabled?this.getDisabledWidgetStyles(LauncherLayout.launcherSelector):""}\n\n        .cl-launcher-inner-content {\n           position: relative;\n        }\n        </style>\n\n        <div class="cl-launcher-inner-content">\n          <div class="cl-launcher-content"></div>\n        </div>\n      </div>\n`}}LauncherLayout.launcherSelector=".cl-launcher",LauncherLayout.launcherContentSelector=".cl-launcher-content",LauncherLayout.launcherStylesSelector=".cl-launcher-styles";
+import BaseLayout from"../BaseLayout";import{LoopAnimationStylesService}from"@claspo/renderer/renderer/style/LoopAnimationStylesService";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import{LayoutType}from"@claspo/common/LayoutType";import{WidgetHorizontalPosition,WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";import insertHtmlIntoElement from"@claspo/common/dom/insertHtmlIntoElement";class LauncherLayout extends BaseLayout{constructor(e,t,n,i,o){super(e,t,n,i,o),this.zIndex=this.params.zIndex,this.launcherRootElement=document.createElement("div"),this.launcherRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.launcherElement=this.launcherRootElement.querySelector(LauncherLayout.launcherSelector),this.launcherElement.setAttribute("cl-connector-root-element",LayoutType.LAUNCHER),this.params.formVariantId&&this.launcherElement.setAttribute("cl-widget-id",this.params.formVariantId),this.defaultStylesElement=this.launcherElement.querySelector(LauncherLayout.launcherStylesSelector).cloneNode(!0),this.addWidgetContentClickEventListener(this.launcherRootElement.querySelector(LauncherLayout.launcherContentSelector))}connect(e,t,n){return this.launcherRootElement.querySelector(LauncherLayout.launcherContentSelector).appendChild(e),t.appendChild(this.launcherElement),this.setEntryAnimationAndPosition(this.isMobileEnv()),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(e=>{this.setEntryAnimationAndPosition(this.isMobileEnv())},5)),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,debounce(e=>{this.setEntryAnimationAndPosition(e.isMobileEnv)},5)),this.setConnectedElement(this.launcherElement),this.launcherElement.style.visibility="hidden",n.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.launcherElement.style.visibility="visible"}),this.launcherElement}disconnect(e){var t;null==e||e(),this.launcherElement.remove(),null===(t=this.environmentUpdateListener)||void 0===t||t.off()}setEntryAnimationAndPosition(e){const t=this.getDocumentModel().shared.launcher;this.setLoopAnimation(t.loopAnimation);const n=e?t.mobile:t.desktop,i=n.verticalPosition.toLowerCase(),o=n.horizontalPosition.toLowerCase();if(this.params.disableLayoutAnimations||!["SLIDE_TO_TOP","SLIDE_TO_BOTTOM","SLIDE_TO_LEFT","SLIDE_TO_RIGHT"].includes(t.entryAnimation.type))return this.launcherElement.style[o]=n.horizontalOffset,this.launcherElement.style[i]=n.verticalOffset,void(this.launcherElement.style.opacity="1");let l,s,a,r,c;"SLIDE_TO_TOP"===t.entryAnimation.type||"SLIDE_TO_BOTTOM"===t.entryAnimation.type?(l=o,s=n.horizontalOffset,a=i,r=n.verticalOffset,c="SLIDE_TO_TOP"===t.entryAnimation.type?n.verticalPosition===WidgetVerticalPosition.TOP?20:-20:n.verticalPosition===WidgetVerticalPosition.TOP?-20:20):(l=i,s=n.verticalOffset,a=o,r=n.horizontalOffset,c="SLIDE_TO_LEFT"===t.entryAnimation.type?n.horizontalPosition===WidgetHorizontalPosition.LEFT?20:-20:n.horizontalPosition===WidgetHorizontalPosition.LEFT?-20:20),this.launcherElement.style[l]=s,this.launcherElement.style[a]=`${parseFloat(r)+c}px`,setTimeout(()=>{this.launcherElement.style[a]=r,this.launcherElement.style.opacity="1"},50)}clearLoopAnimations(){var e;const t=[];this.launcherElement.classList.forEach(e=>{e.startsWith(LoopAnimationStylesService.animationClassPrefix)&&t.push(e)}),this.launcherElement.classList.remove(...t);const n=this.launcherElement.querySelector(LauncherLayout.launcherStylesSelector);insertHtmlIntoElement({element:n,html:this.defaultStylesElement.innerHTML}),this.launcherElement.removeAttribute("style"),this.launcherElement.style.zIndex=this.zIndex,this.launcherElement.style.position=null!==(e=this.params.displayPosition)&&void 0!==e?e:"fixed"}setLoopAnimation(e){this.clearLoopAnimations(),this.params.disableLayoutAnimations||(this._applyLoopAnimationParams(e),this.launcherElement.classList.add(LoopAnimationStylesService.animationClassPrefix+e.type))}_applyLoopAnimationParams(e){e.params&&Object.keys(e.params).forEach(t=>{const n=e.params[t];this.launcherElement.style.setProperty(`--cl-${e.type}-${t}`,`${n||LoopAnimationStylesService.getDefaultParamValueByAnimationType(e.type,t)}`)})}_getTemplate(e){var t;const n=e.documentModel.shared.launcher;return`\n      <div class="cl-launcher">\n        <style class="cl-launcher-styles">\n\n        ${LoopAnimationStylesService.constructAnimationStylesByTypes([null===(t=n.loopAnimation)||void 0===t?void 0:t.type])}\n\n        .cl-launcher {\n          ${this.params.disableLayoutAnimations?"":"transition: 0.3s;"}\n          cursor: pointer;\n          opacity: 0;\n        }\n\n        ${e.disabled?this.getDisabledWidgetStyles(LauncherLayout.launcherSelector):""}\n\n        .cl-launcher-inner-content {\n           position: relative;\n        }\n        </style>\n\n        <div class="cl-launcher-inner-content">\n          <div class="cl-launcher-content"></div>\n        </div>\n      </div>\n`}}LauncherLayout.launcherSelector=".cl-launcher",LauncherLayout.launcherContentSelector=".cl-launcher-content",LauncherLayout.launcherStylesSelector=".cl-launcher-styles";export default LauncherLayout;

package/package.json

@@ -1,32 +1,38 @@
 {
   "name": "@claspo/document-connector",
-  "version": "15.0.6-rc1",
+  "version": "15.0.6-theme.36",
   "scripts": {
     "test": "jest --no-cache --coverage",
     "build": "rm -rf out && tsc --project tsconfig.json && npm run minify",
+    "build:docs": "rm -rf ./docs && typedoc --options typedoc.md.json && npx concat-md --decrease-title-levels docs > docs/index.md && find docs -name '*.md' ! -name 'index.md' -delete && node scripts/docs/add-frontmatter.js",
     "minify": "find out -name '*.js' ! -name '*.d.js' -exec terser {} --compress --mangle --output {} \\;",
     "dev": "tsc --project tsconfig.json --watch",
-    "package": "npm i && npm run test && npm run build && cp package.json out && cd out && npm publish --access=public && cd .."
+    "package": "npm i && npm run test && npm run build && cp package.json README.md LICENSE.md out && cd out && npm publish --access=public && cd ..",
+    "sync:docs": "node ../../scripts/sync-docs.js --package=document-connector"
   },
   "engines": {
     "node": ">=18.16.0"
   },
   "dependencies": {
-    "@claspo/common": "6.0.7-rc1",
-    "@claspo/renderer": "17.0.3"
+    "@claspo/common": "6.0.12-theme.36",
+    "@claspo/renderer": "17.0.6-theme.36"
   },
   "devDependencies": {
+    "concat-md": "^0.5.1",
     "@babel/core": "^7.28.5",
     "@babel/preset-env": "^7.28.5",
     "@types/jest": "^27.5.1",
+    "glob": "^8.0.3",
     "jest": "^28.1.0",
     "jest-environment-jsdom": "^28.1.0",
     "terser": "^5.37.0",
     "ts-jest": "^28.0.3",
     "ts-node": "^10.8.0",
-    "typescript": "^4.6.4"
+    "typedoc": "^0.28.0",
+    "typedoc-plugin-markdown": "^4.4.1",
+    "typescript": "^5.8.2"
   },
   "author": "alex-chernysh",
-  "license": "",
-  "homepage": "https://claspo.io/"
+  "license": "LICENSE.md",
+  "homepage": "https://docs.claspo.io/docs/claspodocument-connector"
 }