@claspo/renderer 17.0.1 → 17.0.2

package/StaticEntryModule.d.ts

@@ -1,12 +1,12 @@
 import CompositionRoot from "./CompositionRoot";
 import ViewRouter from "./ViewRouter";
-import { RenderModeT } from "@claspo/common/RenderMode";
+import { RenderMode } from "@claspo/common/RenderMode";
 import WcResolver from "./wc-renderer/WcResolver";
 import { WcRegister } from "./wc-renderer/WcRegister";
 import { ClDocumentI } from '@claspo/common/document/Document.interface';
 import { WidgetInitConfigI, TrackingServiceI } from '@claspo/common/WidgetInitConfig.interface';
 export default class StaticEntryModule {
-    renderMode: RenderModeT;
+    renderMode: RenderMode;
     componentResolver: WcResolver;
     componentRegister: WcRegister;
     config: WidgetInitConfigI;

package/StaticEntryModule.js

@@ -1 +1 @@
-import CompositionRoot from"./CompositionRoot";import ViewRouter from"./ViewRouter";import TranslateUtils from"./i18n/TranslateUtils";import{DocumentModelUpdateType}from"./document-model/DocumentModelService";import CssVarsOperations from"@claspo/common/element/CssVarsOperations";import wcStaticDecorator from"./wc-renderer/decorators/wcStaticDecorator";import RenderMode from"@claspo/common/RenderMode";export default class StaticEntryModule{constructor(e,o,t,s,i,r,n){this.renderMode=RenderMode.STATIC,this.componentResolver=o,this.componentRegister=t,this.config=Object.assign(Object.assign({},s),{renderMode:this.renderMode}),this.documentJson=e,this.translations=i,this.compositionRoot=null,this.viewRenderer=null,this.viewRouter=null,this.trackingService=r||{send:()=>{},trackClick:()=>{},trackTargetAction:()=>{}},this.layoutType=n,this.componentFactory=null,t.register(wcStaticDecorator,this.renderMode)}init(e){const o=e||document;this.documentJson=TranslateUtils.applyTranslationObjectToComponentsIfNeeded(JSON.parse(JSON.stringify(this.documentJson)),this.componentResolver.getComponentManifests(),this.translations);const t=new CompositionRoot(this.documentJson,this.config,this.trackingService,null,"",this.layoutType,this.renderMode,this.componentRegister,o),s=new ViewRouter(t.services.eventEmitter,t.services.documentModel,t.services.viewRenderer,this.config&&this.config.optionalDocumentStyles,t.services);t.services.viewRouter=s,this.compositionRoot=t,this.viewRenderer=t.services.viewRenderer,this.componentFactory=t.services.componentFactory,this.viewRouter=s;const i=this.compositionRoot.services.documentModel.getShared().cssVars;return Promise.resolve().then(()=>CssVarsOperations.override(i,this.viewRouter.getDocumentContainer())),s.start(this.config.viewIndex)}destroy(){var e,o;null===(e=this.viewRouter)||void 0===e||e.destroy(),null===(o=this.compositionRoot)||void 0===o||o.destroy()}performAction(e,o){const t=this.compositionRoot.services.documentService.handleModelUpdate(e,o);switch(e){case DocumentModelUpdateType.COLOR_SCHEMA_UPDATE:{const e=this.compositionRoot.services.documentModel.getShared().cssVars;CssVarsOperations.override(e,this.viewRouter.getDocumentContainer());break}}return t}listenAction(e,o){this.compositionRoot.services.eventEmitter.on(e,(e,t)=>{o(e,t)})}}
+import CompositionRoot from"./CompositionRoot";import ViewRouter from"./ViewRouter";import TranslateUtils from"./i18n/TranslateUtils";import{DocumentModelUpdateType}from"./document-model/DocumentModelService";import CssVarsOperations from"@claspo/common/element/CssVarsOperations";import wcStaticDecorator from"./wc-renderer/decorators/wcStaticDecorator";import{RenderMode}from"@claspo/common/RenderMode";export default class StaticEntryModule{constructor(e,o,t,s,i,r,n){this.renderMode=RenderMode.STATIC,this.componentResolver=o,this.componentRegister=t,this.config=Object.assign(Object.assign({},s),{renderMode:this.renderMode}),this.documentJson=e,this.translations=i,this.compositionRoot=null,this.viewRenderer=null,this.viewRouter=null,this.trackingService=r||{send:()=>{},trackClick:()=>{},trackTargetAction:()=>{}},this.layoutType=n,this.componentFactory=null,t.register(wcStaticDecorator,this.renderMode)}init(e){const o=e||document;this.documentJson=TranslateUtils.applyTranslationObjectToComponentsIfNeeded(JSON.parse(JSON.stringify(this.documentJson)),this.componentResolver.getComponentManifests(),this.translations);const t=new CompositionRoot(this.documentJson,this.config,this.trackingService,null,"",this.layoutType,this.renderMode,this.componentRegister,o),s=new ViewRouter(t.services.eventEmitter,t.services.documentModel,t.services.viewRenderer,this.config&&this.config.optionalDocumentStyles,t.services);t.services.viewRouter=s,this.compositionRoot=t,this.viewRenderer=t.services.viewRenderer,this.componentFactory=t.services.componentFactory,this.viewRouter=s;const i=this.compositionRoot.services.documentModel.getShared().cssVars;return Promise.resolve().then(()=>CssVarsOperations.override(i,this.viewRouter.getDocumentContainer())),s.start(this.config.viewIndex)}destroy(){var e,o;null===(e=this.viewRouter)||void 0===e||e.destroy(),null===(o=this.compositionRoot)||void 0===o||o.destroy()}performAction(e,o){const t=this.compositionRoot.services.documentService.handleModelUpdate(e,o);switch(e){case DocumentModelUpdateType.COLOR_SCHEMA_UPDATE:{const e=this.compositionRoot.services.documentModel.getShared().cssVars;CssVarsOperations.override(e,this.viewRouter.getDocumentContainer());break}}return t}listenAction(e,o){this.compositionRoot.services.eventEmitter.on(e,(e,t)=>{o(e,t)})}}

package/UpdatingEntryModule.js

@@ -1 +1 @@
-import CompositionRoot from"./CompositionRoot";import{DocumentModelUpdateType}from"./document-model/DocumentModelService";import DocumentUtils from"@claspo/common/document/DocumentUtils";import CssVarsOperations from"@claspo/common/element/CssVarsOperations";import DragEventListener from"./renderer/DragEventListener";import RenderMode from"@claspo/common/RenderMode";import wcUpdatingDecorator from"./wc-renderer/decorators/wcUpdatingDecorator";import{asyncActionEmitter}from"./action/asyncAction";export default class UpdatingEntryModule{constructor(e,o,t,s,n={},i){this.renderMode=RenderMode.UPDATING,this.documentJson=JSON.parse(JSON.stringify(e)),this.componentResolver=o,this.componentRegister=t,this.componentCommonStyles=s,this.config=Object.assign(Object.assign({},n),{renderMode:this.renderMode}),this.compositionRoot=null,this.viewRenderer=null,this.viewComponents=[],this.layoutType=i,t.register(wcUpdatingDecorator,this.renderMode)}init(e){const o=new CompositionRoot(this.documentJson,this.config,{send:()=>{}},e,this.componentCommonStyles,this.layoutType,this.renderMode,this.componentRegister,document);return this.compositionRoot=o,this.viewRenderer=o.services.viewRenderer,this.componentFactory=o.services.componentFactory,this.dragEventListener=new DragEventListener(this.compositionRoot.services.eventEmitter,this.compositionRoot.services.documentModel),this.viewComponents=this.compositionRoot.services.documentModel.getViews().map((e,o)=>this.viewRenderer.render(e,o,this.config.renderMode)),this.viewComponents.forEach(e=>{const o=this.compositionRoot.services.documentModel.getShared().cssVars;CssVarsOperations.override(o,e)}),this.viewComponents}destroy(){var e,o;this.viewComponents.forEach(e=>e.remove()),null===(e=this.dragEventListener)||void 0===e||e.destroy(),null===(o=this.compositionRoot)||void 0===o||o.destroy()}performAction(e,o){switch(e){case DocumentModelUpdateType.COMPONENT_REMOVE:case DocumentModelUpdateType.COMPONENT_MOVE:case DocumentModelUpdateType.COMPONENT_INSERT:case DocumentModelUpdateType.COMPONENT_PROPS_UPDATE:case DocumentModelUpdateType.COMPONENT_UPDATE:case DocumentModelUpdateType.MOBILE_BREAKPOINT_UPDATE:case DocumentModelUpdateType.ENVIRONMENT_UPDATE:case DocumentModelUpdateType.TEXT_CLASS_ADDED:case DocumentModelUpdateType.TEXT_CLASS_UPDATED:case DocumentModelUpdateType.TEXT_CLASS_REMOVED:case DocumentModelUpdateType.HEADER_FONT_FAMILY_UPDATE:case DocumentModelUpdateType.TEXT_FONT_FAMILY_UPDATE:case DocumentModelUpdateType.SHARED_UPDATE:return asyncActionEmitter(this.compositionRoot.services.eventEmitter.emit.bind(this.compositionRoot.services.eventEmitter))(this.compositionRoot.services.documentService.handleModelUpdate.bind(this.compositionRoot.services.documentService),e)(e,o);case DocumentModelUpdateType.COLOR_SCHEMA_UPDATE:{const e=this.compositionRoot.services.documentModel.getShared().cssVars;this.viewComponents.forEach(o=>{CssVarsOperations.override(e,o)});break}default:this.compositionRoot.services.eventEmitter.emit(e,o)}}listenAction(e,o){this.compositionRoot.services.eventEmitter.on(e,(e,t)=>{o(e,t)})}getHostElementById(e){const o=DocumentUtils.getNodeById(this.viewComponents.map(e=>e.getModel()),e);return o&&o.componentRef}getHostElementByPath(e){const o=DocumentUtils.getNodeByPath(this.viewComponents.map(e=>e.getModel()),e);return o&&o.componentRef}getContextRecordsMap(){var e;return(null===(e=this.compositionRoot)||void 0===e?void 0:e.services.context.getRecordsMap())||{}}listenContextAction(e,o){this.compositionRoot.services.context.on(e,(e,t)=>{o(e,t)})}}
+import CompositionRoot from"./CompositionRoot";import{DocumentModelUpdateType}from"./document-model/DocumentModelService";import DocumentUtils from"@claspo/common/document/DocumentUtils";import CssVarsOperations from"@claspo/common/element/CssVarsOperations";import DragEventListener from"./renderer/DragEventListener";import{RenderMode}from"@claspo/common/RenderMode";import wcUpdatingDecorator from"./wc-renderer/decorators/wcUpdatingDecorator";import{asyncActionEmitter}from"./action/asyncAction";export default class UpdatingEntryModule{constructor(e,o,t,s,n={},i){this.renderMode=RenderMode.UPDATING,this.documentJson=JSON.parse(JSON.stringify(e)),this.componentResolver=o,this.componentRegister=t,this.componentCommonStyles=s,this.config=Object.assign(Object.assign({},n),{renderMode:this.renderMode}),this.compositionRoot=null,this.viewRenderer=null,this.viewComponents=[],this.layoutType=i,t.register(wcUpdatingDecorator,this.renderMode)}init(e){const o=new CompositionRoot(this.documentJson,this.config,{send:()=>{}},e,this.componentCommonStyles,this.layoutType,this.renderMode,this.componentRegister,document);return this.compositionRoot=o,this.viewRenderer=o.services.viewRenderer,this.componentFactory=o.services.componentFactory,this.dragEventListener=new DragEventListener(this.compositionRoot.services.eventEmitter,this.compositionRoot.services.documentModel),this.viewComponents=this.compositionRoot.services.documentModel.getViews().map((e,o)=>this.viewRenderer.render(e,o,this.config.renderMode)),this.viewComponents.forEach(e=>{const o=this.compositionRoot.services.documentModel.getShared().cssVars;CssVarsOperations.override(o,e)}),this.viewComponents}destroy(){var e,o;this.viewComponents.forEach(e=>e.remove()),null===(e=this.dragEventListener)||void 0===e||e.destroy(),null===(o=this.compositionRoot)||void 0===o||o.destroy()}performAction(e,o){switch(e){case DocumentModelUpdateType.COMPONENT_REMOVE:case DocumentModelUpdateType.COMPONENT_MOVE:case DocumentModelUpdateType.COMPONENT_INSERT:case DocumentModelUpdateType.COMPONENT_PROPS_UPDATE:case DocumentModelUpdateType.COMPONENT_UPDATE:case DocumentModelUpdateType.MOBILE_BREAKPOINT_UPDATE:case DocumentModelUpdateType.ENVIRONMENT_UPDATE:case DocumentModelUpdateType.TEXT_CLASS_ADDED:case DocumentModelUpdateType.TEXT_CLASS_UPDATED:case DocumentModelUpdateType.TEXT_CLASS_REMOVED:case DocumentModelUpdateType.HEADER_FONT_FAMILY_UPDATE:case DocumentModelUpdateType.TEXT_FONT_FAMILY_UPDATE:case DocumentModelUpdateType.SHARED_UPDATE:return asyncActionEmitter(this.compositionRoot.services.eventEmitter.emit.bind(this.compositionRoot.services.eventEmitter))(this.compositionRoot.services.documentService.handleModelUpdate.bind(this.compositionRoot.services.documentService),e)(e,o);case DocumentModelUpdateType.COLOR_SCHEMA_UPDATE:{const e=this.compositionRoot.services.documentModel.getShared().cssVars;this.viewComponents.forEach(o=>{CssVarsOperations.override(e,o)});break}default:this.compositionRoot.services.eventEmitter.emit(e,o)}}listenAction(e,o){this.compositionRoot.services.eventEmitter.on(e,(e,t)=>{o(e,t)})}getHostElementById(e){const o=DocumentUtils.getNodeById(this.viewComponents.map(e=>e.getModel()),e);return o&&o.componentRef}getHostElementByPath(e){const o=DocumentUtils.getNodeByPath(this.viewComponents.map(e=>e.getModel()),e);return o&&o.componentRef}getContextRecordsMap(){var e;return(null===(e=this.compositionRoot)||void 0===e?void 0:e.services.context.getRecordsMap())||{}}listenContextAction(e,o){this.compositionRoot.services.context.on(e,(e,t)=>{o(e,t)})}}

package/document-model/DocumentService.js

@@ -1 +1 @@
-import DocumentUtils from"@claspo/common/document/DocumentUtils";import ComponentInsertType from"@claspo/common/document/ComponentInsertType";import{DocumentModelUpdateType}from"./DocumentModelService";export default class DocumentService{constructor(e,t,o){this.documentModel=e,this.viewRenderer=t,this.renderMode=o}handleModelUpdate(e,t){switch(e){case DocumentModelUpdateType.COMPONENT_PROPS_UPDATE:{const{id:e,data:o}=t,d=DocumentUtils.getNodeById(this.documentModel.getViews(),e);if(!d)return void console.warn("Attempt to update unexisting component props");const n=d.path,i=n.reduce((e,t,o)=>0===o?this.documentModel.getViews()[t]:e.children[t],this.documentModel.getViews());return i?(i.props=Object.assign({},o),void this.documentModel.emit(`${DocumentModelUpdateType.COMPONENT_PROPS_UPDATE}_${e}`,o)):void console.error("Model not found by path ["+n+"]")}case DocumentModelUpdateType.COMPONENT_UPDATE:{const{id:e,data:o}=t,d=DocumentUtils.getNodeById(this.documentModel.getViews(),e);return d?(Object.assign(d,o),void this.documentModel.emit(`${DocumentModelUpdateType.COMPONENT_UPDATE}_${e}`,o)):void console.warn("Attempt to update unexisting component props")}case DocumentModelUpdateType.SHARED_UPDATE:{const e=this.documentModel.getShared();return Object.assign(e,t),void this.documentModel.emit(DocumentModelUpdateType.SHARED_UPDATE_ALL)}case DocumentModelUpdateType.MOBILE_BREAKPOINT_UPDATE:return void(this.documentModel.getShared().mobileBreakpointWidth=t.mobileBreakpointWidth);case DocumentModelUpdateType.ENVIRONMENT_UPDATE:return void this.documentModel.emit(DocumentModelUpdateType.ENVIRONMENT_UPDATE,t);case DocumentModelUpdateType.TEXT_CLASS_ADDED:return void(this.documentModel.getShared().textClasses[t.id]=t);case DocumentModelUpdateType.TEXT_CLASS_UPDATED:return this.documentModel.getShared().textClasses[t.id]=t,void this.documentModel.emit(DocumentModelUpdateType.SHARED_UPDATE_ALL);case DocumentModelUpdateType.TEXT_CLASS_REMOVED:return void delete this.documentModel.getShared().textClasses[t];case DocumentModelUpdateType.HEADER_FONT_FAMILY_UPDATE:return this.documentModel.getShared().headerFontFamily=t,void this.documentModel.emit(DocumentModelUpdateType.SHARED_UPDATE_ALL);case DocumentModelUpdateType.TEXT_FONT_FAMILY_UPDATE:return this.documentModel.getShared().textFontFamily=t,void this.documentModel.emit(DocumentModelUpdateType.SHARED_UPDATE_ALL);case DocumentModelUpdateType.COLOR_SCHEMA_UPDATE:return this.documentModel.getShared().cssVars=t,void this.documentModel.emit(DocumentModelUpdateType.COLOR_SCHEMA_UPDATE,t);case DocumentModelUpdateType.COMPONENT_REMOVE:{const e=t.path;return void this.removeComponent(e)}case DocumentModelUpdateType.COMPONENT_INSERT:{let{insertPosition:e,targetPath:o,model:d}=t,n=DocumentUtils.getNodeByPath(this.documentModel.getViews(),o);if(!n&&e!==ComponentInsertType.INSIDE){const t=o.slice(0,-1),d=DocumentUtils.getNodeByPath(this.documentModel.getViews(),t);e=ComponentInsertType.INSIDE,n=d,o=t}return DocumentUtils.insertNode(d,o,this.documentModel.getViews(),e),void this.viewRenderer.renderComponent(n,d,this.renderMode,e)}case DocumentModelUpdateType.COMPONENT_MOVE:{const{fromPath:e,insertPosition:o,targetPath:d}=t,n=d[0],i=this.documentModel.getViews()[n],s=DocumentUtils.getNodeByPath(this.documentModel.getViews(),d);if(!s)return;const c=this.removeComponent(e),m=DocumentUtils.getNodeById([i],s.id).path;return DocumentUtils.insertNode(c,m,this.documentModel.getViews(),o),void this.viewRenderer.renderComponent(s,c,this.renderMode,o)}default:return}}removeComponent(e){const t=DocumentUtils.getNodeByPath(this.documentModel.getViews(),e);if(t)return t.componentRef.remove(),DocumentUtils.removeNode(this.documentModel.getViews(),e)}}
+import DocumentUtils from"@claspo/common/document/DocumentUtils";import{ComponentInsertType}from"@claspo/common/document/ComponentInsertType";import{DocumentModelUpdateType}from"./DocumentModelService";export default class DocumentService{constructor(e,t,o){this.documentModel=e,this.viewRenderer=t,this.renderMode=o}handleModelUpdate(e,t){switch(e){case DocumentModelUpdateType.COMPONENT_PROPS_UPDATE:{const{id:e,data:o}=t,d=DocumentUtils.getNodeById(this.documentModel.getViews(),e);if(!d)return void console.warn("Attempt to update unexisting component props");const n=d.path,i=n.reduce((e,t,o)=>0===o?this.documentModel.getViews()[t]:e.children[t],this.documentModel.getViews());return i?(i.props=Object.assign({},o),void this.documentModel.emit(`${DocumentModelUpdateType.COMPONENT_PROPS_UPDATE}_${e}`,o)):void console.error("Model not found by path ["+n+"]")}case DocumentModelUpdateType.COMPONENT_UPDATE:{const{id:e,data:o}=t,d=DocumentUtils.getNodeById(this.documentModel.getViews(),e);return d?(Object.assign(d,o),void this.documentModel.emit(`${DocumentModelUpdateType.COMPONENT_UPDATE}_${e}`,o)):void console.warn("Attempt to update unexisting component props")}case DocumentModelUpdateType.SHARED_UPDATE:{const e=this.documentModel.getShared();return Object.assign(e,t),void this.documentModel.emit(DocumentModelUpdateType.SHARED_UPDATE_ALL)}case DocumentModelUpdateType.MOBILE_BREAKPOINT_UPDATE:return void(this.documentModel.getShared().mobileBreakpointWidth=t.mobileBreakpointWidth);case DocumentModelUpdateType.ENVIRONMENT_UPDATE:return void this.documentModel.emit(DocumentModelUpdateType.ENVIRONMENT_UPDATE,t);case DocumentModelUpdateType.TEXT_CLASS_ADDED:return void(this.documentModel.getShared().textClasses[t.id]=t);case DocumentModelUpdateType.TEXT_CLASS_UPDATED:return this.documentModel.getShared().textClasses[t.id]=t,void this.documentModel.emit(DocumentModelUpdateType.SHARED_UPDATE_ALL);case DocumentModelUpdateType.TEXT_CLASS_REMOVED:return void delete this.documentModel.getShared().textClasses[t];case DocumentModelUpdateType.HEADER_FONT_FAMILY_UPDATE:return this.documentModel.getShared().headerFontFamily=t,void this.documentModel.emit(DocumentModelUpdateType.SHARED_UPDATE_ALL);case DocumentModelUpdateType.TEXT_FONT_FAMILY_UPDATE:return this.documentModel.getShared().textFontFamily=t,void this.documentModel.emit(DocumentModelUpdateType.SHARED_UPDATE_ALL);case DocumentModelUpdateType.COLOR_SCHEMA_UPDATE:return this.documentModel.getShared().cssVars=t,void this.documentModel.emit(DocumentModelUpdateType.COLOR_SCHEMA_UPDATE,t);case DocumentModelUpdateType.COMPONENT_REMOVE:{const e=t.path;return void this.removeComponent(e)}case DocumentModelUpdateType.COMPONENT_INSERT:{let{insertPosition:e,targetPath:o,model:d}=t,n=DocumentUtils.getNodeByPath(this.documentModel.getViews(),o);if(!n&&e!==ComponentInsertType.INSIDE){const t=o.slice(0,-1),d=DocumentUtils.getNodeByPath(this.documentModel.getViews(),t);e=ComponentInsertType.INSIDE,n=d,o=t}return DocumentUtils.insertNode(d,o,this.documentModel.getViews(),e),void this.viewRenderer.renderComponent(n,d,this.renderMode,e)}case DocumentModelUpdateType.COMPONENT_MOVE:{const{fromPath:e,insertPosition:o,targetPath:d}=t,n=d[0],i=this.documentModel.getViews()[n],s=DocumentUtils.getNodeByPath(this.documentModel.getViews(),d);if(!s)return;const c=this.removeComponent(e),m=DocumentUtils.getNodeById([i],s.id).path;return DocumentUtils.insertNode(c,m,this.documentModel.getViews(),o),void this.viewRenderer.renderComponent(s,c,this.renderMode,o)}default:return}}removeComponent(e){const t=DocumentUtils.getNodeByPath(this.documentModel.getViews(),e);if(t)return t.componentRef.remove(),DocumentUtils.removeNode(this.documentModel.getViews(),e)}}

package/handler/HandlerFactory.js

@@ -1 +1 @@
-import{ClickHandler}from"./ClickHandler";import HandlerTypes from"@claspo/common/handler/HandlerTypes";import ComponentEventHandler from"./ComponentEventHandler";export default class HandlerFactory{constructor(e,t){this.actionFactory=e,this.actionRegister=t}get(e){const t=e.actions.map(e=>this.actionFactory.get(e));switch(t.forEach(e=>this.actionRegister.register(e)),e.type){case HandlerTypes.CLICK:return new ClickHandler(e,t);case HandlerTypes.COMPONENT_EVENT:return new ComponentEventHandler(e,t);default:throw new Error(`Not supported handler type ${e.type}`)}}}
+import{ClickHandler}from"./ClickHandler";import{HandlerTypes}from"@claspo/common/handler/HandlerTypes";import ComponentEventHandler from"./ComponentEventHandler";export default class HandlerFactory{constructor(e,t){this.actionFactory=e,this.actionRegister=t}get(e){const t=e.actions.map(e=>this.actionFactory.get(e));switch(t.forEach(e=>this.actionRegister.register(e)),e.type){case HandlerTypes.CLICK:return new ClickHandler(e,t);case HandlerTypes.COMPONENT_EVENT:return new ComponentEventHandler(e,t);default:throw new Error(`Not supported handler type ${e.type}`)}}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claspo/renderer",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "scripts": {
     "dev": " tsc --project tsconfig.json --watch",
     "build": "rm -rf out && tsc --project tsconfig.json && npm run minify",
@@ -13,7 +13,7 @@
     "node": ">=18.16.0"
   },
   "dependencies": {
-    "@claspo/common": "6.0.0",
+    "@claspo/common": "6.0.5",
     "@testing-library/dom": "^10.4.0"
   },
   "devDependencies": {

package/renderer/style/CommonStylesService.js

@@ -1 +1 @@
-import ViewEntryType from"../../document-model/ViewEntryType";import LayoutType from"@claspo/common/form/common/LayoutType";export default class CommonStylesService{static applyHostStyles(e,t,o=null,i){var s,l,y;const n=null===(l=null===(s=null==o?void 0:o.props)||void 0===s?void 0:s.handlers)||void 0===l?void 0:l.find(e=>"CLICK"===e.type);n&&(null===(y=n.actions)||void 0===y?void 0:y.length)&&(t.style.cursor="pointer"),e!==ViewEntryType.VIEW&&e!==ViewEntryType.CONTAINER&&e!==ViewEntryType.COLUMN||(t.style.display=i===LayoutType.CONTENT_LOCKER&&e===ViewEntryType.VIEW?"flex":"inline-flex",t.style.position="relative"),t.style.boxSizing="border-box"}constructor(){this.styles="/* common styles */ *, *:before, *:after { box-sizing: border-box; font-family: inherit; }"}setStyles(e=""){this.styles=`${this.styles} ${e}`}getStyles(){return this.styles}}
+import ViewEntryType from"../../document-model/ViewEntryType";import{LayoutType}from"@claspo/common/LayoutType";export default class CommonStylesService{static applyHostStyles(e,t,o=null,i){var s,l,y;const n=null===(l=null===(s=null==o?void 0:o.props)||void 0===s?void 0:s.handlers)||void 0===l?void 0:l.find(e=>"CLICK"===e.type);n&&(null===(y=n.actions)||void 0===y?void 0:y.length)&&(t.style.cursor="pointer"),e!==ViewEntryType.VIEW&&e!==ViewEntryType.CONTAINER&&e!==ViewEntryType.COLUMN||(t.style.display=i===LayoutType.CONTENT_LOCKER&&e===ViewEntryType.VIEW?"flex":"inline-flex",t.style.position="relative"),t.style.boxSizing="border-box"}constructor(){this.styles="/* common styles */ *, *:before, *:after { box-sizing: border-box; font-family: inherit; }"}setStyles(e=""){this.styles=`${this.styles} ${e}`}getStyles(){return this.styles}}

package/sdk/PreviewMode.d.ts

@@ -3,4 +3,3 @@ export declare const PreviewMode: {
     readonly EDITOR_PREVIEW: "editorPreviewMode";
     readonly DEMO: "demoMode";
 };
-export type PreviewModeT = typeof PreviewMode[keyof typeof PreviewMode];

package/sdk/WcElement.js

@@ -1 +1 @@
-import HandlerFactory from"../handler/HandlerFactory";import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";import addEventListenerToElement from"@claspo/common/utils/addEventListener";import DefaultState from"../common/DefaultState";import{DocumentModelUpdateType}from"../document-model/DocumentModelService";import DefaultMediaQueryListener from"../renderer/style/DefaultMediaQueryListener";import{applySysAttrPrefix,applySysClassPrefix,RenderConstants}from"../renderer/RenderConstants";import StyleAttributeAccessor from"./accessor/StyleAttributeAccessor";import CommonStylesService from"../renderer/style/CommonStylesService";import ColorSchemaListener from"../renderer/style/ColorSchemaListener";import HttpClient from"@claspo/common/network/HttpClient";import omitKeys from"@claspo/common/object/omitKeys";import{CaseTransformer}from"@claspo/common/utils/CaseTransformer";import ComponentResourceManager from"../resource-management/ComponentResourceManager";import createObservers from"../wc-renderer/observers/createObservers";import observerType from"../wc-renderer/observers/observerType";import createSubscriptions from"../wc-renderer/subscriptions/createSubscriptions";import recursiveFindParentNodeByAttribute from"@claspo/common/element/recursiveFindParentNodeByAttribute";import{getTranslationsMap,getWidgetLanguages}from"./TranslationUtils";import ActionCategory from"../action/actions/ActionCategory";import SysActionTypes from"../action/SysActionTypes";import mergeAdaptiveStylesWithEnvIndependentStyles from"../document-model/MergeAdaptiveStylesWithEnvIndependentStyles";import{applySharedClasses,getAdaptiveStylesForPlatform}from"./ModelStyleUtils";import insertHtmlIntoElement from"@claspo/common/dom/insertHtmlIntoElement";import{PayloadEvent}from"./PayloadEvent";import RenderMode from"@claspo/common/RenderMode";export default class WcElement extends HTMLElement{constructor(){var e,t;super(),this.construct=()=>{let e;const t=this.getAttribute(applySysAttrPrefix("id")),s=this.getWidgetContainerNode();if(!s)throw new Error("Widget container not found in construct");const o=s.closest(`[${applySysAttrPrefix("widget-id")}]`);let r;o&&(r=o.getAttribute(applySysAttrPrefix("widget-id")));let i=new PayloadEvent("cl-props-request",{nodeName:this.nodeName,path:this.getAttribute(applySysAttrPrefix("path")),id:t,widgetId:r},{bubbles:!0,composed:!0});this.dispatchEvent(i),e=i.detail.props,Object.assign(this,e),this.observers=createObservers(observerType.PROPS,observerType.SHARED,observerType.ENVIRONMENT),this.subscriptions=createSubscriptions(),this.state=new DefaultState({}),this.componentEventEmitter=new DefaultEventEmitter,this.componentResourceManager=new ComponentResourceManager(this.model.id,this.services.eventEmitter,this.isStaticRenderMode()),this.mergeTagsProcessor=this.services.mergeTagsProcessorFactory.create(),this._actionFactory=this.services.actionFactory,this._handlerFactory=new HandlerFactory(this._actionFactory,this.services.actionRegister),this.prevProps=this.model.props,this.prevEnvironment=this.getEnvironment(),this.documentModel.on(`${DocumentModelUpdateType.COMPONENT_PROPS_UPDATE}_${this.model.id}`,e=>{this.model.props=e,this.observers.get(observerType.PROPS).forEach(t=>t(this.prevProps,e)),this.prevProps=e;const t=this.getHostElement(),s=applySysAttrPrefix("floating");e.floating&&!t.getAttribute(s)?t.setAttribute(s,"true"):!e.floating&&t.getAttribute(s)&&t.removeAttribute(s)}),this.documentModel.on(`${DocumentModelUpdateType.COMPONENT_UPDATE}_${this.model.id}`,e=>{Object.assign(this.model,e)}),this.documentModel.on(DocumentModelUpdateType.SHARED_UPDATE_ALL,()=>{this.applyAutoAdaptiveStyles(this.prevProps.adaptiveStyles,this.prevProps.styles),this.observers.get(observerType.SHARED).forEach(e=>e(this.getShared()))}),this.model.props.backgroundDynamicInlineSVGElements&&(this.colorSchemaListener=new ColorSchemaListener(this.documentModel,this.getHostElement(),()=>this.getShared(),()=>this.model.props,()=>this.getEnvironment(),HttpClient),this.colorSchemaListener.apply(this.getEnvironment()).then(()=>{this.subscriptions.push(this.colorSchemaListener.on())})),this.prevProps.adaptiveStyles&&this.subscriptions.push(this.resizeListener.on(DefaultMediaQueryListener.changeEventName,()=>{this.applyAutoAdaptiveStyles(this.prevProps.adaptiveStyles,this.prevProps.styles);const e=this.getEnvironment();this.observers.get(observerType.ENVIRONMENT).forEach(t=>t(this.prevEnvironment,e)),this.prevEnvironment=e}))},this.attachHandlers=()=>{this.getHandlers().map(e=>this._handlerFactory.get(e)).map(e=>()=>e.activate(this.state,this.componentEventEmitter,this.getHostElement.bind(this))).forEach(e=>e())},this.postponeHandlers=()=>{var e;null===(e=this.handlers)||void 0===e||e.forEach(e=>e.postpone())},this.releaseHandlers=()=>{var e;null===(e=this.handlers)||void 0===e||e.forEach(e=>e.release())},this.getProps=()=>{var e;return null===(e=this.getModel())||void 0===e?void 0:e.props},this.getShared=()=>this.documentModel.getShared(),this.getEnvironment=()=>this.resizeListener.isMobile()?"mobile":"desktop",this.isStaticRenderMode=()=>this.services.config.getConfig("renderMode")===RenderMode.STATIC,this.isUpdatingRenderMode=()=>this.services.config.getConfig("renderMode")===RenderMode.UPDATING,this.getRootElement=()=>this.shadowRoot?this.shadowRoot:this,this.getHostElement=()=>this,this.observeProps=e=>{this.observers.get(observerType.PROPS).push(e),e(null,this.prevProps)},this.observeShared=e=>{this.observers.get(observerType.SHARED).push(e),e(this.getShared())},this.observeEnvironment=e=>{this.observers.get(observerType.ENVIRONMENT).push(e),e(null,this.getEnvironment())},this.getElements=()=>[this.getHostElement(),...Array.from(this.getRootElement().querySelectorAll(`[${applySysAttrPrefix("element")}]`)).filter(e=>!e.hasAttribute(applySysAttrPrefix("component")))],this.getElement=(e,t)=>this.getElements().find(s=>t?s.getAttribute(applySysAttrPrefix("element"))===e&&s.id===t:s.getAttribute(applySysAttrPrefix("element"))===e),this.applyAutoAdaptiveStyles=(e,t)=>{if(!e&&!t)return;const s=this.getElements();if(!s.length)return;const o=mergeAdaptiveStylesWithEnvIndependentStyles(e,t),r=applySysAttrPrefix("type"),i="element-styles";let n=this.getRootElement().querySelector(`style[${r}="${i}"]`);n||(n=document.createElement("style"),n.setAttribute(r,i),this.getRootElement().appendChild(n)),insertHtmlIntoElement({element:n,html:""}),s.forEach(e=>{let t=e.getAttribute(applySysAttrPrefix("element"));const s=this.getEnvironment();let r=getAdaptiveStylesForPlatform(o,s,t);if(r){if(this.resizeListener.isMobile()){const e=getAdaptiveStylesForPlatform(o,"desktop",t);e&&(r=Object.assign(Object.assign({},r),{styleAttributes:Object.assign(Object.assign({},e.styleAttributes),r.styleAttributes)}))}this.applyStylesToElement(e,this.applySharedClassesToElementModel(r),n)}}),this._addLinkColor(n,this.getShared())},this.registerComponentResourceManagement=()=>{this.viewResourceManager.registerComponent(this.model.id,this.componentResourceManager)},this.applyStyles=(e,t={})=>{if(!e||!e.style)return!1;for(const[s,o]of Object.entries(t))e.style[s]=o;return!0},this.applyStylesToElement=(e,t,s)=>{var o,r;const i=[];if("host"===(t=WcElement._resolveTogglableStylesForElementModel(t)).element){CommonStylesService.applyHostStyles(this.model.type,e,null,this.layoutType);!!("desktop"===this.getEnvironment()&&(null===(o=this.model.props.backgroundDynamicInlineSVGElements)||void 0===o?void 0:o.desktop)||"mobile"===this.getEnvironment()&&(null===(r=this.model.props.backgroundDynamicInlineSVGElements)||void 0===r?void 0:r.mobile))&&(this.colorSchemaListener.apply(this.getEnvironment()),i.push("background"))}let n=t.styleAttributes.background,l=n&&n.match(/url\("([^"]*)"\)/);if(this.manifest.waitForResourcesLoad&&l){this.componentResourceManager.getPending().increment();const e=new Image;e.src=l[1],addEventListenerToElement(e,"load",()=>{this.componentResourceManager.getPending().decrement()}),addEventListenerToElement(e,"error",()=>{this.componentResourceManager.onResourceLoadFailure(e.src),this.isUpdatingRenderMode&&this.componentResourceManager.getPending().decrement()})}const a=Object.assign(Object.assign({},t),{styleAttributes:omitKeys(t.styleAttributes,i)});if(StyleAttributeAccessor.set(e,a),this._setClassAttributes(e,t),s){if(t.hoverStyleAttributes){let o=Object.assign({},t.hoverStyleAttributes);if("FILL_UP"===t.hoverAnimationType){e.style.boxShadow="inset 0px 0px 0px 0px rgb(0, 0, 0, 0)",e.style.overflow="hidden";const s=e.tagName.toLowerCase(),r=`flip-up-animation-${t.element}`;let i=this.getRootElement().querySelector(`#${r}`);i||(i=document.createElement("style"),i.id=r,e.appendChild(i)),insertHtmlIntoElement({element:i,html:`\n              ${s}::before {\n                content: '';\n                background: ${o.background};\n                position: absolute;\n                left: 0;\n                top: ${e.getBoundingClientRect().height}px;\n                height: ${e.getBoundingClientRect().height}px;\n                width: 100%;\n                z-index: -10;\n              }\n              ${s}:hover::before {\n                top: 0;\n                transition: 0.3s;\n              }\n          `}),o=Object.assign(Object.assign({},t.hoverStyleAttributes),{background:"transparent",position:"relative"})}o.borderTopWidth&&"0px"!==o.borderTopWidth||delete o.borderTopColor;o.borderBottomWidth&&"0px"!==o.borderBottomWidth||delete o.borderBottomColor;o.borderLeftWidth&&"0px"!==o.borderLeftWidth||delete o.borderLeftColor;o.borderRightWidth&&"0px"!==o.borderRightWidth||delete o.borderRightColor,this._addStylesToStyleElement(s,t.element,o,`:not(.${applySysAttrPrefix("no-hover")}):hover`,!0)}t.placeholderStyleAttributes&&this._addStylesToStyleElement(s,t.element,t.placeholderStyleAttributes,"::placeholder"),this._addFontStylesToStyleElement(s,this.getShared()),this.stylesAppliedToElement(e,t,s)}},this.applySharedClassesToElementModel=e=>{const t=this.documentModel.getShared();return applySharedClasses(e,t)},this.getModel=()=>this.model,this._addStylesToStyleElement=(e,t,s,o="",r)=>{const i=Object.keys(s).reduce((e,t)=>e+` ${CaseTransformer.camelCaseToDashCase(t)}: ${s[t]}${r?" !important;":";"}`,"");insertHtmlIntoElement({element:e,html:`[${applySysAttrPrefix("element")}="${t}"]${o} { ${i} }`,appendHtml:!0})},this._addFontStylesToStyleElement=(e,t)=>{insertHtmlIntoElement({element:e,html:`[cl-type] {font-family:${t.textFontFamily||"inherit"}}`,appendHtml:!0})},this._addLinkColor=(e,t)=>{var s,o,r,i;t.linkColor&&insertHtmlIntoElement({element:e,html:`a {color: ${t.linkColor}}, a:visited {color: ${t.linkColor}}`,appendHtml:!0}),(null===(s=t.linkParams)||void 0===s?void 0:s.color)&&insertHtmlIntoElement({element:e,html:`a {color: ${null===(o=t.linkParams)||void 0===o?void 0:o.color}}, a:visited {color: ${null===(r=t.linkParams)||void 0===r?void 0:r.color}}`,appendHtml:!0}),(null===(i=t.linkParams)||void 0===i?void 0:i.removeUnderline)&&insertHtmlIntoElement({element:e,html:"a {text-decoration: none}, a:visited {text-decoration: none}",appendHtml:!0})},this._setClassAttributes=(e,t)=>{Array.from(e.classList).filter(e=>e!==applySysClassPrefix("hovered")&&e!==applySysClassPrefix("focused")).forEach(t=>{t.startsWith(RenderConstants.SYSTEM_CLASS_PREFIX)&&e.classList.remove(t)});const s=((e.getAttribute("class")||"")+" "+t.classes).trim();e.setAttribute("class",s)},this.getParentComponent=()=>recursiveFindParentNodeByAttribute(this.parentNode,applySysAttrPrefix("element"),"host"),this.getWidgetContainerNode=()=>{const e=null==this?void 0:this.getAttribute(applySysAttrPrefix("path"));return e&&1===e.split(",").length?this.parentNode:recursiveFindParentNodeByAttribute(this.parentNode,applySysAttrPrefix("path"),void 0,e=>e&&1===e.split(",").length)},this.getWidgetLanguages=()=>getWidgetLanguages(this.services.config),this.getPreferredWidgetLanguage=()=>this.getWidgetLanguages()[0],this.getTranslationsMap=e=>getTranslationsMap(e,this.getWidgetLanguages()),this.stylesAppliedToElement=(e,t,s)=>{},this.updateContext=()=>{var e;const t=this.getModel();this.services.context.updateRecord(t.id,{label:this.getContextRecordLabel(t.props),viewIndex:null===(e=t.path)||void 0===e?void 0:e[0]})},this.addContextRecord=()=>{var e;const t=this.getModel();this.services.context.addRecord(t.id,{recordKey:t.id,id:t.props.control.name,label:this.getContextRecordLabel(t.props),value:t.props.control.defaultValue||"",viewIndex:null===(e=t.path)||void 0===e?void 0:e[0],sourceId:"FORM",initialData:{fallbackValue:"",exampleValue:this.getContextRecordExampleValue(t.props)}})},this.getContextRecordLabel=e=>{var t,s,o,r,i,n;const l=e.control.name;if(["email","first_name","last_name"].includes(l))return l.toUpperCase();if((null===(t=e.content)||void 0===t?void 0:t.label)&&(null===(r=null===(o=null===(s=e.adaptiveStyles)||void 0===s?void 0:s.desktop.find(e=>"label"===e.element))||void 0===o?void 0:o.params)||void 0===r?void 0:r.enabled)){const t=(new DOMParser).parseFromString(e.content.label,"text/html");return this.capitalizeFirstLetter(t.body.textContent||"")}return(null===(i=e.content)||void 0===i?void 0:i.placeholder)?this.capitalizeFirstLetter(e.content.placeholder):(null===(n=e.control)||void 0===n?void 0:n.integrationName)?this.capitalizeFirstLetter(e.control.integrationName).replace(new RegExp("_","g")," "):void 0},this.capitalizeFirstLetter=e=>e.charAt(0).toUpperCase()+e.slice(1),this.getContextRecordExampleValue=e=>{var t;switch(null===(t=e.control)||void 0===t?void 0:t.name){case"email":return"myemail@example.com";case"first_name":return"Maria";case"last_name":return"Taylor";default:return this.getContextRecordLabel(e)}},this.completeSubmitAction=e=>{const t=e||{},s=this.services.actionRegister.getRegisteredActions().find(e=>e.category===ActionCategory.SUBMIT);s?null==s||s.execute(void 0,void 0,!0,t):this.services.actionFactory.get({type:SysActionTypes.REQUEST}).execute(void 0,void 0,!0,t)},this.getHandlers=()=>{var e;return(null===(e=this.getProps())||void 0===e?void 0:e.handlers)&&this.getProps().handlers.length?[...this.getProps().handlers]:[]},this.assets=(e="")=>`${this.services.config.getConfig("staticResourcesUrl").replace(/\/$/,"")}/${this.manifest.name}/assets${e?`/${e}`:""}`,this.attachShadow({mode:"open"}),this.manifest=this.manifest||(null===(e=this.define)||void 0===e?void 0:e.manifest)||(null===(t=this.constructor.define)||void 0===t?void 0:t.manifest)}connectedCallback(){this.construct(),this.registerComponentResourceManagement(),Promise.resolve().then(()=>{this.attachHandlers()})}disconnectedCallback(){var e;this.observers.clear(),this.subscriptions.off(),this.state.destroy(),this.componentEventEmitter.destroy(),null===(e=this.mergeTagsProcessor)||void 0===e||e.destroy()}}WcElement._resolveTogglableStylesForElementModel=e=>{const t=Object.assign({},e);return Object.keys(t).forEach(e=>{e.toLowerCase().includes("styleattributes")&&(t[e]=WcElement._resolveTogglableStyles(t[e]))}),t},WcElement._resolveTogglableStyles=e=>{const t=Object.assign({},e),s=(e,s,o)=>{s in t&&(e.forEach(e=>{e in t&&(t[e]=t[s]?t[e]:o)}),delete t[s])};return s(["marginTop","marginBottom","marginLeft","marginRight"],"_marginEnabled","0px"),s(["paddingTop","paddingBottom","paddingLeft","paddingRight"],"_paddingEnabled","0px"),t};
+import HandlerFactory from"../handler/HandlerFactory";import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";import addEventListenerToElement from"@claspo/common/utils/addEventListener";import DefaultState from"../common/DefaultState";import{DocumentModelUpdateType}from"../document-model/DocumentModelService";import DefaultMediaQueryListener from"../renderer/style/DefaultMediaQueryListener";import{applySysAttrPrefix,applySysClassPrefix,RenderConstants}from"../renderer/RenderConstants";import StyleAttributeAccessor from"./accessor/StyleAttributeAccessor";import CommonStylesService from"../renderer/style/CommonStylesService";import ColorSchemaListener from"../renderer/style/ColorSchemaListener";import HttpClient from"@claspo/common/network/HttpClient";import omitKeys from"@claspo/common/object/omitKeys";import{CaseTransformer}from"@claspo/common/utils/CaseTransformer";import ComponentResourceManager from"../resource-management/ComponentResourceManager";import createObservers from"../wc-renderer/observers/createObservers";import observerType from"../wc-renderer/observers/observerType";import createSubscriptions from"../wc-renderer/subscriptions/createSubscriptions";import recursiveFindParentNodeByAttribute from"@claspo/common/element/recursiveFindParentNodeByAttribute";import{getTranslationsMap,getWidgetLanguages}from"./TranslationUtils";import ActionCategory from"../action/actions/ActionCategory";import SysActionTypes from"../action/SysActionTypes";import mergeAdaptiveStylesWithEnvIndependentStyles from"../document-model/MergeAdaptiveStylesWithEnvIndependentStyles";import{applySharedClasses,getAdaptiveStylesForPlatform}from"./ModelStyleUtils";import insertHtmlIntoElement from"@claspo/common/dom/insertHtmlIntoElement";import{PayloadEvent}from"./PayloadEvent";import{RenderMode}from"@claspo/common/RenderMode";export default class WcElement extends HTMLElement{constructor(){var e,t;super(),this.construct=()=>{let e;const t=this.getAttribute(applySysAttrPrefix("id")),s=this.getWidgetContainerNode();if(!s)throw new Error("Widget container not found in construct");const o=s.closest(`[${applySysAttrPrefix("widget-id")}]`);let r;o&&(r=o.getAttribute(applySysAttrPrefix("widget-id")));let i=new PayloadEvent("cl-props-request",{nodeName:this.nodeName,path:this.getAttribute(applySysAttrPrefix("path")),id:t,widgetId:r},{bubbles:!0,composed:!0});this.dispatchEvent(i),e=i.detail.props,Object.assign(this,e),this.observers=createObservers(observerType.PROPS,observerType.SHARED,observerType.ENVIRONMENT),this.subscriptions=createSubscriptions(),this.state=new DefaultState({}),this.componentEventEmitter=new DefaultEventEmitter,this.componentResourceManager=new ComponentResourceManager(this.model.id,this.services.eventEmitter,this.isStaticRenderMode()),this.mergeTagsProcessor=this.services.mergeTagsProcessorFactory.create(),this._actionFactory=this.services.actionFactory,this._handlerFactory=new HandlerFactory(this._actionFactory,this.services.actionRegister),this.prevProps=this.model.props,this.prevEnvironment=this.getEnvironment(),this.documentModel.on(`${DocumentModelUpdateType.COMPONENT_PROPS_UPDATE}_${this.model.id}`,e=>{this.model.props=e,this.observers.get(observerType.PROPS).forEach(t=>t(this.prevProps,e)),this.prevProps=e;const t=this.getHostElement(),s=applySysAttrPrefix("floating");e.floating&&!t.getAttribute(s)?t.setAttribute(s,"true"):!e.floating&&t.getAttribute(s)&&t.removeAttribute(s)}),this.documentModel.on(`${DocumentModelUpdateType.COMPONENT_UPDATE}_${this.model.id}`,e=>{Object.assign(this.model,e)}),this.documentModel.on(DocumentModelUpdateType.SHARED_UPDATE_ALL,()=>{this.applyAutoAdaptiveStyles(this.prevProps.adaptiveStyles,this.prevProps.styles),this.observers.get(observerType.SHARED).forEach(e=>e(this.getShared()))}),this.model.props.backgroundDynamicInlineSVGElements&&(this.colorSchemaListener=new ColorSchemaListener(this.documentModel,this.getHostElement(),()=>this.getShared(),()=>this.model.props,()=>this.getEnvironment(),HttpClient),this.colorSchemaListener.apply(this.getEnvironment()).then(()=>{this.subscriptions.push(this.colorSchemaListener.on())})),this.prevProps.adaptiveStyles&&this.subscriptions.push(this.resizeListener.on(DefaultMediaQueryListener.changeEventName,()=>{this.applyAutoAdaptiveStyles(this.prevProps.adaptiveStyles,this.prevProps.styles);const e=this.getEnvironment();this.observers.get(observerType.ENVIRONMENT).forEach(t=>t(this.prevEnvironment,e)),this.prevEnvironment=e}))},this.attachHandlers=()=>{this.getHandlers().map(e=>this._handlerFactory.get(e)).map(e=>()=>e.activate(this.state,this.componentEventEmitter,this.getHostElement.bind(this))).forEach(e=>e())},this.postponeHandlers=()=>{var e;null===(e=this.handlers)||void 0===e||e.forEach(e=>e.postpone())},this.releaseHandlers=()=>{var e;null===(e=this.handlers)||void 0===e||e.forEach(e=>e.release())},this.getProps=()=>{var e;return null===(e=this.getModel())||void 0===e?void 0:e.props},this.getShared=()=>this.documentModel.getShared(),this.getEnvironment=()=>this.resizeListener.isMobile()?"mobile":"desktop",this.isStaticRenderMode=()=>this.services.config.getConfig("renderMode")===RenderMode.STATIC,this.isUpdatingRenderMode=()=>this.services.config.getConfig("renderMode")===RenderMode.UPDATING,this.getRootElement=()=>this.shadowRoot?this.shadowRoot:this,this.getHostElement=()=>this,this.observeProps=e=>{this.observers.get(observerType.PROPS).push(e),e(null,this.prevProps)},this.observeShared=e=>{this.observers.get(observerType.SHARED).push(e),e(this.getShared())},this.observeEnvironment=e=>{this.observers.get(observerType.ENVIRONMENT).push(e),e(null,this.getEnvironment())},this.getElements=()=>[this.getHostElement(),...Array.from(this.getRootElement().querySelectorAll(`[${applySysAttrPrefix("element")}]`)).filter(e=>!e.hasAttribute(applySysAttrPrefix("component")))],this.getElement=(e,t)=>this.getElements().find(s=>t?s.getAttribute(applySysAttrPrefix("element"))===e&&s.id===t:s.getAttribute(applySysAttrPrefix("element"))===e),this.applyAutoAdaptiveStyles=(e,t)=>{if(!e&&!t)return;const s=this.getElements();if(!s.length)return;const o=mergeAdaptiveStylesWithEnvIndependentStyles(e,t),r=applySysAttrPrefix("type"),i="element-styles";let n=this.getRootElement().querySelector(`style[${r}="${i}"]`);n||(n=document.createElement("style"),n.setAttribute(r,i),this.getRootElement().appendChild(n)),insertHtmlIntoElement({element:n,html:""}),s.forEach(e=>{let t=e.getAttribute(applySysAttrPrefix("element"));const s=this.getEnvironment();let r=getAdaptiveStylesForPlatform(o,s,t);if(r){if(this.resizeListener.isMobile()){const e=getAdaptiveStylesForPlatform(o,"desktop",t);e&&(r=Object.assign(Object.assign({},r),{styleAttributes:Object.assign(Object.assign({},e.styleAttributes),r.styleAttributes)}))}this.applyStylesToElement(e,this.applySharedClassesToElementModel(r),n)}}),this._addLinkColor(n,this.getShared())},this.registerComponentResourceManagement=()=>{this.viewResourceManager.registerComponent(this.model.id,this.componentResourceManager)},this.applyStyles=(e,t={})=>{if(!e||!e.style)return!1;for(const[s,o]of Object.entries(t))e.style[s]=o;return!0},this.applyStylesToElement=(e,t,s)=>{var o,r;const i=[];if("host"===(t=WcElement._resolveTogglableStylesForElementModel(t)).element){CommonStylesService.applyHostStyles(this.model.type,e,null,this.layoutType);!!("desktop"===this.getEnvironment()&&(null===(o=this.model.props.backgroundDynamicInlineSVGElements)||void 0===o?void 0:o.desktop)||"mobile"===this.getEnvironment()&&(null===(r=this.model.props.backgroundDynamicInlineSVGElements)||void 0===r?void 0:r.mobile))&&(this.colorSchemaListener.apply(this.getEnvironment()),i.push("background"))}let n=t.styleAttributes.background,l=n&&n.match(/url\("([^"]*)"\)/);if(this.manifest.waitForResourcesLoad&&l){this.componentResourceManager.getPending().increment();const e=new Image;e.src=l[1],addEventListenerToElement(e,"load",()=>{this.componentResourceManager.getPending().decrement()}),addEventListenerToElement(e,"error",()=>{this.componentResourceManager.onResourceLoadFailure(e.src),this.isUpdatingRenderMode&&this.componentResourceManager.getPending().decrement()})}const a=Object.assign(Object.assign({},t),{styleAttributes:omitKeys(t.styleAttributes,i)});if(StyleAttributeAccessor.set(e,a),this._setClassAttributes(e,t),s){if(t.hoverStyleAttributes){let o=Object.assign({},t.hoverStyleAttributes);if("FILL_UP"===t.hoverAnimationType){e.style.boxShadow="inset 0px 0px 0px 0px rgb(0, 0, 0, 0)",e.style.overflow="hidden";const s=e.tagName.toLowerCase(),r=`flip-up-animation-${t.element}`;let i=this.getRootElement().querySelector(`#${r}`);i||(i=document.createElement("style"),i.id=r,e.appendChild(i)),insertHtmlIntoElement({element:i,html:`\n              ${s}::before {\n                content: '';\n                background: ${o.background};\n                position: absolute;\n                left: 0;\n                top: ${e.getBoundingClientRect().height}px;\n                height: ${e.getBoundingClientRect().height}px;\n                width: 100%;\n                z-index: -10;\n              }\n              ${s}:hover::before {\n                top: 0;\n                transition: 0.3s;\n              }\n          `}),o=Object.assign(Object.assign({},t.hoverStyleAttributes),{background:"transparent",position:"relative"})}o.borderTopWidth&&"0px"!==o.borderTopWidth||delete o.borderTopColor;o.borderBottomWidth&&"0px"!==o.borderBottomWidth||delete o.borderBottomColor;o.borderLeftWidth&&"0px"!==o.borderLeftWidth||delete o.borderLeftColor;o.borderRightWidth&&"0px"!==o.borderRightWidth||delete o.borderRightColor,this._addStylesToStyleElement(s,t.element,o,`:not(.${applySysAttrPrefix("no-hover")}):hover`,!0)}t.placeholderStyleAttributes&&this._addStylesToStyleElement(s,t.element,t.placeholderStyleAttributes,"::placeholder"),this._addFontStylesToStyleElement(s,this.getShared()),this.stylesAppliedToElement(e,t,s)}},this.applySharedClassesToElementModel=e=>{const t=this.documentModel.getShared();return applySharedClasses(e,t)},this.getModel=()=>this.model,this._addStylesToStyleElement=(e,t,s,o="",r)=>{const i=Object.keys(s).reduce((e,t)=>e+` ${CaseTransformer.camelCaseToDashCase(t)}: ${s[t]}${r?" !important;":";"}`,"");insertHtmlIntoElement({element:e,html:`[${applySysAttrPrefix("element")}="${t}"]${o} { ${i} }`,appendHtml:!0})},this._addFontStylesToStyleElement=(e,t)=>{insertHtmlIntoElement({element:e,html:`[cl-type] {font-family:${t.textFontFamily||"inherit"}}`,appendHtml:!0})},this._addLinkColor=(e,t)=>{var s,o,r,i;t.linkColor&&insertHtmlIntoElement({element:e,html:`a {color: ${t.linkColor}}, a:visited {color: ${t.linkColor}}`,appendHtml:!0}),(null===(s=t.linkParams)||void 0===s?void 0:s.color)&&insertHtmlIntoElement({element:e,html:`a {color: ${null===(o=t.linkParams)||void 0===o?void 0:o.color}}, a:visited {color: ${null===(r=t.linkParams)||void 0===r?void 0:r.color}}`,appendHtml:!0}),(null===(i=t.linkParams)||void 0===i?void 0:i.removeUnderline)&&insertHtmlIntoElement({element:e,html:"a {text-decoration: none}, a:visited {text-decoration: none}",appendHtml:!0})},this._setClassAttributes=(e,t)=>{Array.from(e.classList).filter(e=>e!==applySysClassPrefix("hovered")&&e!==applySysClassPrefix("focused")).forEach(t=>{t.startsWith(RenderConstants.SYSTEM_CLASS_PREFIX)&&e.classList.remove(t)});const s=((e.getAttribute("class")||"")+" "+t.classes).trim();e.setAttribute("class",s)},this.getParentComponent=()=>recursiveFindParentNodeByAttribute(this.parentNode,applySysAttrPrefix("element"),"host"),this.getWidgetContainerNode=()=>{const e=null==this?void 0:this.getAttribute(applySysAttrPrefix("path"));return e&&1===e.split(",").length?this.parentNode:recursiveFindParentNodeByAttribute(this.parentNode,applySysAttrPrefix("path"),void 0,e=>e&&1===e.split(",").length)},this.getWidgetLanguages=()=>getWidgetLanguages(this.services.config),this.getPreferredWidgetLanguage=()=>this.getWidgetLanguages()[0],this.getTranslationsMap=e=>getTranslationsMap(e,this.getWidgetLanguages()),this.stylesAppliedToElement=(e,t,s)=>{},this.updateContext=()=>{var e;const t=this.getModel();this.services.context.updateRecord(t.id,{label:this.getContextRecordLabel(t.props),viewIndex:null===(e=t.path)||void 0===e?void 0:e[0]})},this.addContextRecord=()=>{var e;const t=this.getModel();this.services.context.addRecord(t.id,{recordKey:t.id,id:t.props.control.name,label:this.getContextRecordLabel(t.props),value:t.props.control.defaultValue||"",viewIndex:null===(e=t.path)||void 0===e?void 0:e[0],sourceId:"FORM",initialData:{fallbackValue:"",exampleValue:this.getContextRecordExampleValue(t.props)}})},this.getContextRecordLabel=e=>{var t,s,o,r,i,n;const l=e.control.name;if(["email","first_name","last_name"].includes(l))return l.toUpperCase();if((null===(t=e.content)||void 0===t?void 0:t.label)&&(null===(r=null===(o=null===(s=e.adaptiveStyles)||void 0===s?void 0:s.desktop.find(e=>"label"===e.element))||void 0===o?void 0:o.params)||void 0===r?void 0:r.enabled)){const t=(new DOMParser).parseFromString(e.content.label,"text/html");return this.capitalizeFirstLetter(t.body.textContent||"")}return(null===(i=e.content)||void 0===i?void 0:i.placeholder)?this.capitalizeFirstLetter(e.content.placeholder):(null===(n=e.control)||void 0===n?void 0:n.integrationName)?this.capitalizeFirstLetter(e.control.integrationName).replace(new RegExp("_","g")," "):void 0},this.capitalizeFirstLetter=e=>e.charAt(0).toUpperCase()+e.slice(1),this.getContextRecordExampleValue=e=>{var t;switch(null===(t=e.control)||void 0===t?void 0:t.name){case"email":return"myemail@example.com";case"first_name":return"Maria";case"last_name":return"Taylor";default:return this.getContextRecordLabel(e)}},this.completeSubmitAction=e=>{const t=e||{},s=this.services.actionRegister.getRegisteredActions().find(e=>e.category===ActionCategory.SUBMIT);s?null==s||s.execute(void 0,void 0,!0,t):this.services.actionFactory.get({type:SysActionTypes.REQUEST}).execute(void 0,void 0,!0,t)},this.getHandlers=()=>{var e;return(null===(e=this.getProps())||void 0===e?void 0:e.handlers)&&this.getProps().handlers.length?[...this.getProps().handlers]:[]},this.assets=(e="")=>`${this.services.config.getConfig("staticResourcesUrl").replace(/\/$/,"")}/${this.manifest.name}/assets${e?`/${e}`:""}`,this.attachShadow({mode:"open"}),this.manifest=this.manifest||(null===(e=this.define)||void 0===e?void 0:e.manifest)||(null===(t=this.constructor.define)||void 0===t?void 0:t.manifest)}connectedCallback(){this.construct(),this.registerComponentResourceManagement(),Promise.resolve().then(()=>{this.attachHandlers()})}disconnectedCallback(){var e;this.observers.clear(),this.subscriptions.off(),this.state.destroy(),this.componentEventEmitter.destroy(),null===(e=this.mergeTagsProcessor)||void 0===e||e.destroy()}}WcElement._resolveTogglableStylesForElementModel=e=>{const t=Object.assign({},e);return Object.keys(t).forEach(e=>{e.toLowerCase().includes("styleattributes")&&(t[e]=WcElement._resolveTogglableStyles(t[e]))}),t},WcElement._resolveTogglableStyles=e=>{const t=Object.assign({},e),s=(e,s,o)=>{s in t&&(e.forEach(e=>{e in t&&(t[e]=t[s]?t[e]:o)}),delete t[s])};return s(["marginTop","marginBottom","marginLeft","marginRight"],"_marginEnabled","0px"),s(["paddingTop","paddingBottom","paddingLeft","paddingRight"],"_paddingEnabled","0px"),t};

package/wc-renderer/WcFactory.js

@@ -1 +1 @@
-import RenderMode from"@claspo/common/RenderMode";import{ComponentPropsExtractor}from"../document-model/ComponentPropsExtractor";import CommonStylesService from"../renderer/style/CommonStylesService";import{LoopAnimationStylesService}from"../renderer/style/LoopAnimationStylesService";import{applySysAttrPrefix}from"../renderer/RenderConstants";import ViewEntryType from"../document-model/ViewEntryType";export default class WcFactory{constructor({state:t,eventEmitter:e,form:o,documentModel:i,resizeListener:r,config:n,commonStylesService:s,trackingService:c,layoutType:m,actionFactory:y,actionRegister:a,prizePoolFactory:l,context:p,mergeTagsProcessorFactory:h,mobileDeviceOrientationListener:d,componentRegister:u,htmlDocumentObject:S}){this.state=t,this.eventEmitter=e,this.form=o,this.documentModel=i,this.resizeListener=r,this.mobileDeviceOrientationListener=d,this.config=n,this.commonStylesService=s,this.trackingService=c,this.layoutType=m,this.actionFactory=y,this.actionRegister=a,this.prizePoolFactory=l,this.context=p,this.mergeTagsProcessorFactory=h,this.componentRegister=u,this.htmlDocumentObject=S}create(t,e){let o=new(this.getComponentClass(t,e));const i=applySysAttrPrefix("content-container");if(t.type===ViewEntryType.VIEW&&"SysColumnsComponent"!==t.name){const t=document.createElement("div");t.setAttribute(i,""),t.style.display="inherit",t.style.gap="inherit",t.style.justifyContent="inherit",t.style.alignItems="inherit",t.style.flexDirection="inherit",t.style.width="100%",t.style.height="100%",o.getRootElement().appendChild(t),o.contentContainer=t}return o.setAttribute(applySysAttrPrefix("type"),t.type),o.setAttribute(applySysAttrPrefix("id"),t.id),o.setAttribute(applySysAttrPrefix("component"),t.name),o.setAttribute(applySysAttrPrefix("path"),t.path),o.setAttribute(applySysAttrPrefix("element"),"host"),t.props.floating&&o.setAttribute(applySysAttrPrefix("floating"),"true"),e===RenderMode.UPDATING&&this.commonStylesService.setStyles("* {cursor:pointer !important;} *:focus {outline: none !important;}"),this.processStyles(o.getHostElement(),o.getRootElement(),t,e),CommonStylesService.applyHostStyles(t.type,o,t,this.layoutType),o}getComponentClass(t,e){return this.componentRegister.getComponent(t.name,e)}constructProps(t,e){return{model:t,documentModel:this.documentModel,resizeListener:this.resizeListener,mobileDeviceOrientationListener:this.mobileDeviceOrientationListener,layoutType:this.layoutType,viewResourceManager:e,htmlDocumentObject:this.htmlDocumentObject,services:{state:this.state,eventEmitter:this.eventEmitter,form:this.form,config:this.config,trackingService:this.trackingService,actionFactory:this.actionFactory,actionRegister:this.actionRegister,prizePoolFactory:this.prizePoolFactory,context:this.context,mergeTagsProcessorFactory:this.mergeTagsProcessorFactory}}}processStyles(t,e,o,i){const r=this.commonStylesService.getStyles(),n=document.createElement("style");this.constructAnimationStyles(t,e,o,i),n.textContent=r,e.appendChild(n)}constructAnimationStyles(t,e,o,i){if(i===RenderMode.UPDATING)return;const r=LoopAnimationStylesService.constructAnimationStylesByTypes(ComponentPropsExtractor.extractLoopAnimationsFromStylesClasses(o));if(r){const i=document.createElement("style");i.textContent=r;[ViewEntryType.VIEW,ViewEntryType.CONTAINER,ViewEntryType.COLUMN,ViewEntryType.COLUMNS].includes(o.type)?t.appendChild(i):e.appendChild(i)}}}
+import{RenderMode}from"@claspo/common/RenderMode";import{ComponentPropsExtractor}from"../document-model/ComponentPropsExtractor";import CommonStylesService from"../renderer/style/CommonStylesService";import{LoopAnimationStylesService}from"../renderer/style/LoopAnimationStylesService";import{applySysAttrPrefix}from"../renderer/RenderConstants";import ViewEntryType from"../document-model/ViewEntryType";export default class WcFactory{constructor({state:t,eventEmitter:e,form:o,documentModel:i,resizeListener:r,config:n,commonStylesService:s,trackingService:c,layoutType:m,actionFactory:y,actionRegister:a,prizePoolFactory:l,context:p,mergeTagsProcessorFactory:h,mobileDeviceOrientationListener:d,componentRegister:u,htmlDocumentObject:S}){this.state=t,this.eventEmitter=e,this.form=o,this.documentModel=i,this.resizeListener=r,this.mobileDeviceOrientationListener=d,this.config=n,this.commonStylesService=s,this.trackingService=c,this.layoutType=m,this.actionFactory=y,this.actionRegister=a,this.prizePoolFactory=l,this.context=p,this.mergeTagsProcessorFactory=h,this.componentRegister=u,this.htmlDocumentObject=S}create(t,e){let o=new(this.getComponentClass(t,e));const i=applySysAttrPrefix("content-container");if(t.type===ViewEntryType.VIEW&&"SysColumnsComponent"!==t.name){const t=document.createElement("div");t.setAttribute(i,""),t.style.display="inherit",t.style.gap="inherit",t.style.justifyContent="inherit",t.style.alignItems="inherit",t.style.flexDirection="inherit",t.style.width="100%",t.style.height="100%",o.getRootElement().appendChild(t),o.contentContainer=t}return o.setAttribute(applySysAttrPrefix("type"),t.type),o.setAttribute(applySysAttrPrefix("id"),t.id),o.setAttribute(applySysAttrPrefix("component"),t.name),o.setAttribute(applySysAttrPrefix("path"),t.path),o.setAttribute(applySysAttrPrefix("element"),"host"),t.props.floating&&o.setAttribute(applySysAttrPrefix("floating"),"true"),e===RenderMode.UPDATING&&this.commonStylesService.setStyles("* {cursor:pointer !important;} *:focus {outline: none !important;}"),this.processStyles(o.getHostElement(),o.getRootElement(),t,e),CommonStylesService.applyHostStyles(t.type,o,t,this.layoutType),o}getComponentClass(t,e){return this.componentRegister.getComponent(t.name,e)}constructProps(t,e){return{model:t,documentModel:this.documentModel,resizeListener:this.resizeListener,mobileDeviceOrientationListener:this.mobileDeviceOrientationListener,layoutType:this.layoutType,viewResourceManager:e,htmlDocumentObject:this.htmlDocumentObject,services:{state:this.state,eventEmitter:this.eventEmitter,form:this.form,config:this.config,trackingService:this.trackingService,actionFactory:this.actionFactory,actionRegister:this.actionRegister,prizePoolFactory:this.prizePoolFactory,context:this.context,mergeTagsProcessorFactory:this.mergeTagsProcessorFactory}}}processStyles(t,e,o,i){const r=this.commonStylesService.getStyles(),n=document.createElement("style");this.constructAnimationStyles(t,e,o,i),n.textContent=r,e.appendChild(n)}constructAnimationStyles(t,e,o,i){if(i===RenderMode.UPDATING)return;const r=LoopAnimationStylesService.constructAnimationStylesByTypes(ComponentPropsExtractor.extractLoopAnimationsFromStylesClasses(o));if(r){const i=document.createElement("style");i.textContent=r;[ViewEntryType.VIEW,ViewEntryType.CONTAINER,ViewEntryType.COLUMN,ViewEntryType.COLUMNS].includes(o.type)?t.appendChild(i):e.appendChild(i)}}}

package/wc-renderer/WcRegister.d.ts

@@ -1,4 +1,4 @@
-import { RenderModeT } from '@claspo/common/RenderMode';
+import { RenderMode } from '@claspo/common/RenderMode';
 import { ComponentClassI } from "./WcResolver";
 export type DecoratorFnT = (clazz: ComponentClassI) => ComponentClassI;
 export interface ModelNameToTagMapI {
@@ -9,9 +9,9 @@ export declare class WcRegister {
     modelNameToTagMap: ModelNameToTagMapI;
     decorator: DecoratorFnT | null;
     constructor(bundledComponentClasses?: ComponentClassI[]);
-    register(decorator: DecoratorFnT, renderMode: RenderModeT): void;
-    registerComponent(clazz: ComponentClassI, renderMode: RenderModeT): void;
-    getComponent(name: string, renderMode: RenderModeT): CustomElementConstructor;
-    getComponentTagName(tagName: string, renderMode: RenderModeT): string;
+    register(decorator: DecoratorFnT, renderMode: RenderMode): void;
+    registerComponent(clazz: ComponentClassI, renderMode: RenderMode): void;
+    getComponent(name: string, renderMode: RenderMode): CustomElementConstructor;
+    getComponentTagName(tagName: string, renderMode: RenderMode): string;
 }
 export default WcRegister;

package/wc-renderer/WcRegister.js

@@ -1 +1 @@
-import wcStaticDecorator from"./decorators/wcStaticDecorator";import wcUpdatingDecorator from"./decorators/wcUpdatingDecorator";import RenderMode from"@claspo/common/RenderMode";function getModelNameFromClass(e){return e.define.manifest.name}function getTagNameFromClass(e){const o=getModelNameFromClass(e);return(t=o,t.replace(/[A-Z]+(?![a-z])|[A-Z]/g,(e,o)=>(o?"-":"")+e.toLowerCase())).replace("-component","");var t}export class WcRegister{constructor(e){this.classes=e||[],this.modelNameToTagMap=this.classes.reduce((e,o)=>Object.assign(Object.assign({},e),{[getModelNameFromClass(o)]:getTagNameFromClass(o)}),{}),this.decorator=null}register(e,o){this.decorator=e,this.classes.forEach(e=>this.registerComponent(e,o))}registerComponent(e,o){const t=this.getComponentTagName(getTagNameFromClass(e),o),a=o===RenderMode.STATIC?wcStaticDecorator(e):wcUpdatingDecorator(e);customElements.get(t)||customElements.define(t,a),this.modelNameToTagMap[getModelNameFromClass(a)]||(this.modelNameToTagMap[getModelNameFromClass(a)]=getTagNameFromClass(a))}getComponent(e,o){const t=(a=e,a.replace(/[A-Z]+(?![a-z])|[A-Z]/g,(e,o)=>(o?"-":"")+e.toLowerCase())).replace("-component","");var a;const s=this.getComponentTagName(t,o),r=customElements.get(s);if(!r){const t=`Claspo: the component named "${e}" was found in the document model, but the component class was not found.`,a=o===RenderMode.STATIC?'Check if the component can be downloaded from the server, or pass the class to "bundledComponentClasses".':'Add the component to the "availableComponentsPanel", or pass the class to the "bundledComponentClasses".';throw new Error(`${t} ${a}`)}return r}getComponentTagName(e,o){return`${e}-${o.toLowerCase()}`}}export default WcRegister;
+import wcStaticDecorator from"./decorators/wcStaticDecorator";import wcUpdatingDecorator from"./decorators/wcUpdatingDecorator";import{RenderMode}from"@claspo/common/RenderMode";function getModelNameFromClass(e){return e.define.manifest.name}function getTagNameFromClass(e){const o=getModelNameFromClass(e);return(t=o,t.replace(/[A-Z]+(?![a-z])|[A-Z]/g,(e,o)=>(o?"-":"")+e.toLowerCase())).replace("-component","");var t}export class WcRegister{constructor(e){this.classes=e||[],this.modelNameToTagMap=this.classes.reduce((e,o)=>Object.assign(Object.assign({},e),{[getModelNameFromClass(o)]:getTagNameFromClass(o)}),{}),this.decorator=null}register(e,o){this.decorator=e,this.classes.forEach(e=>this.registerComponent(e,o))}registerComponent(e,o){const t=this.getComponentTagName(getTagNameFromClass(e),o),a=o===RenderMode.STATIC?wcStaticDecorator(e):wcUpdatingDecorator(e);customElements.get(t)||customElements.define(t,a),this.modelNameToTagMap[getModelNameFromClass(a)]||(this.modelNameToTagMap[getModelNameFromClass(a)]=getTagNameFromClass(a))}getComponent(e,o){const t=(a=e,a.replace(/[A-Z]+(?![a-z])|[A-Z]/g,(e,o)=>(o?"-":"")+e.toLowerCase())).replace("-component","");var a;const s=this.getComponentTagName(t,o),r=customElements.get(s);if(!r){const t=`Claspo: the component named "${e}" was found in the document model, but the component class was not found.`,a=o===RenderMode.STATIC?'Check if the component can be downloaded from the server, or pass the class to "bundledComponentClasses".':'Add the component to the "availableComponentsPanel", or pass the class to the "bundledComponentClasses".';throw new Error(`${t} ${a}`)}return r}getComponentTagName(e,o){return`${e}-${o.toLowerCase()}`}}export default WcRegister;

package/wc-renderer/WcResolver.d.ts

@@ -1,4 +1,4 @@
-import { RenderModeT } from "@claspo/common/RenderMode";
+import { RenderMode } from '@claspo/common/RenderMode';
 import { WcRegister } from "./WcRegister";
 import { ComponentManifestI } from '@claspo/common/component-manifest/ComponentManifest.interface';
 import { ClDocumentI } from '@claspo/common/document/Document.interface';
@@ -12,9 +12,9 @@ export interface LoadComponentsResultI {
     manifests: ComponentManifestI[];
 }
 export default class WcResolver {
-    renderMode: RenderModeT;
+    renderMode: RenderMode;
     wcRegister: WcRegister;
-    constructor(renderMode: RenderModeT, wcRegister: WcRegister);
+    constructor(renderMode: RenderMode, wcRegister: WcRegister);
     getComponentManifests(): ComponentManifestI[];
     getAllComponents(): (CustomElementConstructor | undefined)[];
     loadComponentsIfNecessary(documentModel: ClDocumentI, staticResourcesUrl: string): Promise<LoadComponentsResultI>;

package/wc-renderer/WcResolver.js

@@ -1 +1 @@
-import DocumentUtils from"@claspo/common/document/DocumentUtils";import RenderMode from"@claspo/common/RenderMode";export default class WcResolver{constructor(e=RenderMode.STATIC,t){this.renderMode=e,this.wcRegister=t}getComponentManifests(){return this.getAllComponents().map(e=>{var t;return null===(t=e.define)||void 0===t?void 0:t.manifest}).filter(e=>!!e)}getAllComponents(){return Object.values(this.wcRegister.modelNameToTagMap).map(e=>this.wcRegister.getComponentTagName(e,this.renderMode)).map(e=>customElements.get(e)).filter(e=>!!e)}async loadComponentsIfNecessary(e,t){const o=new Set;e.views.forEach(e=>{DocumentUtils.iterateDepthFirst(e,e=>{o.add(e.name)})});const n=this.getComponentManifests(),s=n.map(e=>e.name),r=[...o].filter(e=>!s.includes(e));return r.length?(await this.loadComponents(r,t),{manifests:this.getComponentManifests()}):{manifests:n}}async loadComponents(e,t){const o=this.getComponentNamesToLoad(e),n=this.buildComponentFilePaths(o,t),s=await this.loadComponentClasses(n,o);return this.registerModules(s),s}getComponentNamesToLoad(e){return e||[]}buildComponentFilePaths(e,t){return e.map(e=>`${t.replace(/\/$/,"")}/${e}/${e}.js`)}loadComponentClasses(e,t){return Promise.all(e.map((e,o)=>new Promise((n,s)=>{const r=document.createElement("script");r.type="module",r.onload=()=>{const e=t[o];n(window[this.getWindowKeyForComponentClass(e)])},r.onerror=s,r.src=e,document.body.appendChild(r)})))}getWindowKeyForComponentClass(e){return`clComponentClass_${e}`}registerModules(e){e.forEach(e=>{this.wcRegister.registerComponent(e,this.renderMode)})}}
+import DocumentUtils from"@claspo/common/document/DocumentUtils";import{RenderMode}from"@claspo/common/RenderMode";export default class WcResolver{constructor(e=RenderMode.STATIC,t){this.renderMode=e,this.wcRegister=t}getComponentManifests(){return this.getAllComponents().map(e=>{var t;return null===(t=e.define)||void 0===t?void 0:t.manifest}).filter(e=>!!e)}getAllComponents(){return Object.values(this.wcRegister.modelNameToTagMap).map(e=>this.wcRegister.getComponentTagName(e,this.renderMode)).map(e=>customElements.get(e)).filter(e=>!!e)}async loadComponentsIfNecessary(e,t){const o=new Set;e.views.forEach(e=>{DocumentUtils.iterateDepthFirst(e,e=>{o.add(e.name)})});const n=this.getComponentManifests(),s=n.map(e=>e.name),r=[...o].filter(e=>!s.includes(e));return r.length?(await this.loadComponents(r,t),{manifests:this.getComponentManifests()}):{manifests:n}}async loadComponents(e,t){const o=this.getComponentNamesToLoad(e),n=this.buildComponentFilePaths(o,t),s=await this.loadComponentClasses(n,o);return this.registerModules(s),s}getComponentNamesToLoad(e){return e||[]}buildComponentFilePaths(e,t){return e.map(e=>`${t.replace(/\/$/,"")}/${e}/${e}.js`)}loadComponentClasses(e,t){return Promise.all(e.map((e,o)=>new Promise((n,s)=>{const r=document.createElement("script");r.type="module",r.onload=()=>{const e=t[o];n(window[this.getWindowKeyForComponentClass(e)])},r.onerror=s,r.src=e,document.body.appendChild(r)})))}getWindowKeyForComponentClass(e){return`clComponentClass_${e}`}registerModules(e){e.forEach(e=>{this.wcRegister.registerComponent(e,this.renderMode)})}}

package/wc-renderer/WcViewRenderer.d.ts

@@ -1,3 +1,5 @@
+import { ComponentInsertType } from "@claspo/common/document/ComponentInsertType";
+import { RenderMode } from "@claspo/common/RenderMode";
 export default class WcViewRenderer {
     isMobile: any;
     resizeListener: any;
@@ -6,9 +8,9 @@ export default class WcViewRenderer {
     eventEmitter: any;
     viewResourceManager: any;
     constructor(documentModel: any, resizeListener: any, configService: any, factory: any, eventEmitter: any);
-    render(viewModel: any, index: any, type?: "STATIC"): any;
+    render(viewModel: any, index: any, type?: RenderMode): any;
     destroy(viewComponentRef: any): void;
-    renderComponent(containerModel: any, model: any, rendererType: any, insertPosition?: string): any;
+    renderComponent(containerModel: any, model: any, rendererType: any, insertPosition?: ComponentInsertType): any;
     selectElementToAppendTo(element: any): any;
     getRenderOutlet(element: any): any;
 }

package/wc-renderer/WcViewRenderer.js

@@ -1 +1 @@
-import ComponentInsertType from"@claspo/common/document/ComponentInsertType";import ViewEntryType from"../document-model/ViewEntryType";import{ViewRendererActionType}from"../renderer/ViewRendererActionType";import{applySysAttrPrefix}from"../renderer/RenderConstants";import ViewResourcesManager from"../resource-management/ViewResourcesManager";import RenderMode from"@claspo/common/RenderMode";export default class WcViewRenderer{constructor(e,t,n,o,r){this.isMobile=null,this.resizeListener=t,this.documentModel=e,this.factory=o,this.eventEmitter=r,this.viewResourceManager=new ViewResourcesManager(this.eventEmitter),this.destroy=this.destroy.bind(this)}render(e,t,n=RenderMode.STATIC){const o=this.factory.create(e,n,this.viewResourceManager);if(this.documentModel.setComponentRef(e.id,o),e.componentRef=o,e.type===ViewEntryType.VIEW&&"SysColumnsComponent"===e.name){const t=applySysAttrPrefix("content-container"),n=this.getRenderOutlet(e.componentRef.getRootElement());null==n||n.setAttribute(t,"")}return e.children.forEach(t=>{this.renderComponent(e,t,n)}),setTimeout(()=>{this.viewResourceManager.viewHasPendingResources()||this.eventEmitter.emit(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED)},5),o}destroy(e){var t;if(!(null===(t=e.model)||void 0===t?void 0:t.path))return;const n=e.model.path[0];this.documentModel.destroyView(n)}renderComponent(e,t,n,o=ComponentInsertType.INSIDE){var r;const i=this.factory.create(t,n,this.viewResourceManager);this.documentModel.setComponentRef(t.id,i);const s=e.componentRef.getRootElement();let c=t.props.floating||"FLOATING_IMAGE"===t.type?s:this.selectElementToAppendTo(e.componentRef.contentContainer)||this.selectElementToAppendTo(s);if(o===ComponentInsertType.INSIDE)i.connect(o,c,i);else if(o===ComponentInsertType.INSTEAD){const n=(null===(r=t.prevPath)||void 0===r?void 0:r.at(-1))<t.path.at(-1)?ComponentInsertType.AFTER:ComponentInsertType.BEFORE;i.connect(n,e.componentRef,t.componentRef)}else i.connect(o,e.componentRef,t.componentRef);return t.children&&t.children.forEach(e=>this.renderComponent(t,e,n)),t}selectElementToAppendTo(e){return e?this.getRenderOutlet(e)||e:null}getRenderOutlet(e){return e.querySelector(`[${applySysAttrPrefix("render-outlet")}]`)}}
+import{ComponentInsertType}from"@claspo/common/document/ComponentInsertType";import ViewEntryType from"../document-model/ViewEntryType";import{ViewRendererActionType}from"../renderer/ViewRendererActionType";import{applySysAttrPrefix}from"../renderer/RenderConstants";import ViewResourcesManager from"../resource-management/ViewResourcesManager";import{RenderMode}from"@claspo/common/RenderMode";export default class WcViewRenderer{constructor(e,t,n,o,r){this.isMobile=null,this.resizeListener=t,this.documentModel=e,this.factory=o,this.eventEmitter=r,this.viewResourceManager=new ViewResourcesManager(this.eventEmitter),this.destroy=this.destroy.bind(this)}render(e,t,n=RenderMode.STATIC){const o=this.factory.create(e,n,this.viewResourceManager);if(this.documentModel.setComponentRef(e.id,o),e.componentRef=o,e.type===ViewEntryType.VIEW&&"SysColumnsComponent"===e.name){const t=applySysAttrPrefix("content-container"),n=this.getRenderOutlet(e.componentRef.getRootElement());null==n||n.setAttribute(t,"")}return e.children.forEach(t=>{this.renderComponent(e,t,n)}),setTimeout(()=>{this.viewResourceManager.viewHasPendingResources()||this.eventEmitter.emit(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED)},5),o}destroy(e){var t;if(!(null===(t=e.model)||void 0===t?void 0:t.path))return;const n=e.model.path[0];this.documentModel.destroyView(n)}renderComponent(e,t,n,o=ComponentInsertType.INSIDE){var r;const i=this.factory.create(t,n,this.viewResourceManager);this.documentModel.setComponentRef(t.id,i);const s=e.componentRef.getRootElement();let c=t.props.floating||"FLOATING_IMAGE"===t.type?s:this.selectElementToAppendTo(e.componentRef.contentContainer)||this.selectElementToAppendTo(s);if(o===ComponentInsertType.INSIDE)i.connect(o,c,i);else if(o===ComponentInsertType.INSTEAD){const n=(null===(r=t.prevPath)||void 0===r?void 0:r.at(-1))<t.path.at(-1)?ComponentInsertType.AFTER:ComponentInsertType.BEFORE;i.connect(n,e.componentRef,t.componentRef)}else i.connect(o,e.componentRef,t.componentRef);return t.children&&t.children.forEach(e=>this.renderComponent(t,e,n)),t}selectElementToAppendTo(e){return e?this.getRenderOutlet(e)||e:null}getRenderOutlet(e){return e.querySelector(`[${applySysAttrPrefix("render-outlet")}]`)}}

package/wc-renderer/decorators/wcStaticDecorator.d.ts

@@ -1,4 +1,2 @@
-import ComponentInsertType from "@claspo/common/document/ComponentInsertType";
 import { ComponentClassI } from "../WcResolver";
-export type ComponentInsertTypeT = typeof ComponentInsertType[keyof typeof ComponentInsertType];
 export default function wcStaticDecorator<T extends ComponentClassI>(originComponentClass: T): T;

package/wc-renderer/decorators/wcStaticDecorator.js

@@ -1 +1 @@
-import ComponentInsertType from"@claspo/common/document/ComponentInsertType";export default function wcStaticDecorator(e){return class extends e{connect(e,n,t){switch(e){case ComponentInsertType.INSIDE:return void n.appendChild(t);case ComponentInsertType.BEFORE:case ComponentInsertType.AFTER:{const o=e===ComponentInsertType.BEFORE?"beforebegin":"afterend";return void n.insertAdjacentElement(o,t)}}}}}
+import{ComponentInsertType}from"@claspo/common/document/ComponentInsertType";export default function wcStaticDecorator(e){return class extends e{connect(e,n,t){switch(e){case ComponentInsertType.INSIDE:return void n.appendChild(t);case ComponentInsertType.BEFORE:case ComponentInsertType.AFTER:{const o=e===ComponentInsertType.BEFORE?"beforebegin":"afterend";return void n.insertAdjacentElement(o,t)}}}}}