@claspo/renderer 18.5.2-a11y.2 → 18.5.2-a11y.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claspo/renderer",
-  "version": "18.5.2-a11y.2",
+  "version": "18.5.2-a11y.3",
   "scripts": {
     "dev": " tsc --project tsconfig.json --watch",
     "build": "rm -rf out && tsc --project tsconfig.json && npm run minify",

package/sdk/FormUtils.js

@@ -1 +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"))}
+import{addTooltipStyles,createTooltipText,removeTooltipStyles,setTooltipPosition}from"./TooltipUtils";const ERROR_MESSAGE_CLASS="cl-error-message";function ensureInputId(e){return e.id||(e.id=`cl-input-${Math.random().toString(36).slice(2,10)}`),e.id}function getErrorMessageId(e){return`${ensureInputId(e)}-error`}function ensureErrorMessageElement(e){const t=e.parentElement;if(!t)return null;const i=getErrorMessageId(e);let r=t.querySelector(`#${CSS.escape(i)}`);return r||(r=document.createElement("span"),r.id=i,r.className="cl-error-message",r.setAttribute("aria-live","polite"),r.style.cssText="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;",t.appendChild(r)),r}function clearErrorMessage(e){if(!e.id)return;const t=e.parentElement;if(!t)return;const i=t.querySelector(`#${CSS.escape(getErrorMessageId(e))}`);i&&(i.textContent=""),e.removeAttribute("aria-describedby")}export function setValidStyles(e,t){e&&(e.classList.remove("invalid"),e.setAttribute("aria-invalid","false"),clearErrorMessage(e)),t&&(t.style.visibility="hidden")}export function setInvalidStyle(e,t,i,r){r=r||document;let s=null;if(e){e.classList.add("invalid"),e.setAttribute("aria-invalid","true");const t=ensureErrorMessageElement(e);t&&(t.textContent=i,e.setAttribute("aria-describedby",t.id))}t&&(t.style.visibility="visible");const o=()=>{addTooltipStyles(r),s=createTooltipText(i),r.body.append(s),s.style.visibility="visible",setTooltipPosition({triggerElement:t,tooltipElement:s,htmlDocumentObject:r})},n=()=>{s&&(s.remove(),removeTooltipStyles(r))};t&&(t.onmouseenter=o,t.onmouseleave=n)}export function setPendingStyle(e,t){t&&(t.style.visibility="hidden"),e&&e.classList.contains("invalid")&&(e.classList.remove("invalid"),e.removeAttribute("aria-invalid"),clearErrorMessage(e))}

package/sdk/HtmlStyleUtils.js

@@ -1 +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}
+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,.8);return t.classList.add("focus-outline-defined"),t.style.setProperty("--clFocusOutline",`4px 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}