@public-ui/sample-react 3.0.0-alpha.0 → 4.0.0-alpha.0

package/dist/8111.js

@@ -1,2 +1,2 @@
 /*! For license information please see 8111.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8111],{3260:(t,e,n)=>{n.d(e,{S:()=>l,a:()=>a,b:()=>i,i:()=>o});const i=t=>"object"==typeof t&&null!==t,o=(t,e=0)=>"string"==typeof t&&t.length>=e,a=t=>{if("object"!=typeof t||null===t)return o(t,1);for(const e in t)if(!1===o(e,1))return!1;return!0},l=new Event("StateChange")},6179:(t,e,n)=>{n.d(e,{a:()=>s,p:()=>r});var i=n(7883),o=n(4058),a=n(6448);const l=t=>{for((0,a.a)()&&((0,o.j)("↓ Search form element start."),a.L.debug(t));t instanceof HTMLElement&&"FORM"!==t.tagName&&t.tagName!==i.j.toUpperCase();){try{t=t.parentElement instanceof HTMLElement?t.parentElement:t.parentNode instanceof ShadowRoot?t.parentNode.host:null}catch(t){}(0,a.a)()&&(a.L.debug(t),(0,o.j)("↑ Search form element finished."))}return t},s=(t={})=>{var e,n;const a=l(t.form);if(a instanceof HTMLElement){const t=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===a.tagName)(0,o.q)(t,a),a.dispatchEvent(t);else if(a.tagName===i.j.toUpperCase()){(0,o.q)(t,o.K.querySelector("form",a));const i=a;"function"==typeof(null===(e=i._on)||void 0===e?void 0:e.onReset)&&(null===(n=i._on)||void 0===n||n.onReset(t))}}},r=(t={})=>{const e=l(t.form);if(e instanceof HTMLElement){const t=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:e});if("FORM"===e.tagName)(0,a.a)()&&!1===e.noValidate&&(0,o.j)("If you have not focusable or hidden form fields in your form, you should enable noValidate for your form.",{force:!0}),setTimeout((()=>{"function"==typeof e.requestSubmit?e.requestSubmit():((0,o.q)(t,e),e.dispatchEvent(t))}));else if(e.tagName===i.j.toUpperCase()){(0,o.q)(t,o.K.querySelector("form",e));const n=e;setTimeout((()=>{var e,i;"function"==typeof(null===(e=n._on)||void 0===e?void 0:e.onSubmit)&&(null===(i=n._on)||void 0===i||i.onSubmit(t))}))}}}},6814:(t,e,n)=>{n.d(e,{I:()=>s,a:()=>r});var i=n(4630),o=n(4058),a=n(2079);const l=["text","search","url","tel"];class s extends i.I{constructor(t,e,n){super(t,e,n),this.component=t}validateSuggestions(t){(0,a.v)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateSuggestions(this.component._suggestions)}}class r extends s{constructor(t,e,n){super(t,e,n),this.hasError=!1,this.component=t}validateType(t){(0,o.w)(this.component,"_type",(t=>"string"==typeof t&&l.includes(t)),new Set([`String {${l.join(", ")}`]),t)}componentWillLoad(){super.componentWillLoad(),this.validateType(this.component._type),this.validateHasCounter(this.component._hasCounter)}}},4630:(t,e,n)=>{n.d(e,{I:()=>s});var i=n(4058),o=n(324),a=n(2827);const l=["default","visibility-toggle"];class s extends o.I{constructor(t,e,n){super(t,e,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=t}validateAutoComplete(t){(0,i.w)(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateHasCounter(t){(0,a.v)(this.component,t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateVariant(t){((t,e)=>{(0,i.w)(t,"_variant",(t=>"string"==typeof t&&l.includes(t)),new Set(l),e)})(this.component,t)}validateMaxLength(t){(0,i.k)(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePattern(t){(0,i.i)(this.component,"_pattern",t)}validatePlaceholder(t){(0,i.i)(this.component,"_placeholder",t)}validateReadOnly(t){(0,i.b)(this.component,"_readOnly",t)}validateRequired(t){(0,i.b)(this.component,"_required",t)}validateValue(t){(0,i.i)(this.component,"_value",t,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePattern(this.component._pattern),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validateVariant(this.component._variant)}}},324:(t,e,n)=>{n.d(e,{I:()=>r});var i=n(4932),o=n(5670),a=n(4058),l=n(3260);const s=(t,e)=>{const n=t;"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}),e.set("_icons",n))};class r extends i.I{constructor(t,e,n){super(t,e,n),this.component=t}validateIcons(t){(0,a.o)(t,(()=>{try{t=(0,a.p)(t)}catch(t){}(0,a.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,l.i)(t.left,1)||(0,o.i)(t.left)||(0,l.i)(t.right,1)||(0,o.i)(t.right))),new Set(["KoliBriHorizontalIcon"]),t,{hooks:{beforePatch:s},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},2827:(t,e,n)=>{n.d(e,{v:()=>o});var i=n(4058);const o=(t,e,n)=>{(0,i.b)(t,"_hasCounter",e,n)}},5670:(t,e,n)=>{n.d(e,{i:()=>l,v:()=>s});var i=n(4058),o=n(3260);const a=(t,e,n)=>{(0,o.b)(n)?t[e]=n:(0,o.i)(n,1)&&(t[e]={icon:n})},l=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,o.a)(t.style))&&(void 0===t.label||(0,o.i)(t.label))&&(0,o.i)(t.icon,1),s=(t,e,n={})=>{(0,i.o)(e,(()=>{var s;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,o.i)(t,1)||"object"==typeof t&&null!==t&&((0,o.i)(t.left,1)||l(t.left)||(0,o.i)(t.right,1)||l(t.right)||(0,o.i)(t.top,1)||l(t.top)||(0,o.i)(t.bottom,1)||l(t.bottom))}),new Set(["KoliBriIcon"]),e,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(s=n.hooks)||void 0===s?void 0:s.afterPatch,beforePatch:(t,e,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(t,e,i,l)),(t=>{var e,n,i;if(null===(e=t.nextState)||void 0===e?void 0:e.has("_icons")){const e=null===(n=t.nextState)||void 0===n?void 0:n.get("_icons");null===(i=t.nextState)||void 0===i||i.set("_icons",(t=>{let e={};return(0,o.i)(t,1)?e={left:{icon:t}}:"object"==typeof t&&null!==t&&(a(e,"top",t.top),a(e,"right",t.right),a(e,"bottom",t.bottom),a(e,"left",t.left)),e})(e))}})(i)}}}))}))}},8111:(t,e,n)=>{n.r(e),n.d(e,{kol_input_email:()=>m});var i=n(1405),o=n(2385),a=n(6179),l=n(4932),s=n(6814),r=n(4058),d=n(7883),h=n(4851),c=n(1523),u=(t,e,n)=>new Promise(((i,o)=>{var a=t=>{try{s(n.next(t))}catch(t){o(t)}},l=t=>{try{s(n.throw(t))}catch(t){o(t)}},s=t=>t.done?i(t.value):Promise.resolve(t.value).then(a,l);s((n=n.apply(t,e)).next())}));class p extends s.I{constructor(t,e,n){super(t,e,n),this.component=t}validateMultiple(t){((t,e)=>{(0,r.b)(t,"_multiple",e)})(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateMultiple(this.component._multiple)}}const m=class{getValue(){return u(this,null,(function*(){var t;return null===(t=this.inputRef)||void 0===t?void 0:t.value}))}focus(){return u(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return u(this,null,(function*(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}))}render(){const{ariaDescribedBy:t}=(0,l.g)(this.state),e=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,n=(0,c.s)(this.state._label);return(0,i.h)(i.H,{key:"9a3eb762aa7981ef1ddea4ae634a63e1f4e1bf51",class:{"kol-input-email":!0,"has-value":this.state._hasValue}},(0,i.h)(d.i,{key:"f9affb9ef6f1bc26bea7d1addc098adedfda8032",class:{email:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_currentLength:this.state._currentLength,_disabled:this.state._disabled,_msg:this.state._msg,_hideError:this.state._hideError,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_suggestions:this.state._suggestions,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_shortKey:this.state._shortKey,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.inputRef)||void 0===t?void 0:t.focus()},role:"presentation"},(0,i.h)("span",{key:"2aff3ceaf90fadb908f509f93f167409eb028d0d",slot:"label"},n?(0,i.h)("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?(0,i.h)(i.F,null,(0,i.h)(h.I,{badgeText:(0,c.b)(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",(0,i.h)("span",{class:"access-key-hint","aria-hidden":"true"},(0,c.b)(this.state._accessKey,this.state._shortKey))):(0,i.h)("span",null,this.state._label)),(0,i.h)("div",{key:"7610a3851bc86a9ed4b3419dac4171fbecc1e65a",slot:"input"},(0,i.h)("input",Object.assign({key:"0e6cffe190f37113456ad503e28b839ed789fd89",ref:this.catchRef,title:"",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,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,multiple:this.state._multiple,id:this.state._id,list:e?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,spellcheck:"false",type:"email",value:this.state._value},this.controller.onFacade,{onKeyDown:this.onKeyDown,onInput:this.onInput,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})))))}constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.inputRef=t},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||(0,a.p)({form:this.host,ref:this.inputRef})},this.onInput=t=>{(0,r.s)(this,"_currentLength",t.target.value.length),this.controller.onFacade.onInput(t)},this._accessKey=void 0,this._alert=void 0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${(0,o.n)()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new p(this,"email",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateMsg(t){this.controller.validateMsg(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};m.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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\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  .input {\n    background-color: white;\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  .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 calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}"}},2079:(t,e,n)=>{n.d(e,{v:()=>o});var i=n(4058);const o=(t,e)=>{(0,i.g)(t,"_suggestions",(t=>"string"==typeof t||"number"==typeof t),e,void 0,{hooks:{afterPatch:t=>{Array.isArray(t)&&t.length&&(0,i.a)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8111],{3260:(t,e,n)=>{n.d(e,{S:()=>l,a:()=>a,b:()=>i,i:()=>o});const i=t=>"object"==typeof t&&null!==t,o=(t,e=0)=>"string"==typeof t&&t.length>=e,a=t=>{if("object"!=typeof t||null===t)return o(t,1);for(const e in t)if(!1===o(e,1))return!1;return!0},l=new Event("StateChange")},6179:(t,e,n)=>{n.d(e,{a:()=>s,p:()=>r});var i=n(7883),o=n(4058),a=n(6448);const l=t=>{for((0,a.a)()&&((0,o.j)("↓ Search form element start."),a.L.debug(t));t instanceof HTMLElement&&"FORM"!==t.tagName&&t.tagName!==i.j.toUpperCase();){try{t=t.parentElement instanceof HTMLElement?t.parentElement:t.parentNode instanceof ShadowRoot?t.parentNode.host:null}catch(t){}(0,a.a)()&&(a.L.debug(t),(0,o.j)("↑ Search form element finished."))}return t},s=(t={})=>{var e,n;const a=l(t.form);if(a instanceof HTMLElement){const t=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===a.tagName)(0,o.q)(t,a),a.dispatchEvent(t);else if(a.tagName===i.j.toUpperCase()){(0,o.q)(t,o.K.querySelector("form",a));const i=a;"function"==typeof(null===(e=i._on)||void 0===e?void 0:e.onReset)&&(null===(n=i._on)||void 0===n||n.onReset(t))}}},r=(t={})=>{const e=l(t.form);if(e instanceof HTMLElement){const t=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:e});if("FORM"===e.tagName)(0,a.a)()&&!1===e.noValidate&&(0,o.j)("If you have not focusable or hidden form fields in your form, you should enable noValidate for your form.",{force:!0}),setTimeout((()=>{"function"==typeof e.requestSubmit?e.requestSubmit():((0,o.q)(t,e),e.dispatchEvent(t))}));else if(e.tagName===i.j.toUpperCase()){(0,o.q)(t,o.K.querySelector("form",e));const n=e;setTimeout((()=>{var e,i;"function"==typeof(null===(e=n._on)||void 0===e?void 0:e.onSubmit)&&(null===(i=n._on)||void 0===i||i.onSubmit(t))}))}}}},6814:(t,e,n)=>{n.d(e,{I:()=>s,a:()=>r});var i=n(4630),o=n(4058),a=n(2079);const l=["text","search","url","tel"];class s extends i.I{constructor(t,e,n){super(t,e,n),this.component=t}validateSuggestions(t){(0,a.v)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateSuggestions(this.component._suggestions)}}class r extends s{constructor(t,e,n){super(t,e,n),this.hasError=!1,this.component=t}validateType(t){(0,o.w)(this.component,"_type",(t=>"string"==typeof t&&l.includes(t)),new Set([`String {${l.join(", ")}`]),t)}componentWillLoad(){super.componentWillLoad(),this.validateType(this.component._type),this.validateHasCounter(this.component._hasCounter)}}},4630:(t,e,n)=>{n.d(e,{I:()=>s});var i=n(4058),o=n(324),a=n(2827);const l=["default","visibility-toggle"];class s extends o.I{constructor(t,e,n){super(t,e,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=t}validateAutoComplete(t){(0,i.w)(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateHasCounter(t){(0,a.v)(this.component,t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateVariant(t){((t,e)=>{(0,i.w)(t,"_variant",(t=>"string"==typeof t&&l.includes(t)),new Set(l),e)})(this.component,t)}validateMaxLength(t){(0,i.k)(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePattern(t){(0,i.i)(this.component,"_pattern",t)}validatePlaceholder(t){(0,i.i)(this.component,"_placeholder",t)}validateReadOnly(t){(0,i.b)(this.component,"_readOnly",t)}validateRequired(t){(0,i.b)(this.component,"_required",t)}validateValue(t){(0,i.i)(this.component,"_value",t,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePattern(this.component._pattern),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validateVariant(this.component._variant)}}},324:(t,e,n)=>{n.d(e,{I:()=>r});var i=n(4932),o=n(5670),a=n(4058),l=n(3260);const s=(t,e)=>{const n=t;"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}),e.set("_icons",n))};class r extends i.I{constructor(t,e,n){super(t,e,n),this.component=t}validateIcons(t){(0,a.o)(t,(()=>{try{t=(0,a.p)(t)}catch(t){}(0,a.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,l.i)(t.left,1)||(0,o.i)(t.left)||(0,l.i)(t.right,1)||(0,o.i)(t.right))),new Set(["KoliBriHorizontalIcon"]),t,{hooks:{beforePatch:s},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},2827:(t,e,n)=>{n.d(e,{v:()=>o});var i=n(4058);const o=(t,e,n)=>{(0,i.b)(t,"_hasCounter",e,n)}},5670:(t,e,n)=>{n.d(e,{i:()=>l,v:()=>s});var i=n(4058),o=n(3260);const a=(t,e,n)=>{(0,o.b)(n)?t[e]=n:(0,o.i)(n,1)&&(t[e]={icon:n})},l=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,o.a)(t.style))&&(void 0===t.label||(0,o.i)(t.label))&&(0,o.i)(t.icon,1),s=(t,e,n={})=>{(0,i.o)(e,(()=>{var s;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,o.i)(t,1)||"object"==typeof t&&null!==t&&((0,o.i)(t.left,1)||l(t.left)||(0,o.i)(t.right,1)||l(t.right)||(0,o.i)(t.top,1)||l(t.top)||(0,o.i)(t.bottom,1)||l(t.bottom))}),new Set(["KoliBriIcon"]),e,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(s=n.hooks)||void 0===s?void 0:s.afterPatch,beforePatch:(t,e,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(t,e,i,l)),(t=>{var e,n,i;if(null===(e=t.nextState)||void 0===e?void 0:e.has("_icons")){const e=null===(n=t.nextState)||void 0===n?void 0:n.get("_icons");null===(i=t.nextState)||void 0===i||i.set("_icons",(t=>{let e={};return(0,o.i)(t,1)?e={left:{icon:t}}:"object"==typeof t&&null!==t&&(a(e,"top",t.top),a(e,"right",t.right),a(e,"bottom",t.bottom),a(e,"left",t.left)),e})(e))}})(i)}}}))}))}},8111:(t,e,n)=>{n.r(e),n.d(e,{kol_input_email:()=>m});var i=n(1114),o=n(6762),a=n(6179),l=n(4932),s=n(6814),r=n(4058),d=n(7883),h=n(9196),c=n(1523),u=(t,e,n)=>new Promise(((i,o)=>{var a=t=>{try{s(n.next(t))}catch(t){o(t)}},l=t=>{try{s(n.throw(t))}catch(t){o(t)}},s=t=>t.done?i(t.value):Promise.resolve(t.value).then(a,l);s((n=n.apply(t,e)).next())}));class p extends s.I{constructor(t,e,n){super(t,e,n),this.component=t}validateMultiple(t){((t,e)=>{(0,r.b)(t,"_multiple",e)})(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateMultiple(this.component._multiple)}}const m=class{getValue(){return u(this,null,(function*(){var t;return null===(t=this.inputRef)||void 0===t?void 0:t.value}))}focus(){return u(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return u(this,null,(function*(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}))}render(){const{ariaDescribedBy:t}=(0,l.g)(this.state),e=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,n=(0,c.s)(this.state._label);return(0,i.h)(i.H,{key:"9a3eb762aa7981ef1ddea4ae634a63e1f4e1bf51",class:{"kol-input-email":!0,"has-value":this.state._hasValue}},(0,i.h)(d.i,{key:"f9affb9ef6f1bc26bea7d1addc098adedfda8032",class:{email:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_currentLength:this.state._currentLength,_disabled:this.state._disabled,_msg:this.state._msg,_hideError:this.state._hideError,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_suggestions:this.state._suggestions,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_shortKey:this.state._shortKey,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.inputRef)||void 0===t?void 0:t.focus()},role:"presentation"},(0,i.h)("span",{key:"2aff3ceaf90fadb908f509f93f167409eb028d0d",slot:"label"},n?(0,i.h)("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?(0,i.h)(i.F,null,(0,i.h)(h.I,{badgeText:(0,c.b)(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",(0,i.h)("span",{class:"access-key-hint","aria-hidden":"true"},(0,c.b)(this.state._accessKey,this.state._shortKey))):(0,i.h)("span",null,this.state._label)),(0,i.h)("div",{key:"7610a3851bc86a9ed4b3419dac4171fbecc1e65a",slot:"input"},(0,i.h)("input",Object.assign({key:"0e6cffe190f37113456ad503e28b839ed789fd89",ref:this.catchRef,title:"",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,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,multiple:this.state._multiple,id:this.state._id,list:e?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,spellcheck:"false",type:"email",value:this.state._value},this.controller.onFacade,{onKeyDown:this.onKeyDown,onInput:this.onInput,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})))))}constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.inputRef=t},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||(0,a.p)({form:this.host,ref:this.inputRef})},this.onInput=t=>{(0,r.s)(this,"_currentLength",t.target.value.length),this.controller.onFacade.onInput(t)},this._accessKey=void 0,this._alert=void 0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${(0,o.n)()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new p(this,"email",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateMsg(t){this.controller.validateMsg(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};m.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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\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  .input {\n    background-color: white;\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  .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 calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}"}},2079:(t,e,n)=>{n.d(e,{v:()=>o});var i=n(4058);const o=(t,e)=>{(0,i.g)(t,"_suggestions",(t=>"string"==typeof t||"number"==typeof t),e,void 0,{hooks:{afterPatch:t=>{Array.isArray(t)&&t.length&&(0,i.a)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);

package/dist/8146.js

@@ -1,2 +1,2 @@
 /*! For license information please see 8146.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8146],{8075:(e,n,t)=>{t.d(n,{c:()=>s,h:()=>m,v:()=>f});var r=t(6448),a=t(4058),o={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]},l={red:0,orange:60,yellow:120,green:180,blue:240,purple:300},i=function(e){var n,t,r=[],a=1;if("string"==typeof e)if(e=e.toLowerCase(),o[e])r=o[e].slice(),t="rgb";else if("transparent"===e)a=0,t="rgb",r=[0,0,0];else if(/^#[A-Fa-f0-9]+$/.test(e)){var i=e.slice(1);a=1,(c=i.length)<=4?(r=[parseInt(i[0]+i[0],16),parseInt(i[1]+i[1],16),parseInt(i[2]+i[2],16)],4===c&&(a=parseInt(i[3]+i[3],16)/255)):(r=[parseInt(i[0]+i[1],16),parseInt(i[2]+i[3],16),parseInt(i[4]+i[5],16)],8===c&&(a=parseInt(i[6]+i[7],16)/255)),r[0]||(r[0]=0),r[1]||(r[1]=0),r[2]||(r[2]=0),t="rgb"}else if(n=/^((?:rgb|hs[lvb]|hwb|cmyk?|xy[zy]|gray|lab|lchu?v?|[ly]uv|lms)a?)\s*\(([^\)]*)\)/.exec(e)){var s=n[1],d="rgb"===s;t=i=s.replace(/a$/,"");var c="cmyk"===i?4:"gray"===i?1:3;r=n[2].trim().split(/\s*[,\/]\s*|\s+/).map((function(e,n){if(/%$/.test(e))return n===c?parseFloat(e)/100:"rgb"===i?255*parseFloat(e)/100:parseFloat(e);if("h"===i[n]){if(/deg$/.test(e))return parseFloat(e);if(void 0!==l[e])return l[e]}return parseFloat(e)})),s===i&&r.push(1),a=d||void 0===r[c]?1:r[c],r=r.slice(0,c)}else e.length>10&&/[0-9](?:\s|\/)/.test(e)&&(r=e.match(/([0-9]+)/g).map((function(e){return parseFloat(e)})),t=e.match(/([a-z])/gi).join("").toLowerCase());else isNaN(e)?Array.isArray(e)||e.length?(r=[e[0],e[1],e[2]],t="rgb",a=4===e.length?e[3]:1):e instanceof Object&&(null!=e.r||null!=e.red||null!=e.R?(t="rgb",r=[e.r||e.red||e.R||0,e.g||e.green||e.G||0,e.b||e.blue||e.B||0]):(t="hsl",r=[e.h||e.hue||e.H||0,e.s||e.saturation||e.S||0,e.l||e.lightness||e.L||e.b||e.brightness]),a=e.a||e.alpha||e.opacity||1,null!=e.opacity&&(a/=100)):(t="rgb",r=[e>>>16,(65280&e)>>>8,255&e]);return{space:t,values:r,alpha:a}};const s=function(e){var n;Array.isArray(e)&&e.raw&&(e=String.raw.apply(null,arguments));var t=i(e);if(!t.space)return[];var r=[0,0,0],a="h"===t.space[0]?[360,100,100]:[255,255,255];return(n=Array(3))[0]=Math.min(Math.max(t.values[0],r[0]),a[0]),n[1]=Math.min(Math.max(t.values[1],r[1]),a[1]),n[2]=Math.min(Math.max(t.values[2],r[2]),a[2]),"h"===t.space[0]&&(n=function(e){var n,t,r,a,o,l=e[0]/360,i=e[1]/100,s=e[2]/100,d=0;if(0===i)return[o=255*s,o,o];for(n=2*s-(t=s<.5?s*(1+i):s+i-s*i),a=[0,0,0];d<3;)(r=l+1/3*-(d-1))<0?r++:r>1&&r--,o=6*r<1?n+6*(t-n)*r:2*r<1?t:3*r<2?n+(t-n)*(2/3-r)*6:n,a[d++]=255*o;return a}(n)),n.push(Math.min(Math.max(t.alpha,0),1)),n},d=(e,n,t,r=1)=>{const o=[Math.max(Math.min(Math.round(n[0]+r*Math.max(1,n[0]/100)),255),0),Math.max(Math.min(Math.round(n[1]+r*Math.max(1,n[1]/100)),255),0),Math.max(Math.min(Math.round(n[2]+r*Math.max(1,n[2]/100)),255),0)],l=(0,a.d)(a.r.hex(`rgba(${e.join(",")},1)`),a.r.hex(`rgba(${o.join(",")},1)`)),i=o[0]+o[1]+o[2];return 0===i||765===i||l>t?{background:e,foreground:o,contrast:l}:d(e,o,t,r)},c=new Map,u=(e,n=7)=>{let t=[0,0,0,1],r=[255,255,255,1];"string"==typeof e?(t=s(e),r=t):"object"==typeof e&&null!==e&&"string"==typeof e.background&&"string"==typeof e.foreground&&(t=s(e.background),r="string"==typeof e.foreground?s(e.foreground):t);const o=(299*t[0]+587*t[1]+114*t[2])/1e3>=128?-1:1;const l=((e,n,t,r=1)=>{if(c.has(e))return c.get(e);const a=d(e,n,t,r);return c.set(e,a),a})([t[0],t[1],t[2]],[r[0],r[1],r[2]],n,o);return r=[...l.foreground,1],{background:a.r.hex(`rgba(${t.join(",")})`),foreground:a.r.hex(`rgba(${r.join(",")})`),contrast:l.contrast}},h=/^#((\d|[a-f]){8}|(\d|[a-f]){6}|(\d|[a-f]){3,4})$/i;function g(e){if(e)if("string"==typeof e){if(function(e){return h.test(e)}(e))return{type:"string",valid:!0,value:e};{const n=function(e){if(e.startsWith("{"))try{const n=JSON.parse(e);if(b(n))return{type:"ColorPair",value:n}}catch(e){return{type:null,value:null}}return{type:null,value:null}}(e);if(n.value)return{type:n.type,valid:!0,value:n.value}}}else{const n=e;if(b(n))return{type:"ColorPair",valid:!0,value:n}}return{type:null,valid:!1,value:""}}function b(e){return!("object"!=typeof e||!e||"string"!=typeof e.backgroundColor||!("string"==typeof e.foregroundColor||e.foregroundColor&&"string"==typeof e.foregroundColor.primary&&"string"==typeof e.foregroundColor.secondary&&"string"==typeof e.foregroundColor.neutral))}function p(e){const n=g(e);switch(n.type){case null:return!1;case"string":case"ColorPair":return n.valid}}const f=(e,n,t)=>{(0,a.w)(e,"_color",p,new Set(["rgb in hex","ColorPair"]),n,t)},m=e=>{var n;let t;const o=g(e);switch(o.type){case"string":t=u(o.value);break;case"ColorPair":{const e=o.value;let r="";"string"==typeof e.foregroundColor?r=e.foregroundColor:(null===(n=e.foregroundColor)||void 0===n?void 0:n.primary)&&(r=e.foregroundColor.primary),r&&"string"==typeof r||(r="#fff"),t=u({background:e.backgroundColor,foreground:r});break}case null:r.L.warn(`_color was empty or invalid (${JSON.stringify(e)})`,{forceLog:!0}),t=u({background:"#000",foreground:"#000"})}return t.contrast<7&&(0,a.a)(`[KolBadge] The contrast of ${t.contrast} (≥7, AAA) is to low, between the color pair ${t.background} and ${t.foreground}.`),{backgroundColor:t.background,foregroundColor:t.foreground}}},1100:(e,n,t)=>{t.d(n,{t:()=>o});var r=t(8457),a=t(1523);let o=(e,n)=>{var t;return(null!==(t=(0,r.g)())&&void 0!==t?t:(0,r.i)("de")).translate(e,n)};"test"===a.p&&(o=e=>e)},8146:(e,n,t)=>{t.r(n),t.d(n,{kol_kolibri:()=>i});var r=t(1405),a=t(8075),o=t(1100),l=t(4058);const i=class{constructor(e){(0,r.r)(this,e),this.handleColorChange=(e,n)=>{if("string"==typeof e){const t=(0,a.c)(e);n.set("_color",{red:t[0],green:t[1],blue:t[2]})}else(0,l.j)("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")},this._color="#003c78",this._labeled=!0,this.state={_color:{red:0,green:60,blue:120},_labeled:!0}}render(){const e=`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return(0,r.h)(r.H,{key:"37799a15a1000646febf1dce7e9a0b67d50adcfe",class:"kol-kolibri"},(0,r.h)("svg",{key:"1855af528e0dbce3e3b4dc052dbf319e9e375628",role:"img","aria-label":(0,o.t)("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:e},(0,r.h)("path",{key:"4e9c7f613591d705c48b60a4da649cf62719e934",d:"M353 322L213 304V434L353 322Z"}),(0,r.h)("path",{key:"4b862203a4473f25dcd52f4406be5caf061b4640",d:"M209 564V304L149 434L209 564Z"}),(0,r.h)("path",{key:"5a739c17746c127a5bb1610ddd75b68e02ea63b7",d:"M357 316L417 250L361 210L275 244L357 316Z"}),(0,r.h)("path",{key:"7e71bb4f3fcd35aa1c1e869e62e5e9076cb90665",d:"M329 218L237 92L250 222L272 241L329 218Z"}),(0,r.h)("path",{key:"421c89c6d66a246e11b1efa5e5cb8a370fa01d7f",d:"M353 318L35 36L213 300L353 318Z"}),(0,r.h)("path",{key:"463a8b358df4efdbdbf1734f36a66516a7ae76ec",d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&(0,r.h)("text",{key:"7c6cc4e65a73db218f553edb8015741cc76be7bd",x:"250",y:"525",fill:e},"KoliBri")))}validateColor(e){(0,a.v)(this,e,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(e){(0,l.b)(this,"_labeled",e,{defaultValue:!0})}componentWillLoad(){this.validateColor(this._color),this.validateLabeled(this._labeled)}static get watchers(){return{_color:["validateColor"],_labeled:["validateLabeled"]}}};i.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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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: inline-block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  text {\n    font-size: calc(90rem / var(--kolibri-root-font-size, 16));\n    letter-spacing: normal;\n    word-spacing: normal;\n  }\n  svg {\n    max-height: 100%;\n  }\n}"}},1523:(e,n,t)=>{t.d(n,{b:()=>l,h:()=>a,p:()=>r,s:()=>o});let r="development";try{r="production"}catch(e){r="production"}const a=(e,n,t)=>{if(e&&n&&"string"==typeof t){const r=e.querySelector(`[slot="${t}"]`);r&&n.appendChild(r)}},o=e=>""===e,l=(e,n)=>e||n||""}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8146],{8075:(e,n,t)=>{t.d(n,{c:()=>s,h:()=>m,v:()=>f});var r=t(6448),a=t(4058),o={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]},l={red:0,orange:60,yellow:120,green:180,blue:240,purple:300},i=function(e){var n,t,r=[],a=1;if("string"==typeof e)if(e=e.toLowerCase(),o[e])r=o[e].slice(),t="rgb";else if("transparent"===e)a=0,t="rgb",r=[0,0,0];else if(/^#[A-Fa-f0-9]+$/.test(e)){var i=e.slice(1);a=1,(c=i.length)<=4?(r=[parseInt(i[0]+i[0],16),parseInt(i[1]+i[1],16),parseInt(i[2]+i[2],16)],4===c&&(a=parseInt(i[3]+i[3],16)/255)):(r=[parseInt(i[0]+i[1],16),parseInt(i[2]+i[3],16),parseInt(i[4]+i[5],16)],8===c&&(a=parseInt(i[6]+i[7],16)/255)),r[0]||(r[0]=0),r[1]||(r[1]=0),r[2]||(r[2]=0),t="rgb"}else if(n=/^((?:rgb|hs[lvb]|hwb|cmyk?|xy[zy]|gray|lab|lchu?v?|[ly]uv|lms)a?)\s*\(([^\)]*)\)/.exec(e)){var s=n[1],d="rgb"===s;t=i=s.replace(/a$/,"");var c="cmyk"===i?4:"gray"===i?1:3;r=n[2].trim().split(/\s*[,\/]\s*|\s+/).map((function(e,n){if(/%$/.test(e))return n===c?parseFloat(e)/100:"rgb"===i?255*parseFloat(e)/100:parseFloat(e);if("h"===i[n]){if(/deg$/.test(e))return parseFloat(e);if(void 0!==l[e])return l[e]}return parseFloat(e)})),s===i&&r.push(1),a=d||void 0===r[c]?1:r[c],r=r.slice(0,c)}else e.length>10&&/[0-9](?:\s|\/)/.test(e)&&(r=e.match(/([0-9]+)/g).map((function(e){return parseFloat(e)})),t=e.match(/([a-z])/gi).join("").toLowerCase());else isNaN(e)?Array.isArray(e)||e.length?(r=[e[0],e[1],e[2]],t="rgb",a=4===e.length?e[3]:1):e instanceof Object&&(null!=e.r||null!=e.red||null!=e.R?(t="rgb",r=[e.r||e.red||e.R||0,e.g||e.green||e.G||0,e.b||e.blue||e.B||0]):(t="hsl",r=[e.h||e.hue||e.H||0,e.s||e.saturation||e.S||0,e.l||e.lightness||e.L||e.b||e.brightness]),a=e.a||e.alpha||e.opacity||1,null!=e.opacity&&(a/=100)):(t="rgb",r=[e>>>16,(65280&e)>>>8,255&e]);return{space:t,values:r,alpha:a}};const s=function(e){var n;Array.isArray(e)&&e.raw&&(e=String.raw.apply(null,arguments));var t=i(e);if(!t.space)return[];var r=[0,0,0],a="h"===t.space[0]?[360,100,100]:[255,255,255];return(n=Array(3))[0]=Math.min(Math.max(t.values[0],r[0]),a[0]),n[1]=Math.min(Math.max(t.values[1],r[1]),a[1]),n[2]=Math.min(Math.max(t.values[2],r[2]),a[2]),"h"===t.space[0]&&(n=function(e){var n,t,r,a,o,l=e[0]/360,i=e[1]/100,s=e[2]/100,d=0;if(0===i)return[o=255*s,o,o];for(n=2*s-(t=s<.5?s*(1+i):s+i-s*i),a=[0,0,0];d<3;)(r=l+1/3*-(d-1))<0?r++:r>1&&r--,o=6*r<1?n+6*(t-n)*r:2*r<1?t:3*r<2?n+(t-n)*(2/3-r)*6:n,a[d++]=255*o;return a}(n)),n.push(Math.min(Math.max(t.alpha,0),1)),n},d=(e,n,t,r=1)=>{const o=[Math.max(Math.min(Math.round(n[0]+r*Math.max(1,n[0]/100)),255),0),Math.max(Math.min(Math.round(n[1]+r*Math.max(1,n[1]/100)),255),0),Math.max(Math.min(Math.round(n[2]+r*Math.max(1,n[2]/100)),255),0)],l=(0,a.d)(a.r.hex(`rgba(${e.join(",")},1)`),a.r.hex(`rgba(${o.join(",")},1)`)),i=o[0]+o[1]+o[2];return 0===i||765===i||l>t?{background:e,foreground:o,contrast:l}:d(e,o,t,r)},c=new Map,u=(e,n=7)=>{let t=[0,0,0,1],r=[255,255,255,1];"string"==typeof e?(t=s(e),r=t):"object"==typeof e&&null!==e&&"string"==typeof e.background&&"string"==typeof e.foreground&&(t=s(e.background),r="string"==typeof e.foreground?s(e.foreground):t);const o=(299*t[0]+587*t[1]+114*t[2])/1e3>=128?-1:1;const l=((e,n,t,r=1)=>{if(c.has(e))return c.get(e);const a=d(e,n,t,r);return c.set(e,a),a})([t[0],t[1],t[2]],[r[0],r[1],r[2]],n,o);return r=[...l.foreground,1],{background:a.r.hex(`rgba(${t.join(",")})`),foreground:a.r.hex(`rgba(${r.join(",")})`),contrast:l.contrast}},h=/^#((\d|[a-f]){8}|(\d|[a-f]){6}|(\d|[a-f]){3,4})$/i;function g(e){if(e)if("string"==typeof e){if(function(e){return h.test(e)}(e))return{type:"string",valid:!0,value:e};{const n=function(e){if(e.startsWith("{"))try{const n=JSON.parse(e);if(b(n))return{type:"ColorPair",value:n}}catch(e){return{type:null,value:null}}return{type:null,value:null}}(e);if(n.value)return{type:n.type,valid:!0,value:n.value}}}else{const n=e;if(b(n))return{type:"ColorPair",valid:!0,value:n}}return{type:null,valid:!1,value:""}}function b(e){return!("object"!=typeof e||!e||"string"!=typeof e.backgroundColor||!("string"==typeof e.foregroundColor||e.foregroundColor&&"string"==typeof e.foregroundColor.primary&&"string"==typeof e.foregroundColor.secondary&&"string"==typeof e.foregroundColor.neutral))}function p(e){const n=g(e);switch(n.type){case null:return!1;case"string":case"ColorPair":return n.valid}}const f=(e,n,t)=>{(0,a.w)(e,"_color",p,new Set(["rgb in hex","ColorPair"]),n,t)},m=e=>{var n;let t;const o=g(e);switch(o.type){case"string":t=u(o.value);break;case"ColorPair":{const e=o.value;let r="";"string"==typeof e.foregroundColor?r=e.foregroundColor:(null===(n=e.foregroundColor)||void 0===n?void 0:n.primary)&&(r=e.foregroundColor.primary),r&&"string"==typeof r||(r="#fff"),t=u({background:e.backgroundColor,foreground:r});break}case null:r.L.warn(`_color was empty or invalid (${JSON.stringify(e)})`,{forceLog:!0}),t=u({background:"#000",foreground:"#000"})}return t.contrast<7&&(0,a.a)(`[KolBadge] The contrast of ${t.contrast} (≥7, AAA) is to low, between the color pair ${t.background} and ${t.foreground}.`),{backgroundColor:t.background,foregroundColor:t.foreground}}},1100:(e,n,t)=>{t.d(n,{t:()=>o});var r=t(8457),a=t(1523);let o=(e,n)=>{var t;return(null!==(t=(0,r.g)())&&void 0!==t?t:(0,r.i)("de")).translate(e,n)};"test"===a.p&&(o=e=>e)},8146:(e,n,t)=>{t.r(n),t.d(n,{kol_kolibri:()=>i});var r=t(1114),a=t(8075),o=t(1100),l=t(4058);const i=class{constructor(e){(0,r.r)(this,e),this.handleColorChange=(e,n)=>{if("string"==typeof e){const t=(0,a.c)(e);n.set("_color",{red:t[0],green:t[1],blue:t[2]})}else(0,l.j)("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")},this._color="#003c78",this._labeled=!0,this.state={_color:{red:0,green:60,blue:120},_labeled:!0}}render(){const e=`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return(0,r.h)(r.H,{key:"37799a15a1000646febf1dce7e9a0b67d50adcfe",class:"kol-kolibri"},(0,r.h)("svg",{key:"1855af528e0dbce3e3b4dc052dbf319e9e375628",role:"img","aria-label":(0,o.t)("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:e},(0,r.h)("path",{key:"4e9c7f613591d705c48b60a4da649cf62719e934",d:"M353 322L213 304V434L353 322Z"}),(0,r.h)("path",{key:"4b862203a4473f25dcd52f4406be5caf061b4640",d:"M209 564V304L149 434L209 564Z"}),(0,r.h)("path",{key:"5a739c17746c127a5bb1610ddd75b68e02ea63b7",d:"M357 316L417 250L361 210L275 244L357 316Z"}),(0,r.h)("path",{key:"7e71bb4f3fcd35aa1c1e869e62e5e9076cb90665",d:"M329 218L237 92L250 222L272 241L329 218Z"}),(0,r.h)("path",{key:"421c89c6d66a246e11b1efa5e5cb8a370fa01d7f",d:"M353 318L35 36L213 300L353 318Z"}),(0,r.h)("path",{key:"463a8b358df4efdbdbf1734f36a66516a7ae76ec",d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&(0,r.h)("text",{key:"7c6cc4e65a73db218f553edb8015741cc76be7bd",x:"250",y:"525",fill:e},"KoliBri")))}validateColor(e){(0,a.v)(this,e,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(e){(0,l.b)(this,"_labeled",e,{defaultValue:!0})}componentWillLoad(){this.validateColor(this._color),this.validateLabeled(this._labeled)}static get watchers(){return{_color:["validateColor"],_labeled:["validateLabeled"]}}};i.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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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: inline-block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  text {\n    font-size: calc(90rem / var(--kolibri-root-font-size, 16));\n    letter-spacing: normal;\n    word-spacing: normal;\n  }\n  svg {\n    max-height: 100%;\n  }\n}"}},1523:(e,n,t)=>{t.d(n,{b:()=>l,h:()=>a,p:()=>r,s:()=>o});let r="development";try{r="production"}catch(e){r="production"}const a=(e,n,t)=>{if(e&&n&&"string"==typeof t){const r=e.querySelector(`[slot="${t}"]`);r&&n.appendChild(r)}},o=e=>""===e,l=(e,n)=>e||n||""}}]);

package/dist/8427.js

@@ -1,2 +1,2 @@
 /*! For license information please see 8427.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8427],{1806:(n,e,t)=>{t.d(e,{v:()=>a});var i=t(4058);const a=(n,e,t={})=>{(0,i.b)(n,"_hideLabel",e,t)}},1100:(n,e,t)=>{t.d(e,{t:()=>o});var i=t(8457),a=t(1523);let o=(n,e)=>{var t;return(null!==(t=(0,i.g)())&&void 0!==t?t:(0,i.i)("de")).translate(n,e)};"test"===a.p&&(o=n=>n)},8427:(n,e,t)=>{t.r(e),t.d(e,{kol_nav:()=>c});var i=t(1405),a=t(1100),o=t(1880),l=t(169),s=t(7883),d=t(4058),r=t(1806),h=t(1085);const c=class{constructor(n){(0,i.r)(this,n),this.handleToggleExpansionClick=n=>{n&&(this.state._expandedChildren.includes(n)?this.collapseChildren(n):this.expandChildren(n))},this.linkList=n=>(0,i.h)("ul",{class:"list "+(0===n.deep&&"horizontal"===n.orientation?" horizontal":" vertical"),"data-deep":n.deep},n.links.map(((e,t)=>this.li(n.collapsible,n.hideLabel,n.deep,t,e,n.orientation)))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_orientation:"vertical",_expandedChildren:[]}}expandChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[...this.state._expandedChildren,n]})}collapseChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:this.state._expandedChildren.filter((e=>e!=n))})}entry(n,e,t,a,o){const l=this.state._hasIconsWhenExpanded||this.state._hideLabel?a._icons||(this.state._hideLabel?"codicon codicon-symbol-method":void 0):void 0;return(0,i.h)("div",{class:{entry:!0,"hide-label":e}},"string"==typeof a._href?(0,i.h)(s.g,Object.assign({class:"entry-item"},a,{_hideLabel:e,_icons:l})):(0,i.h)(s.a,{class:"entry-item",_label:a._label,_hideLabel:e,_icons:l,_on:{onClick:(n,e)=>{var t,i;void 0===(t=a)._href&&"function"==typeof(null===(i=t._on)||void 0===i?void 0:i.onClick)&&"function"==typeof a._on.onClick?a._on.onClick(n,e):this.handleToggleExpansionClick(a._children)}}}),t?this.expandButton(n,a,o):"")}expandButton(n,e,t){return(0,i.h)(s.a,{class:"expand-button",_ariaExpanded:t,_disabled:!n,_icons:"codicon codicon-"+(t?"remove":"add"),_hideLabel:!0,_label:`${t?(0,a.t)("kol-nav-label-close",{placeholders:{label:e._label}}):(0,a.t)("kol-nav-label-open",{placeholders:{label:e._label}})}`,_on:{onClick:()=>this.handleToggleExpansionClick(e._children)}})}li(n,e,t,a,o,l){const s=!!o._active,d=Array.isArray(o._children)&&o._children.length>0,r=Boolean(o._children&&this.state._expandedChildren.includes(o._children));return(0,i.h)("li",{class:{active:s,expanded:r,"has-children":d},key:a},this.entry(n,e,d,o,r),r&&(0,i.h)(this.linkList,{collapsible:n,hideLabel:e,deep:t+1,links:o._children||[],orientation:l}))}initializeExpandedChildren(){const n=e=>{if(e._active)return e._children&&this.expandChildren(e._children),!0;if(e._children)for(const t of e._children)if(n(t))return this.expandChildren(e._children),!0;return!1};this.state._links.forEach(n)}render(){let n=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(n=!1,(0,d.l)("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const e=!0===this.state._collapsible,t=!0===this.state._hideLabel,o=this.state._orientation;return(0,i.h)(i.H,{key:"4ddc9e3fb2785df41afd6bdfadb1deeeffbdf349",class:"kol-nav"},(0,i.h)("div",{key:"334727bed3edf250ed44d6bc9a4ea2552d3619ae",class:{nav:!0,[o]:!0,"is-compact":this.state._hideLabel}},(0,i.h)("nav",{key:"e2adf8d7867a35e30f86b00ad3b0b8d6cc42f239","aria-label":this.state._label,id:"nav"},(0,i.h)(this.linkList,{key:"05cc61469b48336d211e7a3bd284173c0d4c4be7",collapsible:e,hideLabel:t,deep:0,links:this.state._links,orientation:o})),n&&(0,i.h)("div",{key:"a15f07cb06c5b0253cc00dbbd21a01750b123c30",class:"compact"},(0,i.h)(s.k,{key:"79c89cfb319fc7841dd4e0a5e6aa3d17dccb5f8b",_ariaControls:"nav",_ariaExpanded:!t,_icons:t?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:(0,a.t)(t?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_variant:"ghost"}))))}validateCollapsible(n){((n,e)=>{(0,d.b)(n,"_collapsible",e)})(this,n)}validateHasCompactButton(n){((n,e)=>{(0,d.b)(n,"_hasCompactButton",e)})(this,n)}validateHasIconsWhenExpanded(n){((n,e)=>{(0,d.b)(n,"_hasIconsWhenExpanded",e)})(this,n)}validateHideLabel(n){(0,r.v)(this,n)}validateLabel(n,e,t=!1){t||(0,o.r)(this.state._label),(0,h.v)(this,n,{required:!0}),(0,d.e)(n),(0,o.a)(this.state._label)}validateLinks(n){(0,l.w)("KolNav",this,n),(0,d.j)("[KolNav] The navigation structure is not yet validated recursively.")}validateOrientation(n){(0,d.w)(this,"_orientation",(n=>"horizontal"===n||"vertical"===n),new Set(["Orientation {horizontal, vertical}"]),n,{defaultValue:"vertical"})}componentWillLoad(){this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.validateOrientation(this._orientation),this.initializeExpandedChildren()}disconnectedCallback(){(0,o.r)(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}};c.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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div {\n    display: grid;\n    place-items: center;\n  }\n  :not(.is-compact) nav {\n    width: 100%;\n  }\n  .list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .list.vertical {\n    flex-direction: column;\n  }\n  .list.horizontal {\n    flex-wrap: wrap;\n  }\n  .entry {\n    display: flex;\n  }\n  .entry-item {\n    flex-grow: 1;\n  }\n}"}},1085:(n,e,t)=>{t.d(e,{a:()=>c,b:()=>s,c:()=>d,h:()=>a,v:()=>h});var i=t(4058);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 d(n){return l.test(n)}const r=new Set(["string"]),h=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),r,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,a,o)=>{var l,r;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(r=n.hooks)||void 0===r||r.afterPatch(e,t,a,o)),"string"==typeof e&&!1===s(e,3)&&!1===d(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=h},1523:(n,e,t)=>{t.d(e,{b:()=>l,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,l=(n,e)=>n||e||""},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)}},169:(n,e,t)=>{t.d(e,{w:()=>a});var i=t(4058);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)}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8427],{1806:(n,e,t)=>{t.d(e,{v:()=>a});var i=t(4058);const a=(n,e,t={})=>{(0,i.b)(n,"_hideLabel",e,t)}},1100:(n,e,t)=>{t.d(e,{t:()=>o});var i=t(8457),a=t(1523);let o=(n,e)=>{var t;return(null!==(t=(0,i.g)())&&void 0!==t?t:(0,i.i)("de")).translate(n,e)};"test"===a.p&&(o=n=>n)},8427:(n,e,t)=>{t.r(e),t.d(e,{kol_nav:()=>c});var i=t(1114),a=t(1100),o=t(1880),l=t(169),s=t(7883),d=t(4058),r=t(1806),h=t(1085);const c=class{constructor(n){(0,i.r)(this,n),this.handleToggleExpansionClick=n=>{n&&(this.state._expandedChildren.includes(n)?this.collapseChildren(n):this.expandChildren(n))},this.linkList=n=>(0,i.h)("ul",{class:"list "+(0===n.deep&&"horizontal"===n.orientation?" horizontal":" vertical"),"data-deep":n.deep},n.links.map(((e,t)=>this.li(n.collapsible,n.hideLabel,n.deep,t,e,n.orientation)))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_orientation:"vertical",_expandedChildren:[]}}expandChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[...this.state._expandedChildren,n]})}collapseChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:this.state._expandedChildren.filter((e=>e!=n))})}entry(n,e,t,a,o){const l=this.state._hasIconsWhenExpanded||this.state._hideLabel?a._icons||(this.state._hideLabel?"codicon codicon-symbol-method":void 0):void 0;return(0,i.h)("div",{class:{entry:!0,"hide-label":e}},"string"==typeof a._href?(0,i.h)(s.g,Object.assign({class:"entry-item"},a,{_hideLabel:e,_icons:l})):(0,i.h)(s.a,{class:"entry-item",_label:a._label,_hideLabel:e,_icons:l,_on:{onClick:(n,e)=>{var t,i;void 0===(t=a)._href&&"function"==typeof(null===(i=t._on)||void 0===i?void 0:i.onClick)&&"function"==typeof a._on.onClick?a._on.onClick(n,e):this.handleToggleExpansionClick(a._children)}}}),t?this.expandButton(n,a,o):"")}expandButton(n,e,t){return(0,i.h)(s.a,{class:"expand-button",_ariaExpanded:t,_disabled:!n,_icons:"codicon codicon-"+(t?"remove":"add"),_hideLabel:!0,_label:`${t?(0,a.t)("kol-nav-label-close",{placeholders:{label:e._label}}):(0,a.t)("kol-nav-label-open",{placeholders:{label:e._label}})}`,_on:{onClick:()=>this.handleToggleExpansionClick(e._children)}})}li(n,e,t,a,o,l){const s=!!o._active,d=Array.isArray(o._children)&&o._children.length>0,r=Boolean(o._children&&this.state._expandedChildren.includes(o._children));return(0,i.h)("li",{class:{active:s,expanded:r,"has-children":d},key:a},this.entry(n,e,d,o,r),r&&(0,i.h)(this.linkList,{collapsible:n,hideLabel:e,deep:t+1,links:o._children||[],orientation:l}))}initializeExpandedChildren(){const n=e=>{if(e._active)return e._children&&this.expandChildren(e._children),!0;if(e._children)for(const t of e._children)if(n(t))return this.expandChildren(e._children),!0;return!1};this.state._links.forEach(n)}render(){let n=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(n=!1,(0,d.l)("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const e=!0===this.state._collapsible,t=!0===this.state._hideLabel,o=this.state._orientation;return(0,i.h)(i.H,{key:"4ddc9e3fb2785df41afd6bdfadb1deeeffbdf349",class:"kol-nav"},(0,i.h)("div",{key:"334727bed3edf250ed44d6bc9a4ea2552d3619ae",class:{nav:!0,[o]:!0,"is-compact":this.state._hideLabel}},(0,i.h)("nav",{key:"e2adf8d7867a35e30f86b00ad3b0b8d6cc42f239","aria-label":this.state._label,id:"nav"},(0,i.h)(this.linkList,{key:"05cc61469b48336d211e7a3bd284173c0d4c4be7",collapsible:e,hideLabel:t,deep:0,links:this.state._links,orientation:o})),n&&(0,i.h)("div",{key:"a15f07cb06c5b0253cc00dbbd21a01750b123c30",class:"compact"},(0,i.h)(s.k,{key:"79c89cfb319fc7841dd4e0a5e6aa3d17dccb5f8b",_ariaControls:"nav",_ariaExpanded:!t,_icons:t?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:(0,a.t)(t?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_variant:"ghost"}))))}validateCollapsible(n){((n,e)=>{(0,d.b)(n,"_collapsible",e)})(this,n)}validateHasCompactButton(n){((n,e)=>{(0,d.b)(n,"_hasCompactButton",e)})(this,n)}validateHasIconsWhenExpanded(n){((n,e)=>{(0,d.b)(n,"_hasIconsWhenExpanded",e)})(this,n)}validateHideLabel(n){(0,r.v)(this,n)}validateLabel(n,e,t=!1){t||(0,o.r)(this.state._label),(0,h.v)(this,n,{required:!0}),(0,d.e)(n),(0,o.a)(this.state._label)}validateLinks(n){(0,l.w)("KolNav",this,n),(0,d.j)("[KolNav] The navigation structure is not yet validated recursively.")}validateOrientation(n){(0,d.w)(this,"_orientation",(n=>"horizontal"===n||"vertical"===n),new Set(["Orientation {horizontal, vertical}"]),n,{defaultValue:"vertical"})}componentWillLoad(){this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.validateOrientation(this._orientation),this.initializeExpandedChildren()}disconnectedCallback(){(0,o.r)(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}};c.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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div {\n    display: grid;\n    place-items: center;\n  }\n  :not(.is-compact) nav {\n    width: 100%;\n  }\n  .list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .list.vertical {\n    flex-direction: column;\n  }\n  .list.horizontal {\n    flex-wrap: wrap;\n  }\n  .entry {\n    display: flex;\n  }\n  .entry-item {\n    flex-grow: 1;\n  }\n}"}},1085:(n,e,t)=>{t.d(e,{a:()=>c,b:()=>s,c:()=>d,h:()=>a,v:()=>h});var i=t(4058);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 d(n){return l.test(n)}const r=new Set(["string"]),h=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),r,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,a,o)=>{var l,r;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(r=n.hooks)||void 0===r||r.afterPatch(e,t,a,o)),"string"==typeof e&&!1===s(e,3)&&!1===d(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=h},1523:(n,e,t)=>{t.d(e,{b:()=>l,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,l=(n,e)=>n||e||""},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)}},169:(n,e,t)=>{t.d(e,{w:()=>a});var i=t(4058);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/8495.js

@@ -1,2 +1,2 @@
 /*! For license information please see 8495.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8495],{8495:(n,e,t)=>{t.r(e),t.d(e,{kol_modal:()=>s});var i=t(1405),o=t(4058),a=t(1085),l=(n,e,t)=>new Promise(((i,o)=>{var a=n=>{try{s(t.next(n))}catch(n){o(n)}},l=n=>{try{s(t.throw(n))}catch(n){o(n)}},s=n=>n.done?i(n.value):Promise.resolve(n.value).then(a,l);s((t=t.apply(n,e)).next())}));const s=class{constructor(n){(0,i.r)(this,n),this._activeElement=void 0,this._label=void 0,this._on=void 0,this._width="100%",this.state={_activeElement:null,_label:"",_width:"100%"}}componentDidRender(){var n;this.state._activeElement&&(null===(n=this.refDialog)||void 0===n||n.showModal())}disconnectedCallback(){this.closeModal()}handleNativeCloseEvent(){var n,e;null===(e=null===(n=this.state._on)||void 0===n?void 0:n.onClose)||void 0===e||e.call(n)}openModal(){return l(this,null,(function*(){var n;null===(n=this.refDialog)||void 0===n||n.showModal()}))}closeModal(){return l(this,null,(function*(){var n,e;this._activeElement=null,null===(e=null===(n=this.refDialog)||void 0===n?void 0:n.close)||void 0===e||e.call(n)}))}render(){return(0,i.h)("dialog",{key:"4cef730e03a2e80a6ec8e1a37948d0d462fb91af",class:"kol-modal",ref:n=>{this.refDialog=n},style:{width:this.state._width},"aria-label":this.state._label,onClose:this.handleNativeCloseEvent.bind(this)},(0,i.h)("div",{key:"39c323af489ba5ad6d3516614e95f72c568825b0"},(0,i.h)("slot",{key:"626ca78ef597fe5285b0b675c2ae632364a18d26"})))}validateActiveElement(n){(0,o.w)(this,"_activeElement",(n=>"object"==typeof n||null===n),new Set(["HTMLElement","null"]),n,{defaultValue:null,hooks:{afterPatch:()=>{this.state._activeElement?this.openModal():this.closeModal()}}})}validateLabel(n){(0,a.v)(this,n,{required:!0})}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"!=typeof n.onClose&&!0!==n.onClose||(e.onClose=n.onClose),(0,o.s)(this,"_on",e)}}validateWidth(n){(0,o.i)(this,"_width",n,{defaultValue:"100%"})}componentWillLoad(){this.validateActiveElement(this._activeElement),this.validateLabel(this._label),this.validateOn(this._on),this.validateWidth(this._width)}static get watchers(){return{_activeElement:["validateActiveElement"],_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"]}}};s.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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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  .kol-modal {\n    border: 0;\n    padding: 0;\n  }\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.33);\n  }\n}"}},1085:(n,e,t)=>{t.d(e,{a:()=>c,b:()=>s,c:()=>r,h:()=>o,v:()=>h});var i=t(4058);const o=[0,1,2,3,4,5,6],a=/[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(a))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const d=new Set(["string"]),h=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),d,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,o,a)=>{var l,d;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(e,t,o,a)),"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=h}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8495],{8495:(n,e,t)=>{t.r(e),t.d(e,{kol_modal:()=>s});var i=t(1114),o=t(4058),a=t(1085),l=(n,e,t)=>new Promise(((i,o)=>{var a=n=>{try{s(t.next(n))}catch(n){o(n)}},l=n=>{try{s(t.throw(n))}catch(n){o(n)}},s=n=>n.done?i(n.value):Promise.resolve(n.value).then(a,l);s((t=t.apply(n,e)).next())}));const s=class{constructor(n){(0,i.r)(this,n),this._activeElement=void 0,this._label=void 0,this._on=void 0,this._width="100%",this.state={_activeElement:null,_label:"",_width:"100%"}}componentDidRender(){var n;this.state._activeElement&&(null===(n=this.refDialog)||void 0===n||n.showModal())}disconnectedCallback(){this.closeModal()}handleNativeCloseEvent(){var n,e;null===(e=null===(n=this.state._on)||void 0===n?void 0:n.onClose)||void 0===e||e.call(n)}openModal(){return l(this,null,(function*(){var n;null===(n=this.refDialog)||void 0===n||n.showModal()}))}closeModal(){return l(this,null,(function*(){var n,e;this._activeElement=null,null===(e=null===(n=this.refDialog)||void 0===n?void 0:n.close)||void 0===e||e.call(n)}))}render(){return(0,i.h)("dialog",{key:"4cef730e03a2e80a6ec8e1a37948d0d462fb91af",class:"kol-modal",ref:n=>{this.refDialog=n},style:{width:this.state._width},"aria-label":this.state._label,onClose:this.handleNativeCloseEvent.bind(this)},(0,i.h)("div",{key:"39c323af489ba5ad6d3516614e95f72c568825b0"},(0,i.h)("slot",{key:"626ca78ef597fe5285b0b675c2ae632364a18d26"})))}validateActiveElement(n){(0,o.w)(this,"_activeElement",(n=>"object"==typeof n||null===n),new Set(["HTMLElement","null"]),n,{defaultValue:null,hooks:{afterPatch:()=>{this.state._activeElement?this.openModal():this.closeModal()}}})}validateLabel(n){(0,a.v)(this,n,{required:!0})}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"!=typeof n.onClose&&!0!==n.onClose||(e.onClose=n.onClose),(0,o.s)(this,"_on",e)}}validateWidth(n){(0,o.i)(this,"_width",n,{defaultValue:"100%"})}componentWillLoad(){this.validateActiveElement(this._activeElement),this.validateLabel(this._label),this.validateOn(this._on),this.validateWidth(this._width)}static get watchers(){return{_activeElement:["validateActiveElement"],_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"]}}};s.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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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  .kol-modal {\n    border: 0;\n    padding: 0;\n  }\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.33);\n  }\n}"}},1085:(n,e,t)=>{t.d(e,{a:()=>c,b:()=>s,c:()=>r,h:()=>o,v:()=>h});var i=t(4058);const o=[0,1,2,3,4,5,6],a=/[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(a))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const d=new Set(["string"]),h=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),d,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,o,a)=>{var l,d;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(e,t,o,a)),"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=h}}]);

package/dist/8672.js

@@ -1,2 +1,2 @@
 /*! For license information please see 8672.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8672],{3260:(t,e,n)=>{n.d(e,{S:()=>l,a:()=>a,b:()=>i,i:()=>o});const i=t=>"object"==typeof t&&null!==t,o=(t,e=0)=>"string"==typeof t&&t.length>=e,a=t=>{if("object"!=typeof t||null===t)return o(t,1);for(const e in t)if(!1===o(e,1))return!1;return!0},l=new Event("StateChange")},324:(t,e,n)=>{n.d(e,{I:()=>r});var i=n(4932),o=n(5670),a=n(4058),l=n(3260);const s=(t,e)=>{const n=t;"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}),e.set("_icons",n))};class r extends i.I{constructor(t,e,n){super(t,e,n),this.component=t}validateIcons(t){(0,a.o)(t,(()=>{try{t=(0,a.p)(t)}catch(t){}(0,a.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,l.i)(t.left,1)||(0,o.i)(t.left)||(0,l.i)(t.right,1)||(0,o.i)(t.right))),new Set(["KoliBriHorizontalIcon"]),t,{hooks:{beforePatch:s},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},5670:(t,e,n)=>{n.d(e,{i:()=>l,v:()=>s});var i=n(4058),o=n(3260);const a=(t,e,n)=>{(0,o.b)(n)?t[e]=n:(0,o.i)(n,1)&&(t[e]={icon:n})},l=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,o.a)(t.style))&&(void 0===t.label||(0,o.i)(t.label))&&(0,o.i)(t.icon,1),s=(t,e,n={})=>{(0,i.o)(e,(()=>{var s;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,o.i)(t,1)||"object"==typeof t&&null!==t&&((0,o.i)(t.left,1)||l(t.left)||(0,o.i)(t.right,1)||l(t.right)||(0,o.i)(t.top,1)||l(t.top)||(0,o.i)(t.bottom,1)||l(t.bottom))}),new Set(["KoliBriIcon"]),e,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(s=n.hooks)||void 0===s?void 0:s.afterPatch,beforePatch:(t,e,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(t,e,i,l)),(t=>{var e,n,i;if(null===(e=t.nextState)||void 0===e?void 0:e.has("_icons")){const e=null===(n=t.nextState)||void 0===n?void 0:n.get("_icons");null===(i=t.nextState)||void 0===i||i.set("_icons",(t=>{let e={};return(0,o.i)(t,1)?e={left:{icon:t}}:"object"==typeof t&&null!==t&&(a(e,"top",t.top),a(e,"right",t.right),a(e,"bottom",t.bottom),a(e,"left",t.left)),e})(e))}})(i)}}}))}))}},8672:(t,e,n)=>{n.r(e),n.d(e,{kol_input_color:()=>b});var i=n(1405),o=n(2385),a=n(4932),l=n(324),s=n(2079),r=n(4058),c=n(7883),d=n(4851),h=n(1523),u=(t,e,n)=>new Promise(((i,o)=>{var a=t=>{try{s(n.next(t))}catch(t){o(t)}},l=t=>{try{s(n.throw(t))}catch(t){o(t)}},s=t=>t.done?i(t.value):Promise.resolve(t.value).then(a,l);s((n=n.apply(t,e)).next())}));const p=["on","off"];class v extends l.I{constructor(t,e,n){super(t,e,n),this.component=t}validateAutoComplete(t){(0,r.w)(this.component,"_autoComplete",(t=>"string"==typeof t&&p.includes(t)),new Set(p),t)}validateSuggestions(t){(0,s.v)(this.component,t)}validateValue(t){(0,r.i)(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const b=class{getValue(){return u(this,null,(function*(){var t;return null===(t=this.inputRef)||void 0===t?void 0:t.value}))}focus(){return u(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return u(this,null,(function*(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}))}render(){const{ariaDescribedBy:t}=(0,a.g)(this.state),e=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,n=(0,h.s)(this.state._label);return(0,i.h)(i.H,{key:"a1ebf2c05af21ae0bda2e782dd5dd5522f29dca8",class:"kol-input-color"},(0,i.h)(c.i,{key:"a216936c57a024c025e96e6aa013bd414631d1cb",class:{color:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_msg:this.state._msg,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_hideError:this.state._hideError,_id:this.state._id,_label:this.state._label,_shortKey:this.state._shortKey,_suggestions:this.state._suggestions,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.inputRef)||void 0===t?void 0:t.focus()},role:"presentation"},(0,i.h)("span",{key:"9c899448a5cd8e71ea167c05845a73fb99452fe6",slot:"label"},n?(0,i.h)("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?(0,i.h)(i.F,null,(0,i.h)(d.I,{badgeText:(0,h.b)(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",(0,i.h)("span",{class:"access-key-hint","aria-hidden":"true"},(0,h.b)(this.state._accessKey,this.state._shortKey))):(0,i.h)("span",null,this.state._label)),(0,i.h)("div",{key:"408b29f107635b29c3a26a3607b327739f3d2213",slot:"input"},(0,i.h)("input",Object.assign({key:"6ec19cc37d34fd1f64fab217b87f92c9a0179f6a",ref:this.catchRef,title:"",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,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,name:this.state._name,slot:"input",spellcheck:"false",type:"color",value:this.state._value},this.controller.onFacade,{onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})))))}constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.inputRef=t},this._accessKey=void 0,this._alert=void 0,this._autoComplete=void 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._name=void 0,this._on=void 0,this._shortKey=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hideError:!1,_id:`id-${(0,o.n)()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new v(this,"color",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};b.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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\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  .input {\n    background-color: white;\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  .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 calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  div.input {\n    cursor: pointer;\n  }\n}"}},2079:(t,e,n)=>{n.d(e,{v:()=>o});var i=n(4058);const o=(t,e)=>{(0,i.g)(t,"_suggestions",(t=>"string"==typeof t||"number"==typeof t),e,void 0,{hooks:{afterPatch:t=>{Array.isArray(t)&&t.length&&(0,i.a)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8672],{3260:(t,e,n)=>{n.d(e,{S:()=>l,a:()=>a,b:()=>i,i:()=>o});const i=t=>"object"==typeof t&&null!==t,o=(t,e=0)=>"string"==typeof t&&t.length>=e,a=t=>{if("object"!=typeof t||null===t)return o(t,1);for(const e in t)if(!1===o(e,1))return!1;return!0},l=new Event("StateChange")},324:(t,e,n)=>{n.d(e,{I:()=>r});var i=n(4932),o=n(5670),a=n(4058),l=n(3260);const s=(t,e)=>{const n=t;"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}),e.set("_icons",n))};class r extends i.I{constructor(t,e,n){super(t,e,n),this.component=t}validateIcons(t){(0,a.o)(t,(()=>{try{t=(0,a.p)(t)}catch(t){}(0,a.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,l.i)(t.left,1)||(0,o.i)(t.left)||(0,l.i)(t.right,1)||(0,o.i)(t.right))),new Set(["KoliBriHorizontalIcon"]),t,{hooks:{beforePatch:s},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},5670:(t,e,n)=>{n.d(e,{i:()=>l,v:()=>s});var i=n(4058),o=n(3260);const a=(t,e,n)=>{(0,o.b)(n)?t[e]=n:(0,o.i)(n,1)&&(t[e]={icon:n})},l=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,o.a)(t.style))&&(void 0===t.label||(0,o.i)(t.label))&&(0,o.i)(t.icon,1),s=(t,e,n={})=>{(0,i.o)(e,(()=>{var s;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,o.i)(t,1)||"object"==typeof t&&null!==t&&((0,o.i)(t.left,1)||l(t.left)||(0,o.i)(t.right,1)||l(t.right)||(0,o.i)(t.top,1)||l(t.top)||(0,o.i)(t.bottom,1)||l(t.bottom))}),new Set(["KoliBriIcon"]),e,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(s=n.hooks)||void 0===s?void 0:s.afterPatch,beforePatch:(t,e,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(t,e,i,l)),(t=>{var e,n,i;if(null===(e=t.nextState)||void 0===e?void 0:e.has("_icons")){const e=null===(n=t.nextState)||void 0===n?void 0:n.get("_icons");null===(i=t.nextState)||void 0===i||i.set("_icons",(t=>{let e={};return(0,o.i)(t,1)?e={left:{icon:t}}:"object"==typeof t&&null!==t&&(a(e,"top",t.top),a(e,"right",t.right),a(e,"bottom",t.bottom),a(e,"left",t.left)),e})(e))}})(i)}}}))}))}},8672:(t,e,n)=>{n.r(e),n.d(e,{kol_input_color:()=>b});var i=n(1114),o=n(6762),a=n(4932),l=n(324),s=n(2079),r=n(4058),c=n(7883),d=n(9196),h=n(1523),u=(t,e,n)=>new Promise(((i,o)=>{var a=t=>{try{s(n.next(t))}catch(t){o(t)}},l=t=>{try{s(n.throw(t))}catch(t){o(t)}},s=t=>t.done?i(t.value):Promise.resolve(t.value).then(a,l);s((n=n.apply(t,e)).next())}));const p=["on","off"];class v extends l.I{constructor(t,e,n){super(t,e,n),this.component=t}validateAutoComplete(t){(0,r.w)(this.component,"_autoComplete",(t=>"string"==typeof t&&p.includes(t)),new Set(p),t)}validateSuggestions(t){(0,s.v)(this.component,t)}validateValue(t){(0,r.i)(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const b=class{getValue(){return u(this,null,(function*(){var t;return null===(t=this.inputRef)||void 0===t?void 0:t.value}))}focus(){return u(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return u(this,null,(function*(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}))}render(){const{ariaDescribedBy:t}=(0,a.g)(this.state),e=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,n=(0,h.s)(this.state._label);return(0,i.h)(i.H,{key:"a1ebf2c05af21ae0bda2e782dd5dd5522f29dca8",class:"kol-input-color"},(0,i.h)(c.i,{key:"a216936c57a024c025e96e6aa013bd414631d1cb",class:{color:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_msg:this.state._msg,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_hideError:this.state._hideError,_id:this.state._id,_label:this.state._label,_shortKey:this.state._shortKey,_suggestions:this.state._suggestions,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.inputRef)||void 0===t?void 0:t.focus()},role:"presentation"},(0,i.h)("span",{key:"9c899448a5cd8e71ea167c05845a73fb99452fe6",slot:"label"},n?(0,i.h)("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?(0,i.h)(i.F,null,(0,i.h)(d.I,{badgeText:(0,h.b)(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",(0,i.h)("span",{class:"access-key-hint","aria-hidden":"true"},(0,h.b)(this.state._accessKey,this.state._shortKey))):(0,i.h)("span",null,this.state._label)),(0,i.h)("div",{key:"408b29f107635b29c3a26a3607b327739f3d2213",slot:"input"},(0,i.h)("input",Object.assign({key:"6ec19cc37d34fd1f64fab217b87f92c9a0179f6a",ref:this.catchRef,title:"",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,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,name:this.state._name,slot:"input",spellcheck:"false",type:"color",value:this.state._value},this.controller.onFacade,{onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})))))}constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.inputRef=t},this._accessKey=void 0,this._alert=void 0,this._autoComplete=void 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._name=void 0,this._on=void 0,this._shortKey=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hideError:!1,_id:`id-${(0,o.n)()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new v(this,"color",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};b.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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\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  .input {\n    background-color: white;\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  .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 calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  div.input {\n    cursor: pointer;\n  }\n}"}},2079:(t,e,n)=>{n.d(e,{v:()=>o});var i=n(4058);const o=(t,e)=>{(0,i.g)(t,"_suggestions",(t=>"string"==typeof t||"number"==typeof t),e,void 0,{hooks:{afterPatch:t=>{Array.isArray(t)&&t.length&&(0,i.a)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);

package/dist/8737.js

@@ -1,2 +1,2 @@
 /*! For license information please see 8737.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8737],{2385:(e,t,i)=>{i.d(t,{i:()=>o,n:()=>c,r:()=>r});var n=i(1405),a=i(1523),l=i(6448);const s=()=>{let e=(0,l.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,l.d)(),"KoliBri",{value:e,writable:!1})),e},o=()=>{(()=>{const e=(0,l.g)().querySelector('meta[name="kolibri"]');if(e&&e.hasAttribute("content")){const t=e.getAttribute("content");"string"==typeof t&&((0,l.s)(t.includes("dev-mode=true")),(0,l.b)(t.includes("experimental-mode=true")),(0,l.c)(t.includes("color-contrast-analysis=true")))}})(),l.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${n.E.kolibriVersion}\n\t`,{forceLog:!0})},r=()=>{!0!==s().adviceShown&&(Object.defineProperty(s(),"adviceShown",{get:function(){return!0}}),l.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"===a.p&&(c=()=>"nonce")},8682:(e,t,i)=>{i.d(t,{v:()=>a});var n=i(4058);const a=(e,t,i={})=>{(0,n.i)(e,"_href",t,i)}},8737:(e,t,i)=>{i.r(t),i.d(t,{kol_tree_item_wc:()=>d});var n=i(1405),a=i(7883),l=i(2385),s=i(4058),o=i(1085),r=i(7744),c=i(8682),h=(e,t,i)=>new Promise(((n,a)=>{var l=e=>{try{o(i.next(e))}catch(e){a(e)}},s=e=>{try{o(i.throw(e))}catch(e){a(e)}},o=e=>e.done?n(e.value):Promise.resolve(e.value).then(l,s);o((i=i.apply(e,t)).next())}));const d=class{constructor(e){(0,n.r)(this,e),this.groupId=`tree-group-${(0,l.n)()}`,this.level=void 0,this.state={_active:!1,_hasChildren:!1,_href:"",_label:"",_open:!1},this._active=void 0,this._label=void 0,this._open=void 0,this._href=void 0}render(){const{_href:e,_active:t,_hasChildren:i,_open:l,_label:s}=this.state;return(0,n.h)(n.H,{key:"4364cb19591055058e8893714c9a6deaf0afdad1",onSlotchange:this.handleSlotchange.bind(this),class:"kol-tree-item-wc"},(0,n.h)("li",{key:"ad5d8a8054180d0bdec565fb1b2101045f7d343f",class:"tree-item",style:{"--level":`${this.level}`}},(0,n.h)(a.g,{key:"901f2bc989fde2687e115056a67c6548ebbcc157",class:{"tree-link":!0,"first-level":0===this.level,active:Boolean(t)},_href:e,_label:"",_role:"treeitem",_tabIndex:t?0:-1,_ariaExpanded:i?l:void 0,_ariaOwns:i?this.groupId:void 0,ref:e=>this.linkElement=e},(0,n.h)("span",{key:"9870cc6ece0861216dc44fd9a24f6ad878dee8a5",slot:"expert"},i&&(0,n.h)("span",{key:"8d07da1ca25ea86118c8eac6400b46029137a544",class:"toggle-button",onClick:e=>l?void this.handleCollapseClick(e):void this.handleExpandClick(e)},(0,n.h)(a.d,{key:"95649317f4685ed2c46bb30feb65325e4125ab9b",class:"toggle-button-icon",_icons:"codicon codicon-"+(l?"chevron-down":"chevron-right"),_label:""}))," ",s)),(0,n.h)("ul",{key:"c9f1633a0884483d4a050d3c87b071a9ac179d22",hidden:!i||!l,role:"group",id:this.groupId},(0,n.h)("slot",{key:"67dda157773837ab70455a9457ca4ca8b783e532"}))))}validateActive(e){((e,t)=>{(0,s.b)(e,"_active",t,void 0)})(this,e||!1)}validateLabel(e){(0,o.v)(this,e)}validateOpen(e){(0,r.v)(this,e)}validateHref(e){(0,c.v)(this,e)}componentWillLoad(){this.validateActive(this._active),this.validateLabel(this._label),this.validateOpen(this._open),this.validateHref(this._href),this.checkForChildren(),this.determineTreeItemDepth()}determineTreeItemDepth(){let e=0,t=this.host.parentNode.host.parentNode;for(;null!==t&&t.tagName.toLowerCase()!==a.v&&t!==document.body;)t=t.parentElement,e+=1;this.level=e}handleSlotchange(){this.checkForChildren()}checkForChildren(){var e,t;this.state=Object.assign(Object.assign({},this.state),{_hasChildren:Boolean(null===(t=null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedElements)||void 0===t?void 0:t.call(e).length)})}focusLink(){return h(this,null,(function*(){yield this.linkElement.kolFocus()}))}handleExpandClick(e){return h(this,null,(function*(){e.preventDefault(),yield this.linkElement.kolFocus(),yield this.expand()}))}expand(){return h(this,null,(function*(){this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!0}))}))}handleCollapseClick(e){return h(this,null,(function*(){e.preventDefault(),this.linkElement.focus(),yield this.collapse()}))}collapse(){return h(this,null,(function*(){this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!1}))}))}isOpen(){return h(this,null,(function*(){var e;return null!==(e=this.state._open)&&void 0!==e&&e}))}get host(){return(0,n.g)(this)}static get watchers(){return{_active:["validateActive"],_label:["validateLabel"],_open:["validateOpen"],_href:["validateHref"]}}}},1085:(e,t,i)=>{i.d(t,{a:()=>d,b:()=>o,c:()=>r,h:()=>a,v:()=>h});var n=i(4058);const a=[0,1,2,3,4,5,6],l=/[a-zA-Z0-9äöüÄÖÜß]/g,s=/^\d+$/;function o(e,t=1){return function(e){var t;return"string"==typeof e&&(null===(t=e.match(l))||void 0===t?void 0:t.length)||0}(e)>=t}function r(e){return s.test(e)}const c=new Set(["string"]),h=(e,t,i={})=>{(0,n.w)(e,"_label",(e=>"string"==typeof e),c,t,function(e){var t;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(t,i,a,l)=>{var s,c;"function"==typeof(null===(s=e.hooks)||void 0===s?void 0:s.afterPatch)&&(null===(c=e.hooks)||void 0===c||c.afterPatch(t,i,a,l)),"string"==typeof t&&!1===o(t,3)&&!1===r(t)&&(0,n.a)(`The heading or label ("${t}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof t&&t.length>80&&(0,n.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(t=e.hooks)||void 0===t?void 0:t.beforePatch}})}(i))},d=h},7744:(e,t,i)=>{i.d(t,{v:()=>a});var n=i(4058);const a=(e,t,i)=>{(0,n.b)(e,"_open",t,i)}},1523:(e,t,i)=>{i.d(t,{b:()=>s,h:()=>a,p:()=>n,s:()=>l});let n="development";try{n="production"}catch(e){n="production"}const a=(e,t,i)=>{if(e&&t&&"string"==typeof i){const n=e.querySelector(`[slot="${i}"]`);n&&t.appendChild(n)}},l=e=>""===e,s=(e,t)=>e||t||""}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8737],{6762:(e,t,i)=>{i.d(t,{i:()=>o,n:()=>c,r:()=>r});var n=i(1114),a=i(1523),l=i(6448);const s=()=>{let e=(0,l.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,l.d)(),"KoliBri",{value:e,writable:!1})),e},o=()=>{(()=>{const e=(0,l.g)().querySelector('meta[name="kolibri"]');if(e&&e.hasAttribute("content")){const t=e.getAttribute("content");"string"==typeof t&&((0,l.s)(t.includes("dev-mode=true")),(0,l.b)(t.includes("experimental-mode=true")),(0,l.c)(t.includes("color-contrast-analysis=true")))}})(),l.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${n.E.kolibriVersion}\n\t`,{forceLog:!0})},r=()=>{!0!==s().adviceShown&&(Object.defineProperty(s(),"adviceShown",{get:function(){return!0}}),l.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"===a.p&&(c=()=>"nonce")},8682:(e,t,i)=>{i.d(t,{v:()=>a});var n=i(4058);const a=(e,t,i={})=>{(0,n.i)(e,"_href",t,i)}},8737:(e,t,i)=>{i.r(t),i.d(t,{kol_tree_item_wc:()=>d});var n=i(1114),a=i(7883),l=i(6762),s=i(4058),o=i(1085),r=i(7744),c=i(8682),h=(e,t,i)=>new Promise(((n,a)=>{var l=e=>{try{o(i.next(e))}catch(e){a(e)}},s=e=>{try{o(i.throw(e))}catch(e){a(e)}},o=e=>e.done?n(e.value):Promise.resolve(e.value).then(l,s);o((i=i.apply(e,t)).next())}));const d=class{constructor(e){(0,n.r)(this,e),this.groupId=`tree-group-${(0,l.n)()}`,this.level=void 0,this.state={_active:!1,_hasChildren:!1,_href:"",_label:"",_open:!1},this._active=void 0,this._label=void 0,this._open=void 0,this._href=void 0}render(){const{_href:e,_active:t,_hasChildren:i,_open:l,_label:s}=this.state;return(0,n.h)(n.H,{key:"4364cb19591055058e8893714c9a6deaf0afdad1",onSlotchange:this.handleSlotchange.bind(this),class:"kol-tree-item-wc"},(0,n.h)("li",{key:"ad5d8a8054180d0bdec565fb1b2101045f7d343f",class:"tree-item",style:{"--level":`${this.level}`}},(0,n.h)(a.g,{key:"901f2bc989fde2687e115056a67c6548ebbcc157",class:{"tree-link":!0,"first-level":0===this.level,active:Boolean(t)},_href:e,_label:"",_role:"treeitem",_tabIndex:t?0:-1,_ariaExpanded:i?l:void 0,_ariaOwns:i?this.groupId:void 0,ref:e=>this.linkElement=e},(0,n.h)("span",{key:"9870cc6ece0861216dc44fd9a24f6ad878dee8a5",slot:"expert"},i&&(0,n.h)("span",{key:"8d07da1ca25ea86118c8eac6400b46029137a544",class:"toggle-button",onClick:e=>l?void this.handleCollapseClick(e):void this.handleExpandClick(e)},(0,n.h)(a.d,{key:"95649317f4685ed2c46bb30feb65325e4125ab9b",class:"toggle-button-icon",_icons:"codicon codicon-"+(l?"chevron-down":"chevron-right"),_label:""}))," ",s)),(0,n.h)("ul",{key:"c9f1633a0884483d4a050d3c87b071a9ac179d22",hidden:!i||!l,role:"group",id:this.groupId},(0,n.h)("slot",{key:"67dda157773837ab70455a9457ca4ca8b783e532"}))))}validateActive(e){((e,t)=>{(0,s.b)(e,"_active",t,void 0)})(this,e||!1)}validateLabel(e){(0,o.v)(this,e)}validateOpen(e){(0,r.v)(this,e)}validateHref(e){(0,c.v)(this,e)}componentWillLoad(){this.validateActive(this._active),this.validateLabel(this._label),this.validateOpen(this._open),this.validateHref(this._href),this.checkForChildren(),this.determineTreeItemDepth()}determineTreeItemDepth(){let e=0,t=this.host.parentNode.host.parentNode;for(;null!==t&&t.tagName.toLowerCase()!==a.v&&t!==document.body;)t=t.parentElement,e+=1;this.level=e}handleSlotchange(){this.checkForChildren()}checkForChildren(){var e,t;this.state=Object.assign(Object.assign({},this.state),{_hasChildren:Boolean(null===(t=null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedElements)||void 0===t?void 0:t.call(e).length)})}focusLink(){return h(this,null,(function*(){yield this.linkElement.kolFocus()}))}handleExpandClick(e){return h(this,null,(function*(){e.preventDefault(),yield this.linkElement.kolFocus(),yield this.expand()}))}expand(){return h(this,null,(function*(){this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!0}))}))}handleCollapseClick(e){return h(this,null,(function*(){e.preventDefault(),this.linkElement.focus(),yield this.collapse()}))}collapse(){return h(this,null,(function*(){this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!1}))}))}isOpen(){return h(this,null,(function*(){var e;return null!==(e=this.state._open)&&void 0!==e&&e}))}get host(){return(0,n.g)(this)}static get watchers(){return{_active:["validateActive"],_label:["validateLabel"],_open:["validateOpen"],_href:["validateHref"]}}}},1085:(e,t,i)=>{i.d(t,{a:()=>d,b:()=>o,c:()=>r,h:()=>a,v:()=>h});var n=i(4058);const a=[0,1,2,3,4,5,6],l=/[a-zA-Z0-9äöüÄÖÜß]/g,s=/^\d+$/;function o(e,t=1){return function(e){var t;return"string"==typeof e&&(null===(t=e.match(l))||void 0===t?void 0:t.length)||0}(e)>=t}function r(e){return s.test(e)}const c=new Set(["string"]),h=(e,t,i={})=>{(0,n.w)(e,"_label",(e=>"string"==typeof e),c,t,function(e){var t;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(t,i,a,l)=>{var s,c;"function"==typeof(null===(s=e.hooks)||void 0===s?void 0:s.afterPatch)&&(null===(c=e.hooks)||void 0===c||c.afterPatch(t,i,a,l)),"string"==typeof t&&!1===o(t,3)&&!1===r(t)&&(0,n.a)(`The heading or label ("${t}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof t&&t.length>80&&(0,n.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(t=e.hooks)||void 0===t?void 0:t.beforePatch}})}(i))},d=h},7744:(e,t,i)=>{i.d(t,{v:()=>a});var n=i(4058);const a=(e,t,i)=>{(0,n.b)(e,"_open",t,i)}},1523:(e,t,i)=>{i.d(t,{b:()=>s,h:()=>a,p:()=>n,s:()=>l});let n="development";try{n="production"}catch(e){n="production"}const a=(e,t,i)=>{if(e&&t&&"string"==typeof i){const n=e.querySelector(`[slot="${i}"]`);n&&t.appendChild(n)}},l=e=>""===e,s=(e,t)=>e||t||""}}]);

package/dist/8786.js

@@ -1,2 +1,2 @@
 /*! For license information please see 8786.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8786],{7579:(n,e,t)=>{t.d(e,{K:()=>d});var o=t(3133),i=t(1405),a=t(4600);const l=1;function s(n){return function(n){return n>=l&&n<=6}(n)?`h${n}`:"strong"}const r=(n,e)=>{var{class:t,level:r=l,variant:c}=n,d=(0,o._)(n,["class","level","variant"]);const h=s(r),u=c||h;return(0,i.h)(h,Object.assign({class:(0,a.c)("headline",`headline-${u}`,t)},d),e)},c=(n,e)=>{var{class:t,level:r=l}=n,c=(0,o._)(n,["class","level"]);const d=function(n){return 1===n?"span":s(n)}(r+1);return(0,i.h)(d,Object.assign({class:(0,a.c)("secondary-headline",t)},c),e)},d=(n,e)=>{var{secondaryHeadline:t,level:s=l,class:d,HeadingGroupProps:h={},SecondaryHeadlineProps:u={}}=n,f=(0,o._)(n,["secondaryHeadline","level","class","HeadingGroupProps","SecondaryHeadlineProps"]);const p="kol-heading-wc",b=Object.assign({level:s},f);if(!t)return(0,i.h)(r,Object.assign({class:(0,a.c)(p,d)},b),e);const{class:v}=h,m=(0,o._)(h,["class"]),y=Object.assign({class:(0,a.c)(p,v)},m);return(0,i.h)("hgroup",Object.assign({},y),(0,i.h)(r,Object.assign({class:d},b),e),(0,i.h)(c,Object.assign({level:s},u),t))}},4600:(n,e,t)=>{function o(n){var e,t,i="";if("string"==typeof n||"number"==typeof n)i+=n;else if("object"==typeof n)if(Array.isArray(n)){var a=n.length;for(e=0;e<a;e++)n[e]&&(t=o(n[e]))&&(i&&(i+=" "),i+=t)}else for(t in n)n[t]&&(i&&(i+=" "),i+=t);return i}function i(){for(var n,e,t=0,i="",a=arguments.length;t<a;t++)(n=arguments[t])&&(e=o(n))&&(i&&(i+=" "),i+=e);return i}t.d(e,{c:()=>i})},5029:(n,e,t)=>{t.d(e,{v:()=>i});var o=t(4058);const i=(n,e)=>{(0,o.b)(n,"_hasCloser",e)}},1100:(n,e,t)=>{t.d(e,{t:()=>a});var o=t(8457),i=t(1523);let a=(n,e)=>{var t;return(null!==(t=(0,o.g)())&&void 0!==t?t:(0,o.i)("de")).translate(n,e)};"test"===i.p&&(a=n=>n)},8786:(n,e,t)=>{t.r(e),t.d(e,{kol_card:()=>h});var o=t(1405),i=t(1100),a=t(1384),l=t(7883),s=t(7579),r=t(5029),c=t(4058),d=t(1085);const h=class{constructor(n){(0,o.r)(this,n),this.close=()=>{var n;void 0!==(null===(n=this._on)||void 0===n?void 0:n.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=n=>"object"==typeof n&&null!==n&&"function"==typeof n.onClose,this._on=void 0,this._hasCloser=!1,this._label=void 0,this._level=1,this.state={_label:""}}render(){return(0,o.h)(o.H,{key:"052e67450cacfa152ebc9d50f5e10484a0308db1",class:"kol-card"},(0,o.h)("div",{key:"f3941c8745be8be0607fcd0d29e6c8d8d4105898",class:"card"},(0,o.h)("div",{key:"43e5b2d3b5e1d35a2a03c0c3260f383b65b92d60",class:"header"},(0,o.h)(s.K,{key:"e50f3d9a169160873169da33331348e084050b2c",level:this.state._level},this.state._label)),(0,o.h)("div",{key:"de46fd2d7a5341e9bb3022946ff6701a0a3bfa73",class:"content"},(0,o.h)("slot",{key:"ee5b57605053ff71ec2d68fa0dba766e94da230f"})),this.state._hasCloser&&(0,o.h)(l.a,{key:"331ea94e23553ed728a35a24a9873d0fd22dccfe",class:"close",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:(0,i.t)("kol-close"),_on:this.on,_tooltipAlign:"left"})))}validateOn(n){this.validateOnValue(n)&&(0,c.s)(this,"_on",{onClose:n.onClose})}validateHasCloser(n){(0,r.v)(this,n)}validateLabel(n){(0,d.v)(this,n,{required:!0})}validateLevel(n){(0,a.w)(this,n)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on)}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"]}}};h.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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div.card {\n    height: 100%;\n    position: relative;\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .close {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n}"}},1085:(n,e,t)=>{t.d(e,{a:()=>h,b:()=>s,c:()=>r,h:()=>i,v:()=>d});var o=t(4058);const i=[0,1,2,3,4,5,6],a=/[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(a))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const c=new Set(["string"]),d=(n,e,t={})=>{(0,o.w)(n,"_label",(n=>"string"==typeof n),c,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,i,a)=>{var l,c;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(c=n.hooks)||void 0===c||c.afterPatch(e,t,i,a)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,o.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,o.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))},h=d},1523:(n,e,t)=>{t.d(e,{b:()=>l,h:()=>i,p:()=>o,s:()=>a});let o="development";try{o="production"}catch(n){o="production"}const i=(n,e,t)=>{if(n&&e&&"string"==typeof t){const o=n.querySelector(`[slot="${t}"]`);o&&e.appendChild(o)}},a=n=>""===n,l=(n,e)=>n||e||""},3133:(n,e,t)=>{function o(n,e){var t={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&e.indexOf(o)<0&&(t[o]=n[o]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(n);i<o.length;i++)e.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(n,o[i])&&(t[o[i]]=n[o[i]])}return t}t.d(e,{_:()=>o}),"function"==typeof SuppressedError&&SuppressedError},1384:(n,e,t)=>{t.d(e,{w:()=>a});var o=t(1085),i=t(4058);const a=(n,e)=>{(0,i.w)(n,"_level",(n=>"number"==typeof n&&o.h.includes(n)),new Set([`Number {${o.h.join(", ")}`]),e,{defaultValue:1,required:!0})}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8786],{9028:(n,e,t)=>{t.d(e,{K:()=>d});var o=t(3133),i=t(1114),a=t(4600);const l=1;function s(n){return function(n){return n>=l&&n<=6}(n)?`h${n}`:"strong"}const r=(n,e)=>{var{class:t,level:r=l,variant:c}=n,d=(0,o._)(n,["class","level","variant"]);const h=s(r),u=c||h;return(0,i.h)(h,Object.assign({class:(0,a.c)("headline",`headline-${u}`,t)},d),e)},c=(n,e)=>{var{class:t,level:r=l}=n,c=(0,o._)(n,["class","level"]);const d=function(n){return 1===n?"span":s(n)}(r+1);return(0,i.h)(d,Object.assign({class:(0,a.c)("secondary-headline",t)},c),e)},d=(n,e)=>{var{secondaryHeadline:t,level:s=l,class:d,HeadingGroupProps:h={},SecondaryHeadlineProps:u={}}=n,f=(0,o._)(n,["secondaryHeadline","level","class","HeadingGroupProps","SecondaryHeadlineProps"]);const p="kol-heading-wc",b=Object.assign({level:s},f);if(!t)return(0,i.h)(r,Object.assign({class:(0,a.c)(p,d)},b),e);const{class:v}=h,m=(0,o._)(h,["class"]),y=Object.assign({class:(0,a.c)(p,v)},m);return(0,i.h)("hgroup",Object.assign({},y),(0,i.h)(r,Object.assign({class:d},b),e),(0,i.h)(c,Object.assign({level:s},u),t))}},4600:(n,e,t)=>{function o(n){var e,t,i="";if("string"==typeof n||"number"==typeof n)i+=n;else if("object"==typeof n)if(Array.isArray(n)){var a=n.length;for(e=0;e<a;e++)n[e]&&(t=o(n[e]))&&(i&&(i+=" "),i+=t)}else for(t in n)n[t]&&(i&&(i+=" "),i+=t);return i}function i(){for(var n,e,t=0,i="",a=arguments.length;t<a;t++)(n=arguments[t])&&(e=o(n))&&(i&&(i+=" "),i+=e);return i}t.d(e,{c:()=>i})},5029:(n,e,t)=>{t.d(e,{v:()=>i});var o=t(4058);const i=(n,e)=>{(0,o.b)(n,"_hasCloser",e)}},1100:(n,e,t)=>{t.d(e,{t:()=>a});var o=t(8457),i=t(1523);let a=(n,e)=>{var t;return(null!==(t=(0,o.g)())&&void 0!==t?t:(0,o.i)("de")).translate(n,e)};"test"===i.p&&(a=n=>n)},8786:(n,e,t)=>{t.r(e),t.d(e,{kol_card:()=>h});var o=t(1114),i=t(1100),a=t(1384),l=t(7883),s=t(9028),r=t(5029),c=t(4058),d=t(1085);const h=class{constructor(n){(0,o.r)(this,n),this.close=()=>{var n;void 0!==(null===(n=this._on)||void 0===n?void 0:n.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=n=>"object"==typeof n&&null!==n&&"function"==typeof n.onClose,this._on=void 0,this._hasCloser=!1,this._label=void 0,this._level=1,this.state={_label:""}}render(){return(0,o.h)(o.H,{key:"052e67450cacfa152ebc9d50f5e10484a0308db1",class:"kol-card"},(0,o.h)("div",{key:"f3941c8745be8be0607fcd0d29e6c8d8d4105898",class:"card"},(0,o.h)("div",{key:"43e5b2d3b5e1d35a2a03c0c3260f383b65b92d60",class:"header"},(0,o.h)(s.K,{key:"e50f3d9a169160873169da33331348e084050b2c",level:this.state._level},this.state._label)),(0,o.h)("div",{key:"de46fd2d7a5341e9bb3022946ff6701a0a3bfa73",class:"content"},(0,o.h)("slot",{key:"ee5b57605053ff71ec2d68fa0dba766e94da230f"})),this.state._hasCloser&&(0,o.h)(l.a,{key:"331ea94e23553ed728a35a24a9873d0fd22dccfe",class:"close",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:(0,i.t)("kol-close"),_on:this.on,_tooltipAlign:"left"})))}validateOn(n){this.validateOnValue(n)&&(0,c.s)(this,"_on",{onClose:n.onClose})}validateHasCloser(n){(0,r.v)(this,n)}validateLabel(n){(0,d.v)(this,n,{required:!0})}validateLevel(n){(0,a.w)(this,n)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on)}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"]}}};h.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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div.card {\n    height: 100%;\n    position: relative;\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .close {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n}"}},1085:(n,e,t)=>{t.d(e,{a:()=>h,b:()=>s,c:()=>r,h:()=>i,v:()=>d});var o=t(4058);const i=[0,1,2,3,4,5,6],a=/[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(a))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const c=new Set(["string"]),d=(n,e,t={})=>{(0,o.w)(n,"_label",(n=>"string"==typeof n),c,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,i,a)=>{var l,c;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(c=n.hooks)||void 0===c||c.afterPatch(e,t,i,a)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,o.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,o.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))},h=d},1523:(n,e,t)=>{t.d(e,{b:()=>l,h:()=>i,p:()=>o,s:()=>a});let o="development";try{o="production"}catch(n){o="production"}const i=(n,e,t)=>{if(n&&e&&"string"==typeof t){const o=n.querySelector(`[slot="${t}"]`);o&&e.appendChild(o)}},a=n=>""===n,l=(n,e)=>n||e||""},3133:(n,e,t)=>{function o(n,e){var t={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&e.indexOf(o)<0&&(t[o]=n[o]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(n);i<o.length;i++)e.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(n,o[i])&&(t[o[i]]=n[o[i]])}return t}t.d(e,{_:()=>o}),"function"==typeof SuppressedError&&SuppressedError},1384:(n,e,t)=>{t.d(e,{w:()=>a});var o=t(1085),i=t(4058);const a=(n,e)=>{(0,i.w)(n,"_level",(n=>"number"==typeof n&&o.h.includes(n)),new Set([`Number {${o.h.join(", ")}`]),e,{defaultValue:1,required:!0})}}}]);

package/dist/8796.js

@@ -1,2 +1,2 @@
 /*! For license information please see 8796.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8796],{8796:(t,e,i)=>{i.r(e),i.d(e,{kol_tooltip_wc:()=>c});var s=i(1405),o=i(1873),n=i(6560),l=i(4058),a=i(6448),h=i(1853),r=i(1085);const d=new Set,c=class{constructor(t){(0,s.r)(this,t),this.hasFocusIn=!1,this.hasMouseIn=!1,this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){t=this.tooltipElement,d.forEach((t=>{t.style.setProperty("z-index","999")})),d.add(t),t.style.setProperty("z-index","1000"),this.tooltipElement.style.setProperty("display","block"),(0,a.g)().addEventListener("keyup",this.hideTooltipByEscape);const e=this.previousSibling,i=this.tooltipElement;this.cleanupAutoPositioning=(0,o.b)(e,i,(()=>{this.alignTooltip()}))}var t},this.hideTooltip=()=>{this.tooltipElement&&(function(t){if(d.delete(t),d.size>0){const t=Array.from(d).pop();t&&t.style.setProperty("z-index","1000")}}(this.tooltipElement),this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)),(0,a.g)().removeEventListener("keyup",this.hideTooltipByEscape)},this.hideTooltipByEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addListeners=t=>{t.addEventListener("mouseenter",this.handleMouseEnter.bind(this)),t.addEventListener("mouseleave",this.handleMouseleave.bind(this)),t.addEventListener("focusin",this.handleFocusIn.bind(this)),t.addEventListener("focusout",this.handleFocusout.bind(this))},this.removeListeners=t=>{t.removeEventListener("mouseenter",this.handleMouseEnter.bind(this)),t.removeEventListener("mouseleave",this.handleMouseleave.bind(this)),t.removeEventListener("focusin",this.handleFocusIn.bind(this)),t.removeEventListener("focusout",this.handleFocusout.bind(this))},this.resyncListeners=(t,e,i=!1)=>{t&&this.removeListeners(t),e&&(i&&(this.previousSibling=e),this.addListeners(e))},this.catchTooltipElement=t=>{this.tooltipElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{this.hasMouseIn||this.hasFocusIn?this.showTooltip():this.hideTooltip()}),300)},this._badgeText=void 0,this._align="top",this._id=void 0,this._label=void 0,this.state={_align:"top",_label:""}}alignTooltip(){return t=this,e=function*(){this.tooltipElement&&this.previousSibling&&(yield(0,o.a)({align:this._align,referenceElement:this.previousSibling,arrowElement:this.arrowElement,floatingElement:this.tooltipElement}))},new Promise(((i,s)=>{var o=t=>{try{l(e.next(t))}catch(t){s(t)}},n=t=>{try{l(e.throw(t))}catch(t){s(t)}},l=t=>t.done?i(t.value):Promise.resolve(t.value).then(o,n);l((e=e.apply(t,null)).next())}));var t,e}handleMouseEnter(){this.hasMouseIn=!0,this.showOrHideTooltip()}handleMouseleave(){this.hasMouseIn=!1,this.showOrHideTooltip()}handleFocusIn(){this.hasFocusIn=!0,this.showOrHideTooltip()}handleFocusout(){this.hasFocusIn=!1,this.showOrHideTooltip()}render(){return(0,s.h)(s.H,{key:"2be9c5d6962bdad636626a1751cea1b631db421a",class:"kol-tooltip-wc"},""!==this.state._label&&(0,s.h)("div",{key:"3161307174c34c73eb4e15c0a0d5d0a8fe4a5cb7",class:"tooltip-floating",ref:this.catchTooltipElement},(0,s.h)("div",{key:"c622d8585cff191a2e6f5fc978cfbf06558cfe7b",class:"tooltip-area tooltip-arrow",ref:this.catchArrowElement}),(0,s.h)(n.K,{key:"b6083e4cef6e04136e86168a8fa4c8a8fdff43af",class:"tooltip-area tooltip-content",id:this.state._id,badgeText:this._badgeText,label:this.state._label})))}validateBadgeText(t){((t,e)=>{(0,l.i)(t,"_badgeText",e)})(this,t)}validateAlign(t){(0,h.v)(this,t)}validateId(t){((t,e)=>{(0,l.i)(t,"_id",e)})(this,t)}validateLabel(t){(0,r.v)(this,t,{required:!0})}componentWillLoad(){this.validateBadgeText(this._badgeText),this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}handleEventListeners(){var t;this.resyncListeners(this.previousSibling,null===(t=this.host)||void 0===t?void 0:t.previousElementSibling,!0),this.resyncListeners(this.tooltipElement,this.tooltipElement)}connectedCallback(){var t;this.previousSibling=null===(t=this.host)||void 0===t?void 0:t.previousElementSibling}componentDidRender(){this.handleEventListeners()}disconnectedCallback(){this.previousSibling&&(this.removeListeners(this.previousSibling),this.previousSibling=void 0),this.tooltipElement&&this.removeListeners(this.tooltipElement),this.cleanupAutoPositioning&&this.cleanupAutoPositioning()}get host(){return(0,s.g)(this)}static get watchers(){return{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}}},1085:(t,e,i)=>{i.d(e,{a:()=>c,b:()=>a,c:()=>h,h:()=>o,v:()=>d});var s=i(4058);const o=[0,1,2,3,4,5,6],n=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function a(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 h(t){return l.test(t)}const r=new Set(["string"]),d=(t,e,i={})=>{(0,s.w)(t,"_label",(t=>"string"==typeof t),r,e,function(t){var e;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(e,i,o,n)=>{var l,r;"function"==typeof(null===(l=t.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(r=t.hooks)||void 0===r||r.afterPatch(e,i,o,n)),"string"==typeof e&&!1===a(e,3)&&!1===h(e)&&(0,s.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,s.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=t.hooks)||void 0===e?void 0:e.beforePatch}})}(i))},c=d}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8796],{8796:(t,e,i)=>{i.r(e),i.d(e,{kol_tooltip_wc:()=>c});var s=i(1114),o=i(1873),n=i(1596),l=i(4058),a=i(6448),h=i(1853),r=i(1085);const d=new Set,c=class{constructor(t){(0,s.r)(this,t),this.hasFocusIn=!1,this.hasMouseIn=!1,this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){t=this.tooltipElement,d.forEach((t=>{t.style.setProperty("z-index","999")})),d.add(t),t.style.setProperty("z-index","1000"),this.tooltipElement.style.setProperty("display","block"),(0,a.g)().addEventListener("keyup",this.hideTooltipByEscape);const e=this.previousSibling,i=this.tooltipElement;this.cleanupAutoPositioning=(0,o.b)(e,i,(()=>{this.alignTooltip()}))}var t},this.hideTooltip=()=>{this.tooltipElement&&(function(t){if(d.delete(t),d.size>0){const t=Array.from(d).pop();t&&t.style.setProperty("z-index","1000")}}(this.tooltipElement),this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)),(0,a.g)().removeEventListener("keyup",this.hideTooltipByEscape)},this.hideTooltipByEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addListeners=t=>{t.addEventListener("mouseenter",this.handleMouseEnter.bind(this)),t.addEventListener("mouseleave",this.handleMouseleave.bind(this)),t.addEventListener("focusin",this.handleFocusIn.bind(this)),t.addEventListener("focusout",this.handleFocusout.bind(this))},this.removeListeners=t=>{t.removeEventListener("mouseenter",this.handleMouseEnter.bind(this)),t.removeEventListener("mouseleave",this.handleMouseleave.bind(this)),t.removeEventListener("focusin",this.handleFocusIn.bind(this)),t.removeEventListener("focusout",this.handleFocusout.bind(this))},this.resyncListeners=(t,e,i=!1)=>{t&&this.removeListeners(t),e&&(i&&(this.previousSibling=e),this.addListeners(e))},this.catchTooltipElement=t=>{this.tooltipElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{this.hasMouseIn||this.hasFocusIn?this.showTooltip():this.hideTooltip()}),300)},this._badgeText=void 0,this._align="top",this._id=void 0,this._label=void 0,this.state={_align:"top",_label:""}}alignTooltip(){return t=this,e=function*(){this.tooltipElement&&this.previousSibling&&(yield(0,o.a)({align:this._align,referenceElement:this.previousSibling,arrowElement:this.arrowElement,floatingElement:this.tooltipElement}))},new Promise(((i,s)=>{var o=t=>{try{l(e.next(t))}catch(t){s(t)}},n=t=>{try{l(e.throw(t))}catch(t){s(t)}},l=t=>t.done?i(t.value):Promise.resolve(t.value).then(o,n);l((e=e.apply(t,null)).next())}));var t,e}handleMouseEnter(){this.hasMouseIn=!0,this.showOrHideTooltip()}handleMouseleave(){this.hasMouseIn=!1,this.showOrHideTooltip()}handleFocusIn(){this.hasFocusIn=!0,this.showOrHideTooltip()}handleFocusout(){this.hasFocusIn=!1,this.showOrHideTooltip()}render(){return(0,s.h)(s.H,{key:"2be9c5d6962bdad636626a1751cea1b631db421a",class:"kol-tooltip-wc"},""!==this.state._label&&(0,s.h)("div",{key:"3161307174c34c73eb4e15c0a0d5d0a8fe4a5cb7",class:"tooltip-floating",ref:this.catchTooltipElement},(0,s.h)("div",{key:"c622d8585cff191a2e6f5fc978cfbf06558cfe7b",class:"tooltip-area tooltip-arrow",ref:this.catchArrowElement}),(0,s.h)(n.K,{key:"b6083e4cef6e04136e86168a8fa4c8a8fdff43af",class:"tooltip-area tooltip-content",id:this.state._id,badgeText:this._badgeText,label:this.state._label})))}validateBadgeText(t){((t,e)=>{(0,l.i)(t,"_badgeText",e)})(this,t)}validateAlign(t){(0,h.v)(this,t)}validateId(t){((t,e)=>{(0,l.i)(t,"_id",e)})(this,t)}validateLabel(t){(0,r.v)(this,t,{required:!0})}componentWillLoad(){this.validateBadgeText(this._badgeText),this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}handleEventListeners(){var t;this.resyncListeners(this.previousSibling,null===(t=this.host)||void 0===t?void 0:t.previousElementSibling,!0),this.resyncListeners(this.tooltipElement,this.tooltipElement)}connectedCallback(){var t;this.previousSibling=null===(t=this.host)||void 0===t?void 0:t.previousElementSibling}componentDidRender(){this.handleEventListeners()}disconnectedCallback(){this.previousSibling&&(this.removeListeners(this.previousSibling),this.previousSibling=void 0),this.tooltipElement&&this.removeListeners(this.tooltipElement),this.cleanupAutoPositioning&&this.cleanupAutoPositioning()}get host(){return(0,s.g)(this)}static get watchers(){return{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}}},1085:(t,e,i)=>{i.d(e,{a:()=>c,b:()=>a,c:()=>h,h:()=>o,v:()=>d});var s=i(4058);const o=[0,1,2,3,4,5,6],n=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function a(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 h(t){return l.test(t)}const r=new Set(["string"]),d=(t,e,i={})=>{(0,s.w)(t,"_label",(t=>"string"==typeof t),r,e,function(t){var e;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(e,i,o,n)=>{var l,r;"function"==typeof(null===(l=t.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(r=t.hooks)||void 0===r||r.afterPatch(e,i,o,n)),"string"==typeof e&&!1===a(e,3)&&!1===h(e)&&(0,s.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,s.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=t.hooks)||void 0===e?void 0:e.beforePatch}})}(i))},c=d}}]);