@claspo/renderer 18.5.2 → 18.6.0-ctx.0
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/package.json +1 -1
- package/sdk/FormUtils.js +1 -1
- package/sdk/HtmlStyleUtils.js +1 -1
- package/sdk/generateAccessibleId.d.ts +1 -0
- package/sdk/generateAccessibleId.js +1 -0
- package/sdk/source/SourceRegistry.d.ts +2 -1
- package/sdk/source/SourceRegistry.js +1 -1
- package/sdk/source/sources/JSApiVariablesSource.d.ts +11 -2
- package/sdk/source/sources/JSApiVariablesSource.js +1 -1
package/package.json
CHANGED
package/sdk/FormUtils.js
CHANGED
|
@@ -1 +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,
|
|
1
|
+
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
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;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}
|
|
@@ -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)}`;
|
|
@@ -3,6 +3,7 @@ import { UrlQueryParamsConfigI } from "./sources/UrlQueryParamsSource";
|
|
|
3
3
|
import { JSApiVariablesConfigI } from "./sources/JSApiVariablesSource";
|
|
4
4
|
import FormGroup from '../../form/FormGroup';
|
|
5
5
|
export interface SourceRegistryConfigI extends UrlQueryParamsConfigI, JSApiVariablesConfigI {
|
|
6
|
+
jsSource?: Source;
|
|
6
7
|
[key: string]: any;
|
|
7
8
|
}
|
|
8
9
|
export default class SourceRegistry {
|
|
@@ -10,7 +11,7 @@ export default class SourceRegistry {
|
|
|
10
11
|
[key: string]: Source;
|
|
11
12
|
};
|
|
12
13
|
sources: Source[];
|
|
13
|
-
constructor(form: FormGroup, config
|
|
14
|
+
constructor(form: FormGroup, config?: SourceRegistryConfigI);
|
|
14
15
|
registerSource(source: Source): Source;
|
|
15
16
|
getSource(id: string): Source | undefined;
|
|
16
17
|
getSources(): Source[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import Source from"./Source";import FormSource from"./sources/FormSource";import UrlQueryParamsSource from"./sources/UrlQueryParamsSource";import DataLayerSource from"./sources/DataLayerSource";import
|
|
1
|
+
import Source from"./Source";import FormSource from"./sources/FormSource";import UrlQueryParamsSource from"./sources/UrlQueryParamsSource";import DataLayerSource from"./sources/DataLayerSource";import CookieSource from"./sources/CookieSource";import LocalStorageSource from"./sources/LocalStorageSource";export default class SourceRegistry{constructor(r,e={}){this.registeredSourcesMap={},this.sources=[new Source("FORM",new FormSource(r)),new Source("DATA_LAYER",new DataLayerSource),new Source("URL_QUERY_PARAMS",new UrlQueryParamsSource(e)),new Source("COOKIE",new CookieSource),new Source("LOCAL_STORAGE",new LocalStorageSource)],e.jsSource&&this.sources.push(e.jsSource)}registerSource(r){if(this.registeredSourcesMap[r.id])throw new Error(`Source with id ${r.id} already registered`);return this.registeredSourcesMap[r.id]=r}getSource(r){return this.registeredSourcesMap[r]}getSources(){return Object.values(this.registeredSourcesMap)}registerInitialSources(){return this.sources.map(r=>this.registerSource(r))}}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import DefaultEventEmitter from "@claspo/common/DefaultEventEmitter";
|
|
2
2
|
import { SourceUpdateDataI } from '../../context/ContextSDK';
|
|
3
|
+
import { SourceType } from "@claspo/common/document/hidden-fields.interface";
|
|
3
4
|
declare global {
|
|
4
5
|
interface Window {
|
|
5
6
|
[key: string]: any;
|
|
@@ -21,10 +22,18 @@ export interface JSApiVariablesProcessorResultI {
|
|
|
21
22
|
processor: (ctx: any, model: JSApiVariablesModelI) => string;
|
|
22
23
|
}
|
|
23
24
|
export default class JSApiVariablesSource extends DefaultEventEmitter {
|
|
24
|
-
static sourceId:
|
|
25
|
+
static sourceId: SourceType;
|
|
25
26
|
instanceName: string | undefined;
|
|
27
|
+
private subscribers;
|
|
26
28
|
constructor(config?: JSApiVariablesConfigI);
|
|
29
|
+
get appInstance(): any;
|
|
30
|
+
get variables(): any;
|
|
27
31
|
subscribe(cb: (data: SourceUpdateDataI) => void): void;
|
|
28
|
-
getValue(key?: string): JSApiVariablesProcessorResultI |
|
|
32
|
+
getValue(key?: string): JSApiVariablesProcessorResultI | {
|
|
33
|
+
[k: string]: any;
|
|
34
|
+
};
|
|
35
|
+
addValues<T extends {
|
|
36
|
+
[key: string]: any;
|
|
37
|
+
}>(values: T): void;
|
|
29
38
|
static processModel(model: JSApiVariablesModelI, instanceName?: string): string;
|
|
30
39
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";class JSApiVariablesSource extends DefaultEventEmitter{constructor(e={}){super(),this.instanceName=e.instanceName}subscribe(e){}getValue(e){return e?{processor:(e,r)=>JSApiVariablesSource.processModel(r,this.instanceName)}:{}}static processModel(e,r){var
|
|
1
|
+
import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";import{SourceType}from"@claspo/common/document/hidden-fields.interface";class JSApiVariablesSource extends DefaultEventEmitter{constructor(e={}){super(),this.subscribers=new Set,this.instanceName=e.instanceName}get appInstance(){return window[this.instanceName]}get variables(){var e;return(null===(e=this.appInstance)||void 0===e?void 0:e.variables)||{}}subscribe(e){e&&this.subscribers.add(e)}getValue(e){if(!e){const e=this.variables;return Object.keys(e).reduce((r,t)=>{const s=e[t];return r[t]={id:t,value:null==s?"":String(s),sourceId:JSApiVariablesSource.sourceId},r},{})}return{processor:(e,r)=>JSApiVariablesSource.processModel(r,this.instanceName)}}addValues(e){if(!this.appInstance)throw new Error("Instatiate first");if(!e||"object"!=typeof e)throw new Error("Values should be object");const r=Object.keys(e);r.length&&(this.appInstance.variables=Object.assign(Object.assign({},this.variables),e),this.subscribers.size&&r.forEach(r=>{const t=e[r],s={key:r,value:null==t?"":String(t),componentId:r};this.subscribers.forEach(e=>{try{e(s)}catch(e){}})}),this.emit("CHANGED",r))}static processModel(e,r){var t;if(!e.arguments)return"";const s=e.arguments.find(e=>"JavaScriptVariable"===e.name);if(!(null==s?void 0:s.value)||!r||!(null===(t=window[r])||void 0===t?void 0:t.variables))return"";try{return window[r].variables[s.value]||""}catch(r){return console.error("JSApiVariablesSource: error while getting variable. Model: ",e,"Error: ",r),""}}}JSApiVariablesSource.sourceId=SourceType.JS_API_VARIABLE;export default JSApiVariablesSource;
|