@claspo/document-connector 15.0.17 → 16.0.0

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 CssVarsOperations from"@claspo/common/element/CssVarsOperations";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=>{switch(e){case DocumentModelUpdateType.COLOR_SCHEMA_UPDATE:CssVarsOperations.override(t,o.getConnectedElement());break;case 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

@@ -5,6 +5,7 @@ declare enum DocumentConnectorEventType {
     CLOSE_ICON_CLICKED = "CLOSE_ICON_CLICKED",
     BRANDING_ELEMENT_CLICKED = "BRANDING_ELEMENT_CLICKED",
     CONTACT_DATA_SUBMIT = "CONTACT_DATA_SUBMIT",
-    WIDGET_CONTENT_CLICKED = "WIDGET_CONTENT_CLICKED"
+    WIDGET_CONTENT_CLICKED = "WIDGET_CONTENT_CLICKED",
+    THEME_UPDATE = "THEME_UPDATE"
 }
 export default DocumentConnectorEventType;

package/DocumentConnectorEventType.js

@@ -1 +1 @@
-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;
+var DocumentConnectorEventType;!function(E){E.CONTACT_ID_WAS_RECEIVED="CONTACT_ID_WAS_RECEIVED",E.CLOSE_WIDGET="CLOSE_WIDGET",E.SHOW_WIDGET="SHOW_WIDGET",E.CLOSE_ICON_CLICKED="CLOSE_ICON_CLICKED",E.BRANDING_ELEMENT_CLICKED="BRANDING_ELEMENT_CLICKED",E.CONTACT_DATA_SUBMIT="CONTACT_DATA_SUBMIT",E.WIDGET_CONTENT_CLICKED="WIDGET_CONTENT_CLICKED",E.THEME_UPDATE="THEME_UPDATE"}(DocumentConnectorEventType||(DocumentConnectorEventType={}));export default DocumentConnectorEventType;

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";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;
+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;const e=Array.from(this.floatingBarElement.style).filter(t=>t.startsWith("--")).map(t=>[t,this.floatingBarElement.style.getPropertyValue(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",e.forEach(([t,e])=>{this.floatingBarElement.style.setProperty(t,e)}),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";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;
+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;const e=Array.from(this.floatingBoxElement.style).filter(t=>t.startsWith("--")).map(t=>[t,this.floatingBoxElement.style.getPropertyValue(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",e.forEach(([t,e])=>{this.floatingBoxElement.style.setProperty(t,e)})}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";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;
+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,r,a,c;"SLIDE_TO_TOP"===t.entryAnimation.type||"SLIDE_TO_BOTTOM"===t.entryAnimation.type?(l=o,s=n.horizontalOffset,r=i,a=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,r=o,a=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[r]=`${parseFloat(a)+c}px`,setTimeout(()=>{this.launcherElement.style[r]=a,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});const i=Array.from(this.launcherElement.style).filter(e=>e.startsWith("--")).map(e=>[e,this.launcherElement.style.getPropertyValue(e)]);this.launcherElement.removeAttribute("style"),this.launcherElement.style.zIndex=this.zIndex,this.launcherElement.style.position=null!==(e=this.params.displayPosition)&&void 0!==e?e:"fixed",i.forEach(([e,t])=>{this.launcherElement.style.setProperty(e,t)})}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,6 +1,6 @@
 {
   "name": "@claspo/document-connector",
-  "version": "15.0.17",
+  "version": "16.0.0",
   "scripts": {
     "test": "jest --no-cache --coverage",
     "build": "rm -rf out && tsc --project tsconfig.json && npm run minify",
@@ -14,8 +14,8 @@
     "node": ">=18.16.0"
   },
   "dependencies": {
-    "@claspo/common": "6.0.16",
-    "@claspo/renderer": "17.0.15"
+    "@claspo/common": "7.0.0",
+    "@claspo/renderer": "18.0.0"
   },
   "devDependencies": {
     "concat-md": "^0.5.1",