@claspo/renderer 18.5.2 → 18.7.0-rc1

package/action/ActionRegister.d.ts

@@ -1,5 +1,21 @@
 import DefaultEventEmitter from "@claspo/common/DefaultEventEmitter";
 import ViewRouter from '../ViewRouter';
+import DocumentModelService from '../document-model/DocumentModelService';
+import DocumentService from '../document-model/DocumentService';
+import DefaultState from '../common/DefaultState';
+import FormGroup from '../form/FormGroup';
+import ConfigService from '../common/ConfigService';
+import ClDocumentResizeListener from '../renderer/style/ClDocumentResizeListener';
+import DefaultMediaQueryListener from '../renderer/style/DefaultMediaQueryListener';
+import MobileDeviceOrientationListener from '../renderer/style/MobileDeviceOrientationListener';
+import CommonStylesService from '../renderer/style/CommonStylesService';
+import WcFactory from '../wc-renderer/WcFactory';
+import WcViewRenderer from '../wc-renderer/WcViewRenderer';
+import ActionFactory from './ActionFactory';
+import SubmitStateService from '../submit-state/SubmitStateService';
+import PrizePoolFactory from '../prize-pool/PrizePoolFactory';
+import ContextSDK from '../sdk/context/ContextSDK';
+import { MergeTagsProcessorFactory } from '../sdk/merge-tags/MergeTagsProcessorFactory';
 export interface RegisteredActionI {
     execute(event?: Event, target?: HTMLElement, isComplete?: boolean, overrideParams?: Record<string, any>): void;
     category?: string;
@@ -7,8 +23,25 @@ export interface RegisteredActionI {
     [key: string]: any;
 }
 export interface ActionRegisterServicesI {
-    viewRouter: ViewRouter;
-    [key: string]: any;
+    documentService: DocumentService;
+    documentModel: DocumentModelService;
+    state: DefaultState;
+    form: FormGroup;
+    eventEmitter: DefaultEventEmitter;
+    config: ConfigService;
+    resizeListener: ClDocumentResizeListener | DefaultMediaQueryListener;
+    mobileDeviceOrientationListener: MobileDeviceOrientationListener;
+    componentFactory: WcFactory;
+    viewRenderer: WcViewRenderer;
+    commonStylesService: CommonStylesService;
+    tracking: any;
+    actionFactory: ActionFactory;
+    actionRegister: ActionRegister;
+    submitState: SubmitStateService;
+    prizePoolFactory: PrizePoolFactory;
+    context: ContextSDK;
+    mergeTagsProcessorFactory: MergeTagsProcessorFactory;
+    viewRouter?: ViewRouter;
 }
 export type GetServicesT = () => ActionRegisterServicesI;
 export declare class ActionRegister {

package/action/actions/BaseRequestAction.d.ts

@@ -1,3 +1,4 @@
+import { GetServicesT } from '../ActionRegister';
 export declare const RequestStatus: {
     SUCCESS: string;
     ALREADY_SUBSCRIBED: string;
@@ -15,7 +16,7 @@ export default class BaseRequestAction {
     tracking: any;
     stateService: any;
     context: any;
-    getServices: any;
+    getServices: GetServicesT;
     category: any;
     constructor(eventEmitter: any, form: any, config: any, httpClient: any, configService: any, tracking: any, state: any, context: any, getServices: any);
     skipHttpRequest: boolean;
@@ -41,4 +42,9 @@ export default class BaseRequestAction {
     constructRequestHeaders(): {};
     goToView(viewIndex: any, params: any): void;
     sendRequest(requestPayload: any): any;
+    private getSuccessViewIndex;
+    private getErrorViewIndex;
+    private getAlreadySubscribedViewIndex;
+    private resolveResultViewIndex;
+    private runPostSubmitActionOrGoToView;
 }

package/action/actions/BaseRequestAction.js

@@ -1 +1 @@
-import SysActionTypes from"../SysActionTypes";import SysEventTypes from"../../common/SysEventTypes";import{HttpStatus}from"@claspo/common/network/HttpStatus";import ActionCategory from"./ActionCategory";import systemResultStateNames from"../../document-model/systemResultStateNames";import DocumentUtils from"@claspo/common/document/DocumentUtils";import getComponentCountOnView from"../../sdk/getComponentCountOnView";import UTMParamsExtractor from"../UTMParamsExtractor";import isDictionary from"@claspo/common/object/isDictionary";function componentModelHasSubmitAction(t){var e,s;try{return!!(null===(s=null===(e=t.props)||void 0===e?void 0:e.handlers)||void 0===s?void 0:s.find(t=>{var e;return null===(e=null==t?void 0:t.actions)||void 0===e?void 0:e.find(t=>[SysActionTypes.REQUEST,SysActionTypes.SUBSCRIBE_CONTACT].includes(t.type))}))}catch(t){return!1}}function viewHasControls(t){if(!t)return!1;let e=0;return DocumentUtils.iterateDepthFirst(t,t=>{(["INPUT","MULTIPLE_INPUT","PRIZE_BASED_GAMING"].includes(t.type)||componentModelHasSubmitAction(t))&&e++}),e>0}function isSystemView(t){return t&&systemResultStateNames.includes(t.label)}export const RequestStatus={SUCCESS:"SUCCESS",ALREADY_SUBSCRIBED:"ALREADY_SUBSCRIBED",ERROR:"ERROR",TOO_MANY_REQUESTS:"TOO_MANY_REQUESTS"};export default class BaseRequestAction{constructor(t,e,s,i,n,o,r,a,c){this.skipHttpRequest=!0,this.id=s.id,this.params=s.params,this.form=e,this.eventEmitter=t,this.httpClient=i,this.configService=n,this.formEventsListener=null,this.tracking=o,this.stateService=r,this.context=a,this.getServices=c,this.category=ActionCategory.SUBMIT}getTrackingMessageBeforeSentData(){return""}getTrackingMessageByStatus(t){return""}async execute(t,e,s,i){var n;if(this.formEventsListener&&this.formEventsListener.off(),this.form.submitQueuedAfterPending)return;if(this.form.preventSubmit)return void(this.form.submitQueuedAfterPending=!1);if(this.form.isPending()&&(this.form.submitQueuedAfterPending=!0,await this.form.waitForPendingValidationAndCheckIfValid()),this.form.submitQueuedAfterPending=!1,this.form.preventSubmit)return;const o=new Promise(t=>{this.submit(t,s,i)});return null===(n=this.getServices().submitState)||void 0===n||n.trackSubmission(o),o}submit(t,e,s){var i;const n=this.getServices().viewRouter.getCurrentViewIndex(),o=this.getServices().documentModel.getViews().slice(n+1).filter(t=>!systemResultStateNames.includes(t.label)).length>0,r=Object.assign(Object.assign({},this.params),s);if(this.form.markAsTouched(),this.stateService.getState().emitActionOnSubmit&&this.eventEmitter.emit(this.stateService.getState().emitActionOnSubmit.eventName),this.stateService.getState().interceptSubmitActions&&!e)return;if(!this.form.isValid()&&!r.skipValidation)return this.eventEmitter.emit("INVALID_CONTACT_DATA_SUBMIT_ATTEMPT"),void t(!1);const a=this.stateService,c=a.getState().conditionalRedirectViewId,u=r.conditionalRedirectViewId||c;c&&(r.conditionalRedirectViewId=c,a.setState({conditionalRedirectViewId:null}));let S=this.getServices().documentModel.getViews()[n+1];const m=this.getServices().documentModel.getViews()[n];if(!r.skipNavigation&&u&&getComponentCountOnView(m,"SysNetPromoterScoreComponent")+getComponentCountOnView(m,"SysFeedbackComponent")===1&&(S=this.getServices().documentModel.getViews().find(t=>t.id===r.conditionalRedirectViewId),viewHasControls(S)||isSystemView(S)))return this.goToView(S.path[0],r),void t(!0);const E=null!==(i=r.formValue)&&void 0!==i?i:this.form.getControlsMap(),d=this.getContextValue(r);if(!r.skipNavigation&&o&&(viewHasControls(S)||!Object.keys(E).length&&!Object.keys(d).length))return this.goToView(n+1,r),void t(!0);if(!Object.keys(E).length&&!Object.keys(d).length)return void t(!0);const l=UTMParamsExtractor.extractTrackingParams(this.context),g=this.constructRequestPayload({contextValue:d,formValue:E,utmParams:l});this.eventEmitter.emit(SysEventTypes.SUBMIT_REQUEST_STARTED,g),this.eventEmitter.emit("CONTACT_DATA_SUBMIT",g);if(this.getTrackingMessageBeforeSentData()&&this.tracking.send("FormFinish_[Name]"),this.configService.getConfig("isBot"))return this.eventEmitter.emit(SysEventTypes.SUBMIT_REQUEST_FINISHED,{state:RequestStatus.SUCCESS,success:!0,skipped:!0}),void t();this.sendRequest(g).then(t=>t.json().then(e=>t.status===HttpStatus.TOO_MANY_REQUESTS?{state:RequestStatus.TOO_MANY_REQUESTS}:{contactId:e.contactId,state:e&&e.next&&e.next.type}),()=>({state:RequestStatus.ERROR})).then(e=>{const s=this.getTrackingMessageByStatus(e.state);if(s&&this.tracking.send(s),r.skipNavigation)return e.state===RequestStatus.TOO_MANY_REQUESTS&&this.eventEmitter.emit(SysEventTypes.TOO_MANY_REQUESTS),e.contactId&&"0"!==e.contactId&&this.eventEmitter.emit("CONTACT_ID_WAS_RECEIVED",e.contactId),this.eventEmitter.emit(SysEventTypes.SUBMIT_REQUEST_FINISHED,Object.assign(Object.assign({},e),{success:e.state===RequestStatus.SUCCESS||e.state===RequestStatus.ALREADY_SUBSCRIBED})),void t(e.state===RequestStatus.SUCCESS||e.state===RequestStatus.ALREADY_SUBSCRIBED);switch(e.state){case RequestStatus.SUCCESS:this.goToView(o&&S?S.path[0]:this.getServices().documentModel.getViews().findIndex(t=>"DOCUMENT_VIEW_TYPE_SUCCESS"===t.label||"DOCUMENT_VIEW_TYPE_SUCCESSFUL_REQUEST"===t.label||"REQUEST_FORM_VIEW_TYPE_SUCCESS"===t.label));break;case RequestStatus.ALREADY_SUBSCRIBED:this.goToView(u&&S?S.path[0]:this.getServices().documentModel.getViews().findIndex(t=>"DOCUMENT_VIEW_TYPE_SUBSCRIBED"===t.label));break;case RequestStatus.ERROR:this.goToView(u&&S?S.path[0]:this.getServices().documentModel.getViews().findIndex(t=>"DOCUMENT_VIEW_TYPE_ERROR"===t.label));break;case RequestStatus.TOO_MANY_REQUESTS:this.goToView(u&&S?S.path[0]:this.getServices().documentModel.getViews().findIndex(t=>"DOCUMENT_VIEW_TYPE_ERROR"===t.label)),this.eventEmitter.emit(SysEventTypes.TOO_MANY_REQUESTS)}e.contactId&&"0"!==e.contactId&&this.eventEmitter.emit("CONTACT_ID_WAS_RECEIVED",e.contactId),this.eventEmitter.emit(SysEventTypes.SUBMIT_REQUEST_FINISHED,Object.assign(Object.assign({},e),{success:e.state===RequestStatus.SUCCESS||e.state===RequestStatus.ALREADY_SUBSCRIBED})),t(e.state===RequestStatus.SUCCESS||e.state===RequestStatus.ALREADY_SUBSCRIBED)}).catch(()=>{this.eventEmitter.emit(SysEventTypes.SUBMIT_REQUEST_FINISHED,{state:RequestStatus.ERROR,success:!1}),r.skipNavigation||this.goToView(this.getServices().documentModel.getViews().findIndex(t=>"DOCUMENT_VIEW_TYPE_ERROR"===t.label)),t(!1)})}getContextValue(t){var e,s;if(!t.excludeFormContext)return this.context.getKVMap();const i=(null===(s=(e=this.context).getRecordsMap)||void 0===s?void 0:s.call(e))||{};return Object.values(i).reduce((t,e)=>{var s;const i=null===(s=null==e?void 0:e.getValue)||void 0===s?void 0:s.call(e);return i&&"FORM"!==i.sourceId?(t[i.id]=i.value,t):t},{})}constructDataToSent({contextValue:t,formValue:e,utmParams:s}){const i=Object.assign({},t);return i.tracking=s,Object.keys(e).forEach(t=>{if(t.startsWith("clConsentId")){if(t.endsWith("_label"))return;const s={value:e[t]};e[`${t}_label`]&&(s.text=e[`${t}_label`]),i.consents?i.consents[t]=s:i.consents={[t]:s}}else{const s=e[t];i[t]=isDictionary(s)||Array.isArray(s)?JSON.stringify(s):s}}),i}constructRequestPayload({contextValue:t,formValue:e,utmParams:s}){let i={data:this.constructDataToSent({contextValue:t,formValue:e,utmParams:s}),referrer:window.location.href,triggeredBy:this.configService.getConfig("triggeredBy")};return this.configService.getConfig("widgetDebugMode")&&(i.ignoreTracking=!0),i}constructRequestHeaders(){const t={},e=this.configService.getConfig("clCustomerId");return e&&Object.assign(t,{"cl-customer-id":e}),t}goToView(t,e){this.eventEmitter.emit(SysActionTypes.GO_TO_VIEW,t,e)}sendRequest(t){return this.skipHttpRequest?Promise.resolve({status:200,json:()=>Promise.resolve({next:{type:RequestStatus.SUCCESS}})}):this.httpClient.execute(this.configService.getConfig("subscribeContactUrl"),"POST",t,this.constructRequestHeaders())}}
+import SysActionTypes from"../SysActionTypes";import SysEventTypes from"../../common/SysEventTypes";import{HttpStatus}from"@claspo/common/network/HttpStatus";import ActionCategory from"./ActionCategory";import systemResultStateNames from"../../document-model/systemResultStateNames";import DocumentUtils from"@claspo/common/document/DocumentUtils";import getComponentCountOnView from"../../sdk/getComponentCountOnView";import UTMParamsExtractor from"../UTMParamsExtractor";import isDictionary from"@claspo/common/object/isDictionary";function componentModelHasSubmitAction(t){var e,s;try{return!!(null===(s=null===(e=t.props)||void 0===e?void 0:e.handlers)||void 0===s?void 0:s.find(t=>{var e;return null===(e=null==t?void 0:t.actions)||void 0===e?void 0:e.find(t=>[SysActionTypes.REQUEST,SysActionTypes.SUBSCRIBE_CONTACT].includes(t.type))}))}catch(t){return!1}}function viewHasControls(t){if(!t)return!1;let e=0;return DocumentUtils.iterateDepthFirst(t,t=>{(["INPUT","MULTIPLE_INPUT","PRIZE_BASED_GAMING"].includes(t.type)||componentModelHasSubmitAction(t))&&e++}),e>0}function isSystemView(t){return t&&systemResultStateNames.includes(t.label)}export const RequestStatus={SUCCESS:"SUCCESS",ALREADY_SUBSCRIBED:"ALREADY_SUBSCRIBED",ERROR:"ERROR",TOO_MANY_REQUESTS:"TOO_MANY_REQUESTS"};export default class BaseRequestAction{constructor(t,e,s,i,n,o,r,a,c){this.skipHttpRequest=!0,this.id=s.id,this.params=s.params,this.form=e,this.eventEmitter=t,this.httpClient=i,this.configService=n,this.formEventsListener=null,this.tracking=o,this.stateService=r,this.context=a,this.getServices=c,this.category=ActionCategory.SUBMIT}getTrackingMessageBeforeSentData(){return""}getTrackingMessageByStatus(t){return""}async execute(t,e,s,i){var n;if(this.formEventsListener&&this.formEventsListener.off(),this.form.submitQueuedAfterPending)return;if(this.form.preventSubmit)return void(this.form.submitQueuedAfterPending=!1);if(this.form.isPending()&&(this.form.submitQueuedAfterPending=!0,await this.form.waitForPendingValidationAndCheckIfValid()),this.form.submitQueuedAfterPending=!1,this.form.preventSubmit)return;const o=new Promise(t=>{this.submit(t,s,i)});return null===(n=this.getServices().submitState)||void 0===n||n.trackSubmission(o),o}submit(t,e,s){var i;const n=this.getServices().viewRouter.getCurrentViewIndex(),o=this.getServices().documentModel.getViews().slice(n+1).filter(t=>!systemResultStateNames.includes(t.label)).length>0,r=Object.assign(Object.assign({},this.params),s);if(this.form.markAsTouched(),this.stateService.getState().emitActionOnSubmit&&this.eventEmitter.emit(this.stateService.getState().emitActionOnSubmit.eventName),this.stateService.getState().interceptSubmitActions&&!e)return;if(!this.form.isValid()&&!r.skipValidation)return this.eventEmitter.emit("INVALID_CONTACT_DATA_SUBMIT_ATTEMPT"),void t(!1);const a=this.stateService,c=a.getState().conditionalRedirectViewId,u=r.conditionalRedirectViewId||c;c&&(r.conditionalRedirectViewId=c,a.setState({conditionalRedirectViewId:null}));let S=this.getServices().documentModel.getViews()[n+1];const m=this.getServices().documentModel.getViews()[n];if(!r.skipNavigation&&u&&getComponentCountOnView(m,"SysNetPromoterScoreComponent")+getComponentCountOnView(m,"SysFeedbackComponent")===1&&(S=this.getServices().documentModel.getViews().find(t=>t.id===r.conditionalRedirectViewId),viewHasControls(S)||isSystemView(S)))return this.goToView(S.path[0],r),void t(!0);const d=null!==(i=r.formValue)&&void 0!==i?i:this.form.getControlsMap(),l=this.getContextValue(r);if(!r.skipNavigation&&o&&(viewHasControls(S)||!Object.keys(d).length&&!Object.keys(l).length))return this.goToView(n+1,r),void t(!0);if(!Object.keys(d).length&&!Object.keys(l).length)return void t(!0);const E=UTMParamsExtractor.extractTrackingParams(this.context),h=this.constructRequestPayload({contextValue:l,formValue:d,utmParams:E});this.eventEmitter.emit(SysEventTypes.SUBMIT_REQUEST_STARTED,h),this.eventEmitter.emit("CONTACT_DATA_SUBMIT",h);if(this.getTrackingMessageBeforeSentData()&&this.tracking.send("FormFinish_[Name]"),this.configService.getConfig("isBot"))return this.eventEmitter.emit(SysEventTypes.SUBMIT_REQUEST_FINISHED,{state:RequestStatus.SUCCESS,success:!0,skipped:!0}),void t();this.sendRequest(h).then(t=>t.json().then(e=>t.status===HttpStatus.TOO_MANY_REQUESTS?{state:RequestStatus.TOO_MANY_REQUESTS}:{contactId:e.contactId,state:e&&e.next&&e.next.type}),()=>({state:RequestStatus.ERROR})).then(e=>{const s=this.getTrackingMessageByStatus(e.state);if(s&&this.tracking.send(s),r.skipNavigation)return e.state===RequestStatus.TOO_MANY_REQUESTS&&this.eventEmitter.emit(SysEventTypes.TOO_MANY_REQUESTS),e.contactId&&"0"!==e.contactId&&this.eventEmitter.emit("CONTACT_ID_WAS_RECEIVED",e.contactId),this.eventEmitter.emit(SysEventTypes.SUBMIT_REQUEST_FINISHED,Object.assign(Object.assign({},e),{success:e.state===RequestStatus.SUCCESS||e.state===RequestStatus.ALREADY_SUBSCRIBED})),void t(e.state===RequestStatus.SUCCESS||e.state===RequestStatus.ALREADY_SUBSCRIBED);switch(e.state){case RequestStatus.SUCCESS:o&&S?this.goToView(S.path[0]):this.runPostSubmitActionOrGoToView(()=>this.getSuccessViewIndex());break;case RequestStatus.ALREADY_SUBSCRIBED:u&&S?this.goToView(S.path[0]):this.runPostSubmitActionOrGoToView(()=>this.getAlreadySubscribedViewIndex());break;case RequestStatus.ERROR:u&&S?this.goToView(S.path[0]):this.runPostSubmitActionOrGoToView(()=>this.getErrorViewIndex());break;case RequestStatus.TOO_MANY_REQUESTS:this.goToView(u&&S?S.path[0]:this.getErrorViewIndex()),this.eventEmitter.emit(SysEventTypes.TOO_MANY_REQUESTS)}e.contactId&&"0"!==e.contactId&&this.eventEmitter.emit("CONTACT_ID_WAS_RECEIVED",e.contactId),this.eventEmitter.emit(SysEventTypes.SUBMIT_REQUEST_FINISHED,Object.assign(Object.assign({},e),{success:e.state===RequestStatus.SUCCESS||e.state===RequestStatus.ALREADY_SUBSCRIBED})),t(e.state===RequestStatus.SUCCESS||e.state===RequestStatus.ALREADY_SUBSCRIBED)}).catch(()=>{this.eventEmitter.emit(SysEventTypes.SUBMIT_REQUEST_FINISHED,{state:RequestStatus.ERROR,success:!1}),r.skipNavigation||this.goToView(this.getErrorViewIndex()),t(!1)})}getContextValue(t){var e,s;if(!t.excludeFormContext)return this.context.getKVMap();const i=(null===(s=(e=this.context).getRecordsMap)||void 0===s?void 0:s.call(e))||{};return Object.values(i).reduce((t,e)=>{var s;const i=null===(s=null==e?void 0:e.getValue)||void 0===s?void 0:s.call(e);return i&&"FORM"!==i.sourceId?(t[i.id]=i.value,t):t},{})}constructDataToSent({contextValue:t,formValue:e,utmParams:s}){const i=Object.assign({},t);return i.tracking=s,Object.keys(e).forEach(t=>{if(t.startsWith("clConsentId")){if(t.endsWith("_label"))return;const s={value:e[t]};e[`${t}_label`]&&(s.text=e[`${t}_label`]),i.consents?i.consents[t]=s:i.consents={[t]:s}}else{const s=e[t];i[t]=isDictionary(s)||Array.isArray(s)?JSON.stringify(s):s}}),i}constructRequestPayload({contextValue:t,formValue:e,utmParams:s}){let i={data:this.constructDataToSent({contextValue:t,formValue:e,utmParams:s}),referrer:window.location.href,triggeredBy:this.configService.getConfig("triggeredBy")};return this.configService.getConfig("widgetDebugMode")&&(i.ignoreTracking=!0),i}constructRequestHeaders(){const t={},e=this.configService.getConfig("clCustomerId");return e&&Object.assign(t,{"cl-customer-id":e}),t}goToView(t,e){this.eventEmitter.emit(SysActionTypes.GO_TO_VIEW,t,e)}sendRequest(t){return this.skipHttpRequest?Promise.resolve({status:200,json:()=>Promise.resolve({next:{type:RequestStatus.SUCCESS}})}):this.httpClient.execute(this.configService.getConfig("subscribeContactUrl"),"POST",t,this.constructRequestHeaders())}getSuccessViewIndex(){return this.resolveResultViewIndex("successViewId",["DOCUMENT_VIEW_TYPE_SUCCESS","DOCUMENT_VIEW_TYPE_SUCCESSFUL_REQUEST","REQUEST_FORM_VIEW_TYPE_SUCCESS"])}getErrorViewIndex(){return this.resolveResultViewIndex("errorViewId",["DOCUMENT_VIEW_TYPE_ERROR"])}getAlreadySubscribedViewIndex(){return this.resolveResultViewIndex("alreadySubscribedViewId",["DOCUMENT_VIEW_TYPE_SUBSCRIBED"])}resolveResultViewIndex(t,e){var s;const i=this.getServices().documentModel,n=i.getViews(),o=null===(s=i.getShared().submitActionParams)||void 0===s?void 0:s[t];if(o){const t=n.findIndex(t=>t.id===o);if(-1!==t)return t}return n.findIndex(t=>e.includes(t.label))}runPostSubmitActionOrGoToView(t){var e;const s=null===(e=this.getServices().documentModel.getShared().submitActionParams)||void 0===e?void 0:e.runAction;s?this.getServices().actionFactory.get(s).execute(this.stateService.getState()):this.goToView(t())}}

package/action/actions/OpenLinkAction.js

@@ -1 +1 @@
-import SysActionTypes from"../SysActionTypes";import sanitizeUrl from"@claspo/common/url/sanitizeUrl";export default class OpenLinkAction{constructor(t,a,e){this.type=SysActionTypes.OPEN_LINK,this.params=t.params,this.configService=a,this.tracking=e}execute(t,a){a.stopPropagation(),this.tracking.send("FormClick_[Name]"),this.tracking.trackTargetAction(this.params.countAsTargetAction),this.tracking.trackClick({params:this.params.trackClickParams,countAsTargetAction:this.params.countAsTargetAction});let e=this.params.link;const n=this.configService.getConfig("utmTag");if(this.params.tagsEnabled&&(null==n?void 0:n.enabled)){const t=OpenLinkAction.getDynamicUtmParamsMap(this.configService),a=OpenLinkAction.getUtmTags(n,t);e=OpenLinkAction.appendQueryParamsToLink(this.params.link,a)}return window.open(sanitizeUrl(e),this.params.target),Promise.resolve(!0)}static appendQueryParamsToLink(t,a){const e=new URL(t);return Object.keys(a).forEach(t=>{e.searchParams.has(t)||e.searchParams.append(t,a[t])}),e.href}static getUtmTags(t,a){const e={},n=new Map([["utmSource","utm_source"],["utmMedium","utm_medium"],["utmCampaign","utm_campaign"],["utmContent","utm_content"],["utmTerm","utm_term"]]);return["utmSource","utmMedium","utmCampaign","utmContent","utmTerm"].filter(a=>void 0!==(null==t?void 0:t[a])).forEach(i=>{const o=n.get(i),s=a.has(t[i])?a.get(t[i]):encodeURIComponent(t[i]);e[o]=s}),(null==t?void 0:t.customTagsEnabled)&&Object.keys((null==t?void 0:t.utmCustomTags)||{}).filter(a=>{var e;return void 0!==(null===(e=null==t?void 0:t.utmCustomTags)||void 0===e?void 0:e[a])}).forEach(n=>{e[n]=a.has(t.utmCustomTags[n])?a.get(t.utmCustomTags[n]):encodeURIComponent(t.utmCustomTags[n])}),e}static getDynamicUtmParamsMap(t){const a=a=>OpenLinkAction.normalizeUtmParam(t.getConfig(a));return new Map([["$widgetId",a("formVariantId")],["$widgetName",encodeURIComponent(a("widgetName"))],["$widgetType",a("layoutType")],["$widgetLang",a("browserLanguage")],["$contactId",encodeURIComponent(a("clContactId"))]])}static normalizeUtmParam(t){return null==t?"":String(t)}}
+import SysActionTypes from"../SysActionTypes";import sanitizeUrl from"@claspo/common/url/sanitizeUrl";export default class OpenLinkAction{constructor(t,a,e){this.type=SysActionTypes.OPEN_LINK,this.params=t.params,this.configService=a,this.tracking=e}execute(t,a){null==a||a.stopPropagation(),this.tracking.send("FormClick_[Name]"),this.tracking.trackTargetAction(this.params.countAsTargetAction),this.tracking.trackClick({params:this.params.trackClickParams,countAsTargetAction:this.params.countAsTargetAction});let e=this.params.link;const n=this.configService.getConfig("utmTag");if(this.params.tagsEnabled&&(null==n?void 0:n.enabled)){const t=OpenLinkAction.getDynamicUtmParamsMap(this.configService),a=OpenLinkAction.getUtmTags(n,t);e=OpenLinkAction.appendQueryParamsToLink(this.params.link,a)}return window.open(sanitizeUrl(e),this.params.target),Promise.resolve(!0)}static appendQueryParamsToLink(t,a){const e=new URL(t);return Object.keys(a).forEach(t=>{e.searchParams.has(t)||e.searchParams.append(t,a[t])}),e.href}static getUtmTags(t,a){const e={},n=new Map([["utmSource","utm_source"],["utmMedium","utm_medium"],["utmCampaign","utm_campaign"],["utmContent","utm_content"],["utmTerm","utm_term"]]);return["utmSource","utmMedium","utmCampaign","utmContent","utmTerm"].filter(a=>void 0!==(null==t?void 0:t[a])).forEach(i=>{const o=n.get(i),s=a.has(t[i])?a.get(t[i]):encodeURIComponent(t[i]);e[o]=s}),(null==t?void 0:t.customTagsEnabled)&&Object.keys((null==t?void 0:t.utmCustomTags)||{}).filter(a=>{var e;return void 0!==(null===(e=null==t?void 0:t.utmCustomTags)||void 0===e?void 0:e[a])}).forEach(n=>{e[n]=a.has(t.utmCustomTags[n])?a.get(t.utmCustomTags[n]):encodeURIComponent(t.utmCustomTags[n])}),e}static getDynamicUtmParamsMap(t){const a=a=>OpenLinkAction.normalizeUtmParam(t.getConfig(a));return new Map([["$widgetId",a("formVariantId")],["$widgetName",encodeURIComponent(a("widgetName"))],["$widgetType",a("layoutType")],["$widgetLang",a("browserLanguage")],["$contactId",encodeURIComponent(a("clContactId"))]])}static normalizeUtmParam(t){return null==t?"":String(t)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claspo/renderer",
-  "version": "18.5.2",
+  "version": "18.7.0-rc1",
   "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": "7.2.0",
+    "@claspo/common": "7.3.0-rc1",
     "@testing-library/dom": "^10.4.0"
   },
   "devDependencies": {

package/sdk/FormUtils.js

@@ -1 +1 @@
-import{addTooltipStyles,createTooltipText,removeTooltipStyles,setTooltipPosition}from"./TooltipUtils";export function setValidStyles(t,i){t&&t.classList.remove("invalid"),i&&(i.style.visibility="hidden")}export function setInvalidStyle(t,i,e,o){o=o||document;let l=null;t&&t.classList.add("invalid"),i&&(i.style.visibility="visible");const s=()=>{addTooltipStyles(o),l=createTooltipText(e),o.body.append(l),l.style.visibility="visible",setTooltipPosition({triggerElement:i,tooltipElement:l,htmlDocumentObject:o})},n=()=>{l&&(l.remove(),removeTooltipStyles(o))};i&&(i.onmouseenter=s,i.onmouseleave=n)}export function setPendingStyle(t,i){i&&(i.style.visibility="hidden"),t&&t.classList.contains("invalid")&&t.classList.remove("invalid")}
+import{addTooltipStyles,createTooltipText,removeTooltipStyles,setTooltipPosition}from"./TooltipUtils";export function setValidStyles(t,i){t&&(t.classList.remove("invalid"),t.setAttribute("aria-invalid","false")),i&&(i.style.visibility="hidden")}export function setInvalidStyle(t,i,e,l){l=l||document;let o=null;t&&(t.classList.add("invalid"),t.setAttribute("aria-invalid","true")),i&&(i.style.visibility="visible");const s=()=>{addTooltipStyles(l),o=createTooltipText(e),l.body.append(o),o.style.visibility="visible",setTooltipPosition({triggerElement:i,tooltipElement:o,htmlDocumentObject:l})},n=()=>{o&&(o.remove(),removeTooltipStyles(l))};i&&(i.onmouseenter=s,i.onmouseleave=n)}export function setPendingStyle(t,i){i&&(i.style.visibility="hidden"),t&&t.classList.contains("invalid")&&(t.classList.remove("invalid"),t.removeAttribute("aria-invalid"))}

package/sdk/HtmlStyleUtils.js

@@ -1 +1 @@
-import{changeAlpha}from"./ColorUtils";import insertHtmlIntoElement from"@claspo/common/dom/insertHtmlIntoElement";export function setStylesToElement(t,e){Object.keys(e).forEach(l=>{t.style[l]=e[l]})}export function getStylesFromElement(t,e){const l=window.getComputedStyle(t);return e.reduce((t,e)=>(t[e]=l.getPropertyValue(e),t),{})}export function getLabelParamsFromProps(t,e){var l,o;let n;return t.styles&&(n=null===(l=t.styles.find(t=>"label"===t.element))||void 0===l?void 0:l.params),t.adaptiveStyles&&!n&&(n=null===(o=t.adaptiveStyles[e].find(t=>"label"===t.element))||void 0===o?void 0:o.params),n}export function applyInputLabelStyles(t,e,l,o){var n;const i=l.querySelector(o),r=getLabelParamsFromProps(t,e);if(!r)return;const s=l.querySelector(".label");s&&(insertHtmlIntoElement({element:s,html:(null===(n=t.content)||void 0===n?void 0:n.label)||""}),"TOP"===r.position?(i.style.flexDirection="column",i.style.alignItems="unset",setStylesToElement(s,{marginRight:"0",marginBottom:`${r.margin}px`})):(i.style.flexDirection="row",i.style.alignItems="center",setStylesToElement(s,{marginRight:`${r.margin}px`,marginBottom:"0"})),r.enabled?s.style.display="":s.style.display="none")}export function resizeElementTextToFitContainer(t,e,l){let o,n,i,r;if(1===arguments.length&&"object"==typeof t&&"childElement"in t){const e=t;o=e.childElement,n=e.parentElement,i=e.paddings,r=e.allowMultiline}else o=t,n=e,i=l;if(r){let t=120,e=!1;for(;!e&&t>12;)t--,o.style.fontSize=`${t}px`,o.style.lineHeight=`${t}px`,e=checkIfTextFitting(o,n,i);return}let s=12,a=!1;for(;!a&&s<120;)s++,o.style.fontSize=`${s}px`,o.style.lineHeight=`${s}px`,a=getIsOverflown(o,n,i);a&&(s--,o.style.fontSize=`${s}px`,o.style.lineHeight=`${s}px`)}function checkIfTextFitting(t,e,{top:l=0,right:o=0,bottom:n=0,left:i=0}={top:0,right:0,bottom:0,left:0}){return t.offsetWidth<=e.clientWidth-(i+o)&&t.offsetHeight<=e.clientHeight-(l+n)}function getIsOverflown(t,e,{top:l=0,right:o=0,bottom:n=0,left:i=0}={top:0,right:0,bottom:0,left:0}){return t.offsetWidth>e.clientWidth-(i+o)||t.offsetHeight>e.clientHeight-(l+n)}function getInputStylesWithSizeFromProps(t,e){var l;let o;if(t.styles){const e=null===(l=t.styles.find(t=>"input"===t.element))||void 0===l?void 0:l.styleAttributes;(null==e?void 0:e.width)&&(o=e)}if(t.adaptiveStyles&&!o){const l=t.adaptiveStyles[e].find(t=>"input"===t.element),n=null==l?void 0:l.styleAttributes;(null==n?void 0:n.width)&&(o=n)}return o}export function setInputHostSize(t,e,l,o,n){const i=getInputStylesWithSizeFromProps(t,e);if(!i)return;const r=getLabelParamsFromProps(t,e),s=n&&r&&r.enabled&&"TOP"===r.position?n.getBoundingClientRect().height+(r.margin||0):0;i.width&&(i.width.includes("100%")?(o.style.width="100%",l.style.width=i.width):l.style.width="auto"),i.height&&(i.height.includes("100%")?(o.style.height="100%",l.style.height=i.height):l.style.height=`${parseFloat(i.height)+s}px`)}export function setFocusOutline(t,e){let l=null;const o=e||t,n=["transparent","initial"];return t?(t.style.borderColor&&!n.includes(t.style.borderColor)&&(parseFloat(t.style.borderWidth)||parseFloat(t.style.borderBottomWidth))&&(l=setElementOutlineData(o,t,"borderColor")),!l&&t.style.getPropertyValue("--borderBottomColor")&&!n.includes(t.style.getPropertyValue("--borderBottomColor"))&&parseFloat(t.style.getPropertyValue("--borderBottomWidth"))&&(l=setElementOutlineData(o,t,"--borderBottomColor")),l||!t.style.backgroundColor||n.includes(t.style.backgroundColor)||(l=setElementOutlineData(o,t,"backgroundColor")),l||!t.style.color||n.includes(t.style.color)||(l=setElementOutlineData(o,t,"color")),l||(o.classList.remove("focus-outline-defined"),null)):null}function setElementOutlineData(t,e,l){const o=parseColorValue(e,l);if(o){const e=changeAlpha(o,.5);return t.classList.add("focus-outline-defined"),t.style.setProperty("--clFocusOutline",`3px solid ${e}`),e}return null}function parseColorValue(t,e){const l=getComputedStyle(t)[e]||t.style.getPropertyValue(e);if(l&&l.includes("rgb")&&(!(l.split("rgb").length>2)||l.includes("#")))return l}
+import{changeAlpha}from"./ColorUtils";import insertHtmlIntoElement from"@claspo/common/dom/insertHtmlIntoElement";import{nextA11yId}from"./generateAccessibleId";export function setStylesToElement(t,e){Object.keys(e).forEach(l=>{t.style[l]=e[l]})}export function getStylesFromElement(t,e){const l=window.getComputedStyle(t);return e.reduce((t,e)=>(t[e]=l.getPropertyValue(e),t),{})}export function getLabelParamsFromProps(t,e){var l,o;let n;return t.styles&&(n=null===(l=t.styles.find(t=>"label"===t.element))||void 0===l?void 0:l.params),t.adaptiveStyles&&!n&&(n=null===(o=t.adaptiveStyles[e].find(t=>"label"===t.element))||void 0===o?void 0:o.params),n}export function applyInputLabelStyles(t,e,l,o){var n;const i=l.querySelector(o),r=l.querySelector(".label"),s=getLabelParamsFromProps(t,e);r&&wireLabelToInput(r,i),s&&r&&(insertHtmlIntoElement({element:r,html:(null===(n=t.content)||void 0===n?void 0:n.label)||""}),"TOP"===s.position?(i.style.flexDirection="column",i.style.alignItems="unset",setStylesToElement(r,{marginRight:"0",marginBottom:`${s.margin}px`})):(i.style.flexDirection="row",i.style.alignItems="center",setStylesToElement(r,{marginRight:`${s.margin}px`,marginBottom:"0"})),s.enabled?r.style.display="":r.style.display="none")}function wireLabelToInput(t,e){if(!e)return;t.id||(t.id=nextA11yId("cl-label"));const l=e.getAttribute("role"),o="group"===l||"radiogroup"===l?e:e.querySelector('[cl-element="input"]');if(!o)return;const n=(o.getAttribute("aria-labelledby")||"").split(" ").filter(Boolean);n.includes(t.id)||(n.push(t.id),o.setAttribute("aria-labelledby",n.join(" ")))}export function resizeElementTextToFitContainer(t,e,l){let o,n,i,r;if(1===arguments.length&&"object"==typeof t&&"childElement"in t){const e=t;o=e.childElement,n=e.parentElement,i=e.paddings,r=e.allowMultiline}else o=t,n=e,i=l;if(r){let t=120,e=!1;for(;!e&&t>12;)t--,o.style.fontSize=`${t}px`,o.style.lineHeight=`${t}px`,e=checkIfTextFitting(o,n,i);return}let s=12,a=!1;for(;!a&&s<120;)s++,o.style.fontSize=`${s}px`,o.style.lineHeight=`${s}px`,a=getIsOverflown(o,n,i);a&&(s--,o.style.fontSize=`${s}px`,o.style.lineHeight=`${s}px`)}function checkIfTextFitting(t,e,{top:l=0,right:o=0,bottom:n=0,left:i=0}={top:0,right:0,bottom:0,left:0}){return t.offsetWidth<=e.clientWidth-(i+o)&&t.offsetHeight<=e.clientHeight-(l+n)}function getIsOverflown(t,e,{top:l=0,right:o=0,bottom:n=0,left:i=0}={top:0,right:0,bottom:0,left:0}){return t.offsetWidth>e.clientWidth-(i+o)||t.offsetHeight>e.clientHeight-(l+n)}function getInputStylesWithSizeFromProps(t,e){var l;let o;if(t.styles){const e=null===(l=t.styles.find(t=>"input"===t.element))||void 0===l?void 0:l.styleAttributes;(null==e?void 0:e.width)&&(o=e)}if(t.adaptiveStyles&&!o){const l=t.adaptiveStyles[e].find(t=>"input"===t.element),n=null==l?void 0:l.styleAttributes;(null==n?void 0:n.width)&&(o=n)}return o}export function setInputHostSize(t,e,l,o,n){const i=getInputStylesWithSizeFromProps(t,e);if(!i)return;const r=getLabelParamsFromProps(t,e),s=n&&r&&r.enabled&&"TOP"===r.position?n.getBoundingClientRect().height+(r.margin||0):0;i.width&&(i.width.includes("100%")?(o.style.width="100%",l.style.width=i.width):l.style.width="auto"),i.height&&(i.height.includes("100%")?(o.style.height="100%",l.style.height=i.height):l.style.height=`${parseFloat(i.height)+s}px`)}export function setFocusOutline(t,e){let l=null;const o=e||t,n=["transparent","initial"];return t?(t.style.borderColor&&!n.includes(t.style.borderColor)&&(parseFloat(t.style.borderWidth)||parseFloat(t.style.borderBottomWidth))&&(l=setElementOutlineData(o,t,"borderColor")),!l&&t.style.getPropertyValue("--borderBottomColor")&&!n.includes(t.style.getPropertyValue("--borderBottomColor"))&&parseFloat(t.style.getPropertyValue("--borderBottomWidth"))&&(l=setElementOutlineData(o,t,"--borderBottomColor")),l||!t.style.backgroundColor||n.includes(t.style.backgroundColor)||(l=setElementOutlineData(o,t,"backgroundColor")),l||!t.style.color||n.includes(t.style.color)||(l=setElementOutlineData(o,t,"color")),l||(o.classList.remove("focus-outline-defined"),null)):null}function setElementOutlineData(t,e,l){const o=parseColorValue(e,l);if(o){const e=changeAlpha(o,.5);return t.classList.add("focus-outline-defined"),t.style.setProperty("--clFocusOutline",`3px solid ${e}`),e}return null}function parseColorValue(t,e){const l=getComputedStyle(t)[e]||t.style.getPropertyValue(e);if(l&&l.includes("rgb")&&(!(l.split("rgb").length>2)||l.includes("#")))return l}

package/sdk/generateAccessibleId.d.ts

@@ -0,0 +1 @@
+export declare const nextA11yId: (prefix?: string) => string;

package/sdk/generateAccessibleId.js

@@ -0,0 +1 @@
+export const nextA11yId=(t="cl-a11y")=>`${t}-${Math.random().toString(36).slice(2,10)}`;