@claspo/renderer 18.5.0 → 18.5.2-a11y
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CompositionRoot.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import DefaultState from"./common/DefaultState";import FormGroup from"./form/FormGroup";import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";import DocumentModelService from"./document-model/DocumentModelService";import ConfigService from"./common/ConfigService";import ClDocumentResizeListener from"./renderer/style/ClDocumentResizeListener";import MobileDeviceOrientationListener from"./renderer/style/MobileDeviceOrientationListener";import DefaultMediaQueryListener from"./renderer/style/DefaultMediaQueryListener";import DocumentService from"./document-model/DocumentService";import CommonStylesService from"./renderer/style/CommonStylesService";import WcFactory from"./wc-renderer/WcFactory";import WcViewRenderer from"./wc-renderer/WcViewRenderer";import ActionFactory from"./action/ActionFactory";import PrizePoolFactory from"./prize-pool/PrizePoolFactory";import httpClient from"@claspo/common/network/HttpClient";import{ActionRegister}from"./action/ActionRegister";import ContextSDK from"./sdk/context/ContextSDK";import{MergeTagsProcessorFactory}from"./sdk/merge-tags/MergeTagsProcessorFactory";import SourceRegistry from"./sdk/source/SourceRegistry";import ContextData from"./sdk/context/ContextData";import SubmitStateService from"./submit-state/SubmitStateService";import HiddenFieldsContextHydrator from"./sdk/hidden-fields/HiddenFieldsContextHydrator";export default class CompositionRoot{constructor(e,t,r,o,i,n,c,s,m,a){var l;const d=new DocumentModelService(e),y=!o,f=y?new DefaultMediaQueryListener(d,t):new ClDocumentResizeListener(d,o),u=new DefaultState,S=new ConfigService(t),v=new MobileDeviceOrientationListener(d,S),p=new CommonStylesService;p.setStyles(i);const D=new DefaultEventEmitter,g=new FormGroup(r),w=new SubmitStateService(g,D,a),F=new SourceRegistry(g,t),C=new ContextData,R=new ContextSDK(F,C,y);new HiddenFieldsContextHydrator(R,d.getShared().hiddenFields).hydrate();const h=new(null!==(l=t.actionFactoryClass)&&void 0!==l?l:ActionFactory)(D,g,S,r,u,R,()=>this.services),x=new ActionRegister(D,()=>this.services),M=new PrizePoolFactory(httpClient,S),L=new MergeTagsProcessorFactory(y,R,S),P=new WcFactory({state:u,eventEmitter:D,form:g,documentModel:d,resizeListener:f,config:S,commonStylesService:p,trackingService:r,layoutType:n,actionFactory:h,actionRegister:x,prizePoolFactory:M,context:R,mergeTagsProcessorFactory:L,mobileDeviceOrientationListener:v,componentRegister:s,htmlDocumentObject:m}),b=new WcViewRenderer(d,f,t,P,D),z=new DocumentService(d,b,c);this.services={documentService:z,documentModel:d,state:u,form:g,eventEmitter:D,config:S,resizeListener:f,mobileDeviceOrientationListener:v,componentFactory:P,viewRenderer:b,commonStylesService:p,tracking:r,actionFactory:h,actionRegister:x,submitState:w,prizePoolFactory:M,context:R,mergeTagsProcessorFactory:L}}destroy(){Object.keys(this.services).filter(e=>"viewRenderer"!==e).forEach(e=>this.services[e]&&this.services[e].destroy&&this.services[e].destroy())}}
|
|
1
|
+
import DefaultState from"./common/DefaultState";import FormGroup from"./form/FormGroup";import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";import DocumentModelService from"./document-model/DocumentModelService";import ConfigService from"./common/ConfigService";import ClDocumentResizeListener from"./renderer/style/ClDocumentResizeListener";import MobileDeviceOrientationListener from"./renderer/style/MobileDeviceOrientationListener";import DefaultMediaQueryListener from"./renderer/style/DefaultMediaQueryListener";import DocumentService from"./document-model/DocumentService";import CommonStylesService from"./renderer/style/CommonStylesService";import WcFactory from"./wc-renderer/WcFactory";import WcViewRenderer from"./wc-renderer/WcViewRenderer";import ActionFactory from"./action/ActionFactory";import PrizePoolFactory from"./prize-pool/PrizePoolFactory";import httpClient from"@claspo/common/network/HttpClient";import{ActionRegister}from"./action/ActionRegister";import ContextSDK from"./sdk/context/ContextSDK";import{MergeTagsProcessorFactory}from"./sdk/merge-tags/MergeTagsProcessorFactory";import SourceRegistry from"./sdk/source/SourceRegistry";import ContextData from"./sdk/context/ContextData";import SubmitStateService from"./submit-state/SubmitStateService";import HiddenFieldsContextHydrator from"./sdk/hidden-fields/HiddenFieldsContextHydrator";export default class CompositionRoot{constructor(e,t,r,o,i,n,c,s,m,a){var l;const d=new DocumentModelService(e),y=!o,f=y?new DefaultMediaQueryListener(d,t):new ClDocumentResizeListener(d,o),u=new DefaultState,S=new ConfigService(t),v=new MobileDeviceOrientationListener(d,S),p=new CommonStylesService;p.setStyles(i);const D=new DefaultEventEmitter,g=new FormGroup(r),w=new SubmitStateService(g,D,a,d),F=new SourceRegistry(g,t),C=new ContextData,R=new ContextSDK(F,C,y);new HiddenFieldsContextHydrator(R,d.getShared().hiddenFields).hydrate();const h=new(null!==(l=t.actionFactoryClass)&&void 0!==l?l:ActionFactory)(D,g,S,r,u,R,()=>this.services),x=new ActionRegister(D,()=>this.services),M=new PrizePoolFactory(httpClient,S),L=new MergeTagsProcessorFactory(y,R,S),P=new WcFactory({state:u,eventEmitter:D,form:g,documentModel:d,resizeListener:f,config:S,commonStylesService:p,trackingService:r,layoutType:n,actionFactory:h,actionRegister:x,prizePoolFactory:M,context:R,mergeTagsProcessorFactory:L,mobileDeviceOrientationListener:v,componentRegister:s,htmlDocumentObject:m}),b=new WcViewRenderer(d,f,t,P,D),z=new DocumentService(d,b,c);this.services={documentService:z,documentModel:d,state:u,form:g,eventEmitter:D,config:S,resizeListener:f,mobileDeviceOrientationListener:v,componentFactory:P,viewRenderer:b,commonStylesService:p,tracking:r,actionFactory:h,actionRegister:x,submitState:w,prizePoolFactory:M,context:R,mergeTagsProcessorFactory:L}}destroy(){Object.keys(this.services).filter(e=>"viewRenderer"!==e).forEach(e=>this.services[e]&&this.services[e].destroy&&this.services[e].destroy())}}
|
package/package.json
CHANGED
package/sdk/HtmlStyleUtils.js
CHANGED
|
@@ -1 +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);
|
|
1
|
+
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;const l=t.tagName;if("LEGEND"===l)return;if(t.id||(t.id=nextA11yId("cl-label")),"LABEL"===l){const l=e.querySelector('[cl-element="input"]');if(!l)return;return l.id||(l.id=nextA11yId("cl-input")),void(t.getAttribute("for")!==l.id&&t.setAttribute("for",l.id))}const o=e.getAttribute("role"),n="group"===o||"radiogroup"===o?e:e.querySelector('[cl-element="input"]');if(!n)return;const i=(n.getAttribute("aria-labelledby")||"").split(" ").filter(Boolean);i.includes(t.id)||(i.push(t.id),n.setAttribute("aria-labelledby",i.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,u=!1;for(;!u&&s<120;)s++,o.style.fontSize=`${s}px`,o.style.lineHeight=`${s}px`,u=getIsOverflown(o,n,i);u&&(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}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const nextA11yId: (prefix?: string) => string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const nextA11yId=(t="cl-a11y")=>`${t}-${Math.random().toString(36).slice(2,10)}`;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import DefaultEventEmitter from '@claspo/common/DefaultEventEmitter';
|
|
2
2
|
import FormGroup from '../form/FormGroup';
|
|
3
3
|
import WcResolver from "../wc-renderer/WcResolver";
|
|
4
|
+
import DocumentModelService from '../document-model/DocumentModelService';
|
|
4
5
|
export declare const SubmitState: {
|
|
5
6
|
readonly IDLE: "idle";
|
|
6
7
|
readonly DIRTY: "dirty";
|
|
@@ -13,17 +14,20 @@ export default class SubmitStateService {
|
|
|
13
14
|
form: FormGroup;
|
|
14
15
|
eventEmitter: DefaultEventEmitter;
|
|
15
16
|
componentResolver: WcResolver;
|
|
17
|
+
documentModel?: DocumentModelService;
|
|
16
18
|
state: SubmitStateValue;
|
|
17
19
|
currentSubmission: Promise<boolean> | null;
|
|
18
20
|
subscriptions: Array<{
|
|
19
21
|
off: () => void;
|
|
20
22
|
}>;
|
|
21
|
-
constructor(form: FormGroup, eventEmitter: DefaultEventEmitter, componentResolver: WcResolver);
|
|
23
|
+
constructor(form: FormGroup, eventEmitter: DefaultEventEmitter, componentResolver: WcResolver, documentModel?: DocumentModelService);
|
|
22
24
|
getState(): SubmitStateValue;
|
|
23
25
|
hasDirtyFormData(): boolean;
|
|
24
26
|
hasSubmitAttemptSinceLastChange(): boolean;
|
|
25
27
|
trackSubmission(promise: Promise<boolean>): void;
|
|
26
28
|
waitForCurrentSubmission(): Promise<boolean>;
|
|
29
|
+
getRequiredControlNames(): string[];
|
|
30
|
+
allRequiredControlsAreValid(): Promise<boolean>;
|
|
27
31
|
prepareAutoSubmitFormValue(): Promise<Record<string, any>>;
|
|
28
32
|
destroy(): void;
|
|
29
33
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import FormGroupEvents from"../form/FormGroupEvents";import SysEventTypes from"../common/SysEventTypes";function hasMeaningfulValue(t){return null!=t&&("string"==typeof t?""!==t.trim():Array.isArray(t)?t.length>0:"object"!=typeof t||Object.keys(t).length>0)}export const SubmitState={IDLE:"idle",DIRTY:"dirty",SUBMITTING:"submitting",SUBMITTED:"submitted",FAILED:"failed"};export default class SubmitStateService{constructor(t,e,s){this.form=t,this.eventEmitter=e,this.componentResolver=s,this.state=SubmitState.IDLE,this.currentSubmission=null,this.subscriptions=[this.form.on(FormGroupEvents.valueChanged,()=>{this.state=SubmitState.DIRTY}),this.eventEmitter.on(SysEventTypes.SUBMIT_REQUEST_STARTED,()=>{this.state=SubmitState.SUBMITTING}),this.eventEmitter.on(SysEventTypes.SUBMIT_REQUEST_FINISHED,t=>{this.currentSubmission=null,this.state=(null==t?void 0:t.success)?SubmitState.SUBMITTED:SubmitState.FAILED})]}getState(){return this.state}hasDirtyFormData(){return this.form.getControlsAsArray().some(t=>t.isTouched())}hasSubmitAttemptSinceLastChange(){return[SubmitState.SUBMITTING,SubmitState.SUBMITTED,SubmitState.FAILED].includes(this.state)}trackSubmission(t){this.currentSubmission=t}waitForCurrentSubmission(){return this.currentSubmission||Promise.resolve(!1)}async prepareAutoSubmitFormValue(){const t=this.form.getControlsAsArray(),e=t.find(t=>t.getName().includes("clConsentId")&&!t.getName().includes("label"));if(e){if(!e.isValid())return{}}else if(this.componentResolver.presentComponentManifests.find(t=>"SysConsentComponent"===t.name))return{};const
|
|
1
|
+
import FormGroupEvents from"../form/FormGroupEvents";import SysEventTypes from"../common/SysEventTypes";import DocumentUtils from"@claspo/common/document/DocumentUtils";function hasMeaningfulValue(t){return null!=t&&("string"==typeof t?""!==t.trim():Array.isArray(t)?t.length>0:"object"!=typeof t||Object.keys(t).length>0)}export const SubmitState={IDLE:"idle",DIRTY:"dirty",SUBMITTING:"submitting",SUBMITTED:"submitted",FAILED:"failed"};export default class SubmitStateService{constructor(t,e,i,s){this.form=t,this.eventEmitter=e,this.componentResolver=i,this.documentModel=s,this.state=SubmitState.IDLE,this.currentSubmission=null,this.subscriptions=[this.form.on(FormGroupEvents.valueChanged,()=>{this.state=SubmitState.DIRTY}),this.eventEmitter.on(SysEventTypes.SUBMIT_REQUEST_STARTED,()=>{this.state=SubmitState.SUBMITTING}),this.eventEmitter.on(SysEventTypes.SUBMIT_REQUEST_FINISHED,t=>{this.currentSubmission=null,this.state=(null==t?void 0:t.success)?SubmitState.SUBMITTED:SubmitState.FAILED})]}getState(){return this.state}hasDirtyFormData(){return this.form.getControlsAsArray().some(t=>t.isTouched())}hasSubmitAttemptSinceLastChange(){return[SubmitState.SUBMITTING,SubmitState.SUBMITTED,SubmitState.FAILED].includes(this.state)}trackSubmission(t){this.currentSubmission=t}waitForCurrentSubmission(){return this.currentSubmission||Promise.resolve(!1)}getRequiredControlNames(){var t;const e=new Set;return null===(t=this.documentModel)||void 0===t||t.getViews().forEach(t=>{DocumentUtils.iterateDepthFirst(t,t=>{var i,s,n,o,r;const a=null===(s=null===(i=t.props)||void 0===i?void 0:i.control)||void 0===s?void 0:s.name;a&&(null===(r=null===(o=null===(n=t.props)||void 0===n?void 0:n.control)||void 0===o?void 0:o.validation)||void 0===r?void 0:r.required)&&e.add(a)})}),[...e]}async allRequiredControlsAreValid(){const t=this.getRequiredControlNames();if(!t.length)return!0;const e=this.form.getControlsMap(),i=t.map(t=>this.form.getControl(t));if(t.some(t=>!hasMeaningfulValue(e[t])))return!1;return(await Promise.all(i.map(t=>t.validate({silent:!0})))).every(Boolean)}async prepareAutoSubmitFormValue(){const t=this.form.getControlsAsArray(),e=t.find(t=>t.getName().includes("clConsentId")&&!t.getName().includes("label"));if(e){if(!e.isValid())return{}}else if(this.componentResolver.presentComponentManifests.find(t=>"SysConsentComponent"===t.name))return{};if(!await this.allRequiredControlsAreValid())return{};const i=t.filter(t=>hasMeaningfulValue(t.getValue()));return(await Promise.all(i.map(async t=>({control:t,isValid:await t.validate({silent:!0})})))).reduce((t,{control:e,isValid:i})=>{const s=e.getValue();return i&&hasMeaningfulValue(s)?(t[e.getName()]=s,t):(t[e.getName()]=void 0,t)},{})}destroy(){this.subscriptions.forEach(t=>t.off()),this.subscriptions=[],this.currentSubmission=null}}
|