@claspo/renderer 18.5.1 → 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/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 +1 @@
|
|
|
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,o,
|
|
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}}
|