@public-ui/sample-react 2.1.8-rc.0 → 2.1.8
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/dist/1487.js +1 -1
- package/dist/1636.js +1 -1
- package/dist/1792.js +1 -1
- package/dist/1795.js +1 -1
- package/dist/2017.js +1 -1
- package/dist/2322.js +1 -1
- package/dist/2538.js +1 -1
- package/dist/2567.js +1 -1
- package/dist/263.js +1 -1
- package/dist/2719.js +1 -1
- package/dist/3064.js +1 -1
- package/dist/3077.js +1 -1
- package/dist/3238.js +1 -1
- package/dist/3301.js +2 -0
- package/dist/3395.js +1 -1
- package/dist/35.js +1 -1
- package/dist/3521.js +1 -1
- package/dist/356.js +1 -1
- package/dist/3714.js +1 -1
- package/dist/3735.js +1 -1
- package/dist/3766.js +1 -1
- package/dist/3994.js +1 -1
- package/dist/4025.js +1 -1
- package/dist/4065.js +2 -0
- package/dist/4118.js +1 -1
- package/dist/4182.js +1 -1
- package/dist/4188.js +1 -1
- package/dist/4332.js +1 -1
- package/dist/4402.js +1 -1
- package/dist/4795.js +2 -0
- package/dist/4818.js +1 -1
- package/dist/4892.js +1 -1
- package/dist/4933.js +1 -1
- package/dist/4943.js +1 -1
- package/dist/495.js +1 -1
- package/dist/5034.js +1 -1
- package/dist/5056.js +1 -1
- package/dist/5138.js +1 -1
- package/dist/5296.js +1 -1
- package/dist/5356.js +1 -1
- package/dist/5551.js +1 -1
- package/dist/5835.js +1 -1
- package/dist/5840.js +1 -1
- package/dist/5889.js +1 -1
- package/dist/5912.js +1 -1
- package/dist/6082.js +1 -1
- package/dist/6099.js +1 -1
- package/dist/6181.js +1 -1
- package/dist/619.js +1 -1
- package/dist/6671.js +1 -1
- package/dist/6775.js +1 -1
- package/dist/7274.js +1 -1
- package/dist/{6812.js → 7440.js} +2 -2
- package/dist/7795.js +1 -1
- package/dist/7802.js +1 -1
- package/dist/7860.js +1 -1
- package/dist/8092.js +1 -1
- package/dist/8111.js +1 -1
- package/dist/8146.js +1 -1
- package/dist/8427.js +1 -1
- package/dist/8495.js +1 -1
- package/dist/8672.js +1 -1
- package/dist/8737.js +1 -1
- package/dist/8786.js +1 -1
- package/dist/8796.js +1 -1
- package/dist/8977.js +1 -1
- package/dist/9333.js +1 -1
- package/dist/9389.js +1 -1
- package/dist/9561.js +1 -1
- package/dist/9599.js +1 -1
- package/dist/9612.js +1 -1
- package/dist/9890.js +1 -1
- package/dist/main.js +1 -1
- package/package.json +9 -8
- package/src/components/button/access-key.tsx +34 -25
- package/src/components/button/aria-description.tsx +20 -11
- package/src/components/button/baselined.tsx +22 -13
- package/src/components/button/icons.tsx +33 -26
- package/src/components/button/partials/cases.tsx +13 -6
- package/src/components/button/width.tsx +33 -28
- package/src/components/button-group/basic.tsx +25 -16
- package/src/components/handout/basic.tsx +304 -279
- package/src/components/input-text/routes.ts +2 -0
- package/src/components/input-text/smart-button.tsx +33 -0
- package/src/components/input-text/text-formatter.tsx +55 -4
- package/src/components/table/interactive-child-elements.tsx +13 -2
- package/src/components/table/render-cell.tsx +13 -2
- package/src/components/table/stateful-with-selection.tsx +12 -1
- package/src/components/table/stateful-with-single-selection.tsx +12 -1
- package/src/components/table/stateless-with-selection.tsx +12 -1
- package/src/components/table/stateless-with-single-selection.tsx +12 -1
- package/src/hooks/useToasterService.ts +21 -0
- package/src/scenarios/custom-tooltip-width.tsx +26 -11
- package/src/scenarios/disabled-interactive-elements.tsx +123 -114
- package/dist/1938.js +0 -2
- package/dist/4556.js +0 -2
- package/dist/8853.js +0 -2
- /package/dist/{1938.js.LICENSE.txt → 3301.js.LICENSE.txt} +0 -0
- /package/dist/{4556.js.LICENSE.txt → 4065.js.LICENSE.txt} +0 -0
- /package/dist/{6812.js.LICENSE.txt → 4795.js.LICENSE.txt} +0 -0
- /package/dist/{8853.js.LICENSE.txt → 7440.js.LICENSE.txt} +0 -0
package/dist/6099.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see 6099.js.LICENSE.txt */
|
|
2
|
-
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6099],{6099:(n,e,t)=>{t.r(e),t.d(e,{kol_skip_nav:()=>r});var i=t(
|
|
2
|
+
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6099],{6099:(n,e,t)=>{t.r(e),t.d(e,{kol_skip_nav:()=>r});var i=t(777),a=t(1880),o=t(6934),l=t(8579),s=t(5815);const r=class{constructor(n){(0,i.r)(this,n),this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return(0,i.h)(i.H,{key:"4e6cc58e69b97bfdafd1f342755908836984e6c0",class:"kol-skip-nav"},(0,i.h)("nav",{key:"436a02841a32b66e829b2f80021a0530cd404f68","aria-label":this.state._label},(0,i.h)("ul",{key:"f3475e1b8c53cb26b3cd00b21c1ce5eac570bc61"},this.state._links.map(((n,e)=>(0,i.h)("li",{key:e},(0,i.h)(l.n,Object.assign({},n))))))))}validateLabel(n,e,t=!1){t||(0,a.r)(this.state._label),(0,s.v)(this,n,{required:!0}),(0,a.a)(this.state._label)}validateLinks(n){(0,o.w)("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){(0,a.r)(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};r.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n ul {\n display: grid;\n list-style: none;\n place-items: center;\n }\n ul li {\n height: 0;\n }\n .kol-link-wc a {\n left: -99999px;\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .kol-link-wc a:focus {\n background-color: #fff;\n left: unset;\n position: unset;\n }\n}"}},5815:(n,e,t)=>{t.d(e,{a:()=>c,b:()=>s,c:()=>r,h:()=>a,v:()=>d});var i=t(7440);const a=[0,1,2,3,4,5,6],o=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(o))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const h=new Set(["string"]),d=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),h,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,a,o)=>{var l,h;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(h=n.hooks)||void 0===h||h.afterPatch(e,t,a,o)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,i.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},c=d},1880:(n,e,t)=>{t.d(e,{a:()=>o,r:()=>l});var i=t(6448);const a=new Set;function o(n){a.has(n)?i.L.error(`There already is a nav element with the label "${n}"`,{forceLog:!0}):a.add(n)}function l(n){a.delete(n)}},6934:(n,e,t)=>{t.d(e,{w:()=>a});var i=t(7440);const a=(n,e,t)=>{(0,i.g)(e,"_links",(n=>"object"==typeof n&&("string"==typeof n._href||"string"==typeof n._label)),t),(0,i.h)(n,e.state._links.length)}}}]);
|
package/dist/6181.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see 6181.js.LICENSE.txt */
|
|
2
|
-
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6181],{3260:(e,t,n)=>{n.d(t,{S:()=>l,a:()=>o,b:()=>i,i:()=>a});const i=e=>"object"==typeof e&&null!==e,a=(e,t=0)=>"string"==typeof e&&e.length>=t,o=e=>{if("object"!=typeof e||null===e)return a(e,1);for(const t in e)if(!1===a(t,1))return!1;return!0},l=new Event("StateChange")},9392:(e,t,n)=>{n.d(t,{I:()=>r});var i=n(6944),a=n(4550),o=n(6812),l=n(3260);const s=(e,t)=>{const n=e;"object"==typeof n&&null!==n&&((0,l.i)(n.right,1)&&(n.right={icon:n.right}),(0,l.i)(n.left,1)&&(n.left={icon:n.left}),t.set("_icons",n))};class r extends i.I{constructor(e,t,n){super(e,t,n),this.component=e}validateIcon(e){this.validateIcons(e)}validateIcons(e){(0,o.o)(e,(()=>{try{e=(0,o.p)(e)}catch(e){}(0,o.w)(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&((0,l.i)(e.left,1)||(0,a.i)(e.left)||(0,l.i)(e.right,1)||(0,a.i)(e.right))),new Set(["KoliBriHorizontalIcon"]),e,{hooks:{beforePatch:s},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons||this.component._icon)}}},4550:(e,t,n)=>{n.d(t,{i:()=>l,v:()=>s});var i=n(6812),a=n(3260);const o=(e,t,n)=>{(0,a.b)(n)?e[t]=n:(0,a.i)(n,1)&&(e[t]={icon:n})},l=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,a.a)(e.style))&&(void 0===e.label||(0,a.i)(e.label))&&(0,a.i)(e.icon,1),s=(e,t,n={})=>{(0,i.o)(t,(()=>{var s;try{t=(0,i.p)(t)}catch(e){}(0,i.w)(e,"_icons",(e=>{const t="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||t||(0,a.i)(e,1)||"object"==typeof e&&null!==e&&((0,a.i)(e.left,1)||l(e.left)||(0,a.i)(e.right,1)||l(e.right)||(0,a.i)(e.top,1)||l(e.top)||(0,a.i)(e.bottom,1)||l(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(s=n.hooks)||void 0===s?void 0:s.afterPatch,beforePatch:(e,t,i,l)=>{var s,r;"function"==typeof(null===(s=n.hooks)||void 0===s?void 0:s.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(e,t,i,l)),(e=>{var t,n,i;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(n=e.nextState)||void 0===n?void 0:n.get("_icons");null===(i=e.nextState)||void 0===i||i.set("_icons",(e=>{let t={};return(0,a.i)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(o(t,"top",e.top),o(t,"right",e.right),o(t,"bottom",e.bottom),o(t,"left",e.left)),t})(t))}})(i)}}}))}))}},6181:(e,t,n)=>{n.r(t),n.d(t,{kol_input_file:()=>u});var i=n(9293),a=n(4039),o=n(6944),l=n(7756),s=n(9392),r=n(6812),d=n(8579),c=n(4997),h=(e,t,n)=>new Promise(((i,a)=>{var o=e=>{try{s(n.next(e))}catch(e){a(e)}},l=e=>{try{s(n.throw(e))}catch(e){a(e)}},s=e=>e.done?i(e.value):Promise.resolve(e.value).then(o,l);s((n=n.apply(e,t)).next())}));class p extends s.I{constructor(e,t,n){super(e,t,n),this.component=e}validateAccept(e){(0,r.i)(this.component,"_accept",e)}validateMultiple(e){(0,r.b)(this.component,"_multiple",e)}validateRequired(e){(0,r.b)(this.component,"_required",e)}validateValue(e){(0,r.i)(this.component,"_value",e),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateAccept(this.component._accept),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateValue(this.component._value)}}const u=class{getValue(){return h(this,null,(function*(){var e;return null===(e=this.inputRef)||void 0===e?void 0:e.files}))}focus(){return h(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return h(this,null,(function*(){var e;null===(e=this.inputRef)||void 0===e||e.focus()}))}render(){const{ariaDescribedBy:e}=(0,o.g)(this.state),t=(0,c.s)(this.state._label);return(0,i.h)(i.H,{key:"efceaa84a757cd53737d20b7220f61736e15aad3",class:"kol-input-file"},(0,i.h)(d.l,{key:"12f42cbaa35e9c8520f0b0f6e66d791e287c0563",class:{file:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_disabled:this.state._disabled,_msg:this.state._msg,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_required:this.state._required,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.inputRef)||void 0===e?void 0:e.focus()},role:"presentation"},(0,i.h)("span",{key:"d08326c76f8c30a2ba6d080a5d6dd27abcffd03f",slot:"label"},t?(0,i.h)("slot",{name:"expert"}):"string"==typeof this.state._accessKey?(0,i.h)(i.F,null,(0,i.h)(l.I,{accessKey:this.state._accessKey,label:this.state._label})," ",(0,i.h)("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):(0,i.h)("span",null,this.state._label)),(0,i.h)("div",{key:"c676203deb04e250d3d268c874fbd7ea0941b704",slot:"input"},(0,i.h)("input",Object.assign({key:"361467cb53b3337e413bccd182cc24c0adef2208",ref:this.catchRef,title:"",accept:this.state._accept,accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,spellcheck:"false",type:"file",value:this.state._value},this.controller.onFacade,{onChange:this.onChange,onInput:this.onInput})))))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{this.inputRef=e},this.onChange=e=>{if(this.inputRef instanceof HTMLInputElement&&"file"===this.inputRef.type){const t=this.inputRef.files;this.controller.onFacade.onChange(e,t),this.controller.setFormAssociatedValue(t)}},this.onInput=e=>{if(this.inputRef instanceof HTMLInputElement&&"file"===this.inputRef.type){const t=this.inputRef.files;this.controller.onFacade.onInput(e,!1,t)}},this._accept=void 0,this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=!1,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${(0,a.n)()}`,_label:""},this.controller=new p(this,"file",this.host)}validateAccept(e){this.controller.validateAccept(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateRequired(e){this.controller.validateRequired(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return(0,i.g)(this)}static get watchers(){return{_accept:["validateAccept"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};u.style={default:"@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n label input[type=file]::-webkit-file-upload-button {\n display: none;\n }\n label input[type=file]:before {\n content: \"Datei auswählen\";\n }\n label input[multiple]:before {\n content: \"Dateien auswählen\";\n }\n div.input {\n cursor: pointer;\n }\n}"}}}]);
|
|
2
|
+
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6181],{3260:(e,t,n)=>{n.d(t,{S:()=>l,a:()=>o,b:()=>i,i:()=>a});const i=e=>"object"==typeof e&&null!==e,a=(e,t=0)=>"string"==typeof e&&e.length>=t,o=e=>{if("object"!=typeof e||null===e)return a(e,1);for(const t in e)if(!1===a(t,1))return!1;return!0},l=new Event("StateChange")},4143:(e,t,n)=>{n.d(t,{I:()=>r});var i=n(4213),a=n(5685),o=n(7440),l=n(3260);const s=(e,t)=>{const n=e;"object"==typeof n&&null!==n&&((0,l.i)(n.right,1)&&(n.right={icon:n.right}),(0,l.i)(n.left,1)&&(n.left={icon:n.left}),t.set("_icons",n))};class r extends i.I{constructor(e,t,n){super(e,t,n),this.component=e}validateIcon(e){this.validateIcons(e)}validateIcons(e){(0,o.o)(e,(()=>{try{e=(0,o.p)(e)}catch(e){}(0,o.w)(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&((0,l.i)(e.left,1)||(0,a.i)(e.left)||(0,l.i)(e.right,1)||(0,a.i)(e.right))),new Set(["KoliBriHorizontalIcon"]),e,{hooks:{beforePatch:s},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons||this.component._icon)}}},5685:(e,t,n)=>{n.d(t,{i:()=>l,v:()=>s});var i=n(7440),a=n(3260);const o=(e,t,n)=>{(0,a.b)(n)?e[t]=n:(0,a.i)(n,1)&&(e[t]={icon:n})},l=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,a.a)(e.style))&&(void 0===e.label||(0,a.i)(e.label))&&(0,a.i)(e.icon,1),s=(e,t,n={})=>{(0,i.o)(t,(()=>{var s;try{t=(0,i.p)(t)}catch(e){}(0,i.w)(e,"_icons",(e=>{const t="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||t||(0,a.i)(e,1)||"object"==typeof e&&null!==e&&((0,a.i)(e.left,1)||l(e.left)||(0,a.i)(e.right,1)||l(e.right)||(0,a.i)(e.top,1)||l(e.top)||(0,a.i)(e.bottom,1)||l(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(s=n.hooks)||void 0===s?void 0:s.afterPatch,beforePatch:(e,t,i,l)=>{var s,r;"function"==typeof(null===(s=n.hooks)||void 0===s?void 0:s.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(e,t,i,l)),(e=>{var t,n,i;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(n=e.nextState)||void 0===n?void 0:n.get("_icons");null===(i=e.nextState)||void 0===i||i.set("_icons",(e=>{let t={};return(0,a.i)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(o(t,"top",e.top),o(t,"right",e.right),o(t,"bottom",e.bottom),o(t,"left",e.left)),t})(t))}})(i)}}}))}))}},6181:(e,t,n)=>{n.r(t),n.d(t,{kol_input_file:()=>u});var i=n(777),a=n(2452),o=n(4213),l=n(8540),s=n(4143),r=n(7440),d=n(8579),c=n(4997),h=(e,t,n)=>new Promise(((i,a)=>{var o=e=>{try{s(n.next(e))}catch(e){a(e)}},l=e=>{try{s(n.throw(e))}catch(e){a(e)}},s=e=>e.done?i(e.value):Promise.resolve(e.value).then(o,l);s((n=n.apply(e,t)).next())}));class p extends s.I{constructor(e,t,n){super(e,t,n),this.component=e}validateAccept(e){(0,r.i)(this.component,"_accept",e)}validateMultiple(e){(0,r.b)(this.component,"_multiple",e)}validateRequired(e){(0,r.b)(this.component,"_required",e)}validateValue(e){(0,r.i)(this.component,"_value",e),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateAccept(this.component._accept),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateValue(this.component._value)}}const u=class{getValue(){return h(this,null,(function*(){var e;return null===(e=this.inputRef)||void 0===e?void 0:e.files}))}focus(){return h(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return h(this,null,(function*(){var e;null===(e=this.inputRef)||void 0===e||e.focus()}))}render(){const{ariaDescribedBy:e}=(0,o.g)(this.state),t=(0,c.s)(this.state._label);return(0,i.h)(i.H,{key:"efceaa84a757cd53737d20b7220f61736e15aad3",class:"kol-input-file"},(0,i.h)(d.l,{key:"12f42cbaa35e9c8520f0b0f6e66d791e287c0563",class:{file:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_disabled:this.state._disabled,_msg:this.state._msg,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_required:this.state._required,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.inputRef)||void 0===e?void 0:e.focus()},role:"presentation"},(0,i.h)("span",{key:"d08326c76f8c30a2ba6d080a5d6dd27abcffd03f",slot:"label"},t?(0,i.h)("slot",{name:"expert"}):"string"==typeof this.state._accessKey?(0,i.h)(i.F,null,(0,i.h)(l.I,{accessKey:this.state._accessKey,label:this.state._label})," ",(0,i.h)("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):(0,i.h)("span",null,this.state._label)),(0,i.h)("div",{key:"c676203deb04e250d3d268c874fbd7ea0941b704",slot:"input"},(0,i.h)("input",Object.assign({key:"361467cb53b3337e413bccd182cc24c0adef2208",ref:this.catchRef,title:"",accept:this.state._accept,accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,spellcheck:"false",type:"file",value:this.state._value},this.controller.onFacade,{onChange:this.onChange,onInput:this.onInput})))))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{this.inputRef=e},this.onChange=e=>{if(this.inputRef instanceof HTMLInputElement&&"file"===this.inputRef.type){const t=this.inputRef.files;this.controller.onFacade.onChange(e,t),this.controller.setFormAssociatedValue(t)}},this.onInput=e=>{if(this.inputRef instanceof HTMLInputElement&&"file"===this.inputRef.type){const t=this.inputRef.files;this.controller.onFacade.onInput(e,!1,t)}},this._accept=void 0,this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=!1,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${(0,a.n)()}`,_label:""},this.controller=new p(this,"file",this.host)}validateAccept(e){this.controller.validateAccept(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateRequired(e){this.controller.validateRequired(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return(0,i.g)(this)}static get watchers(){return{_accept:["validateAccept"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};u.style={default:"@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n label input[type=file]::-webkit-file-upload-button {\n display: none;\n }\n label input[type=file]:before {\n content: \"Datei auswählen\";\n }\n label input[multiple]:before {\n content: \"Dateien auswählen\";\n }\n div.input {\n cursor: pointer;\n }\n}"}}}]);
|
package/dist/619.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see 619.js.LICENSE.txt */
|
|
2
|
-
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[619],{
|
|
2
|
+
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[619],{2452:(t,e,s)=>{s.d(e,{i:()=>l,n:()=>c,r:()=>r});var a=s(777),n=s(4997),i=s(6448);const o=()=>{let t=(0,i.d)().KoliBri;return void 0===t&&(t={},Object.defineProperty((0,i.d)(),"KoliBri",{value:t,writable:!1})),t},l=()=>{(()=>{const t=(0,i.g)().querySelector('meta[name="kolibri"]');if(t&&t.hasAttribute("content")){const e=t.getAttribute("content");"string"==typeof e&&((0,i.s)(e.includes("dev-mode=true")),(0,i.b)(e.includes("experimental-mode=true")),(0,i.c)(e.includes("color-contrast-analysis=true")))}})(),i.L.debug(`\n,--. ,--. ,--. ,--. ,-----. ,--.\n| .' / ,---. | | \`--' | |) /_ ,--.--. \`--'\n| . ' | .-. | | | ,--. | .-. \\ | .--' ,--.\n| |\\ \\ | '-' | | | | | | '--' / | | | |\n\`--' \`--´ \`---´ \`--' \`--' \`------´ \`--' \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${a.E.kolibriVersion}\n\t`,{forceLog:!0})},r=()=>{!0!==o().adviceShown&&(Object.defineProperty(o(),"adviceShown",{get:function(){return!0}}),i.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let c=()=>Math.floor(16777215*Math.random()).toString(16);"test"===n.p&&(c=()=>"nonce")},6588:(t,e,s)=>{s.d(e,{t:()=>i});var a=s(8457),n=s(4997);let i=(t,e)=>{var s;return(null!==(s=(0,a.g)())&&void 0!==s?s:(0,a.i)("de")).translate(t,e)};"test"===n.p&&(i=t=>t)},619:(t,e,s)=>{s.r(e),s.d(e,{kol_toast_container:()=>c});var a=s(777),n=s(6588),i=s(2452),o=s(8579),l=(t,e,s)=>new Promise(((a,n)=>{var i=t=>{try{l(s.next(t))}catch(t){n(t)}},o=t=>{try{l(s.throw(t))}catch(t){n(t)}},l=t=>t.done?a(t.value):Promise.resolve(t.value).then(i,o);l((s=s.apply(t,e)).next())}));const r=({key:t,onClose:e,onRef:s,toastState:n})=>(0,a.h)("div",{class:`toast ${n.status}`,key:t},(0,a.h)(o.v,{class:"alert",_alert:!0,_label:n.toast.label,_level:0,_hasCloser:!0,_type:n.toast.type,_variant:n.toast.alertVariant||"card",_on:{onClose:e}},(0,a.h)("div",{ref:s},"string"==typeof n.toast.description?n.toast.description:null))),c=class{constructor(t){(0,a.r)(this,t),this.knownRenderFunctions=new Set,this.state={_toastStates:[]}}enqueue(t){return l(this,null,(function*(){const e={toast:t,status:"adding",id:`toast-${(0,i.n)()}`};return this.state=Object.assign(Object.assign({},this.state),{_toastStates:[e,...this.state._toastStates]}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((t=>t.id===e.id&&"removing"!==t.status?Object.assign(Object.assign({},t),{status:"settled"}):t))})}),300),()=>{this.handleClose(e)}}))}handleClose(t){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((e=>(e.id===t.id&&(e.status="removing"),e)))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((e=>e.id!==t.id))})}),300)}closeAll(t=!1){return l(this,null,(function*(){if(t)this.state=Object.assign(Object.assign({},this.state),{_toastStates:[]});else{const t=[...this.state._toastStates];this.state=Object.assign(Object.assign({},this.state),{_toastStates:t.map((t=>Object.assign(Object.assign({},t),{status:"removing"})))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((e=>t.every((t=>t.id!==e.id))))})}),300)}}))}handleToastRef(t,e){e&&"function"==typeof t.toast.render&&!this.knownRenderFunctions.has(t.toast.render)&&(this.knownRenderFunctions.add(t.toast.render),t.toast.render(e,{close:()=>this.handleClose(t)}))}render(){return(0,a.h)(a.H,{key:"69ede64a0d0e5bfcd817e943d5a7cb4512c4deb4",class:"kol-toast-container"},this.state._toastStates.length>1&&(0,a.h)(o.o,{key:"a05a1e8f4e8f3609ea815dfce9110f59791fa82e",_label:(0,n.t)("kol-toast-close-all"),class:"close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map((t=>(0,a.h)(r,{key:t.id,onClose:()=>this.handleClose(t),onRef:e=>this.handleToastRef(t,e),toastState:t}))))}};c.style={default:"@layer kol-component {\n :host {\n display: flex;\n flex-direction: column;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n position: fixed;\n z-index: 200;\n }\n .close-all {\n align-self: flex-end;\n }\n}"}},4997:(t,e,s)=>{s.d(e,{h:()=>n,p:()=>a,s:()=>i});let a="development";try{a="production"}catch(t){a="production"}const n=(t,e,s)=>{if(t&&e&&"string"==typeof s){const a=t.querySelector(`[slot="${s}"]`);a&&e.appendChild(a)}},i=t=>""===t}}]);
|
package/dist/6671.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see 6671.js.LICENSE.txt */
|
|
2
|
-
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6671],{4600:(e,t,n)=>{function i(e){var t,n,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e)){var s=e.length;for(t=0;t<s;t++)e[t]&&(n=i(e[t]))&&(o&&(o+=" "),o+=n)}else for(n in e)e[n]&&(o&&(o+=" "),o+=n);return o}function o(){for(var e,t,n=0,o="",s=arguments.length;n<s;n++)(e=arguments[n])&&(t=i(e))&&(o&&(o+=" "),o+=t);return o}n.d(t,{c:()=>o})},3260:(e,t,n)=>{n.d(t,{S:()=>a,a:()=>s,b:()=>i,i:()=>o});const i=e=>"object"==typeof e&&null!==e,o=(e,t=0)=>"string"==typeof e&&e.length>=t,s=e=>{if("object"!=typeof e||null===e)return o(e,1);for(const t in e)if(!1===o(t,1))return!1;return!0},a=new Event("StateChange")},9392:(e,t,n)=>{n.d(t,{I:()=>r});var i=n(6944),o=n(4550),s=n(6812),a=n(3260);const l=(e,t)=>{const n=e;"object"==typeof n&&null!==n&&((0,a.i)(n.right,1)&&(n.right={icon:n.right}),(0,a.i)(n.left,1)&&(n.left={icon:n.left}),t.set("_icons",n))};class r extends i.I{constructor(e,t,n){super(e,t,n),this.component=e}validateIcon(e){this.validateIcons(e)}validateIcons(e){(0,s.o)(e,(()=>{try{e=(0,s.p)(e)}catch(e){}(0,s.w)(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&((0,a.i)(e.left,1)||(0,o.i)(e.left)||(0,a.i)(e.right,1)||(0,o.i)(e.right))),new Set(["KoliBriHorizontalIcon"]),e,{hooks:{beforePatch:l},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons||this.component._icon)}}},6588:(e,t,n)=>{n.d(t,{t:()=>s});var i=n(8457),o=n(4997);let s=(e,t)=>{var n;return(null!==(n=(0,i.g)())&&void 0!==n?n:(0,i.i)("de")).translate(e,t)};"test"===o.p&&(s=e=>e)},4550:(e,t,n)=>{n.d(t,{i:()=>a,v:()=>l});var i=n(6812),o=n(3260);const s=(e,t,n)=>{(0,o.b)(n)?e[t]=n:(0,o.i)(n,1)&&(e[t]={icon:n})},a=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,o.a)(e.style))&&(void 0===e.label||(0,o.i)(e.label))&&(0,o.i)(e.icon,1),l=(e,t,n={})=>{(0,i.o)(t,(()=>{var l;try{t=(0,i.p)(t)}catch(e){}(0,i.w)(e,"_icons",(e=>{const t="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||t||(0,o.i)(e,1)||"object"==typeof e&&null!==e&&((0,o.i)(e.left,1)||a(e.left)||(0,o.i)(e.right,1)||a(e.right)||(0,o.i)(e.top,1)||a(e.top)||(0,o.i)(e.bottom,1)||a(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(l=n.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(e,t,i,a)=>{var l,r;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(e,t,i,a)),(e=>{var t,n,i;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(n=e.nextState)||void 0===n?void 0:n.get("_icons");null===(i=e.nextState)||void 0===i||i.set("_icons",(e=>{let t={};return(0,o.i)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(s(t,"top",e.top),s(t,"right",e.right),s(t,"bottom",e.bottom),s(t,"left",e.left)),t})(t))}})(i)}}}))}))}},6671:(e,t,n)=>{n.r(t),n.d(t,{kol_combobox:()=>v});var i=n(9293),o=n(4039),s=n(6855),a=n(9392),l=n(6479),r=n(6812),d=n(6944),h=n(8579),c=n(7756),u=n(6588),p=n(4600),b=n(4997),g=(e,t,n)=>new Promise(((i,o)=>{var s=e=>{try{l(n.next(e))}catch(e){o(e)}},a=e=>{try{l(n.throw(e))}catch(e){o(e)}},l=e=>e.done?i(e.value):Promise.resolve(e.value).then(s,a);l((n=n.apply(e,t)).next())}));class f extends a.I{constructor(e,t,n){super(e,t,n),this.component=e}validateSuggestions(e){(0,l.v)(this.component,e)}validateRequired(e){(0,r.b)(this.component,"_required",e)}validateValue(e){(0,r.i)(this.component,"_value",e)}validateMsg(e){(0,d.v)(this.component,e)}validatePlaceholder(e){(0,r.i)(this.component,"_placeholder",e)}componentWillLoad(){super.componentWillLoad(),this.validateSuggestions(this.component._suggestions),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder)}}const v=class{getValue(){return g(this,null,(function*(){return this.state._value}))}kolFocus(){return g(this,null,(function*(){var e;null===(e=this.refInput)||void 0===e||e.focus()}))}selectOption(e,t){var n;this.controller.onFacade.onInput(e,!0,t),this.controller.onFacade.onChange(e,t),this.controller.setFormAssociatedValue(t),this.state._value=t,null===(n=this.refInput)||void 0===n||n.focus()}onInput(e){const t=e.target;this.state._value=t.value,this.controller.onFacade.onInput(e),this.setFilteredSuggestionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredSuggestionsByQuery(e){""===e.trim()?this._filteredSuggestions=[...this._suggestions]:(this._filteredSuggestions=Array.isArray(this._suggestions)?this._suggestions.filter((t=>t.toLowerCase().includes(e.toLowerCase()))):this._filteredSuggestions,this._isOpen=!!(this._filteredSuggestions&&this._filteredSuggestions.length>0))}moveFocus(e){if(!this._filteredSuggestions)return;let t=this._focusedOptionIndex+e;t>=this._filteredSuggestions.length&&(t=0),t<0&&(t=this._filteredSuggestions.length-1),this.focusOption(t)}focusOption(e){if(this._focusedOptionIndex=e,this.refSuggestions){const t=this.refSuggestions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),n=Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.findIndex((e=>e.toLowerCase().startsWith(t)));"number"==typeof n&&this.focusOption(n)}render(){const e=(0,b.s)(this.state._label),{ariaDescribedBy:t}=(0,d.g)(this.state);return(0,i.h)(i.H,{key:"520b90a5b17719f0acd633ca8a9a3b313b8fef41",class:"kol-combobox"},(0,i.h)("div",{key:"7e5a3ec03dcd6769a16d181cd1b26beb26af2a9a",class:(0,p.c)("combobox",this.state._disabled&&"combobox--disabled")},(0,i.h)(h.l,{key:"5501454ee81df1d0811d0835409126506a334983",_accessKey:this.state._accessKey,_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.refInput)||void 0===e?void 0:e.focus()},role:"presentation"},(0,i.h)("span",{key:"e9dd3f2cf17eaf4e5d295f0bd9fc37aa9085b8b9",slot:"label"},e?(0,i.h)("slot",{name:"expert"}):"string"==typeof this.state._accessKey?(0,i.h)(i.F,null,(0,i.h)(c.I,{accessKey:this.state._accessKey,label:this.state._label})," ",(0,i.h)("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):(0,i.h)("span",null,this.state._label)),(0,i.h)("div",{key:"afba7d4ff0b569da313797721270311242e34734",slot:"input"},(0,i.h)("div",{key:"f5f1db833f8695b125a834b884b4673121a0dc1e",class:"combobox__group"},(0,i.h)("input",Object.assign({key:"caa86d47cf25063b487b62d78fdc2e7010da5e0a",ref:this.catchRef,class:"combobox__input",type:"text",role:"combobox","aria-autocomplete":"both","aria-expanded":this._isOpen?"true":"false","aria-controls":"listbox",value:this.state._value,accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-labelledby":this.state._id,"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,name:this.state._name,required:this.state._required,spellcheck:"false"},this.controller.onFacade,{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),placeholder:this.state._placeholder})),(0,i.h)("button",{key:"0cd5a3bcf6b5ad52e86795465dadbaeee2604c80",tabindex:"-1",class:"combobox__icon",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled},(0,i.h)(h.g,{key:"2ad19cc55158c2016008fd362d86eae5772d4e18",_icons:"codicon codicon-triangle-down",_label:(0,u.t)("kol-dropdown")}))),this._isOpen&&!(!0===this.state._disabled)&&(0,i.h)("ul",{key:"d9e2426f5780921c805644d56c51e4d9e554ec3d",role:"listbox",class:(0,p.c)("combobox__listbox",this.blockSuggestionMouseOver&&"combobox__listbox--cursor-hidden"),onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.map(((e,t)=>(0,i.h)("li",{id:`option-${t}`,key:`-${t}`,ref:e=>{e&&(this.refSuggestions[t]=e)},"data-index":t,tabIndex:-1,role:"option","aria-selected":this.state._value===e,onClick:t=>{this.selectOption(t,e),this.toggleListbox()},onMouseOver:()=>{this.blockSuggestionMouseOver||this.focusOption(t)},onFocus:()=>{this.focusOption(t)},class:"combobox__item",onKeyDown:t=>{"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(t,e),this.toggleListbox(),t.preventDefault())}},e))))))))}handleKeyDown(e){var t,n;const i=(t,n)=>{var i;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(-1)));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":i(!1),null===(n=this.refInput)||void 0===n||n.focus();break;case"NumpadEnter":case"Enter":this.toggleListbox();break;case"Home":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&this.focusOption(0)}));break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&this.focusOption(this._filteredSuggestions?this._filteredSuggestions.length-1:0)}));break;case"PageUp":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(-10)));break;case"PageDown":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(10)))}}handleWindowClick(e){null==this.host||this.host.contains(e.target)||(this._isOpen=!1)}constructor(e){(0,i.r)(this,e),this.refSuggestions=[],this._focusedOptionIndex=-1,this.toggleListbox=()=>{var e;if(!0===this.state._disabled)this._isOpen=!1;else if(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus(),this._isOpen&&Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0){const e=this._filteredSuggestions.findIndex((e=>e===this.state._value));this._focusedOptionIndex=e>=0?e:0,this.focusOption(this._focusedOptionIndex)}},this.catchRef=e=>{this.refInput=e},this.blockSuggestionMouseOver=!1,this._isOpen=!1,this._filteredSuggestions=void 0,this._accessKey=void 0,this._placeholder=void 0,this._alert=!0,this._disabled=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._suggestions=void 0,this._required=!1,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${(0,o.n)()}`,_label:"",_suggestions:[],_value:""},this.controller=new f(this,"combobox",this.host),this.onInput=this.onInput.bind(this)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.controller.setFormAssociatedValue(e)}componentWillLoad(){this.refSuggestions=[],this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e)),this._filteredSuggestions=this.state._suggestions}handleMouseEvent(){this.blockSuggestionMouseOver=!1}handleFocusOut(){setTimeout((()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()}),0)}handleWindowBlur(){this.onBlur()}onBlur(){var e;this._isOpen&&(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus())}onChange(e){var t;(0,s.s)(e),(0,s.t)("change",this.host,this.state._value),this.controller.setFormAssociatedValue(this.state._value),"function"!=typeof(null===(t=this.state._on)||void 0===t?void 0:t.onChange)||this._isOpen||this.state._on.onChange(e,this.state._value)}get host(){return(0,i.g)(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_suggestions:["validateSuggestions"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};v.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .combobox {\n position: relative;\n }\n .combobox--disabled, .combobox--disabled * {\n cursor: not-allowed !important;\n }\n .combobox--disabled {\n opacity: 0.5;\n outline: none;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n }\n .combobox__input {\n flex-grow: 1;\n }\n .combobox__icon {\n align-items: center;\n cursor: pointer;\n display: flex;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .combobox__listbox {\n display: block;\n position: absolute;\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 2;\n background-color: white;\n max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n cursor: pointer;\n }\n .combobox__listbox--cursor-hidden .combobox__item {\n cursor: none !important;\n }\n}"}},6479:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(6812);const o=(e,t)=>{(0,i.g)(e,"_suggestions",(e=>"string"==typeof e||"number"==typeof e),t,void 0,{hooks:{afterPatch:e=>{Array.isArray(e)&&e.length&&(0,i.a)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);
|
|
2
|
+
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6671],{4600:(e,t,n)=>{function i(e){var t,n,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e)){var s=e.length;for(t=0;t<s;t++)e[t]&&(n=i(e[t]))&&(o&&(o+=" "),o+=n)}else for(n in e)e[n]&&(o&&(o+=" "),o+=n);return o}function o(){for(var e,t,n=0,o="",s=arguments.length;n<s;n++)(e=arguments[n])&&(t=i(e))&&(o&&(o+=" "),o+=t);return o}n.d(t,{c:()=>o})},3260:(e,t,n)=>{n.d(t,{S:()=>a,a:()=>s,b:()=>i,i:()=>o});const i=e=>"object"==typeof e&&null!==e,o=(e,t=0)=>"string"==typeof e&&e.length>=t,s=e=>{if("object"!=typeof e||null===e)return o(e,1);for(const t in e)if(!1===o(t,1))return!1;return!0},a=new Event("StateChange")},4143:(e,t,n)=>{n.d(t,{I:()=>r});var i=n(4213),o=n(5685),s=n(7440),a=n(3260);const l=(e,t)=>{const n=e;"object"==typeof n&&null!==n&&((0,a.i)(n.right,1)&&(n.right={icon:n.right}),(0,a.i)(n.left,1)&&(n.left={icon:n.left}),t.set("_icons",n))};class r extends i.I{constructor(e,t,n){super(e,t,n),this.component=e}validateIcon(e){this.validateIcons(e)}validateIcons(e){(0,s.o)(e,(()=>{try{e=(0,s.p)(e)}catch(e){}(0,s.w)(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&((0,a.i)(e.left,1)||(0,o.i)(e.left)||(0,a.i)(e.right,1)||(0,o.i)(e.right))),new Set(["KoliBriHorizontalIcon"]),e,{hooks:{beforePatch:l},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons||this.component._icon)}}},6588:(e,t,n)=>{n.d(t,{t:()=>s});var i=n(8457),o=n(4997);let s=(e,t)=>{var n;return(null!==(n=(0,i.g)())&&void 0!==n?n:(0,i.i)("de")).translate(e,t)};"test"===o.p&&(s=e=>e)},5685:(e,t,n)=>{n.d(t,{i:()=>a,v:()=>l});var i=n(7440),o=n(3260);const s=(e,t,n)=>{(0,o.b)(n)?e[t]=n:(0,o.i)(n,1)&&(e[t]={icon:n})},a=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,o.a)(e.style))&&(void 0===e.label||(0,o.i)(e.label))&&(0,o.i)(e.icon,1),l=(e,t,n={})=>{(0,i.o)(t,(()=>{var l;try{t=(0,i.p)(t)}catch(e){}(0,i.w)(e,"_icons",(e=>{const t="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||t||(0,o.i)(e,1)||"object"==typeof e&&null!==e&&((0,o.i)(e.left,1)||a(e.left)||(0,o.i)(e.right,1)||a(e.right)||(0,o.i)(e.top,1)||a(e.top)||(0,o.i)(e.bottom,1)||a(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(l=n.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(e,t,i,a)=>{var l,r;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(e,t,i,a)),(e=>{var t,n,i;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(n=e.nextState)||void 0===n?void 0:n.get("_icons");null===(i=e.nextState)||void 0===i||i.set("_icons",(e=>{let t={};return(0,o.i)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(s(t,"top",e.top),s(t,"right",e.right),s(t,"bottom",e.bottom),s(t,"left",e.left)),t})(t))}})(i)}}}))}))}},6671:(e,t,n)=>{n.r(t),n.d(t,{kol_combobox:()=>v});var i=n(777),o=n(2452),s=n(6855),a=n(4143),l=n(3524),r=n(7440),d=n(4213),h=n(8579),c=n(8540),u=n(6588),p=n(4600),b=n(4997),g=(e,t,n)=>new Promise(((i,o)=>{var s=e=>{try{l(n.next(e))}catch(e){o(e)}},a=e=>{try{l(n.throw(e))}catch(e){o(e)}},l=e=>e.done?i(e.value):Promise.resolve(e.value).then(s,a);l((n=n.apply(e,t)).next())}));class f extends a.I{constructor(e,t,n){super(e,t,n),this.component=e}validateSuggestions(e){(0,l.v)(this.component,e)}validateRequired(e){(0,r.b)(this.component,"_required",e)}validateValue(e){(0,r.i)(this.component,"_value",e)}validateMsg(e){(0,d.v)(this.component,e)}validatePlaceholder(e){(0,r.i)(this.component,"_placeholder",e)}componentWillLoad(){super.componentWillLoad(),this.validateSuggestions(this.component._suggestions),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder)}}const v=class{getValue(){return g(this,null,(function*(){return this.state._value}))}kolFocus(){return g(this,null,(function*(){var e;null===(e=this.refInput)||void 0===e||e.focus()}))}selectOption(e,t){var n;this.controller.onFacade.onInput(e,!0,t),this.controller.onFacade.onChange(e,t),this.controller.setFormAssociatedValue(t),this.state._value=t,null===(n=this.refInput)||void 0===n||n.focus()}onInput(e){const t=e.target;this.state._value=t.value,this.controller.onFacade.onInput(e),this.setFilteredSuggestionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredSuggestionsByQuery(e){""===e.trim()?this._filteredSuggestions=[...this._suggestions]:(this._filteredSuggestions=Array.isArray(this._suggestions)?this._suggestions.filter((t=>t.toLowerCase().includes(e.toLowerCase()))):this._filteredSuggestions,this._isOpen=!!(this._filteredSuggestions&&this._filteredSuggestions.length>0))}moveFocus(e){if(!this._filteredSuggestions)return;let t=this._focusedOptionIndex+e;t>=this._filteredSuggestions.length&&(t=0),t<0&&(t=this._filteredSuggestions.length-1),this.focusOption(t)}focusOption(e){if(this._focusedOptionIndex=e,this.refSuggestions){const t=this.refSuggestions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),n=Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.findIndex((e=>e.toLowerCase().startsWith(t)));"number"==typeof n&&this.focusOption(n)}render(){const e=(0,b.s)(this.state._label),{ariaDescribedBy:t}=(0,d.g)(this.state);return(0,i.h)(i.H,{key:"520b90a5b17719f0acd633ca8a9a3b313b8fef41",class:"kol-combobox"},(0,i.h)("div",{key:"7e5a3ec03dcd6769a16d181cd1b26beb26af2a9a",class:(0,p.c)("combobox",this.state._disabled&&"combobox--disabled")},(0,i.h)(h.l,{key:"5501454ee81df1d0811d0835409126506a334983",_accessKey:this.state._accessKey,_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.refInput)||void 0===e?void 0:e.focus()},role:"presentation"},(0,i.h)("span",{key:"e9dd3f2cf17eaf4e5d295f0bd9fc37aa9085b8b9",slot:"label"},e?(0,i.h)("slot",{name:"expert"}):"string"==typeof this.state._accessKey?(0,i.h)(i.F,null,(0,i.h)(c.I,{accessKey:this.state._accessKey,label:this.state._label})," ",(0,i.h)("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):(0,i.h)("span",null,this.state._label)),(0,i.h)("div",{key:"afba7d4ff0b569da313797721270311242e34734",slot:"input"},(0,i.h)("div",{key:"f5f1db833f8695b125a834b884b4673121a0dc1e",class:"combobox__group"},(0,i.h)("input",Object.assign({key:"caa86d47cf25063b487b62d78fdc2e7010da5e0a",ref:this.catchRef,class:"combobox__input",type:"text",role:"combobox","aria-autocomplete":"both","aria-expanded":this._isOpen?"true":"false","aria-controls":"listbox",value:this.state._value,accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-labelledby":this.state._id,"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,name:this.state._name,required:this.state._required,spellcheck:"false"},this.controller.onFacade,{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),placeholder:this.state._placeholder})),(0,i.h)("button",{key:"0cd5a3bcf6b5ad52e86795465dadbaeee2604c80",tabindex:"-1",class:"combobox__icon",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled},(0,i.h)(h.g,{key:"2ad19cc55158c2016008fd362d86eae5772d4e18",_icons:"codicon codicon-triangle-down",_label:(0,u.t)("kol-dropdown")}))),this._isOpen&&!(!0===this.state._disabled)&&(0,i.h)("ul",{key:"d9e2426f5780921c805644d56c51e4d9e554ec3d",role:"listbox",class:(0,p.c)("combobox__listbox",this.blockSuggestionMouseOver&&"combobox__listbox--cursor-hidden"),onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.map(((e,t)=>(0,i.h)("li",{id:`option-${t}`,key:`-${t}`,ref:e=>{e&&(this.refSuggestions[t]=e)},"data-index":t,tabIndex:-1,role:"option","aria-selected":this.state._value===e,onClick:t=>{this.selectOption(t,e),this.toggleListbox()},onMouseOver:()=>{this.blockSuggestionMouseOver||this.focusOption(t)},onFocus:()=>{this.focusOption(t)},class:"combobox__item",onKeyDown:t=>{"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(t,e),this.toggleListbox(),t.preventDefault())}},e))))))))}handleKeyDown(e){var t,n;const i=(t,n)=>{var i;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(-1)));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":i(!1),null===(n=this.refInput)||void 0===n||n.focus();break;case"NumpadEnter":case"Enter":this.toggleListbox();break;case"Home":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&this.focusOption(0)}));break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&this.focusOption(this._filteredSuggestions?this._filteredSuggestions.length-1:0)}));break;case"PageUp":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(-10)));break;case"PageDown":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(10)))}}handleWindowClick(e){null==this.host||this.host.contains(e.target)||(this._isOpen=!1)}constructor(e){(0,i.r)(this,e),this.refSuggestions=[],this._focusedOptionIndex=-1,this.toggleListbox=()=>{var e;if(!0===this.state._disabled)this._isOpen=!1;else if(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus(),this._isOpen&&Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0){const e=this._filteredSuggestions.findIndex((e=>e===this.state._value));this._focusedOptionIndex=e>=0?e:0,this.focusOption(this._focusedOptionIndex)}},this.catchRef=e=>{this.refInput=e},this.blockSuggestionMouseOver=!1,this._isOpen=!1,this._filteredSuggestions=void 0,this._accessKey=void 0,this._placeholder=void 0,this._alert=!0,this._disabled=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._suggestions=void 0,this._required=!1,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${(0,o.n)()}`,_label:"",_suggestions:[],_value:""},this.controller=new f(this,"combobox",this.host),this.onInput=this.onInput.bind(this)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.controller.setFormAssociatedValue(e)}componentWillLoad(){this.refSuggestions=[],this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e)),this._filteredSuggestions=this.state._suggestions}handleMouseEvent(){this.blockSuggestionMouseOver=!1}handleFocusOut(){setTimeout((()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()}),0)}handleWindowBlur(){this.onBlur()}onBlur(){var e;this._isOpen&&(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus())}onChange(e){var t;(0,s.s)(e),(0,s.t)("change",this.host,this.state._value),this.controller.setFormAssociatedValue(this.state._value),"function"!=typeof(null===(t=this.state._on)||void 0===t?void 0:t.onChange)||this._isOpen||this.state._on.onChange(e,this.state._value)}get host(){return(0,i.g)(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_suggestions:["validateSuggestions"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};v.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .combobox {\n position: relative;\n }\n .combobox--disabled, .combobox--disabled * {\n cursor: not-allowed !important;\n }\n .combobox--disabled {\n opacity: 0.5;\n outline: none;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n }\n .combobox__input {\n flex-grow: 1;\n }\n .combobox__icon {\n align-items: center;\n cursor: pointer;\n display: flex;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .combobox__listbox {\n display: block;\n position: absolute;\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 2;\n background-color: white;\n max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n cursor: pointer;\n }\n .combobox__listbox--cursor-hidden .combobox__item {\n cursor: none !important;\n }\n}"}},3524:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(7440);const o=(e,t)=>{(0,i.g)(e,"_suggestions",(e=>"string"==typeof e||"number"==typeof e),t,void 0,{hooks:{afterPatch:e=>{Array.isArray(e)&&e.length&&(0,i.a)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);
|
package/dist/6775.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see 6775.js.LICENSE.txt */
|
|
2
|
-
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6775],{7943:(t,e,a)=>{a.d(e,{v:()=>s});var i=a(6812);const s=(t,e)=>{(0,i.i)(t,"_accessKey",e)}},7811:(t,e,a)=>{a.d(e,{a:()=>o,v:()=>s});var i=a(6812);const s=(t,e,a)=>{(0,i.w)(t,e,(t=>"string"==typeof t&&n.includes(t)),new Set(n),a,{defaultValue:"top"})},n=["left","right","top","bottom"],o=(t,e)=>{s(t,"_align",e)}},5820:(t,e,a)=>{a.d(e,{a:()=>l,b:()=>n,v:()=>o});var i=a(6812);const s=["button","link","tab","treeitem"],n=(t,e)=>{(0,i.w)(t,"_role",(t=>"string"==typeof t&&s.includes(t)),new Set([`KoliBriAlternativeButtonLinkRole {${s.join(", ")}`]),e)},o=(t,e)=>{(0,i.i)(t,"_ariaDescription",e)},l=(t,e)=>{(0,i.b)(t,"_ariaExpanded",e)}},3260:(t,e,a)=>{a.d(e,{S:()=>o,a:()=>n,b:()=>i,i:()=>s});const i=t=>"object"==typeof t&&null!==t,s=(t,e=0)=>"string"==typeof t&&t.length>=e,n=t=>{if("object"!=typeof t||null===t)return s(t,1);for(const e in t)if(!1===s(e,1))return!1;return!0},o=new Event("StateChange")},4039:(t,e,a)=>{a.d(e,{i:()=>l,n:()=>d,r:()=>r});var i=a(9293),s=a(4997),n=a(6448);const o=()=>{let t=(0,n.d)().KoliBri;return void 0===t&&(t={},Object.defineProperty((0,n.d)(),"KoliBri",{value:t,writable:!1})),t},l=()=>{(()=>{const t=(0,n.g)().querySelector('meta[name="kolibri"]');if(t&&t.hasAttribute("content")){const e=t.getAttribute("content");"string"==typeof e&&((0,n.s)(e.includes("dev-mode=true")),(0,n.b)(e.includes("experimental-mode=true")),(0,n.c)(e.includes("color-contrast-analysis=true")))}})(),n.L.debug(`\n,--. ,--. ,--. ,--. ,-----. ,--.\n| .' / ,---. | | \`--' | |) /_ ,--.--. \`--'\n| . ' | .-. | | | ,--. | .-. \\ | .--' ,--.\n| |\\ \\ | '-' | | | | | | '--' / | | | |\n\`--' \`--´ \`---´ \`--' \`--' \`------´ \`--' \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${i.E.kolibriVersion}\n\t`,{forceLog:!0})},r=()=>{!0!==o().adviceShown&&(Object.defineProperty(o(),"adviceShown",{get:function(){return!0}}),n.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let d=()=>Math.floor(16777215*Math.random()).toString(16);"test"===s.p&&(d=()=>"nonce")},5377:(t,e,a)=>{a.d(e,{v:()=>s});var i=a(6812);const s=(t,e)=>{(0,i.b)(t,"_disabled",e,{hooks:{afterPatch:t=>{!0===t&&(0,i.c)()}}})}},6855:(t,e,a)=>{function i(t){t.stopImmediatePropagation(),t.stopPropagation()}function s(t,e,a){e&&function(t,e,a){const i=t.dispatchEvent(function(t,e){return new CustomEvent(`kol-${t}`,{bubbles:!0,cancelable:!0,composed:!0,detail:e})}(e,a))}(e,t,a)}function n(t){t.preventDefault(),i(t)}a.d(e,{p:()=>n,s:()=>i,t:()=>s})},6996:(t,e,a)=>{a.d(e,{v:()=>s});var i=a(6812);const s=(t,e,a={})=>{(0,i.b)(t,"_hideLabel",e,a)}},2889:(t,e,a)=>{a.d(e,{v:()=>s});var i=a(6812);const s=(t,e,a={})=>{(0,i.i)(t,"_href",e,a)}},6588:(t,e,a)=>{a.d(e,{t:()=>n});var i=a(8457),s=a(4997);let n=(t,e)=>{var a;return(null!==(a=(0,i.g)())&&void 0!==a?a:(0,i.i)("de")).translate(t,e)};"test"===s.p&&(n=t=>t)},4550:(t,e,a)=>{a.d(e,{i:()=>o,v:()=>l});var i=a(6812),s=a(3260);const n=(t,e,a)=>{(0,s.b)(a)?t[e]=a:(0,s.i)(a,1)&&(t[e]={icon:a})},o=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,s.a)(t.style))&&(void 0===t.label||(0,s.i)(t.label))&&(0,s.i)(t.icon,1),l=(t,e,a={})=>{(0,i.o)(e,(()=>{var l;try{e=(0,i.p)(e)}catch(t){}(0,i.w)(t,"_icons",(t=>{const e="object"==typeof t&&null!==t&&0===Object.keys(t).length;return null===t||e||(0,s.i)(t,1)||"object"==typeof t&&null!==t&&((0,s.i)(t.left,1)||o(t.left)||(0,s.i)(t.right,1)||o(t.right)||(0,s.i)(t.top,1)||o(t.top)||(0,s.i)(t.bottom,1)||o(t.bottom))}),new Set(["KoliBriIcon"]),e,Object.assign(Object.assign({},a),{defaultValue:{},hooks:{afterPatch:null===(l=a.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(t,e,i,o)=>{var l,r;"function"==typeof(null===(l=a.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(r=a.hooks)||void 0===r||r.beforePatch(t,e,i,o)),(t=>{var e,a,i;if(null===(e=t.nextState)||void 0===e?void 0:e.has("_icons")){const e=null===(a=t.nextState)||void 0===a?void 0:a.get("_icons");null===(i=t.nextState)||void 0===i||i.set("_icons",(t=>{let e={};return(0,s.i)(t,1)?e={left:{icon:t}}:"object"==typeof t&&null!==t&&(n(e,"top",t.top),n(e,"right",t.right),n(e,"bottom",t.bottom),n(e,"left",t.left)),e})(e))}})(i)}}}))}))}},6775:(t,e,a)=>{a.r(e),a.d(e,{kol_link_wc:()=>w});var i=a(9293),s=a(8037),n=a(6855),o=a(4039),l=a(8579),r=a(6588),d=a(6812),h=a(2889),c=a(4997),b=a(7943),v=a(5820),u=a(5377),_=a(6996),f=a(4550),p=a(5282),g=a(5041),y=a(4794);const k=["date","location","page","step","time","true","false"],w=class{constructor(t){(0,i.r)(this,t),this.internalDescriptionById=(0,o.n)(),this.catchRef=t=>{this.anchorRef=t},this.onClick=t=>{var e,a;!0===this.state._disabled?(0,n.p)(t):"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)&&(t.preventDefault(),t.stopPropagation(),(0,d.q)(t,this.anchorRef),null===(a=this.state._on)||void 0===a||a.onClick(t,this.state._href))},this.getRenderValues=()=>{const t="string"==typeof this.state._target&&"_self"!==this.state._target,e={href:"string"==typeof this.state._href&&this.state._href.length>0?this.state._href:"javascript:void(0);",target:"string"==typeof this.state._target&&this.state._target.length>0?this.state._target:void 0,rel:t?"noopener":void 0,download:"string"==typeof this.state._download?this.state._download:void 0};return!0!==this.state._hideLabel||this.state._label||(0,d.j)("[KolLink] An aria-label must be set when _hide-label is set."),{isExternal:t,tagAttrs:e}},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaOwns=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._target=void 0,this._tooltipAlign="right",this.state={_ariaCurrentValue:"page",_href:"",_icons:{}}}kolFocus(){return t=this,e=function*(){var t;null===(t=this.anchorRef)||void 0===t||t.focus()},new Promise(((a,i)=>{var s=t=>{try{o(e.next(t))}catch(t){i(t)}},n=t=>{try{o(e.throw(t))}catch(t){i(t)}},o=t=>t.done?a(t.value):Promise.resolve(t.value).then(s,n);o((e=e.apply(t,null)).next())}));var t,e}render(){var t,e;const{isExternal:a,tagAttrs:s}=this.getRenderValues(),n=(0,c.s)(this.state._label),o=Boolean(null===(e=null===(t=this.state._ariaDescription)||void 0===t?void 0:t.trim())||void 0===e?void 0:e.length);return(0,i.h)(i.H,{key:"ca779101a7b0a1fc00ba4c487f485bf64c021e2a",class:"kol-link-wc"},(0,i.h)("a",Object.assign({key:"26fbff98d2ce402df318eb6aa8d3b1c5faadb96d",ref:this.catchRef},s,{accessKey:this.state._accessKey,"aria-current":this.state._ariaCurrent,"aria-describedby":o?this.internalDescriptionById:void 0,"aria-disabled":this.state._disabled?"true":void 0,"aria-expanded":"boolean"==typeof this.state._ariaExpanded?String(this.state._ariaExpanded):void 0,"aria-owns":this.state._ariaOwns,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?`${this.state._label}${a?` (${(0,r.t)("kol-open-link-in-tab")})`:""}`:void 0,class:{disabled:!0===this.state._disabled,"external-link":a,"hide-label":!0===this.state._hideLabel}},this.state._on,{onClick:this.onClick,onKeyPress:this.onClick,role:this.state._role,tabIndex:this.state._disabled?-1:this.state._tabIndex}),(0,i.h)(l.f,{key:"ae5fd2b9494d8af7e734ff604bb6d0bdbe9d2918",_accessKey:this.state._accessKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:n?"":this.state._label||this.state._href},(0,i.h)("slot",{key:"e663545748652867f7bda05b95dc780624afd694",name:"expert",slot:"expert"})),a&&(0,i.h)(l.g,{key:"9272168a80f7d7ea1695edbd148d77c712e3af6c",class:"external-link-icon",_label:this.state._hideLabel?"":(0,r.t)("kol-open-link-in-tab"),_icons:"codicon codicon-link-external","aria-hidden":this.state._hideLabel})),(0,i.h)(l.a,{key:"9cd2d8d555edd92377a24c433b76d0de5dcdeb6f","aria-hidden":"true",hidden:n||!this.state._hideLabel,_accessKey:this.state._accessKey,_align:this.state._tooltipAlign,_label:this.state._label||this.state._href}),o&&(0,i.h)("span",{key:"58b50fd2c3e3c3bc4956bcbdc248c0237b3cddcf",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}validateAccessKey(t){(0,b.v)(this,t)}validateAriaCurrentValue(t){((t,e)=>{(0,d.w)(t,"_ariaCurrentValue",(t=>"string"==typeof t&&k.includes(t)),new Set([`AriaCurrentValue {${k.join(", ")}`]),e,{defaultValue:"page"})})(this,t)}validateAriaDescription(t){(0,v.v)(this,t)}validateAriaExpanded(t){(0,v.a)(this,t)}validateAriaOwns(t){((t,e)=>{(0,d.i)(t,"_ariaOwns",e,{defaultValue:void 0})})(this,t)}validateDisabled(t){(0,u.v)(this,t)}validateDownload(t){((t,e)=>{(0,d.i)(t,"_download",e)})(this,t)}validateHideLabel(t){(0,_.v)(this,t)}validateHref(t){(0,h.v)(this,t,{required:!0})}validateIcons(t){(0,f.v)(this,t)}validateLabel(t){(0,p.a)(this,t)}validateOn(t){((t,e)=>{"object"==typeof e&&"function"==typeof(null==e?void 0:e.onClick)&&(t.state=Object.assign(Object.assign({},t.state),{_on:e}))})(this,t)}validateRole(t){(0,v.b)(this,t)}validateTabIndex(t){(0,g.v)(this,t)}validateTarget(t){((t,e)=>{(0,d.i)(t,"_target",e)})(this,t)}validateTooltipAlign(t){(0,y.v)(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaCurrentValue(this._ariaCurrentValue),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaOwns(this._ariaOwns),this.validateDisabled(this._disabled),this.validateDownload(this._download),this.validateHideLabel(this._hideLabel),this.validateHref(this._href),this.validateIcons(this._icons),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateTabIndex(this._tabIndex),this.validateTarget(this._target),this.validateTooltipAlign(this._tooltipAlign),this.unsubscribeOnLocationChange=(0,s.o)((t=>{this.state._ariaCurrent=t===this.state._href?this.state._ariaCurrentValue:void 0}))}disconnectedCallback(){this.unsubscribeOnLocationChange&&this.unsubscribeOnLocationChange()}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaCurrentValue:["validateAriaCurrentValue"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaOwns:["validateAriaOwns"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icons:["validateIcons"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_tooltipAlign:["validateTooltipAlign"]}}}},5282:(t,e,a)=>{a.d(e,{a:()=>c,b:()=>l,c:()=>r,h:()=>s,v:()=>h});var i=a(6812);const s=[0,1,2,3,4,5,6],n=/[a-zA-Z0-9äöüÄÖÜß]/g,o=/^\d+$/;function l(t,e=1){return function(t){var e;return"string"==typeof t&&(null===(e=t.match(n))||void 0===e?void 0:e.length)||0}(t)>=e}function r(t){return o.test(t)}const d=new Set(["string"]),h=(t,e,a={})=>{(0,i.w)(t,"_label",(t=>"string"==typeof t),d,e,function(t){var e;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(e,a,s,n)=>{var o,d;"function"==typeof(null===(o=t.hooks)||void 0===o?void 0:o.afterPatch)&&(null===(d=t.hooks)||void 0===d||d.afterPatch(e,a,s,n)),"string"==typeof e&&!1===l(e,3)&&!1===r(e)&&(0,i.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=t.hooks)||void 0===e?void 0:e.beforePatch}})}(a))},c=h},4997:(t,e,a)=>{a.d(e,{h:()=>s,p:()=>i,s:()=>n});let i="development";try{i="production"}catch(t){i="production"}const s=(t,e,a)=>{if(t&&e&&"string"==typeof a){const i=t.querySelector(`[slot="${a}"]`);i&&e.appendChild(i)}},n=t=>""===t},5041:(t,e,a)=>{a.d(e,{v:()=>n});var i=a(6812);const s={hooks:{afterPatch:t=>{-1!==t&&0!==t&&(0,i.a)("Don't Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html")}}},n=(t,e)=>{(0,i.k)(t,"_tabIndex",e,s)}},4794:(t,e,a)=>{a.d(e,{v:()=>s});var i=a(7811);const s=(t,e)=>{(0,i.v)(t,"_tooltipAlign",e)}}}]);
|
|
2
|
+
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6775],{6227:(t,e,a)=>{a.d(e,{v:()=>s});var i=a(7440);const s=(t,e)=>{(0,i.i)(t,"_accessKey",e)}},882:(t,e,a)=>{a.d(e,{a:()=>o,v:()=>s});var i=a(7440);const s=(t,e,a)=>{(0,i.w)(t,e,(t=>"string"==typeof t&&n.includes(t)),new Set(n),a,{defaultValue:"top"})},n=["left","right","top","bottom"],o=(t,e)=>{s(t,"_align",e)}},3646:(t,e,a)=>{a.d(e,{a:()=>l,b:()=>n,v:()=>o});var i=a(7440);const s=["button","link","tab","treeitem"],n=(t,e)=>{(0,i.w)(t,"_role",(t=>"string"==typeof t&&s.includes(t)),new Set([`KoliBriAlternativeButtonLinkRole {${s.join(", ")}`]),e)},o=(t,e)=>{(0,i.i)(t,"_ariaDescription",e)},l=(t,e)=>{(0,i.b)(t,"_ariaExpanded",e)}},3260:(t,e,a)=>{a.d(e,{S:()=>o,a:()=>n,b:()=>i,i:()=>s});const i=t=>"object"==typeof t&&null!==t,s=(t,e=0)=>"string"==typeof t&&t.length>=e,n=t=>{if("object"!=typeof t||null===t)return s(t,1);for(const e in t)if(!1===s(e,1))return!1;return!0},o=new Event("StateChange")},2452:(t,e,a)=>{a.d(e,{i:()=>l,n:()=>d,r:()=>r});var i=a(777),s=a(4997),n=a(6448);const o=()=>{let t=(0,n.d)().KoliBri;return void 0===t&&(t={},Object.defineProperty((0,n.d)(),"KoliBri",{value:t,writable:!1})),t},l=()=>{(()=>{const t=(0,n.g)().querySelector('meta[name="kolibri"]');if(t&&t.hasAttribute("content")){const e=t.getAttribute("content");"string"==typeof e&&((0,n.s)(e.includes("dev-mode=true")),(0,n.b)(e.includes("experimental-mode=true")),(0,n.c)(e.includes("color-contrast-analysis=true")))}})(),n.L.debug(`\n,--. ,--. ,--. ,--. ,-----. ,--.\n| .' / ,---. | | \`--' | |) /_ ,--.--. \`--'\n| . ' | .-. | | | ,--. | .-. \\ | .--' ,--.\n| |\\ \\ | '-' | | | | | | '--' / | | | |\n\`--' \`--´ \`---´ \`--' \`--' \`------´ \`--' \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${i.E.kolibriVersion}\n\t`,{forceLog:!0})},r=()=>{!0!==o().adviceShown&&(Object.defineProperty(o(),"adviceShown",{get:function(){return!0}}),n.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let d=()=>Math.floor(16777215*Math.random()).toString(16);"test"===s.p&&(d=()=>"nonce")},6492:(t,e,a)=>{a.d(e,{v:()=>s});var i=a(7440);const s=(t,e)=>{(0,i.b)(t,"_disabled",e,{hooks:{afterPatch:t=>{!0===t&&(0,i.c)()}}})}},6855:(t,e,a)=>{function i(t){t.stopImmediatePropagation(),t.stopPropagation()}function s(t,e,a){e&&function(t,e,a){const i=t.dispatchEvent(function(t,e){return new CustomEvent(`kol-${t}`,{bubbles:!0,cancelable:!0,composed:!0,detail:e})}(e,a))}(e,t,a)}function n(t){t.preventDefault(),i(t)}a.d(e,{p:()=>n,s:()=>i,t:()=>s})},9696:(t,e,a)=>{a.d(e,{v:()=>s});var i=a(7440);const s=(t,e,a={})=>{(0,i.b)(t,"_hideLabel",e,a)}},7615:(t,e,a)=>{a.d(e,{v:()=>s});var i=a(7440);const s=(t,e,a={})=>{(0,i.i)(t,"_href",e,a)}},6588:(t,e,a)=>{a.d(e,{t:()=>n});var i=a(8457),s=a(4997);let n=(t,e)=>{var a;return(null!==(a=(0,i.g)())&&void 0!==a?a:(0,i.i)("de")).translate(t,e)};"test"===s.p&&(n=t=>t)},5685:(t,e,a)=>{a.d(e,{i:()=>o,v:()=>l});var i=a(7440),s=a(3260);const n=(t,e,a)=>{(0,s.b)(a)?t[e]=a:(0,s.i)(a,1)&&(t[e]={icon:a})},o=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,s.a)(t.style))&&(void 0===t.label||(0,s.i)(t.label))&&(0,s.i)(t.icon,1),l=(t,e,a={})=>{(0,i.o)(e,(()=>{var l;try{e=(0,i.p)(e)}catch(t){}(0,i.w)(t,"_icons",(t=>{const e="object"==typeof t&&null!==t&&0===Object.keys(t).length;return null===t||e||(0,s.i)(t,1)||"object"==typeof t&&null!==t&&((0,s.i)(t.left,1)||o(t.left)||(0,s.i)(t.right,1)||o(t.right)||(0,s.i)(t.top,1)||o(t.top)||(0,s.i)(t.bottom,1)||o(t.bottom))}),new Set(["KoliBriIcon"]),e,Object.assign(Object.assign({},a),{defaultValue:{},hooks:{afterPatch:null===(l=a.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(t,e,i,o)=>{var l,r;"function"==typeof(null===(l=a.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(r=a.hooks)||void 0===r||r.beforePatch(t,e,i,o)),(t=>{var e,a,i;if(null===(e=t.nextState)||void 0===e?void 0:e.has("_icons")){const e=null===(a=t.nextState)||void 0===a?void 0:a.get("_icons");null===(i=t.nextState)||void 0===i||i.set("_icons",(t=>{let e={};return(0,s.i)(t,1)?e={left:{icon:t}}:"object"==typeof t&&null!==t&&(n(e,"top",t.top),n(e,"right",t.right),n(e,"bottom",t.bottom),n(e,"left",t.left)),e})(e))}})(i)}}}))}))}},6775:(t,e,a)=>{a.r(e),a.d(e,{kol_link_wc:()=>w});var i=a(777),s=a(8037),n=a(6855),o=a(2452),l=a(8579),r=a(6588),d=a(7440),h=a(7615),c=a(4997),b=a(6227),v=a(3646),u=a(6492),_=a(9696),f=a(5685),p=a(5815),g=a(6353),y=a(1166);const k=["date","location","page","step","time","true","false"],w=class{constructor(t){(0,i.r)(this,t),this.internalDescriptionById=(0,o.n)(),this.catchRef=t=>{this.anchorRef=t},this.onClick=t=>{var e,a;!0===this.state._disabled?(0,n.p)(t):"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)&&(t.preventDefault(),t.stopPropagation(),(0,d.q)(t,this.anchorRef),null===(a=this.state._on)||void 0===a||a.onClick(t,this.state._href))},this.getRenderValues=()=>{const t="string"==typeof this.state._target&&"_self"!==this.state._target,e={href:"string"==typeof this.state._href&&this.state._href.length>0?this.state._href:"javascript:void(0);",target:"string"==typeof this.state._target&&this.state._target.length>0?this.state._target:void 0,rel:t?"noopener":void 0,download:"string"==typeof this.state._download?this.state._download:void 0};return!0!==this.state._hideLabel||this.state._label||(0,d.j)("[KolLink] An aria-label must be set when _hide-label is set."),{isExternal:t,tagAttrs:e}},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaOwns=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._target=void 0,this._tooltipAlign="right",this.state={_ariaCurrentValue:"page",_href:"",_icons:{}}}kolFocus(){return t=this,e=function*(){var t;null===(t=this.anchorRef)||void 0===t||t.focus()},new Promise(((a,i)=>{var s=t=>{try{o(e.next(t))}catch(t){i(t)}},n=t=>{try{o(e.throw(t))}catch(t){i(t)}},o=t=>t.done?a(t.value):Promise.resolve(t.value).then(s,n);o((e=e.apply(t,null)).next())}));var t,e}render(){var t,e;const{isExternal:a,tagAttrs:s}=this.getRenderValues(),n=(0,c.s)(this.state._label),o=Boolean(null===(e=null===(t=this.state._ariaDescription)||void 0===t?void 0:t.trim())||void 0===e?void 0:e.length);return(0,i.h)(i.H,{key:"ca779101a7b0a1fc00ba4c487f485bf64c021e2a",class:"kol-link-wc"},(0,i.h)("a",Object.assign({key:"26fbff98d2ce402df318eb6aa8d3b1c5faadb96d",ref:this.catchRef},s,{accessKey:this.state._accessKey,"aria-current":this.state._ariaCurrent,"aria-describedby":o?this.internalDescriptionById:void 0,"aria-disabled":this.state._disabled?"true":void 0,"aria-expanded":"boolean"==typeof this.state._ariaExpanded?String(this.state._ariaExpanded):void 0,"aria-owns":this.state._ariaOwns,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?`${this.state._label}${a?` (${(0,r.t)("kol-open-link-in-tab")})`:""}`:void 0,class:{disabled:!0===this.state._disabled,"external-link":a,"hide-label":!0===this.state._hideLabel}},this.state._on,{onClick:this.onClick,onKeyPress:this.onClick,role:this.state._role,tabIndex:this.state._disabled?-1:this.state._tabIndex}),(0,i.h)(l.f,{key:"ae5fd2b9494d8af7e734ff604bb6d0bdbe9d2918",_accessKey:this.state._accessKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:n?"":this.state._label||this.state._href},(0,i.h)("slot",{key:"e663545748652867f7bda05b95dc780624afd694",name:"expert",slot:"expert"})),a&&(0,i.h)(l.g,{key:"9272168a80f7d7ea1695edbd148d77c712e3af6c",class:"external-link-icon",_label:this.state._hideLabel?"":(0,r.t)("kol-open-link-in-tab"),_icons:"codicon codicon-link-external","aria-hidden":this.state._hideLabel})),(0,i.h)(l.a,{key:"9cd2d8d555edd92377a24c433b76d0de5dcdeb6f","aria-hidden":"true",hidden:n||!this.state._hideLabel,_accessKey:this.state._accessKey,_align:this.state._tooltipAlign,_label:this.state._label||this.state._href}),o&&(0,i.h)("span",{key:"58b50fd2c3e3c3bc4956bcbdc248c0237b3cddcf",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}validateAccessKey(t){(0,b.v)(this,t)}validateAriaCurrentValue(t){((t,e)=>{(0,d.w)(t,"_ariaCurrentValue",(t=>"string"==typeof t&&k.includes(t)),new Set([`AriaCurrentValue {${k.join(", ")}`]),e,{defaultValue:"page"})})(this,t)}validateAriaDescription(t){(0,v.v)(this,t)}validateAriaExpanded(t){(0,v.a)(this,t)}validateAriaOwns(t){((t,e)=>{(0,d.i)(t,"_ariaOwns",e,{defaultValue:void 0})})(this,t)}validateDisabled(t){(0,u.v)(this,t)}validateDownload(t){((t,e)=>{(0,d.i)(t,"_download",e)})(this,t)}validateHideLabel(t){(0,_.v)(this,t)}validateHref(t){(0,h.v)(this,t,{required:!0})}validateIcons(t){(0,f.v)(this,t)}validateLabel(t){(0,p.a)(this,t)}validateOn(t){((t,e)=>{"object"==typeof e&&"function"==typeof(null==e?void 0:e.onClick)&&(t.state=Object.assign(Object.assign({},t.state),{_on:e}))})(this,t)}validateRole(t){(0,v.b)(this,t)}validateTabIndex(t){(0,g.v)(this,t)}validateTarget(t){((t,e)=>{(0,d.i)(t,"_target",e)})(this,t)}validateTooltipAlign(t){(0,y.v)(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaCurrentValue(this._ariaCurrentValue),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaOwns(this._ariaOwns),this.validateDisabled(this._disabled),this.validateDownload(this._download),this.validateHideLabel(this._hideLabel),this.validateHref(this._href),this.validateIcons(this._icons),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateTabIndex(this._tabIndex),this.validateTarget(this._target),this.validateTooltipAlign(this._tooltipAlign),this.unsubscribeOnLocationChange=(0,s.o)((t=>{this.state._ariaCurrent=t===this.state._href?this.state._ariaCurrentValue:void 0}))}disconnectedCallback(){this.unsubscribeOnLocationChange&&this.unsubscribeOnLocationChange()}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaCurrentValue:["validateAriaCurrentValue"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaOwns:["validateAriaOwns"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icons:["validateIcons"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_tooltipAlign:["validateTooltipAlign"]}}}},5815:(t,e,a)=>{a.d(e,{a:()=>c,b:()=>l,c:()=>r,h:()=>s,v:()=>h});var i=a(7440);const s=[0,1,2,3,4,5,6],n=/[a-zA-Z0-9äöüÄÖÜß]/g,o=/^\d+$/;function l(t,e=1){return function(t){var e;return"string"==typeof t&&(null===(e=t.match(n))||void 0===e?void 0:e.length)||0}(t)>=e}function r(t){return o.test(t)}const d=new Set(["string"]),h=(t,e,a={})=>{(0,i.w)(t,"_label",(t=>"string"==typeof t),d,e,function(t){var e;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(e,a,s,n)=>{var o,d;"function"==typeof(null===(o=t.hooks)||void 0===o?void 0:o.afterPatch)&&(null===(d=t.hooks)||void 0===d||d.afterPatch(e,a,s,n)),"string"==typeof e&&!1===l(e,3)&&!1===r(e)&&(0,i.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=t.hooks)||void 0===e?void 0:e.beforePatch}})}(a))},c=h},4997:(t,e,a)=>{a.d(e,{h:()=>s,p:()=>i,s:()=>n});let i="development";try{i="production"}catch(t){i="production"}const s=(t,e,a)=>{if(t&&e&&"string"==typeof a){const i=t.querySelector(`[slot="${a}"]`);i&&e.appendChild(i)}},n=t=>""===t},6353:(t,e,a)=>{a.d(e,{v:()=>n});var i=a(7440);const s={hooks:{afterPatch:t=>{-1!==t&&0!==t&&(0,i.a)("Don't Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html")}}},n=(t,e)=>{(0,i.k)(t,"_tabIndex",e,s)}},1166:(t,e,a)=>{a.d(e,{v:()=>s});var i=a(882);const s=(t,e)=>{(0,i.v)(t,"_tooltipAlign",e)}}}]);
|
package/dist/7274.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see 7274.js.LICENSE.txt */
|
|
2
|
-
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[7274],{7274:(n,e,t)=>{t.r(e),t.d(e,{kol_quote:()=>h});var i=t(
|
|
2
|
+
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[7274],{7274:(n,e,t)=>{t.r(e),t.d(e,{kol_quote:()=>h});var i=t(777),a=t(8579),o=t(5815),s=t(7440),l=t(4997);const r=["block","inline"],h=class{constructor(n){(0,i.r)(this,n),this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(n){(0,o.v)(this,n)}validateHref(n){(0,s.i)(this,"_href",n,{required:!0})}validateQuote(n){(0,s.i)(this,"_quote",n,{required:!0})}validateVariant(n){(0,s.w)(this,"_variant",(n=>"string"==typeof n&&r.includes(n)),new Set(r),n)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const n=(0,l.s)(this.state._quote);return(0,i.h)(i.H,{key:"08232b44e1ee7d5f3acfc4fcd846fa85a9731b0f",class:"kol-quote"},(0,i.h)("figure",{key:"23b315c6c5b6ca342fa0c88b08c8d335ffb032d6",class:{[this.state._variant]:!0}},"block"===this.state._variant?(0,i.h)("blockquote",{cite:this.state._href},this.state._quote,(0,i.h)("span",{"aria-hidden":n?void 0:"true",hidden:!n},(0,i.h)("slot",{name:"expert"}))):(0,i.h)("q",{cite:this.state._href},this.state._quote,(0,i.h)("span",{"aria-hidden":n?void 0:"true",hidden:!n},(0,i.h)("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&(0,i.h)("figcaption",{key:"5c5b876fb1ec7230f478e3283e056ae72dfba220"},(0,i.h)("cite",{key:"b264ba94846f2b895d6d400b7d4f642445111cbf"},(0,i.h)(a.h,{key:"b32b9d1716549f5a3b3d9b96ac74e534eb03cf60",_href:this.state._href,_label:this.state._label,_target:"_blank"})))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};h.style={default:"@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n cite,\n figure,\n q + figcaption {\n display: inline;\n margin: 0;\n padding: 0;\n }\n blockquote:before {\n content: open-quote;\n }\n blockquote::after {\n content: close-quote;\n }\n cite:before {\n content: \"—\";\n }\n .block cite:before {\n padding-right: 0.5em;\n }\n .inline cite:before {\n padding: 0.5em;\n }\n}"}},5815:(n,e,t)=>{t.d(e,{a:()=>c,b:()=>l,c:()=>r,h:()=>a,v:()=>d});var i=t(7440);const a=[0,1,2,3,4,5,6],o=/[a-zA-Z0-9äöüÄÖÜß]/g,s=/^\d+$/;function l(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(o))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return s.test(n)}const h=new Set(["string"]),d=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),h,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,a,o)=>{var s,h;"function"==typeof(null===(s=n.hooks)||void 0===s?void 0:s.afterPatch)&&(null===(h=n.hooks)||void 0===h||h.afterPatch(e,t,a,o)),"string"==typeof e&&!1===l(e,3)&&!1===r(e)&&(0,i.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},c=d},4997:(n,e,t)=>{t.d(e,{h:()=>a,p:()=>i,s:()=>o});let i="development";try{i="production"}catch(n){i="production"}const a=(n,e,t)=>{if(n&&e&&"string"==typeof t){const i=n.querySelector(`[slot="${t}"]`);i&&e.appendChild(i)}},o=n=>""===n}}]);
|
package/dist/{6812.js → 7440.js}
RENAMED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/*! For license information please see
|
|
2
|
-
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6812],{6812:(e,t,o)=>{o.d(t,{A:()=>ne,B:()=>ce,C:()=>ue,D:()=>X,K:()=>de,a:()=>l,b:()=>K,c:()=>b,d:()=>A,e:()=>m,f:()=>h,g:()=>W,h:()=>v,i:()=>F,j:()=>u,k:()=>U,l:()=>d,m:()=>Q,n:()=>s,o:()=>R,p:()=>ee,q:()=>I,r:()=>H,s:()=>D,t:()=>J,u:()=>p,v:()=>re,w:()=>z,x:()=>te,y:()=>oe,z:()=>se});var r=o(9297),n=o(6448);const a=new Set,l=(e,t)=>{(!1===a.has(e)||(null==t?void 0:t.force))&&(a.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"✋ a11y",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #09f"}))},i=new Set,s=(e,t)=>{(!1===i.has(e)||(null==t?void 0:t.force))&&(i.add(e),n.L.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"🔥 deprecated",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f00"}))},c=new Set,u=(e,t)=>{(!1===c.has(e)||(null==t?void 0:t.force))&&(c.add(e),n.L.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===c.has(e)||(null==t?void 0:t.force))&&(c.add(e),n.L.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"⚠️ dev",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f09"}))},f=new Set,h=(e,t=!1,o)=>{(!1===f.has(e)||(null==o?void 0:o.force))&&(f.add(e),e+=!0===t?" ✅":"",n.L.debug([e].concat((null==o?void 0:o.details)||[]),{classifier:"🌟 feature",forceLog:!!(null==o?void 0:o.force),overwriteStyle:"; background-color: #309"}))};u("We appreciate any feedback, comments, screenshots, or demo links of an application based on KoliBri (kolibri@itzbund.de). Thank you!");const g=new Set,p=(e,t)=>{(!1===g.has(e)||(null==t?void 0:t.force))&&(g.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"📑 ui/ux",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #060;"}))},b=()=>{l('"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')},m=e=>{"string"==typeof e&&""!==e||l("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")},v=(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 y=.2126,w=.7152,S=.0722,x=1/12.92;function k(e){return Math.pow((e+.055)/1.055,2.4)}function N(e){var t=e[0]/255,o=e[1]/255,r=e[2]/255,n=t<=.03928?t*x:k(t),a=o<=.03928?o*x:k(o),l=r<=.03928?r*x:k(r);return n*y+a*w+l*S}function L(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 A(e,t){return function(e,t){return function(e,t){return(Math.max(e,t)+.05)/(Math.min(e,t)+.05)}(N(e),N(t))}(L(e),L(t))}var M={exports:{}};function O(e){var t=T(e);return 3==t.length?t.concat(255):(t[3]=Math.round(t[3]),t)}function T(e){return"string"==typeof e?("red"==(t=e=e.toLowerCase())?[255,0,0]:"green"==t?[0,255,0]:"blue"==t?[0,0,255]:"black"==t?[0,0,0]:"white"==t?[255,255,255]:"cyan"==t?[0,255,255]:"gray"==t||"grey"==t?[128,128,128]:"magenta"==t||"pink"==t?[255,0,255]:"yellow"==t?[255,255,0]:void 0)||function(e){var t=e.replace(/^#/,""),o=t.length;if(3==o||4==o){var r=E(t[0]),n=E(t[1]),a=E(t[2]),l=3==o?255:E(t[3]);if(isNaN(r)||isNaN(n)||isNaN(a)||isNaN(l))return;return[r,n,a,l]}}(e)||function(e){var t=e.replace(/^#/,""),o=t.length;if(6==o||8==o){var r=E(t.slice(0,2)),n=E(t.slice(2,4)),a=E(t.slice(4,6)),l=6==o?255:E(t.slice(6,8));if(isNaN(r)||isNaN(n)||isNaN(a)||isNaN(l))return;return[r,n,a,l]}}(e)||function(e){if("rgb("==e.substr(0,4)){var t=(e=e.match(/^rgb\(([^)]+)\)/)[1]).split(/ *, */).map(Number),o=_(t[0],!0),r=_(t[1],!0),n=_(t[2],!0);if(-1!=o&&-1!=r&&-1!=n)return[o,r,n,255]}}(e)||function(e){if("rgba("==e.substr(0,5)){var t=(e=e.match(/^rgba\(([^)]+)\)/)[1]).split(/ *, */).map(Number),o=_(t[0],!0),r=_(t[1],!0),n=_(t[2],!0),a=_(255*t[3]);if(-1!=o&&-1!=r&&-1!=n&&-1!=a)return[o,r,n,a]}}(e)||[0,0,0,255]:function(e){if("[object Object]"===Object.prototype.toString.call(e)&&Object.getPrototypeOf(e)===Object.getPrototypeOf({})){var t=_(null!=e.r?e.r:null!=e.red?e.red:0,!0),o=_(null!=e.g?e.g:null!=e.green?e.green:0,!0),r=_(null!=e.b?e.b:null!=e.blue?e.blue:0,!0),n=_(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]}}(e)||function(e){if(Array.isArray(e)&&(3==e.length||4==e.length)){var t=_(e[0],!0),o=_(e[1],!0),r=_(e[2],!0),n=_(null!=e[3]?e[3]:255,!0);if(-1!=t&&-1!=o&&-1!=r&&-1!=n)return[t,o,r,n]}}(e)||function(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]}(e)||[0,0,0,255];var t}function C(e){var t=e.toString(16);return 1==t.length?"0"+t:t}function E(e){return 1==e.length?parseInt(e+e,16):parseInt(e,16)}function _(e,t){return"number"!=typeof e||!0===t&&Math.floor(e)!==e?-1:e>=0&&e<=255?e:-1}M.exports=O,M.exports.arr=O,M.exports.obj=function(e){var t=T(e);return{r:t[0],g:t[1],b:t[2],a:3==t.length?255:Math.round(t[3])}},M.exports.css=function(e){var t=T(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)+")"},M.exports.hex=function(e){3==(a=T(e)).length&&a.push(255);var t=255==a[3],o=C(a[0]),r=C(a[1]),n=C(a[2]),a=C(Math.round(a[3])),l=function(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)}(o,r,n,a);return t?l?"#"+o.charAt(0)+r.charAt(0)+n.charAt(0):"#"+o+r+n:l?"#"+o.charAt(0)+r.charAt(0)+n.charAt(0)+a.charAt(0):"#"+o+r+n+a},M.exports.num=function(e){var t=T(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};const H=M.exports,j=(e,t)=>{t.forEach((t=>{!1===e.has(t)&&e.add(t)}))},q=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){const o=new Set;j(o,t.querySelectorAll(e));const r=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<r.length;t++){const n=r[t].shadowRoot;j(o,q(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.")},$=(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=$(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.")},P=/\[object Object\]/,R=(e,t)=>{"string"==typeof e&&P.test(e)||t()},J=(e,t)=>{"string"==typeof e&&""===e||t()},I=(e,t)=>{(0,n.a)()&&(n.L.debug([e,t]),n.L.debug("↑ We propagate the (submit) event to this target.")),Object.defineProperty(e,"target",{value:t,writable:!1})},D=(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==0&&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),(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})(e)},B=(e,t,o,r)=>{u(`[${e.constructor.name}] The property value: (${o}) for '${t}' is not valid. Allowed values are: ${Array.from(r).join(", ")}`)};function z(e,t,o,r,n,a={}){o(n)?D(e,t,n,a.hooks):void 0===n&&!0!==a.required&&o(a.defaultValue)?D(e,t,a.defaultValue,a.hooks):(a.required||r.add(null),B(e,t,n,r))}const K=(e,t,o,r)=>{z(e,t,(e=>"boolean"==typeof e),new Set(["Boolean {true, false}"]),o,r)},F=(e,t,o,r={})=>{const n="number"==typeof r.minLength?null==r?void 0:r.minLength:0;z(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)},U=(e,t,o,r)=>{z(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)},W=(e,t,o,r,a=e=>e==e,l={})=>{J(r,(()=>{R(r,(()=>{void 0===r&&(r=[]);try{try{r=ee(r)}catch(e){}if(Array.isArray(r)){const i=r.find((e=>!o(e)));void 0===i&&a(r)?D(e,t,r,l.hooks):R(i,(()=>{throw n.L.debug(i),new Error("↑ The schema for the property (_options) is not valid. The value will not be changed.")}))}else R(r,(()=>{throw n.L.debug(r),new Error("↑ The schema for the property (_options) is not valid. The value will not be changed.")}))}catch(e){n.L.debug(e)}}))}))},V=/^(true|false)$/,Y=/^-?(0|[1-9]\d*)$/,G=/^-?(0.|[1-9]\d*.)\d*[1-9]$/,Q=e=>{const t=typeof e,o=`${e}`;if("string"==typeof e)if(V.test(e))e="true"===e;else if(Y.test(e))e=parseInt(e);else if(G.test(e))e=parseFloat(e);else if(Z.test(e))try{e=ee(e)}catch(e){}return t!==typeof e&&u(`You have used a stringified property value (${o} to ${JSON.stringify(e)}) which type switched from ${t} to ${typeof e}!`),e},X=e=>{try{return JSON.stringify(e).replace(/"/g,"'")}catch(t){throw n.L.warn(["stringifyJson",e]),n.L.error("↑ The JSON could not be converted to a string. A stringifiable JSON is expected."),new Error}},Z=/^[{[]/,ee=e=>{if("string"==typeof e)try{return JSON.parse(e)}catch(t){if(Z.test(e))try{return JSON.parse(e.replace(/'/g,'"'))}catch(t){n.L.warn(["parseJson",e]),n.L.error("↑ The JSON string could not be parsed. Make sure that single quotes in the text are escaped (‘).")}}throw new Error},te=e=>"boolean"==typeof e?!0===e?"true":"false":void 0,oe=e=>"string"==typeof e?e:te(e),re=(e,t)=>$(e,t||(0,n.g)()),ne=(e,t)=>q(e,t||(0,n.g)());let ae=null;const le=()=>(ae=ae||{backgroundColor:"#00000000",color:"#00000000",domNode:(0,n.g)().body,level:"Fail",score:1},ae),ie=/(\d+, ){3}0\)/,se=(e,t=le())=>{const o=getComputedStyle(e),r=ie.test(o.backgroundColor)?t.backgroundColor:H.hex(o.backgroundColor),a=ie.test(o.color)?t.color:H.hex(o.color),l=A(r,a),i={backgroundColor:r,color:a,domNode:e,level:(s=l,s>=7?"AAA":s>=4.5?"AA":s>=3?"AA Large":"Fail"),score:l};var s;return l<4.5&&n.L.error(["Color-Contrast-Error",{backgroundColor:i.backgroundColor,color:i.color,level:i.level,score:i.score},i.domNode]),i},ce=(e,t=le())=>{t.domNode instanceof HTMLElement&&(t=se(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=ce(e,t)).domNode);r++);return t}return se(o,t)};class ue{static queryHtmlElementColors(e,t,o=!1,r=!0){let a=null;if(!0===o||!1===ue.executionLock)if(!1===o&&(ue.cache.clear(),ue.cache.set(t.domNode,t),ue.executionLock=!0,!0===r&&n.L.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=ue.cache.get(l[o]);void 0===r&&(r=se(l[o],t)),ue.cache.set(l[o],r);const n=ue.queryHtmlElementColors(e,r,!0,!1);if(null!==n){a=n;break}}}else n.L.debug("[KoliBriUtils] Call aborted because a color contrast analysis is currently being executed.");return!1===o&&(!0===r&&n.L.debug(`[KoliBriUtils] Color contrast analysis finished (${ue.cache.size} DOM elements are analysed).`),ue.executionLock=!1,ue.cache.clear()),a}}ue.executionLock=!1,ue.cache=new Map;class de{}de.getCssStyle=r.a,de.patchTheme=r.p,de.patchThemeTag=r.b,de.querySelector=re,de.querySelectorAll=ne,de.stringifyJson=X}}]);
|
|
1
|
+
/*! For license information please see 7440.js.LICENSE.txt */
|
|
2
|
+
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[7440],{7440:(e,t,o)=>{o.d(t,{A:()=>ne,B:()=>ce,C:()=>ue,D:()=>X,K:()=>de,a:()=>l,b:()=>K,c:()=>b,d:()=>A,e:()=>m,f:()=>h,g:()=>W,h:()=>v,i:()=>F,j:()=>u,k:()=>U,l:()=>d,m:()=>Q,n:()=>s,o:()=>R,p:()=>ee,q:()=>I,r:()=>H,s:()=>D,t:()=>J,u:()=>p,v:()=>re,w:()=>B,x:()=>te,y:()=>oe,z:()=>se});var r=o(5644),n=o(6448);const a=new Set,l=(e,t)=>{(!1===a.has(e)||(null==t?void 0:t.force))&&(a.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"✋ a11y",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #09f"}))},i=new Set,s=(e,t)=>{(!1===i.has(e)||(null==t?void 0:t.force))&&(i.add(e),n.L.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"🔥 deprecated",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f00"}))},c=new Set,u=(e,t)=>{(!1===c.has(e)||(null==t?void 0:t.force))&&(c.add(e),n.L.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===c.has(e)||(null==t?void 0:t.force))&&(c.add(e),n.L.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"⚠️ dev",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f09"}))},f=new Set,h=(e,t=!1,o)=>{(!1===f.has(e)||(null==o?void 0:o.force))&&(f.add(e),e+=!0===t?" ✅":"",n.L.debug([e].concat((null==o?void 0:o.details)||[]),{classifier:"🌟 feature",forceLog:!!(null==o?void 0:o.force),overwriteStyle:"; background-color: #309"}))};u("We appreciate any feedback, comments, screenshots, or demo links of an application based on KoliBri (kolibri@itzbund.de). Thank you!");const g=new Set,p=(e,t)=>{(!1===g.has(e)||(null==t?void 0:t.force))&&(g.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"📑 ui/ux",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #060;"}))},b=()=>{l('"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')},m=e=>{"string"==typeof e&&""!==e||l("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")},v=(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 y=.2126,w=.7152,S=.0722,x=1/12.92;function k(e){return Math.pow((e+.055)/1.055,2.4)}function N(e){var t=e[0]/255,o=e[1]/255,r=e[2]/255,n=t<=.03928?t*x:k(t),a=o<=.03928?o*x:k(o),l=r<=.03928?r*x:k(r);return n*y+a*w+l*S}function L(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 A(e,t){return function(e,t){return function(e,t){return(Math.max(e,t)+.05)/(Math.min(e,t)+.05)}(N(e),N(t))}(L(e),L(t))}var M={exports:{}};function O(e){var t=T(e);return 3==t.length?t.concat(255):(t[3]=Math.round(t[3]),t)}function T(e){return"string"==typeof e?("red"==(t=e=e.toLowerCase())?[255,0,0]:"green"==t?[0,255,0]:"blue"==t?[0,0,255]:"black"==t?[0,0,0]:"white"==t?[255,255,255]:"cyan"==t?[0,255,255]:"gray"==t||"grey"==t?[128,128,128]:"magenta"==t||"pink"==t?[255,0,255]:"yellow"==t?[255,255,0]:void 0)||function(e){var t=e.replace(/^#/,""),o=t.length;if(3==o||4==o){var r=E(t[0]),n=E(t[1]),a=E(t[2]),l=3==o?255:E(t[3]);if(isNaN(r)||isNaN(n)||isNaN(a)||isNaN(l))return;return[r,n,a,l]}}(e)||function(e){var t=e.replace(/^#/,""),o=t.length;if(6==o||8==o){var r=E(t.slice(0,2)),n=E(t.slice(2,4)),a=E(t.slice(4,6)),l=6==o?255:E(t.slice(6,8));if(isNaN(r)||isNaN(n)||isNaN(a)||isNaN(l))return;return[r,n,a,l]}}(e)||function(e){if("rgb("==e.substr(0,4)){var t=(e=e.match(/^rgb\(([^)]+)\)/)[1]).split(/ *, */).map(Number),o=_(t[0],!0),r=_(t[1],!0),n=_(t[2],!0);if(-1!=o&&-1!=r&&-1!=n)return[o,r,n,255]}}(e)||function(e){if("rgba("==e.substr(0,5)){var t=(e=e.match(/^rgba\(([^)]+)\)/)[1]).split(/ *, */).map(Number),o=_(t[0],!0),r=_(t[1],!0),n=_(t[2],!0),a=_(255*t[3]);if(-1!=o&&-1!=r&&-1!=n&&-1!=a)return[o,r,n,a]}}(e)||[0,0,0,255]:function(e){if("[object Object]"===Object.prototype.toString.call(e)&&Object.getPrototypeOf(e)===Object.getPrototypeOf({})){var t=_(null!=e.r?e.r:null!=e.red?e.red:0,!0),o=_(null!=e.g?e.g:null!=e.green?e.green:0,!0),r=_(null!=e.b?e.b:null!=e.blue?e.blue:0,!0),n=_(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]}}(e)||function(e){if(Array.isArray(e)&&(3==e.length||4==e.length)){var t=_(e[0],!0),o=_(e[1],!0),r=_(e[2],!0),n=_(null!=e[3]?e[3]:255,!0);if(-1!=t&&-1!=o&&-1!=r&&-1!=n)return[t,o,r,n]}}(e)||function(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]}(e)||[0,0,0,255];var t}function C(e){var t=e.toString(16);return 1==t.length?"0"+t:t}function E(e){return 1==e.length?parseInt(e+e,16):parseInt(e,16)}function _(e,t){return"number"!=typeof e||!0===t&&Math.floor(e)!==e?-1:e>=0&&e<=255?e:-1}M.exports=O,M.exports.arr=O,M.exports.obj=function(e){var t=T(e);return{r:t[0],g:t[1],b:t[2],a:3==t.length?255:Math.round(t[3])}},M.exports.css=function(e){var t=T(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)+")"},M.exports.hex=function(e){3==(a=T(e)).length&&a.push(255);var t=255==a[3],o=C(a[0]),r=C(a[1]),n=C(a[2]),a=C(Math.round(a[3])),l=function(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)}(o,r,n,a);return t?l?"#"+o.charAt(0)+r.charAt(0)+n.charAt(0):"#"+o+r+n:l?"#"+o.charAt(0)+r.charAt(0)+n.charAt(0)+a.charAt(0):"#"+o+r+n+a},M.exports.num=function(e){var t=T(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};const H=M.exports,j=(e,t)=>{t.forEach((t=>{!1===e.has(t)&&e.add(t)}))},q=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){const o=new Set;j(o,t.querySelectorAll(e));const r=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<r.length;t++){const n=r[t].shadowRoot;j(o,q(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.")},$=(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=$(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.")},P=/\[object Object\]/,R=(e,t)=>{"string"==typeof e&&P.test(e)||t()},J=(e,t)=>{"string"==typeof e&&""===e||t()},I=(e,t)=>{(0,n.a)()&&(n.L.debug([e,t]),n.L.debug("↑ We propagate the (submit) event to this target.")),Object.defineProperty(e,"target",{value:t,writable:!1})},D=(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==0&&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),(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})(e)},z=(e,t,o,r)=>{u(`[${e.constructor.name}] The property value: (${o}) for '${t}' is not valid. Allowed values are: ${Array.from(r).join(", ")}`)};function B(e,t,o,r,n,a={}){o(n)?D(e,t,n,a.hooks):void 0===n&&!0!==a.required&&o(a.defaultValue)?D(e,t,a.defaultValue,a.hooks):(a.required||r.add(null),z(e,t,n,r))}const K=(e,t,o,r)=>{B(e,t,(e=>"boolean"==typeof e),new Set(["Boolean {true, false}"]),o,r)},F=(e,t,o,r={})=>{const n="number"==typeof r.minLength?null==r?void 0:r.minLength:0;B(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)},U=(e,t,o,r)=>{B(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)},W=(e,t,o,r,a=e=>e==e,l={})=>{J(r,(()=>{R(r,(()=>{void 0===r&&(r=[]);try{try{r=ee(r)}catch(e){}if(Array.isArray(r)){const i=r.find((e=>!o(e)));void 0===i&&a(r)?D(e,t,r,l.hooks):R(i,(()=>{throw n.L.debug(i),new Error("↑ The schema for the property (_options) is not valid. The value will not be changed.")}))}else R(r,(()=>{throw n.L.debug(r),new Error("↑ The schema for the property (_options) is not valid. The value will not be changed.")}))}catch(e){n.L.debug(e)}}))}))},V=/^(true|false)$/,Y=/^-?(0|[1-9]\d*)$/,G=/^-?(0.|[1-9]\d*.)\d*[1-9]$/,Q=e=>{const t=typeof e,o=`${e}`;if("string"==typeof e)if(V.test(e))e="true"===e;else if(Y.test(e))e=parseInt(e);else if(G.test(e))e=parseFloat(e);else if(Z.test(e))try{e=ee(e)}catch(e){}return t!==typeof e&&u(`You have used a stringified property value (${o} to ${JSON.stringify(e)}) which type switched from ${t} to ${typeof e}!`),e},X=e=>{try{return JSON.stringify(e).replace(/"/g,"'")}catch(t){throw n.L.warn(["stringifyJson",e]),n.L.error("↑ The JSON could not be converted to a string. A stringifiable JSON is expected."),new Error}},Z=/^[{[]/,ee=e=>{if("string"==typeof e)try{return JSON.parse(e)}catch(t){if(Z.test(e))try{return JSON.parse(e.replace(/'/g,'"'))}catch(t){n.L.warn(["parseJson",e]),n.L.error("↑ The JSON string could not be parsed. Make sure that single quotes in the text are escaped (‘).")}}throw new Error},te=e=>"boolean"==typeof e?!0===e?"true":"false":void 0,oe=e=>"string"==typeof e?e:te(e),re=(e,t)=>$(e,t||(0,n.g)()),ne=(e,t)=>q(e,t||(0,n.g)());let ae=null;const le=()=>(ae=ae||{backgroundColor:"#00000000",color:"#00000000",domNode:(0,n.g)().body,level:"Fail",score:1},ae),ie=/(\d+, ){3}0\)/,se=(e,t=le())=>{const o=getComputedStyle(e),r=ie.test(o.backgroundColor)?t.backgroundColor:H.hex(o.backgroundColor),a=ie.test(o.color)?t.color:H.hex(o.color),l=A(r,a),i={backgroundColor:r,color:a,domNode:e,level:(s=l,s>=7?"AAA":s>=4.5?"AA":s>=3?"AA Large":"Fail"),score:l};var s;return l<4.5&&n.L.error(["Color-Contrast-Error",{backgroundColor:i.backgroundColor,color:i.color,level:i.level,score:i.score},i.domNode]),i},ce=(e,t=le())=>{t.domNode instanceof HTMLElement&&(t=se(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=ce(e,t)).domNode);r++);return t}return se(o,t)};class ue{static queryHtmlElementColors(e,t,o=!1,r=!0){let a=null;if(!0===o||!1===ue.executionLock)if(!1===o&&(ue.cache.clear(),ue.cache.set(t.domNode,t),ue.executionLock=!0,!0===r&&n.L.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=ue.cache.get(l[o]);void 0===r&&(r=se(l[o],t)),ue.cache.set(l[o],r);const n=ue.queryHtmlElementColors(e,r,!0,!1);if(null!==n){a=n;break}}}else n.L.debug("[KoliBriUtils] Call aborted because a color contrast analysis is currently being executed.");return!1===o&&(!0===r&&n.L.debug(`[KoliBriUtils] Color contrast analysis finished (${ue.cache.size} DOM elements are analysed).`),ue.executionLock=!1,ue.cache.clear()),a}}ue.executionLock=!1,ue.cache=new Map;class de{}de.getCssStyle=r.p,de.patchTheme=r.x,de.patchThemeTag=r.z,de.querySelector=re,de.querySelectorAll=ne,de.stringifyJson=X}}]);
|