@claspo/renderer 17.0.6-theme.36 → 17.0.7

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 ThemeCssVars from"@claspo/common/element/ThemeCssVars";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){var o;const t=e||document;this.documentJson=TranslateUtils.applyTranslationObjectToComponentsIfNeeded(JSON.parse(JSON.stringify(this.documentJson)),this.componentResolver.getComponentManifests(),this.translations);const s=new CompositionRoot(this.documentJson,this.config,this.trackingService,null,"",this.layoutType,this.renderMode,this.componentRegister,t),i=new ViewRouter(s.services.eventEmitter,s.services.documentModel,s.services.viewRenderer,this.config&&this.config.optionalDocumentStyles,s.services);s.services.viewRouter=i,this.compositionRoot=s,this.viewRenderer=s.services.viewRenderer,this.componentFactory=s.services.componentFactory,this.viewRouter=i;const r=this.compositionRoot.services.documentModel.getShared(),n=r.cssVars,c=null===(o=r.theme)||void 0===o?void 0:o.schema;return Promise.resolve().then(()=>{const e=this.viewRouter.getDocumentContainer();CssVarsOperations.override(n,e),ThemeCssVars.override(c,e)}),i.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){var t;const s=this.compositionRoot.services.documentService.handleModelUpdate(e,o);switch(e){case DocumentModelUpdateType.THEME_UPDATE:{const e=null===(t=this.compositionRoot.services.documentModel.getShared().theme)||void 0===t?void 0:t.schema;ThemeCssVars.override(e,this.viewRouter.getDocumentContainer());break}}return s}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 ThemeCssVars from"@claspo/common/element/ThemeCssVars";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,i={},n){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({},i),{renderMode:this.renderMode}),this.compositionRoot=null,this.viewRenderer=null,this.viewComponents=[],this.layoutType=n,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);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));const t=this.compositionRoot.services.documentModel.getShared();return this.viewComponents.forEach(e=>{var o;const s=t.cssVars,i=null===(o=t.theme)||void 0===o?void 0:o.schema;CssVarsOperations.override(s,e),ThemeCssVars.override(i,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){var t;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.THEME_UPDATE:{const s=o.schema||(null===(t=this.compositionRoot.services.documentModel.getShared().theme)||void 0===t?void 0:t.schema);return this.viewComponents.forEach(e=>{ThemeCssVars.override(s,e)}),asyncActionEmitter(this.compositionRoot.services.eventEmitter.emit.bind(this.compositionRoot.services.eventEmitter))(this.compositionRoot.services.documentService.handleModelUpdate.bind(this.compositionRoot.services.documentService),e)(e,o)}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/DocumentModelService.d.ts

@@ -15,7 +15,7 @@ export declare const DocumentModelUpdateType: {
     HEADER_FONT_FAMILY_UPDATE: string;
     TEXT_FONT_FAMILY_UPDATE: string;
     SHARED_UPDATE_ALL: string;
-    THEME_UPDATE: string;
+    COLOR_SCHEMA_UPDATE: string;
 };
 export default class DocumentModelService extends DefaultEventEmitter {
     json: ClDocumentI;

package/document-model/DocumentModelService.js

@@ -1 +1 @@
-import ModulesComponentExtractor from"./ModulesComponentExtractor";import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";import DocumentUtils from"@claspo/common/document/DocumentUtils";export const DocumentModelUpdateType={COMPONENT_INSERT:"COMPONENT_INSERT",COMPONENT_REMOVE:"COMPONENT_REMOVE",COMPONENT_MOVE:"COMPONENT_MOVE",COMPONENT_UPDATE:"COMPONENT_UPDATE",COMPONENT_PROPS_UPDATE:"COMPONENT_PROPS_UPDATE",SHARED_UPDATE:"SHARED_UPDATE",MOBILE_BREAKPOINT_UPDATE:"MOBILE_BREAKPOINT_UPDATE",ENVIRONMENT_UPDATE:"ENVIRONMENT_UPDATE",TEXT_CLASS_ADDED:"TEXT_CLASS_ADDED",TEXT_CLASS_UPDATED:"TEXT_CLASS_UPDATED",TEXT_CLASS_REMOVED:"TEXT_CLASS_REMOVED",HEADER_FONT_FAMILY_UPDATE:"HEADER_FONT_FAMILY_UPDATE",TEXT_FONT_FAMILY_UPDATE:"TEXT_FONT_FAMILY_UPDATE",SHARED_UPDATE_ALL:"SHARED_UPDATE_ALL",THEME_UPDATE:"THEME_UPDATE"};export default class DocumentModelService extends DefaultEventEmitter{constructor(t){super(),this.json=t,this.flatJson=ModulesComponentExtractor.extract(this.json)}setComponentRef(t,e){DocumentUtils.getNodeById(this.getViews(),t).componentRef=e}getModel(){return this.flatJson}getView(t){return this.flatJson.views[t]}getViews(){return this.flatJson.views}getShared(){return this.flatJson.shared}iterateViewModelAndExecute(t,e){const E=this.getView(t);DocumentUtils.iterateDepthFirst(E,e)}destroy(){}destroyView(t){console.warn("destroyView now should do nothing"),this.iterateViewModelAndExecute(t,t=>{t.componentRef&&(t.componentRef.remove(),t.componentRef=null)})}}
+import ModulesComponentExtractor from"./ModulesComponentExtractor";import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";import DocumentUtils from"@claspo/common/document/DocumentUtils";export const DocumentModelUpdateType={COMPONENT_INSERT:"COMPONENT_INSERT",COMPONENT_REMOVE:"COMPONENT_REMOVE",COMPONENT_MOVE:"COMPONENT_MOVE",COMPONENT_UPDATE:"COMPONENT_UPDATE",COMPONENT_PROPS_UPDATE:"COMPONENT_PROPS_UPDATE",SHARED_UPDATE:"SHARED_UPDATE",MOBILE_BREAKPOINT_UPDATE:"MOBILE_BREAKPOINT_UPDATE",ENVIRONMENT_UPDATE:"ENVIRONMENT_UPDATE",TEXT_CLASS_ADDED:"TEXT_CLASS_ADDED",TEXT_CLASS_UPDATED:"TEXT_CLASS_UPDATED",TEXT_CLASS_REMOVED:"TEXT_CLASS_REMOVED",HEADER_FONT_FAMILY_UPDATE:"HEADER_FONT_FAMILY_UPDATE",TEXT_FONT_FAMILY_UPDATE:"TEXT_FONT_FAMILY_UPDATE",SHARED_UPDATE_ALL:"SHARED_UPDATE_ALL",COLOR_SCHEMA_UPDATE:"COLOR_SCHEMA_UPDATE"};export default class DocumentModelService extends DefaultEventEmitter{constructor(t){super(),this.json=t,this.flatJson=ModulesComponentExtractor.extract(this.json)}setComponentRef(t,e){DocumentUtils.getNodeById(this.getViews(),t).componentRef=e}getModel(){return this.flatJson}getView(t){return this.flatJson.views[t]}getViews(){return this.flatJson.views}getShared(){return this.flatJson.shared}iterateViewModelAndExecute(t,e){const E=this.getView(t);DocumentUtils.iterateDepthFirst(E,e)}destroy(){}destroyView(t){console.warn("destroyView now should do nothing"),this.iterateViewModelAndExecute(t,t=>{t.componentRef&&(t.componentRef.remove(),t.componentRef=null)})}}

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.THEME_UPDATE:return this.documentModel.getShared().theme=t,this.documentModel.emit(DocumentModelUpdateType.THEME_UPDATE,t),void this.documentModel.emit(DocumentModelUpdateType.SHARED_UPDATE_ALL);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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claspo/renderer",
-  "version": "17.0.6-theme.36",
+  "version": "17.0.7",
   "scripts": {
     "dev": " tsc --project tsconfig.json --watch",
     "build": "rm -rf out && tsc --project tsconfig.json && npm run minify",
@@ -15,7 +15,7 @@
     "node": ">=18.16.0"
   },
   "dependencies": {
-    "@claspo/common": "6.0.12-theme.36",
+    "@claspo/common": "6.0.13",
     "@testing-library/dom": "^10.4.0"
   },
   "devDependencies": {

package/renderer/style/ColorSchemaListener.d.ts

@@ -1,6 +1,6 @@
 import DocumentModelService from "../../document-model/DocumentModelService";
 import HttpClient from "@claspo/common/network/HttpClient";
-import { ClBaseComponentPropsI, ClDocumentSharedI, ThemeColorSchemaI } from "@claspo/common/document/Document.interface";
+import { ClBaseComponentPropsI, ClDocumentSharedI } from "@claspo/common/document/Document.interface";
 import { PlatformEnvT } from "../../sdk/WcElement";
 export interface ParsedBackgroundI {
     url: string | null;
@@ -34,7 +34,7 @@ export default class ColorSchemaListener {
     parseBackground(background: string | undefined): ParsedBackgroundI;
     apply(env: PlatformEnvT): Promise<void>;
     on(): this;
-    _applyHostElementBackground(value: EnvUrlMapValueI | undefined, schema: ThemeColorSchemaI | undefined): void;
-    _buildBackgroundUrl(value: EnvUrlMapValueI, schema: ThemeColorSchemaI): string;
+    _applyHostElementBackground(value: EnvUrlMapValueI | undefined, cssVarsMap: Record<string, string> | undefined): void;
+    _buildBackgroundUrl(value: EnvUrlMapValueI, cssVarsMap: Record<string, string>): string;
     off(): void;
 }

package/renderer/style/ColorSchemaListener.js

@@ -1 +1 @@
-import{DocumentModelUpdateType}from"../../document-model/DocumentModelService";import ErrorLogger from"../../error/ErrorLogger";import{formCssVarToSchemaToken,toCssVarToken}from"@claspo/common/theme/theme.utils";export default class ColorSchemaListener{constructor(t,e,o,n,s,i){this.hostElement=e,this.documentModel=t,this.getSharedCb=o,this.getPropsCb=n,this.getEnvCb=s,this.httpClient=i,this.subscription=null,this.envUrlMaps={desktop:new Map,mobile:new Map}}parseBackground(t){const e=String(t||"");if(e.includes("url")){const[t,o]=e.split("(")[1].split(")");return{url:t.replace(/['"]+/g,""),positionOptions:o.replace(";","")}}return{url:null,positionOptions:null}}apply(t){const e=this.getPropsCb();return e.backgroundDynamicInlineSVGElements[t].forEach(o=>{var n,s,i,r,l;const a=null===(s=null===(n=e.adaptiveStyles)||void 0===n?void 0:n[t])||void 0===s?void 0:s.find(t=>t.element===o),c=(null===(i=e.styles)||void 0===i?void 0:i.find(t=>t.element===o))||{},u=(null===(r=null==c?void 0:c.styleAttributes)||void 0===r?void 0:r.background)||(null===(l=null==a?void 0:a.styleAttributes)||void 0===l?void 0:l.background),p=this.parseBackground(u);p.url&&this.envUrlMaps[t].set(o,{originalSVGResourceURL:p.url,inlineSvgString:null,positionOptions:p.positionOptions})}),Promise.all([...this.envUrlMaps[t].entries()].map(([e,o])=>this.httpClient.execute(o.originalSVGResourceURL).then(t=>t.text()).then(n=>{this.envUrlMaps[t].set(e,Object.assign(Object.assign({},o),{inlineSvgString:n}))}))).then(()=>{var e;this._applyHostElementBackground(this.envUrlMaps[t].get("host"),null===(e=this.getSharedCb().theme)||void 0===e?void 0:e.schema)}).catch(t=>{console.error(t),ErrorLogger.log(`Failed to load/apply backgroundDynamicInlineSVGElements[${this.getPropsCb().backgroundDynamicInlineSVGElements}] ${t}`)})}on(){return this.subscription=this.documentModel.on(DocumentModelUpdateType.THEME_UPDATE,t=>{this._applyHostElementBackground(this.envUrlMaps[this.getEnvCb()].get("host"),t.schema)}),this}_applyHostElementBackground(t,e){t&&e&&(this.hostElement.style.background=this._buildBackgroundUrl(t,e))}_buildBackgroundUrl(t,e){const o=t.inlineSvgString.trim();let n=o;[...o.matchAll(/var\(--cl-schema-([^)]+)\)/g)].forEach(t=>{const o=formCssVarToSchemaToken(t[1]);n=n.replace(`var(--${toCssVarToken(o)})`,e[o])});return`url('data:image/svg+xml,${encodeURIComponent(n)}')${t.positionOptions}`}off(){var t;null===(t=this.subscription)||void 0===t||t.off()}}
+import{DocumentModelUpdateType}from"../../document-model/DocumentModelService";import ErrorLogger from"../../error/ErrorLogger";export default class ColorSchemaListener{constructor(t,e,n,o,i,s){this.hostElement=e,this.documentModel=t,this.getSharedCb=n,this.getPropsCb=o,this.getEnvCb=i,this.httpClient=s,this.subscription=null,this.envUrlMaps={desktop:new Map,mobile:new Map}}parseBackground(t){const e=String(t||"");if(e.includes("url")){const[t,n]=e.split("(")[1].split(")");return{url:t.replace(/['"]+/g,""),positionOptions:n.replace(";","")}}return{url:null,positionOptions:null}}apply(t){const e=this.getPropsCb();return e.backgroundDynamicInlineSVGElements[t].forEach(n=>{var o,i,s,r,l;const a=null===(i=null===(o=e.adaptiveStyles)||void 0===o?void 0:o[t])||void 0===i?void 0:i.find(t=>t.element===n),c=(null===(s=e.styles)||void 0===s?void 0:s.find(t=>t.element===n))||{},u=(null===(r=null==c?void 0:c.styleAttributes)||void 0===r?void 0:r.background)||(null===(l=null==a?void 0:a.styleAttributes)||void 0===l?void 0:l.background),p=this.parseBackground(u);p.url&&this.envUrlMaps[t].set(n,{originalSVGResourceURL:p.url,inlineSvgString:null,positionOptions:p.positionOptions})}),Promise.all([...this.envUrlMaps[t].entries()].map(([e,n])=>this.httpClient.execute(n.originalSVGResourceURL).then(t=>t.text()).then(o=>{this.envUrlMaps[t].set(e,Object.assign(Object.assign({},n),{inlineSvgString:o}))}))).then(()=>{this._applyHostElementBackground(this.envUrlMaps[t].get("host"),this.getSharedCb().cssVars)}).catch(t=>{console.error(t),ErrorLogger.log(`Failed to load/apply backgroundDynamicInlineSVGElements[${this.getPropsCb().backgroundDynamicInlineSVGElements}] ${t}`)})}on(){return this.subscription=this.documentModel.on(DocumentModelUpdateType.COLOR_SCHEMA_UPDATE,t=>{this._applyHostElementBackground(this.envUrlMaps[this.getEnvCb()].get("host"),t)}),this}_applyHostElementBackground(t,e){t&&e&&(this.hostElement.style.background=this._buildBackgroundUrl(t,e))}_buildBackgroundUrl(t,e){const n=t.inlineSvgString.trim().replace("var(--cl-schema-accent)",e["cl-schema-accent"]);return`url('data:image/svg+xml,${encodeURIComponent(n)}')${t.positionOptions}`}off(){var t;null===(t=this.subscription)||void 0===t||t.off()}}