UNPKG

@public-ui/components

Version:

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

public-ui.github.io

public-ui/kolibri

4 lines • 12.7 kB
1
2
3
4
/*! * KoliBri - The accessible HTML-Standard */ import{f as e,P as t,k as n}from"./index-da3e0c00.js";import{L as r,g as o,a as i}from"./dev.utils-fab45cbc.js";const a=new Set,s=(e,t)=>{(!1===a.has(e)||(null==t?void 0:t.force))&&(a.add(e),r.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"✋ a11y",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #09f"}))},l=new Set,u=(e,t)=>{(!1===l.has(e)||(null==t?void 0:t.force))&&(l.add(e),r.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"🔥 deprecated",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f00"}))},f=new Set,c=(e,t)=>{(!1===f.has(e)||(null==t?void 0:t.force))&&(f.add(e),r.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"💻 dev",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f09"}))},d=(e,t)=>{(!1===f.has(e)||(null==t?void 0:t.force))&&(f.add(e),r.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"⚠️ dev",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f09"}))},v=new Set,b=(e,t=!1,o)=>{(!1===v.has(e)||(null==o?void 0:o.force))&&(v.add(e),e+=!0===t?" ✅":"",r.debug([e].concat((null==o?void 0:o.details)||[]),{classifier:"🌟 feature",forceLog:!!(null==o?void 0:o.force),overwriteStyle:"; background-color: #309"}))};c("We appreciate any feedback, comments, screenshots, or demo links of an application based on KoliBri (kolibri@itzbund.de). Thank you!");const y=new Set,p=(e,t)=>{(!1===y.has(e)||(null==t?void 0:t.force))&&(y.add(e),r.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"📑 ui/ux",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #060;"}))},h=()=>{s('"Disabled" limits accessibility and visibility. From an accessibility perspective, we recommend using the readonly attribute instead of disabled.\n- https://uxdesign.cc/is-it-ok-to-grey-out-disabled-buttons-8afa74a0fae')},g=e=>{"string"==typeof e&&""!==e||s("Some structural elements, such as the nav tag, can be used multiple times on a webpage. To distinguish between similarly named structural elements, it is necessary to set an ARIA label.\n- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role#accessibility_concerns")},m=(e,t=8)=>{t>7&&p(`[${e}] Within navigation structures, it is recommended to use no more than 7 menu items.\n\nLink:\n- https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two`)};var w=.2126,S=.7152,N=.0722,k=1/12.92;function M(e){return Math.pow((e+.055)/1.055,2.4)}function A(e){var t=e[0]/255,o=e[1]/255,r=e[2]/255,n=t<=.03928?t*k:M(t),a=o<=.03928?o*k:M(o),l=r<=.03928?r*k:M(r);return n*w+a*S+l*N}function T(e){var t=255;8===(e=e.replace(/^#/,"")).length&&(t=parseInt(e.slice(6,8),16),e=e.substring(0,6)),4===e.length&&(t=parseInt(e.slice(3,4).repeat(2),16),e=e.substring(0,3)),3===e.length&&(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]);var o=parseInt(e,16);return[o>>16,o>>8&255,255&o,t]}function j(e,t){return(Math.max(e,t)+.05)/(Math.min(e,t)+.05)}function O(e,t){return j(A(e),A(t))}function L(e,t){return O(T(e),T(t))}function E(e){return e>=7?"AAA":e>=4.5?"AA":e>=3?"AA Large":"Fail"}var C={exports:{}};function _(e){var t=I(e);return 3==t.length?t.concat(255):(t[3]=Math.round(t[3]),t)}function x(e){var t=I(e);return{r:t[0],g:t[1],b:t[2],a:3==t.length?255:Math.round(t[3])}}function J(e){var t=I(e);return 3==t.length&&t.push(255),255==t[3]?"rgb("+t[0]+", "+t[1]+", "+t[2]+")":0==t[3]?"rgba("+t[0]+", "+t[1]+", "+t[2]+", 0)":"rgba("+t[0]+", "+t[1]+", "+t[2]+", "+String(t[3]/255).substr(1)+")"}function R(e){3==(t=I(e)).length&&t.push(255);var t,o=255==t[3],r=B(t[0]),n=B(t[1]),a=B(t[2]),l=D(r,n,a,t=B(Math.round(t[3])));return o?l?"#"+r.charAt(0)+n.charAt(0)+a.charAt(0):"#"+r+n+a:l?"#"+r.charAt(0)+n.charAt(0)+a.charAt(0)+t.charAt(0):"#"+r+n+a+t}function H(e){var t=I(e);return 3==t.length?t.push(255):t[3]=Math.round(t[3]),(t[3]<<24>>>0|t[0]<<16|t[1]<<8|t[2])>>>0}function I(e){return"string"==typeof e?$(e=e.toLowerCase())||K(e)||P(e)||G(e)||Q(e)||[0,0,0,255]:W(e)||z(e)||F(e)||[0,0,0,255]}function B(e){var t=e.toString(16);return 1==t.length?"0"+t:t}function D(e,t,o,r){var n=["ff","00","11","22","33","44","55","66","77","88","99","aa","bb","cc","dd","ee"];return-1!=n.indexOf(e)&&-1!=n.indexOf(t)&&-1!=n.indexOf(o)&&-1!=n.indexOf(r)}function $(e){return"red"==e?[255,0,0]:"green"==e?[0,255,0]:"blue"==e?[0,0,255]:"black"==e?[0,0,0]:"white"==e?[255,255,255]:"cyan"==e?[0,255,255]:"gray"==e||"grey"==e?[128,128,128]:"magenta"==e||"pink"==e?[255,0,255]:"yellow"==e?[255,255,0]:void 0}function q(e){return 1==e.length?parseInt(e+e,16):parseInt(e,16)}function K(e){var t=e.replace(/^#/,""),o=t.length;if(3==o||4==o){var r=q(t[0]),n=q(t[1]),a=q(t[2]),l=3==o?255:q(t[3]);if(isNaN(r)||isNaN(n)||isNaN(a)||isNaN(l))return;return[r,n,a,l]}}function P(e){var t=e.replace(/^#/,""),o=t.length;if(6==o||8==o){var r=q(t.slice(0,2)),n=q(t.slice(2,4)),a=q(t.slice(4,6)),l=6==o?255:q(t.slice(6,8));if(isNaN(r)||isNaN(n)||isNaN(a)||isNaN(l))return;return[r,n,a,l]}}function U(e,t){return"number"!=typeof e||!0===t&&Math.floor(e)!==e?-1:e>=0&&e<=255?e:-1}function W(e){if("[object Object]"===Object.prototype.toString.call(e)&&Object.getPrototypeOf(e)===Object.getPrototypeOf({})){var t=U(null!=e.r?e.r:null!=e.red?e.red:0,!0),o=U(null!=e.g?e.g:null!=e.green?e.green:0,!0),r=U(null!=e.b?e.b:null!=e.blue?e.blue:0,!0),n=U(null!=e.a?e.a:null!=e.alpha?e.alpha:255,!0);if(-1!=t&&-1!=o&&-1!=r&&-1!=n)return[t,o,r,n]}}function z(e){if(Array.isArray(e)&&(3==e.length||4==e.length)){var t=U(e[0],!0),o=U(e[1],!0),r=U(e[2],!0),n=U(null!=e[3]?e[3]:255,!0);if(-1!=t&&-1!=o&&-1!=r&&-1!=n)return[t,o,r,n]}}function F(e){if("number"==typeof e&&Math.floor(e)==e&&e<=4294967295&&e>=0)return[e>>16&255,e>>8&255,255&e,e>>24&255]}function G(e){if("rgb("==e.substr(0,4)){var t=(e=e.match(/^rgb\(([^)]+)\)/)[1]).split(/ *, */).map(Number),o=U(t[0],!0),r=U(t[1],!0),n=U(t[2],!0);if(-1!=o&&-1!=r&&-1!=n)return[o,r,n,255]}}function Q(e){if("rgba("==e.substr(0,5)){var t=(e=e.match(/^rgba\(([^)]+)\)/)[1]).split(/ *, */).map(Number),o=U(t[0],!0),r=U(t[1],!0),n=U(t[2],!0),a=U(255*t[3]);if(-1!=o&&-1!=r&&-1!=n&&-1!=a)return[o,r,n,a]}}C.exports=_,C.exports.arr=_,C.exports.obj=x,C.exports.css=J,C.exports.hex=R,C.exports.num=H;const V=C.exports,X=(e,t)=>{t.forEach((t=>{!1===e.has(t)&&e.add(t)}))},Y=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){const o=new Set;X(o,t.querySelectorAll(e));const r=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<r.length;t++){const n=r[t].shadowRoot;X(o,Y(e,"object"==typeof n&&null!==n?n:r[t]))}return Array.from(o)}throw new Error("The parameter document for the method querySelectorAll is not type of Document, HTMLElement or ShadowRoot.")},Z=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){let o=t.querySelector(e);if(null===o){const r=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<r.length;t++){const n=r[t].shadowRoot;if(o=Z(e,"object"==typeof n&&null!==n?n:r[t]),null!==o)break}}return o}throw new Error("The parameter document for the method querySelector is not type of Document, HTMLElement or ShadowRoot.")},ee=/\[object Object\]/,te=(e,t)=>{"string"==typeof e&&ee.test(e)||t()},ne=(e,t)=>{"string"==typeof e&&""===e||t()},re=(e,t)=>{i()&&(r.debug([e,t]),r.debug("↑ We propagate the (submit) event to this target.")),Object.defineProperty(e,"target",{value:t,writable:!1})},oe=e=>{var t,o,r;null===(t=e.nextHooks)||void 0===t||t.forEach(((t,o)=>{var r;const n=t.get("beforePatch");"function"==typeof n&&n(null===(r=e.nextState)||void 0===r?void 0:r.get(o),e.nextState,e,o)})),(null===(o=e.nextState)||void 0===o?void 0:o.size)>0&&(e.state=Object.assign(Object.assign({},e.state),Object.fromEntries(e.nextState)),delete e.nextState,null===(r=e.nextHooks)||void 0===r||r.forEach(((t,o)=>{const r=t.get("afterPatch");"function"==typeof r&&r(e.state[o],e.state,e,o)}))),delete e.nextHooks},ie=(e,t,o,r={})=>{var n,a;void 0===e.nextHooks&&(e.nextHooks=new Map),void 0===e.nextState&&(e.nextState=new Map);e.nextHooks.get(t)instanceof Map==!1&&e.nextHooks.set(t,new Map),"function"==typeof r.afterPatch&&(null===(n=e.nextHooks.get(t))||void 0===n||n.set("afterPatch",r.afterPatch)),"function"==typeof r.beforePatch&&(null===(a=e.nextHooks.get(t))||void 0===a||a.set("beforePatch",r.beforePatch)),e.nextState.set(t,o),oe(e)},ae=(e,t,o,r)=>{c(`[${e.constructor.name}] The property value: (${o}) for '${t}' is not valid. Allowed values are: ${Array.from(r).join(", ")}`)};function se(e,t,o,r,n,a={}){o(n)?ie(e,t,n,a.hooks):void 0===n&&!0!==a.required&&o(a.defaultValue)?ie(e,t,a.defaultValue,a.hooks):(a.required||r.add(null),ae(e,t,n,r))}const le=(e,t,o,r)=>{se(e,t,(e=>"boolean"==typeof e),new Set(["Boolean {true, false}"]),o,r)},ue=(e,t,o,r={})=>{const n="number"==typeof r.minLength?null==r?void 0:r.minLength:0;se(e,t,(e=>"string"==typeof e&&e.length>=n&&(void 0===(null==r?void 0:r.maxLength)||e.length<=r.maxLength)),new Set(["String"]),o,r)},fe=(e,t,o,r)=>{se(e,t,(e=>"number"==typeof e&&(void 0===(null==r?void 0:r.min)||"number"==typeof(null==r?void 0:r.min)&&e>=r.min)&&(void 0===(null==r?void 0:r.max)||"number"==typeof(null==r?void 0:r.max)&&e<=r.max)),new Set(["Number"]),o,r)},ce=(e,t,o,n,a=e=>e==e,l={})=>{ne(n,(()=>{te(n,(()=>{void 0===n&&(n=[]);try{try{n=be(n)}catch(e){}if(Array.isArray(n)){const s=n.find((e=>!o(e)));void 0===s&&a(n)?ie(e,t,n,l.hooks):te(s,(()=>{throw r.debug(s),new Error("↑ The schema for the property (_options) is not valid. The value will not be changed.")}))}else te(n,(()=>{throw r.debug(n),new Error("↑ The schema for the property (_options) is not valid. The value will not be changed.")}))}catch(e){r.debug(e)}}))}))},de=e=>{try{return JSON.stringify(e).replace(/"/g,"'")}catch(t){throw r.warn(["stringifyJson",e]),r.error("↑ The JSON could not be converted to a string. A stringifiable JSON is expected."),new Error}},ve=/^[{[]/,be=e=>{if("string"==typeof e)try{return JSON.parse(e)}catch(t){if(ve.test(e))try{return JSON.parse(e.replace(/'/g,'"'))}catch(t){r.warn(["parseJson",e]),r.error("↑ The JSON string could not be parsed. Make sure that single quotes in the text are escaped (&#8216;).")}}throw new Error},ye=e=>"boolean"==typeof e?!0===e?"true":"false":void 0,pe=e=>"string"==typeof e?e:ye(e),he=(e,t)=>Z(e,t||o()),ge=(e,t)=>Y(e,t||o());let me=null;const we=()=>(me=me||{backgroundColor:"#00000000",color:"#00000000",domNode:o().body,level:"Fail",score:1},me),Se=/(\d+, ){3}0\)/,Ne=(e,t=we())=>{const o=getComputedStyle(e),n=Se.test(o.backgroundColor)?t.backgroundColor:V.hex(o.backgroundColor),a=Se.test(o.color)?t.color:V.hex(o.color),l=L(n,a),s={backgroundColor:n,color:a,domNode:e,level:E(l),score:l};return l<4.5&&r.error(["Color-Contrast-Error",{backgroundColor:s.backgroundColor,color:s.color,level:s.level,score:s.score},s.domNode]),s},ke=(e,t=we())=>{t.domNode instanceof HTMLElement&&(t=Ne(t.domNode,t));const o=t.domNode.querySelector(e);if(null===o){const o=t.domNode.querySelectorAll('[class="hydrated"]');for(let r=0;r<o.length&&(t.domNode=o[r],null===(t=ke(e,t)).domNode);r++);return t}return Ne(o,t)};class Me{static queryHtmlElementColors(e,t,o=!1,n=!0){let a=null;if(!0===o||!1===Me.executionLock)if(!1===o&&(Me.cache.clear(),Me.cache.set(t.domNode,t),Me.executionLock=!0,!0===n&&r.debug("[KoliBriUtils] Color contrast analysis started...")),e===t.domNode)a=t;else{const o=new Set;if(t.domNode.shadowRoot){const e=t.domNode.shadowRoot.children;for(let t=0;t<e.length;t++)o.add(e[t])}const r=t.domNode;if("function"==typeof r.assignedNodes){const e=r.assignedNodes();for(let t=0;t<e.length;t++)e[t]instanceof HTMLElement&&o.add(e[t])}const n=t.domNode.children;for(let e=0;e<n.length;e++)o.add(n[e]);const l=Array.from(o);for(let o=0;o<l.length;o++){let r=Me.cache.get(l[o]);void 0===r&&(r=Ne(l[o],t)),Me.cache.set(l[o],r);const n=Me.queryHtmlElementColors(e,r,!0,!1);if(null!==n){a=n;break}}}else r.debug("[KoliBriUtils] Call aborted because a color contrast analysis is currently being executed.");return!1===o&&(!0===n&&r.debug(`[KoliBriUtils] Color contrast analysis finished (${Me.cache.size} DOM elements are analysed).`),Me.executionLock=!1,Me.cache.clear()),a}}Me.executionLock=!1,Me.cache=new Map;class Ae{}Ae.getCssStyle=e,Ae.patchTheme=t,Ae.patchThemeTag=n,Ae.querySelector=he,Ae.querySelectorAll=ge,Ae.stringifyJson=de;export{ke as A,Me as B,de as C,Ae as K,s as a,le as b,h as c,L as d,g as e,b as f,ce as g,m as h,ue as i,c as j,fe as k,d as l,u as m,re as n,te as o,be as p,ne as q,V as r,ie as s,he as t,p as u,ye as v,se as w,pe as x,Ne as y,ge as z};