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

package/dist/3064.js

@@ -1,2 +1,2 @@
 /*! For license information please see 3064.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3064],{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))}))}}}},2533:(t,e,n)=>{n.d(e,{I:()=>d,a:()=>p,b:()=>s,f:()=>h,v:()=>r});var i=n(4932),o=n(4058),a=n(1085);const l=t=>{if("object"==typeof t&&null!==t){if("string"==typeof t.label&&t.label.length>0)return t.disabled=!0===t.disabled,t.label=`${t.label}`.trim(),!1===(0,a.b)(t.label,3)&&!1===(0,a.c)(t.label)&&(0,o.a)(`A differing Aria-Label (${t.label}) is not accessible. A differing Aria-Label should consist of at least three readable characters.`),!Array.isArray(t.options)||void 0===t.options.find((t=>!1===l(t)));if("number"==typeof t.label)return!0}return!1},s=(t,e,n={})=>{(0,o.g)(t,"_options",(t=>"object"==typeof t&&null!==t&&"string"==typeof t.label&&t.label.length>0),e,void 0,n)},r=(t,e,n={})=>{(0,o.g)(t,"_options",l,e,void 0,n)},c=["horizontal","vertical"],h=(t,e,n="")=>{e.forEach(((e,i)=>{const o=`${n}-${i}`;"object"==typeof e&&null!==e&&"string"==typeof e.label&&e.label.length>0&&(Array.isArray(e.options)?h(t,e.options,o):t.set(o,e))}))};class d extends i.I{constructor(t,e,n){super(t,e,n),this.component=t}validateRequired(t){((t,e)=>{(0,o.b)(t,"_required",e)})(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateRequired(this.component._required)}}class p extends d{constructor(t,e,n){super(t,e,n),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.afterPatchOptions=(t,e,n,i)=>{"_value"===i&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const n=e.has("_options")?e.get("_options"):this.component.state._options;Array.isArray(n)&&n.length>0&&(this.keyOptionMap.clear(),h(this.keyOptionMap,n))},this.component=t}validateOrientation(t){(0,o.w)(this.component,"_orientation",(t=>"string"==typeof t&&c.includes(t)),new Set([`Orientation {${c.join(", ")}`]),t,{defaultValue:"vertical"})}validateOptions(t){s(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateValue(t){t=(0,o.m)(t),t=Array.isArray(t)?t[0]:t,(0,o.s)(this.component,"_value",t,{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions})}componentWillLoad(){super.componentWillLoad(),this.validateOrientation(this.component._orientation),this.validateOptions(this.component._options),this.validateValue(this.component._value)}}},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)}}}))}))}},3064:(t,e,n)=>{n.r(e),n.d(e,{kol_select:()=>y});var i=n(1405),o=n(2385),a=n(6855),l=n(4932),s=n(324),r=n(2533),c=n(40),h=n(4058),d=n(7883),p=n(6179),u=n(4851),b=n(1523),v=(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 f extends s.I{constructor(t,e,n){super(t,e,n),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.afterPatchOptions=(t,e,n,i)=>{"_value"===i&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const n=e.has("_options")?e.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),(0,r.f)(this.keyOptionMap,n);const t=e.has("_value")?e.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],n);!1===this.component._multiple&&0===i.length?e.set("_value",[n[0].value]):Array.isArray(t)&&i.length<t.length&&e.set("_value",i)}},this.component=t}validateOptions(t){(0,r.v)(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(t){(0,h.b)(this.component,"_multiple",t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(t){(0,h.b)(this.component,"_required",t)}validateRows(t){(0,c.v)(this.component,t)}validateValue(t){(0,h.g)(this.component,"_value",(()=>!0),t,void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const m=(t,e)=>Array.isArray(t)&&t.includes(e),y=class{getValue(){return v(this,null,(function*(){return this.state._value}))}focus(){return v(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return v(this,null,(function*(){var t;null===(t=this.selectRef)||void 0===t||t.focus()}))}renderOptgroup(t,e){var n;return(0,i.h)("optgroup",{disabled:t.disabled,label:t.label},null===(n=t.options)||void 0===n?void 0:n.map(((t,n)=>{const o=`${e}-${n}`;return Array.isArray(t.options)?this.renderOptgroup(t,o):(0,i.h)("option",{disabled:t.disabled,key:o,selected:m(this.state._value,t.value),value:o},t.label)})))}render(){const{ariaDescribedBy:t}=(0,l.g)(this.state),e=(0,b.s)(this.state._label);return(0,i.h)(i.H,{key:"781ee5c8a0f06b40809df3eb1ca259d394858029",class:{"kol-select":!0,"has-value":this.state._hasValue}},(0,i.h)(d.i,{key:"918339cc9061e302ede073ad75fb5dfce432d38a",class:{"hide-label":!!this.state._hideLabel,select:!0},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.selectRef)||void 0===t?void 0:t.focus()},role:"presentation"},(0,i.h)("span",{key:"d8053b877544b80d61ec3a413b7035dda5c7cfdf",slot:"label"},e?(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)(u.I,{badgeText:(0,b.b)(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",(0,i.h)("span",{class:"access-key-hint","aria-hidden":"true"},(0,b.b)(this.state._accessKey,this.state._shortKey))):(0,i.h)("span",null,this.state._label)),(0,i.h)("div",{key:"d3141a061c1cd33c2e9a9e1859c29665fc3a5ef0",slot:"input"},(0,i.h)("form",{key:"bb47b78ba691b6f679aa29297b29add0bbe4e5cb",onSubmit:t=>{t.preventDefault(),(0,p.p)({form:this.host,ref:this.selectRef})}},(0,i.h)("input",{key:"1d39fa654c03ea34a283ca68f7b0a83506e0d732",type:"submit",hidden:!0}),(0,i.h)("select",Object.assign({key:"badb564a4bc7267abf5f24330b18d3bcaeecbc4d",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",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._rows,spellcheck:"false"},this.controller.onFacade,{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}}),this.state._options.map(((t,e)=>{const n=`-${e}`;return Array.isArray(t.options)?this.renderOptgroup(t,n):(0,i.h)("option",{disabled:t.disabled,key:n,selected:m(this.state._value,t.value),value:n},t.label)})))))))}constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.selectRef=t},this._accessKey=void 0,this._alert=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._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${(0,o.n)()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new f(this,"select",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)}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)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateShortKey(t){this.controller.validateShortKey(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))}onInput(t){var e,n,i;this._value=Array.from((null===(e=this.selectRef)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),(0,a.t)("input",this.host,this._value),null===(i=null===(n=this.state._on)||void 0===n?void 0:n.onInput)||void 0===i||i.call(n,t,this._value)}onChange(t){var e,n;(0,a.s)(t),(0,a.t)("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),null===(n=null===(e=this.state._on)||void 0===e?void 0:e.onChange)||void 0===n||n.call(e,t,this._value)}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};y.style={default:"@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 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  :host option:checked::before {\n    content: \"✓ \";\n  }\n}"}},40:(t,e,n)=>{n.d(e,{v:()=>o});var i=n(4058);const o=(t,e)=>{(0,i.k)(t,"_rows",e,{min:1})}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3064],{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))}))}}}},2533:(t,e,n)=>{n.d(e,{I:()=>d,a:()=>p,b:()=>s,f:()=>h,v:()=>r});var i=n(4932),o=n(4058),a=n(1085);const l=t=>{if("object"==typeof t&&null!==t){if("string"==typeof t.label&&t.label.length>0)return t.disabled=!0===t.disabled,t.label=`${t.label}`.trim(),!1===(0,a.b)(t.label,3)&&!1===(0,a.c)(t.label)&&(0,o.a)(`A differing Aria-Label (${t.label}) is not accessible. A differing Aria-Label should consist of at least three readable characters.`),!Array.isArray(t.options)||void 0===t.options.find((t=>!1===l(t)));if("number"==typeof t.label)return!0}return!1},s=(t,e,n={})=>{(0,o.g)(t,"_options",(t=>"object"==typeof t&&null!==t&&"string"==typeof t.label&&t.label.length>0),e,void 0,n)},r=(t,e,n={})=>{(0,o.g)(t,"_options",l,e,void 0,n)},c=["horizontal","vertical"],h=(t,e,n="")=>{e.forEach(((e,i)=>{const o=`${n}-${i}`;"object"==typeof e&&null!==e&&"string"==typeof e.label&&e.label.length>0&&(Array.isArray(e.options)?h(t,e.options,o):t.set(o,e))}))};class d extends i.I{constructor(t,e,n){super(t,e,n),this.component=t}validateRequired(t){((t,e)=>{(0,o.b)(t,"_required",e)})(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateRequired(this.component._required)}}class p extends d{constructor(t,e,n){super(t,e,n),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.afterPatchOptions=(t,e,n,i)=>{"_value"===i&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const n=e.has("_options")?e.get("_options"):this.component.state._options;Array.isArray(n)&&n.length>0&&(this.keyOptionMap.clear(),h(this.keyOptionMap,n))},this.component=t}validateOrientation(t){(0,o.w)(this.component,"_orientation",(t=>"string"==typeof t&&c.includes(t)),new Set([`Orientation {${c.join(", ")}`]),t,{defaultValue:"vertical"})}validateOptions(t){s(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateValue(t){t=(0,o.m)(t),t=Array.isArray(t)?t[0]:t,(0,o.s)(this.component,"_value",t,{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions})}componentWillLoad(){super.componentWillLoad(),this.validateOrientation(this.component._orientation),this.validateOptions(this.component._options),this.validateValue(this.component._value)}}},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)}}}))}))}},3064:(t,e,n)=>{n.r(e),n.d(e,{kol_select:()=>y});var i=n(1114),o=n(6762),a=n(6855),l=n(4932),s=n(324),r=n(2533),c=n(40),h=n(4058),d=n(7883),p=n(6179),u=n(9196),b=n(1523),v=(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 f extends s.I{constructor(t,e,n){super(t,e,n),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.afterPatchOptions=(t,e,n,i)=>{"_value"===i&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const n=e.has("_options")?e.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),(0,r.f)(this.keyOptionMap,n);const t=e.has("_value")?e.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],n);!1===this.component._multiple&&0===i.length?e.set("_value",[n[0].value]):Array.isArray(t)&&i.length<t.length&&e.set("_value",i)}},this.component=t}validateOptions(t){(0,r.v)(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(t){(0,h.b)(this.component,"_multiple",t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(t){(0,h.b)(this.component,"_required",t)}validateRows(t){(0,c.v)(this.component,t)}validateValue(t){(0,h.g)(this.component,"_value",(()=>!0),t,void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const m=(t,e)=>Array.isArray(t)&&t.includes(e),y=class{getValue(){return v(this,null,(function*(){return this.state._value}))}focus(){return v(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return v(this,null,(function*(){var t;null===(t=this.selectRef)||void 0===t||t.focus()}))}renderOptgroup(t,e){var n;return(0,i.h)("optgroup",{disabled:t.disabled,label:t.label},null===(n=t.options)||void 0===n?void 0:n.map(((t,n)=>{const o=`${e}-${n}`;return Array.isArray(t.options)?this.renderOptgroup(t,o):(0,i.h)("option",{disabled:t.disabled,key:o,selected:m(this.state._value,t.value),value:o},t.label)})))}render(){const{ariaDescribedBy:t}=(0,l.g)(this.state),e=(0,b.s)(this.state._label);return(0,i.h)(i.H,{key:"781ee5c8a0f06b40809df3eb1ca259d394858029",class:{"kol-select":!0,"has-value":this.state._hasValue}},(0,i.h)(d.i,{key:"918339cc9061e302ede073ad75fb5dfce432d38a",class:{"hide-label":!!this.state._hideLabel,select:!0},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.selectRef)||void 0===t?void 0:t.focus()},role:"presentation"},(0,i.h)("span",{key:"d8053b877544b80d61ec3a413b7035dda5c7cfdf",slot:"label"},e?(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)(u.I,{badgeText:(0,b.b)(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",(0,i.h)("span",{class:"access-key-hint","aria-hidden":"true"},(0,b.b)(this.state._accessKey,this.state._shortKey))):(0,i.h)("span",null,this.state._label)),(0,i.h)("div",{key:"d3141a061c1cd33c2e9a9e1859c29665fc3a5ef0",slot:"input"},(0,i.h)("form",{key:"bb47b78ba691b6f679aa29297b29add0bbe4e5cb",onSubmit:t=>{t.preventDefault(),(0,p.p)({form:this.host,ref:this.selectRef})}},(0,i.h)("input",{key:"1d39fa654c03ea34a283ca68f7b0a83506e0d732",type:"submit",hidden:!0}),(0,i.h)("select",Object.assign({key:"badb564a4bc7267abf5f24330b18d3bcaeecbc4d",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",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._rows,spellcheck:"false"},this.controller.onFacade,{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}}),this.state._options.map(((t,e)=>{const n=`-${e}`;return Array.isArray(t.options)?this.renderOptgroup(t,n):(0,i.h)("option",{disabled:t.disabled,key:n,selected:m(this.state._value,t.value),value:n},t.label)})))))))}constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.selectRef=t},this._accessKey=void 0,this._alert=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._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${(0,o.n)()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new f(this,"select",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)}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)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateShortKey(t){this.controller.validateShortKey(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))}onInput(t){var e,n,i;this._value=Array.from((null===(e=this.selectRef)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),(0,a.t)("input",this.host,this._value),null===(i=null===(n=this.state._on)||void 0===n?void 0:n.onInput)||void 0===i||i.call(n,t,this._value)}onChange(t){var e,n;(0,a.s)(t),(0,a.t)("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),null===(n=null===(e=this.state._on)||void 0===e?void 0:e.onChange)||void 0===n||n.call(e,t,this._value)}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};y.style={default:"@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 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  :host option:checked::before {\n    content: \"✓ \";\n  }\n}"}},40:(t,e,n)=>{n.d(e,{v:()=>o});var i=n(4058);const o=(t,e)=>{(0,i.k)(t,"_rows",e,{min:1})}}}]);

package/dist/3077.js

@@ -1,2 +1,2 @@
 /*! For license information please see 3077.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3077],{3077:(n,e,t)=>{t.r(e),t.d(e,{kol_avatar:()=>a});var i=t(1405),o=t(7883);const a=class{constructor(n){(0,i.r)(this,n),this._src=void 0,this._label=void 0}render(){return(0,i.h)(i.H,{key:"177cf2f61660902db5c1680e3e10fc7f3c567695",class:"kol-avatar"},(0,i.h)(o.c,{key:"9103d11ec31279584865dd3acf92a9ef0d04ca61",_src:this._src,_label:this._label}))}};a.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  .container {\n    border-radius: 50%;\n    overflow: hidden;\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n    /*theme?*/\n    width: calc(100rem / var(--kolibri-root-font-size, 16));\n    height: calc(100rem / var(--kolibri-root-font-size, 16));\n  }\n  .image {\n    width: 100%;\n    height: 100%;\n  }\n  .initials {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    /*theme?*/\n    background-color: #d3d3d3;\n    font-size: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n}"}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3077],{3077:(n,e,t)=>{t.r(e),t.d(e,{kol_avatar:()=>a});var i=t(1114),o=t(7883);const a=class{constructor(n){(0,i.r)(this,n),this._src=void 0,this._label=void 0}render(){return(0,i.h)(i.H,{key:"177cf2f61660902db5c1680e3e10fc7f3c567695",class:"kol-avatar"},(0,i.h)(o.c,{key:"9103d11ec31279584865dd3acf92a9ef0d04ca61",_src:this._src,_label:this._label}))}};a.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  .container {\n    border-radius: 50%;\n    overflow: hidden;\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n    /*theme?*/\n    width: calc(100rem / var(--kolibri-root-font-size, 16));\n    height: calc(100rem / var(--kolibri-root-font-size, 16));\n  }\n  .image {\n    width: 100%;\n    height: 100%;\n  }\n  .initials {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    /*theme?*/\n    background-color: #d3d3d3;\n    font-size: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n}"}}}]);

package/dist/3238.js

@@ -1,2 +1,2 @@
 /*! For license information please see 3238.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3238],{3260:(t,e,n)=>{n.d(e,{S:()=>s,a:()=>o,b:()=>i,i:()=>a});const i=t=>"object"==typeof t&&null!==t,a=(t,e=0)=>"string"==typeof t&&t.length>=e,o=t=>{if("object"!=typeof t||null===t)return a(t,1);for(const e in t)if(!1===a(e,1))return!1;return!0},s=new Event("StateChange")},324:(t,e,n)=>{n.d(e,{I:()=>r});var i=n(4932),a=n(5670),o=n(4058),s=n(3260);const l=(t,e)=>{const n=t;"object"==typeof n&&null!==n&&((0,s.i)(n.right,1)&&(n.right={icon:n.right}),(0,s.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,o.o)(t,(()=>{try{t=(0,o.p)(t)}catch(t){}(0,o.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,s.i)(t.left,1)||(0,a.i)(t.left)||(0,s.i)(t.right,1)||(0,a.i)(t.right))),new Set(["KoliBriHorizontalIcon"]),t,{hooks:{beforePatch:l},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},2827:(t,e,n)=>{n.d(e,{v:()=>a});var i=n(4058);const a=(t,e,n)=>{(0,i.b)(t,"_hasCounter",e,n)}},5670:(t,e,n)=>{n.d(e,{i:()=>s,v:()=>l});var i=n(4058),a=n(3260);const o=(t,e,n)=>{(0,a.b)(n)?t[e]=n:(0,a.i)(n,1)&&(t[e]={icon:n})},s=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,a.a)(t.style))&&(void 0===t.label||(0,a.i)(t.label))&&(0,a.i)(t.icon,1),l=(t,e,n={})=>{(0,i.o)(e,(()=>{var l;try{e=(0,i.p)(e)}catch(t){}(0,i.w)(t,"_icons",(t=>{const e="object"==typeof t&&null!==t&&0===Object.keys(t).length;return null===t||e||(0,a.i)(t,1)||"object"==typeof t&&null!==t&&((0,a.i)(t.left,1)||s(t.left)||(0,a.i)(t.right,1)||s(t.right)||(0,a.i)(t.top,1)||s(t.top)||(0,a.i)(t.bottom,1)||s(t.bottom))}),new Set(["KoliBriIcon"]),e,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(l=n.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(t,e,i,s)=>{var l,r;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(t,e,i,s)),(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,a.i)(t,1)?e={left:{icon:t}}:"object"==typeof t&&null!==t&&(o(e,"top",t.top),o(e,"right",t.right),o(e,"bottom",t.bottom),o(e,"left",t.left)),e})(e))}})(i)}}}))}))}},3238:(t,e,n)=>{n.r(e),n.d(e,{kol_textarea:()=>_});var i=n(1405),a=n(2385),o=n(4932),s=n(324),l=n(2827),r=n(4058),h=n(40),d=n(7883),c=n(4851),u=n(1523),p=(t,e,n)=>new Promise(((i,a)=>{var o=t=>{try{l(n.next(t))}catch(t){a(t)}},s=t=>{try{l(n.throw(t))}catch(t){a(t)}},l=t=>t.done?i(t.value):Promise.resolve(t.value).then(o,s);l((n=n.apply(t,e)).next())}));const v=["both","horizontal","vertical","none"];class b extends s.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}validateHasCounter(t){(0,l.v)(this.component,t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(t){(0,r.k)(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(t){(0,r.i)(this.component,"_placeholder",t)}validateReadOnly(t){(0,r.b)(this.component,"_readOnly",t)}validateResize(t){(0,r.w)(this.component,"_resize",(t=>"string"==typeof t&&v.includes(t)),new Set(`String {${v.join(", ")}`),t)}validateRequired(t){(0,r.b)(this.component,"_required",t)}validateRows(t){(0,h.v)(this.component,t)}validateValue(t){(0,r.i)(this.component,"_value",t,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const f=t=>{t.style.overflow="hidden";const e=t.rows,n=t.clientHeight/e;t.rows=1;const i=Math.round(t.scrollHeight/n);return t.rows=e,i},_=class{getValue(){return p(this,null,(function*(){var t;return null===(t=this.textareaRef)||void 0===t?void 0:t.value}))}focus(){return p(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return p(this,null,(function*(){var t;null===(t=this.textareaRef)||void 0===t||t.focus()}))}render(){const{ariaDescribedBy:t}=(0,o.g)(this.state),e=(0,u.s)(this.state._label);return(0,i.h)(i.H,{key:"4135602a13b0a5716f24bbb3ad6aa85918848f2f",class:{"kol-textarea":!0,"has-value":this.state._hasValue}},(0,i.h)(d.i,{key:"9ba58bdf0ca893ce31b95cfae7d56edf4acd71f7",class:{textarea:!0,"hide-label":!!this.state._hideLabel,"has-counter":!!this.state._hasCounter},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_currentLength:this.state._currentLength,_disabled:this.state._disabled,_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,_maxLength:this.state._maxLength,_msg:this.state._msg,_readOnly:this.state._readOnly,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.textareaRef)||void 0===t?void 0:t.focus()},role:"presentation"},(0,i.h)("span",{key:"6908d9280af4c12ff49e8a4928f7d8cec62d4212",slot:"label"},e?(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)(c.I,{badgeText:(0,u.b)(this.state._accessKey||this.state._shortKey),label:this.state._label})," ",(0,i.h)("span",{class:"access-key-hint","aria-hidden":"true"},(0,u.b)(this.state._accessKey||this.state._shortKey))):(0,i.h)("span",null,this.state._label)),(0,i.h)("div",{key:"b6d57fdd9921cfb7d69388c8519225855e496034",slot:"input"},(0,i.h)("textarea",Object.assign({key:"7294aeff04c51d9b62c61f7e76eeac8de7e8d2e0",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",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,rows:this.state._rows,placeholder:this.state._placeholder,spellcheck:"false"},this.controller.onFacade,{onInput:this.onInput,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1},style:{resize:this.state._resize},value:this.state._value})))))}constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.textareaRef=t},this.onInput=t=>{this.textareaRef instanceof HTMLTextAreaElement&&((0,r.s)(this,"_currentLength",this.textareaRef.value.length),this.state._adjustHeight&&(this._rows=f(this.textareaRef)),this.controller.onFacade.onInput(t))},this._accessKey=void 0,this._adjustHeight=!1,this._alert=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._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._resize="vertical",this._required=!1,this._rows=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${(0,a.n)()}`,_label:"",_resize:"vertical"},this.inputHasFocus=!1,this.controller=new b(this,"textarea",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAdjustHeight(t){this.controller.validateAdjustHeight(t)}validateAlert(t){this.controller.validateAlert(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)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateResize(t){"both"!==t&&"horizontal"!==t||(0,r.l)("In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `none` (default) and `vertical`."),this.controller.validateResize(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateShortKey(t){this.controller.validateShortKey(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)}componentDidLoad(){setTimeout((()=>{var t;!0===this._adjustHeight&&this.textareaRef?this._rows=(null===(t=this.state)||void 0===t?void 0:t._rows)&&this.state._rows>f(this.textareaRef)?this.state._rows:f(this.textareaRef):this._rows||(this._rows=1)}),0)}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"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};_.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  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}"}},40:(t,e,n)=>{n.d(e,{v:()=>a});var i=n(4058);const a=(t,e)=>{(0,i.k)(t,"_rows",e,{min:1})}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3238],{3260:(t,e,n)=>{n.d(e,{S:()=>s,a:()=>o,b:()=>i,i:()=>a});const i=t=>"object"==typeof t&&null!==t,a=(t,e=0)=>"string"==typeof t&&t.length>=e,o=t=>{if("object"!=typeof t||null===t)return a(t,1);for(const e in t)if(!1===a(e,1))return!1;return!0},s=new Event("StateChange")},324:(t,e,n)=>{n.d(e,{I:()=>r});var i=n(4932),a=n(5670),o=n(4058),s=n(3260);const l=(t,e)=>{const n=t;"object"==typeof n&&null!==n&&((0,s.i)(n.right,1)&&(n.right={icon:n.right}),(0,s.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,o.o)(t,(()=>{try{t=(0,o.p)(t)}catch(t){}(0,o.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,s.i)(t.left,1)||(0,a.i)(t.left)||(0,s.i)(t.right,1)||(0,a.i)(t.right))),new Set(["KoliBriHorizontalIcon"]),t,{hooks:{beforePatch:l},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},2827:(t,e,n)=>{n.d(e,{v:()=>a});var i=n(4058);const a=(t,e,n)=>{(0,i.b)(t,"_hasCounter",e,n)}},5670:(t,e,n)=>{n.d(e,{i:()=>s,v:()=>l});var i=n(4058),a=n(3260);const o=(t,e,n)=>{(0,a.b)(n)?t[e]=n:(0,a.i)(n,1)&&(t[e]={icon:n})},s=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,a.a)(t.style))&&(void 0===t.label||(0,a.i)(t.label))&&(0,a.i)(t.icon,1),l=(t,e,n={})=>{(0,i.o)(e,(()=>{var l;try{e=(0,i.p)(e)}catch(t){}(0,i.w)(t,"_icons",(t=>{const e="object"==typeof t&&null!==t&&0===Object.keys(t).length;return null===t||e||(0,a.i)(t,1)||"object"==typeof t&&null!==t&&((0,a.i)(t.left,1)||s(t.left)||(0,a.i)(t.right,1)||s(t.right)||(0,a.i)(t.top,1)||s(t.top)||(0,a.i)(t.bottom,1)||s(t.bottom))}),new Set(["KoliBriIcon"]),e,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(l=n.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(t,e,i,s)=>{var l,r;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(t,e,i,s)),(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,a.i)(t,1)?e={left:{icon:t}}:"object"==typeof t&&null!==t&&(o(e,"top",t.top),o(e,"right",t.right),o(e,"bottom",t.bottom),o(e,"left",t.left)),e})(e))}})(i)}}}))}))}},3238:(t,e,n)=>{n.r(e),n.d(e,{kol_textarea:()=>_});var i=n(1114),a=n(6762),o=n(4932),s=n(324),l=n(2827),r=n(4058),h=n(40),d=n(7883),c=n(9196),u=n(1523),p=(t,e,n)=>new Promise(((i,a)=>{var o=t=>{try{l(n.next(t))}catch(t){a(t)}},s=t=>{try{l(n.throw(t))}catch(t){a(t)}},l=t=>t.done?i(t.value):Promise.resolve(t.value).then(o,s);l((n=n.apply(t,e)).next())}));const v=["both","horizontal","vertical","none"];class b extends s.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}validateHasCounter(t){(0,l.v)(this.component,t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(t){(0,r.k)(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(t){(0,r.i)(this.component,"_placeholder",t)}validateReadOnly(t){(0,r.b)(this.component,"_readOnly",t)}validateResize(t){(0,r.w)(this.component,"_resize",(t=>"string"==typeof t&&v.includes(t)),new Set(`String {${v.join(", ")}`),t)}validateRequired(t){(0,r.b)(this.component,"_required",t)}validateRows(t){(0,h.v)(this.component,t)}validateValue(t){(0,r.i)(this.component,"_value",t,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const f=t=>{t.style.overflow="hidden";const e=t.rows,n=t.clientHeight/e;t.rows=1;const i=Math.round(t.scrollHeight/n);return t.rows=e,i},_=class{getValue(){return p(this,null,(function*(){var t;return null===(t=this.textareaRef)||void 0===t?void 0:t.value}))}focus(){return p(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return p(this,null,(function*(){var t;null===(t=this.textareaRef)||void 0===t||t.focus()}))}render(){const{ariaDescribedBy:t}=(0,o.g)(this.state),e=(0,u.s)(this.state._label);return(0,i.h)(i.H,{key:"4135602a13b0a5716f24bbb3ad6aa85918848f2f",class:{"kol-textarea":!0,"has-value":this.state._hasValue}},(0,i.h)(d.i,{key:"9ba58bdf0ca893ce31b95cfae7d56edf4acd71f7",class:{textarea:!0,"hide-label":!!this.state._hideLabel,"has-counter":!!this.state._hasCounter},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_currentLength:this.state._currentLength,_disabled:this.state._disabled,_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,_maxLength:this.state._maxLength,_msg:this.state._msg,_readOnly:this.state._readOnly,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.textareaRef)||void 0===t?void 0:t.focus()},role:"presentation"},(0,i.h)("span",{key:"6908d9280af4c12ff49e8a4928f7d8cec62d4212",slot:"label"},e?(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)(c.I,{badgeText:(0,u.b)(this.state._accessKey||this.state._shortKey),label:this.state._label})," ",(0,i.h)("span",{class:"access-key-hint","aria-hidden":"true"},(0,u.b)(this.state._accessKey||this.state._shortKey))):(0,i.h)("span",null,this.state._label)),(0,i.h)("div",{key:"b6d57fdd9921cfb7d69388c8519225855e496034",slot:"input"},(0,i.h)("textarea",Object.assign({key:"7294aeff04c51d9b62c61f7e76eeac8de7e8d2e0",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",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,rows:this.state._rows,placeholder:this.state._placeholder,spellcheck:"false"},this.controller.onFacade,{onInput:this.onInput,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1},style:{resize:this.state._resize},value:this.state._value})))))}constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.textareaRef=t},this.onInput=t=>{this.textareaRef instanceof HTMLTextAreaElement&&((0,r.s)(this,"_currentLength",this.textareaRef.value.length),this.state._adjustHeight&&(this._rows=f(this.textareaRef)),this.controller.onFacade.onInput(t))},this._accessKey=void 0,this._adjustHeight=!1,this._alert=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._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._resize="vertical",this._required=!1,this._rows=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${(0,a.n)()}`,_label:"",_resize:"vertical"},this.inputHasFocus=!1,this.controller=new b(this,"textarea",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAdjustHeight(t){this.controller.validateAdjustHeight(t)}validateAlert(t){this.controller.validateAlert(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)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateResize(t){"both"!==t&&"horizontal"!==t||(0,r.l)("In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `none` (default) and `vertical`."),this.controller.validateResize(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateShortKey(t){this.controller.validateShortKey(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)}componentDidLoad(){setTimeout((()=>{var t;!0===this._adjustHeight&&this.textareaRef?this._rows=(null===(t=this.state)||void 0===t?void 0:t._rows)&&this.state._rows>f(this.textareaRef)?this.state._rows:f(this.textareaRef):this._rows||(this._rows=1)}),0)}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"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};_.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  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}"}},40:(t,e,n)=>{n.d(e,{v:()=>a});var i=n(4058);const a=(t,e)=>{(0,i.k)(t,"_rows",e,{min:1})}}}]);

package/dist/3395.js

@@ -1,2 +1,2 @@
 /*! For license information please see 3395.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3395],{3395:(e,t,l)=>{l.r(t),l.d(t,{kol_tree_wc:()=>a});var n=l(1405),i=l(7883),r=l(1085),s=(e,t,l)=>new Promise(((n,i)=>{var r=e=>{try{a(l.next(e))}catch(e){i(e)}},s=e=>{try{a(l.throw(e))}catch(e){i(e)}},a=e=>e.done?n(e.value):Promise.resolve(e.value).then(r,s);a((l=l.apply(e,t)).next())}));const a=class{constructor(e){(0,n.r)(this,e),this.state={_label:""},this._label=void 0}validateLabel(e){(0,r.v)(this,e)}render(){return(0,n.h)(n.H,{key:"ad65346e8db982318e484ae14398e88771aaf578",onSlotchange:this.handleSlotchange.bind(this),class:"kol-tree-wc"},(0,n.h)("nav",{key:"f8f6d27f264d1c01a5bc085d8c89d99143cf3ab9",class:"tree","aria-label":this.state._label},(0,n.h)("ul",{key:"7e218f99d2294cf105b1da4eb59d7702112b5e15",class:"treeview-navigation",role:"tree","aria-label":this.state._label},(0,n.h)("slot",{key:"ca1a4e394d575c7f947852b17729ac55b82e9ca7"}))))}static isTreeItem(e){return(null==e?void 0:e.tagName)===i.w.toUpperCase()}componentWillLoad(){this.validateLabel(this._label),this.handleTreeChange(),this.observeChildListMutations()}disconnectedCallback(){var e;null===(e=this.observer)||void 0===e||e.disconnect()}observeChildListMutations(){this.observer=new MutationObserver(this.handleTreeChange.bind(this)),this.observeTopLevelItems()}handleSlotchange(){this.observeTopLevelItems(),this.handleTreeChange()}observeTopLevelItems(){var e;null===(e=this.getTopLevelTreeItems())||void 0===e||e.forEach((e=>{var t;null===(t=this.observer)||void 0===t||t.observe(e,{childList:!0,subtree:!0})}))}getTopLevelTreeItems(){var e,t,l;return null===(l=null===(t=null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedNodes)||void 0===t?void 0:t.call(e))||void 0===l?void 0:l.filter(a.isTreeItem)}handleTreeChange(){this.treeItemElements=this.getTreeItemElements(),this.ensureActiveItemVisibility()}getTreeItemElements(){var e;return null===(e=this.getTopLevelTreeItems())||void 0===e?void 0:e.reduce(((e,t)=>{const l=t.querySelectorAll(i.w);return[...e,t,...l]}),[])}getOpenTreeItemElements(){return s(this,null,(function*(){if(!this.treeItemElements)return;const e=t=>s(this,null,(function*(){return!a.isTreeItem(t.parentElement)||(yield t.parentElement.isOpen())&&(yield e(t.parentElement))}));return(yield Promise.all(this.treeItemElements.map((t=>s(this,null,(function*(){return{value:t,include:yield e(t)}})))))).filter((e=>e.include)).map((e=>e.value))}))}handleKeyDown(e){return s(this,null,(function*(){var t,l,n,r,s,a,o,c,d;const u=yield this.getOpenTreeItemElements(),v=null===(t=document.activeElement)||void 0===t?void 0:t.closest(i.w);if(!u||!v)return;const h=null==u?void 0:u.findIndex((e=>e===v));switch(e.key){case"ArrowDown":yield null===(l=u[h+1])||void 0===l?void 0:l.focusLink(),e.preventDefault();break;case"ArrowUp":yield null===(n=u[h-1])||void 0===n?void 0:n.focusLink(),e.preventDefault();break;case"Right":case"ArrowRight":e.preventDefault(),(yield v.isOpen())?yield null===(r=u[h+1])||void 0===r?void 0:r.focusLink():yield v.expand();break;case"Left":case"ArrowLeft":if(e.preventDefault(),yield v.isOpen())yield v.collapse();else{const e=u.findIndex((e=>e===v.parentElement));-1!==e&&(yield null===(s=u[e])||void 0===s?void 0:s.focusLink())}break;case"Home":yield null===(a=u[0])||void 0===a?void 0:a.focusLink(),e.preventDefault();break;case"End":yield null===(o=u[u.length-1])||void 0===o?void 0:o.focusLink(),e.preventDefault();break;case null===(c=e.key.match(/[a-zA-Z0-9]/))||void 0===c?void 0:c.input:{const t=e.key.toLowerCase(),l=u.indexOf(v)+1,n=u.concat(u),i=n.slice(l,l+u.length).findIndex((e=>{var l;return null===(l=e.getAttribute("_label"))||void 0===l?void 0:l.trim().toLowerCase().startsWith(t)}));-1!==i&&(yield n[l+i].focusLink(),e.preventDefault());break}case"*":{const e=null===(d=v.parentElement)||void 0===d?void 0:d.querySelectorAll(i.w);null==e||e.forEach((e=>{e.expand()}));break}}}))}handleFocusOut(e){return s(this,null,(function*(){e.relatedTarget&&!e.relatedTarget.closest(i.v)&&(yield this.ensureActiveItemVisibility())}))}ensureActiveItemVisibility(){return s(this,null,(function*(){const e=t=>{a.isTreeItem(t.parentElement)&&(t.parentElement.expand(),e(t.parentElement))},t=(()=>{var e,t,l,n;const r=null!==(n=null===(l=null===(t=null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedNodes)||void 0===t?void 0:t.call(e))||void 0===l?void 0:l.filter(a.isTreeItem))&&void 0!==n?n:[];for(const e of r){if(e._active)return e;const t=e.querySelector(`${i.w}[_active="true"]`);if(t&&t._active)return t}})();t&&e(t)}))}get host(){return(0,n.g)(this)}static get watchers(){return{_label:["validateLabel"]}}}},1085:(e,t,l)=>{l.d(t,{a:()=>u,b:()=>a,c:()=>o,h:()=>i,v:()=>d});var n=l(4058);const i=[0,1,2,3,4,5,6],r=/[a-zA-Z0-9äöüÄÖÜß]/g,s=/^\d+$/;function a(e,t=1){return function(e){var t;return"string"==typeof e&&(null===(t=e.match(r))||void 0===t?void 0:t.length)||0}(e)>=t}function o(e){return s.test(e)}const c=new Set(["string"]),d=(e,t,l={})=>{(0,n.w)(e,"_label",(e=>"string"==typeof e),c,t,function(e){var t;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(t,l,i,r)=>{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,l,i,r)),"string"==typeof t&&!1===a(t,3)&&!1===o(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}})}(l))},u=d}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3395],{3395:(e,t,l)=>{l.r(t),l.d(t,{kol_tree_wc:()=>a});var n=l(1114),i=l(7883),r=l(1085),s=(e,t,l)=>new Promise(((n,i)=>{var r=e=>{try{a(l.next(e))}catch(e){i(e)}},s=e=>{try{a(l.throw(e))}catch(e){i(e)}},a=e=>e.done?n(e.value):Promise.resolve(e.value).then(r,s);a((l=l.apply(e,t)).next())}));const a=class{constructor(e){(0,n.r)(this,e),this.state={_label:""},this._label=void 0}validateLabel(e){(0,r.v)(this,e)}render(){return(0,n.h)(n.H,{key:"ad65346e8db982318e484ae14398e88771aaf578",onSlotchange:this.handleSlotchange.bind(this),class:"kol-tree-wc"},(0,n.h)("nav",{key:"f8f6d27f264d1c01a5bc085d8c89d99143cf3ab9",class:"tree","aria-label":this.state._label},(0,n.h)("ul",{key:"7e218f99d2294cf105b1da4eb59d7702112b5e15",class:"treeview-navigation",role:"tree","aria-label":this.state._label},(0,n.h)("slot",{key:"ca1a4e394d575c7f947852b17729ac55b82e9ca7"}))))}static isTreeItem(e){return(null==e?void 0:e.tagName)===i.w.toUpperCase()}componentWillLoad(){this.validateLabel(this._label),this.handleTreeChange(),this.observeChildListMutations()}disconnectedCallback(){var e;null===(e=this.observer)||void 0===e||e.disconnect()}observeChildListMutations(){this.observer=new MutationObserver(this.handleTreeChange.bind(this)),this.observeTopLevelItems()}handleSlotchange(){this.observeTopLevelItems(),this.handleTreeChange()}observeTopLevelItems(){var e;null===(e=this.getTopLevelTreeItems())||void 0===e||e.forEach((e=>{var t;null===(t=this.observer)||void 0===t||t.observe(e,{childList:!0,subtree:!0})}))}getTopLevelTreeItems(){var e,t,l;return null===(l=null===(t=null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedNodes)||void 0===t?void 0:t.call(e))||void 0===l?void 0:l.filter(a.isTreeItem)}handleTreeChange(){this.treeItemElements=this.getTreeItemElements(),this.ensureActiveItemVisibility()}getTreeItemElements(){var e;return null===(e=this.getTopLevelTreeItems())||void 0===e?void 0:e.reduce(((e,t)=>{const l=t.querySelectorAll(i.w);return[...e,t,...l]}),[])}getOpenTreeItemElements(){return s(this,null,(function*(){if(!this.treeItemElements)return;const e=t=>s(this,null,(function*(){return!a.isTreeItem(t.parentElement)||(yield t.parentElement.isOpen())&&(yield e(t.parentElement))}));return(yield Promise.all(this.treeItemElements.map((t=>s(this,null,(function*(){return{value:t,include:yield e(t)}})))))).filter((e=>e.include)).map((e=>e.value))}))}handleKeyDown(e){return s(this,null,(function*(){var t,l,n,r,s,a,o,c,d;const u=yield this.getOpenTreeItemElements(),v=null===(t=document.activeElement)||void 0===t?void 0:t.closest(i.w);if(!u||!v)return;const h=null==u?void 0:u.findIndex((e=>e===v));switch(e.key){case"ArrowDown":yield null===(l=u[h+1])||void 0===l?void 0:l.focusLink(),e.preventDefault();break;case"ArrowUp":yield null===(n=u[h-1])||void 0===n?void 0:n.focusLink(),e.preventDefault();break;case"Right":case"ArrowRight":e.preventDefault(),(yield v.isOpen())?yield null===(r=u[h+1])||void 0===r?void 0:r.focusLink():yield v.expand();break;case"Left":case"ArrowLeft":if(e.preventDefault(),yield v.isOpen())yield v.collapse();else{const e=u.findIndex((e=>e===v.parentElement));-1!==e&&(yield null===(s=u[e])||void 0===s?void 0:s.focusLink())}break;case"Home":yield null===(a=u[0])||void 0===a?void 0:a.focusLink(),e.preventDefault();break;case"End":yield null===(o=u[u.length-1])||void 0===o?void 0:o.focusLink(),e.preventDefault();break;case null===(c=e.key.match(/[a-zA-Z0-9]/))||void 0===c?void 0:c.input:{const t=e.key.toLowerCase(),l=u.indexOf(v)+1,n=u.concat(u),i=n.slice(l,l+u.length).findIndex((e=>{var l;return null===(l=e.getAttribute("_label"))||void 0===l?void 0:l.trim().toLowerCase().startsWith(t)}));-1!==i&&(yield n[l+i].focusLink(),e.preventDefault());break}case"*":{const e=null===(d=v.parentElement)||void 0===d?void 0:d.querySelectorAll(i.w);null==e||e.forEach((e=>{e.expand()}));break}}}))}handleFocusOut(e){return s(this,null,(function*(){e.relatedTarget&&!e.relatedTarget.closest(i.v)&&(yield this.ensureActiveItemVisibility())}))}ensureActiveItemVisibility(){return s(this,null,(function*(){const e=t=>{a.isTreeItem(t.parentElement)&&(t.parentElement.expand(),e(t.parentElement))},t=(()=>{var e,t,l,n;const r=null!==(n=null===(l=null===(t=null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedNodes)||void 0===t?void 0:t.call(e))||void 0===l?void 0:l.filter(a.isTreeItem))&&void 0!==n?n:[];for(const e of r){if(e._active)return e;const t=e.querySelector(`${i.w}[_active="true"]`);if(t&&t._active)return t}})();t&&e(t)}))}get host(){return(0,n.g)(this)}static get watchers(){return{_label:["validateLabel"]}}}},1085:(e,t,l)=>{l.d(t,{a:()=>u,b:()=>a,c:()=>o,h:()=>i,v:()=>d});var n=l(4058);const i=[0,1,2,3,4,5,6],r=/[a-zA-Z0-9äöüÄÖÜß]/g,s=/^\d+$/;function a(e,t=1){return function(e){var t;return"string"==typeof e&&(null===(t=e.match(r))||void 0===t?void 0:t.length)||0}(e)>=t}function o(e){return s.test(e)}const c=new Set(["string"]),d=(e,t,l={})=>{(0,n.w)(e,"_label",(e=>"string"==typeof e),c,t,function(e){var t;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(t,l,i,r)=>{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,l,i,r)),"string"==typeof t&&!1===a(t,3)&&!1===o(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}})}(l))},u=d}}]);

package/dist/35.js

@@ -1,2 +1,2 @@
 /*! For license information please see 35.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[35],{7846:(n,e,t)=>{t.d(e,{v:()=>a});var i=t(4058);const a=(n,e,t)=>{(0,i.i)(n,"_src",e,t)}},35:(n,e,t)=>{t.r(e),t.d(e,{kol_image:()=>l});var i=t(1405),a=t(4058),s=t(7846);const o=["eager","lazy"],l=class{constructor(n){(0,i.r)(this,n),this._alt=void 0,this._loading="lazy",this._sizes=void 0,this._src=void 0,this._srcset=void 0,this.state={_alt:"",_loading:"lazy",_src:""}}validateAlt(n){(0,a.i)(this,"_alt",n,{required:!0})}validateLoading(n){!function(n,e){(0,a.w)(n,"_loading",(n=>"string"==typeof n&&o.includes(n)),new Set(o),e)}(this,n)}validateSizes(n){(0,a.i)(this,"_sizes",n)}validateSrc(n){(0,s.v)(this,n,{required:!0})}validateSrcset(n){(0,a.i)(this,"_srcset",n)}componentWillLoad(){this.validateAlt(this._alt),this.validateLoading(this._loading),this.validateSizes(this._sizes),this.validateSrc(this._src),this.validateSrcset(this._srcset)}render(){return(0,i.h)(i.H,{key:"d94e54564be772a822748e4b1a8a48b71d5d80d9",class:"kol-image"},(0,i.h)("img",{key:"2181cdfe703d80f021fda5dad80a2e87efe00d2b",alt:this.state._alt,loading:this.state._loading,sizes:this.state._sizes,src:this.state._src,srcset:this.state._srcset}))}static get watchers(){return{_alt:["validateAlt"],_loading:["validateLoading"],_sizes:["validateSizes"],_src:["validateSrc"],_srcset:["validateSrcset"]}}};l.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  img {\n    max-height: 100%;\n    max-width: 100%;\n  }\n}"}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[35],{7846:(n,e,t)=>{t.d(e,{v:()=>a});var i=t(4058);const a=(n,e,t)=>{(0,i.i)(n,"_src",e,t)}},35:(n,e,t)=>{t.r(e),t.d(e,{kol_image:()=>l});var i=t(1114),a=t(4058),s=t(7846);const o=["eager","lazy"],l=class{constructor(n){(0,i.r)(this,n),this._alt=void 0,this._loading="lazy",this._sizes=void 0,this._src=void 0,this._srcset=void 0,this.state={_alt:"",_loading:"lazy",_src:""}}validateAlt(n){(0,a.i)(this,"_alt",n,{required:!0})}validateLoading(n){!function(n,e){(0,a.w)(n,"_loading",(n=>"string"==typeof n&&o.includes(n)),new Set(o),e)}(this,n)}validateSizes(n){(0,a.i)(this,"_sizes",n)}validateSrc(n){(0,s.v)(this,n,{required:!0})}validateSrcset(n){(0,a.i)(this,"_srcset",n)}componentWillLoad(){this.validateAlt(this._alt),this.validateLoading(this._loading),this.validateSizes(this._sizes),this.validateSrc(this._src),this.validateSrcset(this._srcset)}render(){return(0,i.h)(i.H,{key:"d94e54564be772a822748e4b1a8a48b71d5d80d9",class:"kol-image"},(0,i.h)("img",{key:"2181cdfe703d80f021fda5dad80a2e87efe00d2b",alt:this.state._alt,loading:this.state._loading,sizes:this.state._sizes,src:this.state._src,srcset:this.state._srcset}))}static get watchers(){return{_alt:["validateAlt"],_loading:["validateLoading"],_sizes:["validateSizes"],_src:["validateSrc"],_srcset:["validateSrcset"]}}};l.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  img {\n    max-height: 100%;\n    max-width: 100%;\n  }\n}"}}}]);

package/dist/3521.js

@@ -1,2 +1,2 @@
 /*! For license information please see 3521.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3521],{3521:(e,n,t)=>{t.r(n),t.d(n,{kol_toolbar:()=>s});var i=t(1405),o=t(7883),a=t(4058),r=t(1085);const s=class{constructor(e){(0,i.r)(this,e),this.indexToElement=new Map,this.renderItem=(e,n)=>{const t=n!==this.currentIndex||(null==e?void 0:e._disabled)?-1:0,a={key:n,class:"kol-toolbar-item",_tabIndex:t},r=e=>{e&&this.indexToElement.set(n,e)};return"_href"in e?(0,i.h)(o.e,Object.assign({},e,a,{ref:r})):(0,i.h)(o.k,Object.assign({},e,a,{ref:r}))},this.state={_label:"",_items:[]},this.currentIndex=0,this._label=void 0,this._items=void 0}render(){return(0,i.h)(i.H,{key:"de145c145e9308cc33f344d7b167b923f7d1cc27",class:"kol-toolbar"},(0,i.h)("div",{key:"69a375f2309f4eddc53f897e379206758df855dc",class:"toolbar",role:"toolbar","aria-label":this.state._label},this.state._items.map(this.renderItem)))}validateLabel(e){(0,r.v)(this,e)}validateItems(e){((e,n)=>{(0,a.t)(n,(()=>{(0,a.o)(n,(()=>{void 0===n&&(n=[]);try{n=(0,a.p)(n)}catch(e){}Array.isArray(n)&&n.every((e=>"object"==typeof e&&null!==e))&&(0,a.s)(e,"_items",n)}))}))})(this,e)}getCurrentToolbarItem(e){return"number"==typeof e?this.indexToElement.get(e):void 0}setFirstEnabledItemIndex(){var e;this.currentIndex=null===(e=this.state._items)||void 0===e?void 0:e.findIndex((e=>!e._disabled))}handleKeyDown(e){var n,t;if("ArrowRight"!==e.code&&"ArrowLeft"!==e.code)return;e.preventDefault();const i=(null===(n=this._items)||void 0===n?void 0:n.length)-1,o=this.currentIndex;let a=0;switch(e.code){case"ArrowLeft":a=o!==a?o-1:i;break;case"ArrowRight":i!==o&&(a=o+1)}o!==a&&(this.currentIndex=a,null===(t=this.getCurrentToolbarItem(a))||void 0===t||t.kolFocus())}handleBlur(e){e.target===this.host&&this.setFirstEnabledItemIndex()}componentWillLoad(){this.validateLabel(this._label),this.validateItems(this._items),this.setFirstEnabledItemIndex()}get host(){return(0,i.g)(this)}static get watchers(){return{_label:["validateLabel"],_items:["validateItems"]}}};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  .toolbar {\n    display: flex;\n    align-items: center;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n  }\n  .toolbar:focus-within {\n    outline: calc(1rem / var(--kolibri-root-font-size, 16)) solid;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n}"}},1085:(e,n,t)=>{t.d(n,{a:()=>c,b:()=>s,c:()=>l,h:()=>o,v:()=>h});var i=t(4058);const o=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,r=/^\d+$/;function s(e,n=1){return function(e){var n;return"string"==typeof e&&(null===(n=e.match(a))||void 0===n?void 0:n.length)||0}(e)>=n}function l(e){return r.test(e)}const d=new Set(["string"]),h=(e,n,t={})=>{(0,i.w)(e,"_label",(e=>"string"==typeof e),d,n,function(e){var n;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(n,t,o,a)=>{var r,d;"function"==typeof(null===(r=e.hooks)||void 0===r?void 0:r.afterPatch)&&(null===(d=e.hooks)||void 0===d||d.afterPatch(n,t,o,a)),"string"==typeof n&&!1===s(n,3)&&!1===l(n)&&(0,i.a)(`The heading or label ("${n}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof n&&n.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(n=e.hooks)||void 0===n?void 0:n.beforePatch}})}(t))},c=h}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3521],{3521:(e,n,t)=>{t.r(n),t.d(n,{kol_toolbar:()=>s});var i=t(1114),o=t(7883),a=t(4058),r=t(1085);const s=class{constructor(e){(0,i.r)(this,e),this.indexToElement=new Map,this.renderItem=(e,n)=>{const t=n!==this.currentIndex||(null==e?void 0:e._disabled)?-1:0,a={key:n,class:"kol-toolbar-item",_tabIndex:t},r=e=>{e&&this.indexToElement.set(n,e)};return"_href"in e?(0,i.h)(o.e,Object.assign({},e,a,{ref:r})):(0,i.h)(o.k,Object.assign({},e,a,{ref:r}))},this.state={_label:"",_items:[]},this.currentIndex=0,this._label=void 0,this._items=void 0}render(){return(0,i.h)(i.H,{key:"de145c145e9308cc33f344d7b167b923f7d1cc27",class:"kol-toolbar"},(0,i.h)("div",{key:"69a375f2309f4eddc53f897e379206758df855dc",class:"toolbar",role:"toolbar","aria-label":this.state._label},this.state._items.map(this.renderItem)))}validateLabel(e){(0,r.v)(this,e)}validateItems(e){((e,n)=>{(0,a.t)(n,(()=>{(0,a.o)(n,(()=>{void 0===n&&(n=[]);try{n=(0,a.p)(n)}catch(e){}Array.isArray(n)&&n.every((e=>"object"==typeof e&&null!==e))&&(0,a.s)(e,"_items",n)}))}))})(this,e)}getCurrentToolbarItem(e){return"number"==typeof e?this.indexToElement.get(e):void 0}setFirstEnabledItemIndex(){var e;this.currentIndex=null===(e=this.state._items)||void 0===e?void 0:e.findIndex((e=>!e._disabled))}handleKeyDown(e){var n,t;if("ArrowRight"!==e.code&&"ArrowLeft"!==e.code)return;e.preventDefault();const i=(null===(n=this._items)||void 0===n?void 0:n.length)-1,o=this.currentIndex;let a=0;switch(e.code){case"ArrowLeft":a=o!==a?o-1:i;break;case"ArrowRight":i!==o&&(a=o+1)}o!==a&&(this.currentIndex=a,null===(t=this.getCurrentToolbarItem(a))||void 0===t||t.kolFocus())}handleBlur(e){e.target===this.host&&this.setFirstEnabledItemIndex()}componentWillLoad(){this.validateLabel(this._label),this.validateItems(this._items),this.setFirstEnabledItemIndex()}get host(){return(0,i.g)(this)}static get watchers(){return{_label:["validateLabel"],_items:["validateItems"]}}};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  .toolbar {\n    display: flex;\n    align-items: center;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n  }\n  .toolbar:focus-within {\n    outline: calc(1rem / var(--kolibri-root-font-size, 16)) solid;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n}"}},1085:(e,n,t)=>{t.d(n,{a:()=>c,b:()=>s,c:()=>l,h:()=>o,v:()=>h});var i=t(4058);const o=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,r=/^\d+$/;function s(e,n=1){return function(e){var n;return"string"==typeof e&&(null===(n=e.match(a))||void 0===n?void 0:n.length)||0}(e)>=n}function l(e){return r.test(e)}const d=new Set(["string"]),h=(e,n,t={})=>{(0,i.w)(e,"_label",(e=>"string"==typeof e),d,n,function(e){var n;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(n,t,o,a)=>{var r,d;"function"==typeof(null===(r=e.hooks)||void 0===r?void 0:r.afterPatch)&&(null===(d=e.hooks)||void 0===d||d.afterPatch(n,t,o,a)),"string"==typeof n&&!1===s(n,3)&&!1===l(n)&&(0,i.a)(`The heading or label ("${n}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof n&&n.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(n=e.hooks)||void 0===n?void 0:n.beforePatch}})}(t))},c=h}}]);

package/dist/356.js

@@ -1,2 +1,2 @@
 /*! For license information please see 356.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[356],{356:(n,t,e)=>{e.r(t),e.d(t,{kol_button:()=>s});var i=e(1405),o=e(7883),a=(n,t,e)=>new Promise(((i,o)=>{var a=n=>{try{l(e.next(n))}catch(n){o(n)}},s=n=>{try{l(e.throw(n))}catch(n){o(n)}},l=n=>n.done?i(n.value):Promise.resolve(n.value).then(a,s);l((e=e.apply(n,t)).next())}));const s=class{constructor(n){(0,i.r)(this,n),this.catchRef=n=>{this.buttonWcRef=n},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal"}getValue(){return a(this,null,(function*(){return this._value}))}focus(){return a(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return a(this,null,(function*(){var n;yield null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus()}))}render(){return(0,i.h)(i.H,{key:"c4f5ff46653f2942fa26dd1840395b23792a2ef0",class:"kol-button"},(0,i.h)(o.a,{key:"87b1a42f8afeba148a47a7392737d980727be7b1",ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:this._role,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},(0,i.h)("slot",{key:"15e025998e347f99b5e416c3e8723709993ffe61",name:"expert",slot:"expert"})))}static get delegatesFocus(){return!0}};s.style={default:"@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 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-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-block;\n  }\n  :is(a, button) {\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  :is(a, button)::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  /* TODO: Why we need this? */\n  :is(a, button) > .kol-span-wc {\n    margin: auto;\n    width: 100%;\n  }\n}"}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[356],{356:(n,t,e)=>{e.r(t),e.d(t,{kol_button:()=>s});var i=e(1114),o=e(7883),a=(n,t,e)=>new Promise(((i,o)=>{var a=n=>{try{l(e.next(n))}catch(n){o(n)}},s=n=>{try{l(e.throw(n))}catch(n){o(n)}},l=n=>n.done?i(n.value):Promise.resolve(n.value).then(a,s);l((e=e.apply(n,t)).next())}));const s=class{constructor(n){(0,i.r)(this,n),this.catchRef=n=>{this.buttonWcRef=n},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal"}getValue(){return a(this,null,(function*(){return this._value}))}focus(){return a(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return a(this,null,(function*(){var n;yield null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus()}))}render(){return(0,i.h)(i.H,{key:"c4f5ff46653f2942fa26dd1840395b23792a2ef0",class:"kol-button"},(0,i.h)(o.a,{key:"87b1a42f8afeba148a47a7392737d980727be7b1",ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:this._role,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},(0,i.h)("slot",{key:"15e025998e347f99b5e416c3e8723709993ffe61",name:"expert",slot:"expert"})))}static get delegatesFocus(){return!0}};s.style={default:"@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 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-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-block;\n  }\n  :is(a, button) {\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  :is(a, button)::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  /* TODO: Why we need this? */\n  :is(a, button) > .kol-span-wc {\n    margin: auto;\n    width: 100%;\n  }\n}"}}}]);

package/dist/3714.js

@@ -1,2 +1,2 @@
 /*! For license information please see 3714.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3714],{3714:(n,e,t)=>{t.r(e),t.d(e,{kol_link_group:()=>c});var i=t(1405),a=t(1880),l=t(169),o=t(7883),s=t(1085),r=t(4058);const h=n=>{const e=[];return n.links.map(((t,a)=>{e.push((0,i.h)("li",{key:a,class:{ident:a>0&&"vertical"===n.orientation,"list-none":0===a&&"horizontal"===n.orientation},style:{listStyleType:n.listStyleType}},(0,i.h)(o.e,Object.assign({},t))))})),e},c=class{constructor(n){(0,i.r)(this,n),this.isUl=!0,this._listStyleType=void 0,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_listStyleType:"disc",_links:[],_orientation:"vertical"}}render(){const n=this.isUl?"ul":"ol";return(0,i.h)(i.H,{key:"93cbba36c24b56e17437008314c4c3dfe732a790",class:"kol-link-group"},(0,i.h)(n,{key:"9e8d8c395a4c168298dbc026d8601eb0693d916d","aria-label":this.state._label,class:{vertical:"vertical"===this.state._orientation,horizontal:"horizontal"===this.state._orientation}},(0,i.h)(h,{key:"5f77fa6a007be781fdf1b222b0c3f2be140efc28",links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})))}validateLabel(n,e,t=!1){!t&&this.state._label&&(0,a.r)(this.state._label),(0,s.v)(this,n),this.state._label&&(0,a.a)(this.state._label)}validateListStyleType(n){(0,r.w)(this,"_listStyleType",(n=>{switch(n){case"disc":case"circle":case"square":case"none":return this.isUl=!0,!0;case"decimal":case"decimal-leading-zero":case"lower-alpha":case"lower-latin":case"lower-greek":case"lower-roman":case"upper-alpha":case"upper-latin":case"upper-roman":return this.isUl=!1,!0;default:return!1}}),new Set(["https://www.w3schools.com/tags/tag_ol.asp"]),n,{defaultValue:"disc"})}validateLinks(n){(0,l.w)("KolLinkGroup",this,n)}validateOrientation(n){(0,r.w)(this,"_orientation",(n=>"horizontal"===n||"vertical"===n),new Set(["Orientation {horizontal, vertical}"]),n,{defaultValue:"vertical"})}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateListStyleType(this._listStyleType),this.validateLinks(this._links),this.validateOrientation(this._orientation)}disconnectedCallback(){this.state._label&&(0,a.r)(this.state._label)}static get watchers(){return{_label:["validateLabel"],_listStyleType:["validateListStyleType"],_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  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  :is(ol, ul).horizontal {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  :is(ol, ul).horizontal li {\n    margin-left: calc(20rem / var(--kolibri-root-font-size, 16));\n    margin-right: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :is(ol, ul).horizontal li:first-child {\n    margin-left: 0;\n  }\n  :is(ol, ul).horizontal li:last-child {\n    margin-right: 0;\n  }\n  :is(ol, ul).vertical li {\n    margin-left: calc(28rem / var(--kolibri-root-font-size, 16));\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  li.list-none {\n    list-style-type: none !important;\n    margin-left: 0;\n  }\n}"}},1085:(n,e,t)=>{t.d(e,{a:()=>d,b:()=>s,c:()=>r,h:()=>a,v:()=>c});var i=t(4058);const a=[0,1,2,3,4,5,6],l=/[a-zA-Z0-9äöüÄÖÜß]/g,o=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(l))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return o.test(n)}const h=new Set(["string"]),c=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),h,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,a,l)=>{var o,h;"function"==typeof(null===(o=n.hooks)||void 0===o?void 0:o.afterPatch)&&(null===(h=n.hooks)||void 0===h||h.afterPatch(e,t,a,l)),"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))},d=c},1880:(n,e,t)=>{t.d(e,{a:()=>l,r:()=>o});var i=t(6448);const a=new Set;function l(n){a.has(n)?i.L.error(`There already is a nav element with the label "${n}"`,{forceLog:!0}):a.add(n)}function o(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([[3714],{3714:(n,e,t)=>{t.r(e),t.d(e,{kol_link_group:()=>c});var i=t(1114),a=t(1880),l=t(169),o=t(7883),s=t(1085),r=t(4058);const h=n=>{const e=[];return n.links.map(((t,a)=>{e.push((0,i.h)("li",{key:a,class:{ident:a>0&&"vertical"===n.orientation,"list-none":0===a&&"horizontal"===n.orientation},style:{listStyleType:n.listStyleType}},(0,i.h)(o.e,Object.assign({},t))))})),e},c=class{constructor(n){(0,i.r)(this,n),this.isUl=!0,this._listStyleType=void 0,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_listStyleType:"disc",_links:[],_orientation:"vertical"}}render(){const n=this.isUl?"ul":"ol";return(0,i.h)(i.H,{key:"93cbba36c24b56e17437008314c4c3dfe732a790",class:"kol-link-group"},(0,i.h)(n,{key:"9e8d8c395a4c168298dbc026d8601eb0693d916d","aria-label":this.state._label,class:{vertical:"vertical"===this.state._orientation,horizontal:"horizontal"===this.state._orientation}},(0,i.h)(h,{key:"5f77fa6a007be781fdf1b222b0c3f2be140efc28",links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})))}validateLabel(n,e,t=!1){!t&&this.state._label&&(0,a.r)(this.state._label),(0,s.v)(this,n),this.state._label&&(0,a.a)(this.state._label)}validateListStyleType(n){(0,r.w)(this,"_listStyleType",(n=>{switch(n){case"disc":case"circle":case"square":case"none":return this.isUl=!0,!0;case"decimal":case"decimal-leading-zero":case"lower-alpha":case"lower-latin":case"lower-greek":case"lower-roman":case"upper-alpha":case"upper-latin":case"upper-roman":return this.isUl=!1,!0;default:return!1}}),new Set(["https://www.w3schools.com/tags/tag_ol.asp"]),n,{defaultValue:"disc"})}validateLinks(n){(0,l.w)("KolLinkGroup",this,n)}validateOrientation(n){(0,r.w)(this,"_orientation",(n=>"horizontal"===n||"vertical"===n),new Set(["Orientation {horizontal, vertical}"]),n,{defaultValue:"vertical"})}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateListStyleType(this._listStyleType),this.validateLinks(this._links),this.validateOrientation(this._orientation)}disconnectedCallback(){this.state._label&&(0,a.r)(this.state._label)}static get watchers(){return{_label:["validateLabel"],_listStyleType:["validateListStyleType"],_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  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  :is(ol, ul).horizontal {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  :is(ol, ul).horizontal li {\n    margin-left: calc(20rem / var(--kolibri-root-font-size, 16));\n    margin-right: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :is(ol, ul).horizontal li:first-child {\n    margin-left: 0;\n  }\n  :is(ol, ul).horizontal li:last-child {\n    margin-right: 0;\n  }\n  :is(ol, ul).vertical li {\n    margin-left: calc(28rem / var(--kolibri-root-font-size, 16));\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  li.list-none {\n    list-style-type: none !important;\n    margin-left: 0;\n  }\n}"}},1085:(n,e,t)=>{t.d(e,{a:()=>d,b:()=>s,c:()=>r,h:()=>a,v:()=>c});var i=t(4058);const a=[0,1,2,3,4,5,6],l=/[a-zA-Z0-9äöüÄÖÜß]/g,o=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(l))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return o.test(n)}const h=new Set(["string"]),c=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),h,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,a,l)=>{var o,h;"function"==typeof(null===(o=n.hooks)||void 0===o?void 0:o.afterPatch)&&(null===(h=n.hooks)||void 0===h||h.afterPatch(e,t,a,l)),"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))},d=c},1880:(n,e,t)=>{t.d(e,{a:()=>l,r:()=>o});var i=t(6448);const a=new Set;function l(n){a.has(n)?i.L.error(`There already is a nav element with the label "${n}"`,{forceLog:!0}):a.add(n)}function o(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/3735.js

@@ -1,2 +1,2 @@
 /*! For license information please see 3735.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3735],{3260:(t,e,n)=>{n.d(e,{S:()=>s,a:()=>o,b:()=>i,i:()=>a});const i=t=>"object"==typeof t&&null!==t,a=(t,e=0)=>"string"==typeof t&&t.length>=e,o=t=>{if("object"!=typeof t||null===t)return a(t,1);for(const e in t)if(!1===a(e,1))return!1;return!0},s=new Event("StateChange")},6179:(t,e,n)=>{n.d(e,{a:()=>l,p:()=>r});var i=n(7883),a=n(4058),o=n(6448);const s=t=>{for((0,o.a)()&&((0,a.j)("↓ Search form element start."),o.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,o.a)()&&(o.L.debug(t),(0,a.j)("↑ Search form element finished."))}return t},l=(t={})=>{var e,n;const o=s(t.form);if(o instanceof HTMLElement){const t=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===o.tagName)(0,a.q)(t,o),o.dispatchEvent(t);else if(o.tagName===i.j.toUpperCase()){(0,a.q)(t,a.K.querySelector("form",o));const i=o;"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=s(t.form);if(e instanceof HTMLElement){const t=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:e});if("FORM"===e.tagName)(0,o.a)()&&!1===e.noValidate&&(0,a.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,a.q)(t,e),e.dispatchEvent(t))}));else if(e.tagName===i.j.toUpperCase()){(0,a.q)(t,a.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))}))}}}},324:(t,e,n)=>{n.d(e,{I:()=>r});var i=n(4932),a=n(5670),o=n(4058),s=n(3260);const l=(t,e)=>{const n=t;"object"==typeof n&&null!==n&&((0,s.i)(n.right,1)&&(n.right={icon:n.right}),(0,s.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,o.o)(t,(()=>{try{t=(0,o.p)(t)}catch(t){}(0,o.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,s.i)(t.left,1)||(0,a.i)(t.left)||(0,s.i)(t.right,1)||(0,a.i)(t.right))),new Set(["KoliBriHorizontalIcon"]),t,{hooks:{beforePatch:l},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},5670:(t,e,n)=>{n.d(e,{i:()=>s,v:()=>l});var i=n(4058),a=n(3260);const o=(t,e,n)=>{(0,a.b)(n)?t[e]=n:(0,a.i)(n,1)&&(t[e]={icon:n})},s=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,a.a)(t.style))&&(void 0===t.label||(0,a.i)(t.label))&&(0,a.i)(t.icon,1),l=(t,e,n={})=>{(0,i.o)(e,(()=>{var l;try{e=(0,i.p)(e)}catch(t){}(0,i.w)(t,"_icons",(t=>{const e="object"==typeof t&&null!==t&&0===Object.keys(t).length;return null===t||e||(0,a.i)(t,1)||"object"==typeof t&&null!==t&&((0,a.i)(t.left,1)||s(t.left)||(0,a.i)(t.right,1)||s(t.right)||(0,a.i)(t.top,1)||s(t.top)||(0,a.i)(t.bottom,1)||s(t.bottom))}),new Set(["KoliBriIcon"]),e,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(l=n.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(t,e,i,s)=>{var l,r;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(t,e,i,s)),(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,a.i)(t,1)?e={left:{icon:t}}:"object"==typeof t&&null!==t&&(o(e,"top",t.top),o(e,"right",t.right),o(e,"bottom",t.bottom),o(e,"left",t.left)),e})(e))}})(i)}}}))}))}},3735:(t,e,n)=>{n.r(e),n.d(e,{kol_input_date:()=>f});var i=n(1405),a=n(2385),o=n(6179),s=n(4932),l=n(324),r=n(4058),d=n(2079),h=n(7883),c=n(4851),u=n(1523),p=(t,e,n)=>new Promise(((i,a)=>{var o=t=>{try{l(n.next(t))}catch(t){a(t)}},s=t=>{try{l(n.throw(t))}catch(t){a(t)}},l=t=>t.done?i(t.value):Promise.resolve(t.value).then(o,s);l((n=n.apply(t,e)).next())}));const m=["date","datetime-local","month","time","week"];class v extends l.I{constructor(t,e,n){super(t,e,n),this.validateIso8601=(t,e,n)=>(0,r.w)(this.component,t,(t=>void 0===t||null==t||""===t||this.validateDateString(t)),new Set(["Date","string{ISO-8601}"]),v.tryParseToString(e,this.component._type,this.component._step),{hooks:{afterPatch:t=>{"string"==typeof t&&n&&n(t)}}}),this.component=t}validateAutoComplete(t){(0,r.w)(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateSuggestions(t){(0,d.v)(this.component,t)}static tryParseToString(t,e,n){if("string"==typeof t||null===t)return t;if("object"==typeof t&&t instanceof Date){const i=t.getFullYear(),a=String(t.getMonth()+1).padStart(2,"0"),o=String(t.getDate()).padStart(2,"0"),s=String(t.getHours()).padStart(2,"0"),l=String(t.getMinutes()).padStart(2,"0"),r=String(t.getSeconds()).padStart(2,"0"),d=[i,a,o].join("-"),h=[s,l,r].join(":");switch(e){case"date":return d;case"datetime-local":return`${d}T${h}`;case"month":return`${i}-${a}`;case"time":return void 0===n||"60"===String(n)?`${s}:${l}`:h;case"week":return`${i}-W${this.getWeekNumberOfDate(t)}`}}}static getWeekNumberOfDate(t){const e=new Date(t),n=(e.getDay()+6)%7;e.setDate(e.getDate()-n+3);const i=e.valueOf();return e.setMonth(0,1),4!==e.getDay()&&e.setMonth(0,1+(4-e.getDay()+7)%7),(1+Math.ceil((i-e.valueOf())/6048e5)).toString().padStart(2,"0")}validateDateString(t){switch(this.component._type){case"date":return v.isoDateRegex.test(t);case"datetime-local":return v.isoLocalDateTimeRegex.test(t);case"month":return v.isoMonthRegex.test(t);case"time":return v.isoTimeRegex.test(t);case"week":return v.isoWeekRegex.test(t);default:return!1}}onBlur(t){super.onBlur(t),!!t.target.value!=!!this.component._value&&(this.component._value=t.target.value)}validateMax(t){const e=null!=t||"date"!==this.component._type&&"month"!==this.component._type&&"datetime-local"!==this.component._type?t:v.DEFAULT_MAX_DATE;this.validateIso8601("_max",e)}validateMin(t){this.validateIso8601("_min",t)}validateOn(t){(0,r.s)(this.component,"_on",Object.assign(Object.assign({},t),{onChange:(e,n)=>{!!n!=!!this.component._value&&(this.component._value=n),(null==t?void 0:t.onChange)&&t.onChange(e,n)}}))}validateReadOnly(t){((t,e)=>{(0,r.b)(t,"_readOnly",e)})(this.component,t)}validateRequired(t){(0,r.b)(this.component,"_required",t)}validateStep(t){(0,r.k)(this.component,"_step",t)}validateType(t){(0,r.w)(this.component,"_type",(t=>"string"==typeof t&&m.includes(t)),new Set([`String {${m.join(", ")}`]),t)}validateValue(t){this.validateValueEx(t)}validateValueEx(t,e){this.validateIso8601("_value",t,e),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateLabel(this.component._label),this.validateSuggestions(this.component._suggestions),this.validateOn(this.component._on),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateType(this.component._type),this.validateValue(this.component._value)}}v.isoDateRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])/,v.isoLocalDateTimeRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])[T ][0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,v.isoMonthRegex=/^\d{4}-([0]\d|1[0-2])/,v.isoTimeRegex=/^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,v.isoWeekRegex=/^\d{4}-W(?:[0-4]\d|5[0-3])$/,v.DEFAULT_MAX_DATE=new Date(9999,11,31,23,59,59);const f=class{getValue(){return p(this,null,(function*(){var t;return this.inputRef&&this.remapValue(null===(t=this.inputRef)||void 0===t?void 0:t.value)}))}focus(){return p(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return p(this,null,(function*(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}))}reset(){return p(this,null,(function*(){this.state=Object.assign(Object.assign({},this.state),{_value:null}),this.controller.setFormAssociatedValue(""),this.inputRef&&(this.inputRef.value="")}))}setInitialValueType(t){t instanceof Date?this._initialValueType="Date":this._initialValueType="string"==typeof t?"String":null}remapValue(t){return"Date"===this._initialValueType?new Date(t):t}render(){const{ariaDescribedBy:t}=(0,s.g)(this.state),e=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,n=(0,u.s)(this.state._label);return(0,i.h)(i.H,{key:"07176a94a6b2394ea9a478f973ba7bb1e7f2cc84",class:{"kol-input-date":!0,"has-value":this.state._hasValue}},(0,i.h)(h.i,{key:"8666034949394a8d3f33209e90f9c991e52adf6d",class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_msg:this.state._msg,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_suggestions:this.state._suggestions,_readOnly:this.state._readOnly,_required:this.state._required,_shortKey:this.state._shortKey,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},(0,i.h)("span",{key:"47b5518d909a0e3f8c7f5a881feee5d13ff578f7",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)(c.I,{badgeText:(0,u.b)(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",(0,i.h)("span",{class:"access-key-hint","aria-hidden":"true"},(0,u.b)(this.state._accessKey||this.state._shortKey))):(0,i.h)("span",null,this.state._label)),(0,i.h)("div",{key:"67e1e9baf01fa1c7af299050362403af9514d51f",slot:"input"},(0,i.h)("input",Object.assign({key:"f4e31fbf3b3ed50226bb460e8f3881dd7af63740",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,max:this.state._max,min:this.state._min,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,step:this.state._step,spellcheck:"false",type:this.state._type,value:this.state._value||void 0},this.controller.onFacade,{onKeyDown:this.onKeyDown,onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1},onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onChange:this.onChange,onInput:this.onInput})))))}constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.inputRef=t},this.onChange=t=>{const e=t.target.value,n=this.remapValue(e);this.controller.onFacade.onChange(t,n)},this.onInput=t=>{const e=t.target.value,n=this.remapValue(e);this.controller.onFacade.onInput(t,!0,n)},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||(0,o.p)({form:this.host,ref:this.inputRef})},this._initialValueType=null,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._max=void 0,this._min=void 0,this._msg=void 0,this._name=void 0,this._on=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._step=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type="date",this._value=void 0,this.state={_autoComplete:"off",_hasValue:!1,_hideError:!1,_id:`id-${(0,a.n)()}`,_label:"",_suggestions:[],_type:"datetime-local"},this.inputHasFocus=!1,this.controller=new v(this,"date",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)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateStep(t){this.controller.validateStep(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){t instanceof Date&&(0,r.n)("Date type will be removed in v3. Use `Iso8601` instead."),this.controller.validateValueEx(t),void 0!==t&&this.setInitialValueType(t)}componentWillLoad(){void 0!==this._value&&this.setInitialValueType(this._value),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"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};f.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  .kol-input-number {\n    display: block;\n  }\n}"}},2079:(t,e,n)=>{n.d(e,{v:()=>a});var i=n(4058);const a=(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([[3735],{3260:(t,e,n)=>{n.d(e,{S:()=>s,a:()=>o,b:()=>i,i:()=>a});const i=t=>"object"==typeof t&&null!==t,a=(t,e=0)=>"string"==typeof t&&t.length>=e,o=t=>{if("object"!=typeof t||null===t)return a(t,1);for(const e in t)if(!1===a(e,1))return!1;return!0},s=new Event("StateChange")},6179:(t,e,n)=>{n.d(e,{a:()=>l,p:()=>r});var i=n(7883),a=n(4058),o=n(6448);const s=t=>{for((0,o.a)()&&((0,a.j)("↓ Search form element start."),o.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,o.a)()&&(o.L.debug(t),(0,a.j)("↑ Search form element finished."))}return t},l=(t={})=>{var e,n;const o=s(t.form);if(o instanceof HTMLElement){const t=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===o.tagName)(0,a.q)(t,o),o.dispatchEvent(t);else if(o.tagName===i.j.toUpperCase()){(0,a.q)(t,a.K.querySelector("form",o));const i=o;"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=s(t.form);if(e instanceof HTMLElement){const t=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:e});if("FORM"===e.tagName)(0,o.a)()&&!1===e.noValidate&&(0,a.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,a.q)(t,e),e.dispatchEvent(t))}));else if(e.tagName===i.j.toUpperCase()){(0,a.q)(t,a.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))}))}}}},324:(t,e,n)=>{n.d(e,{I:()=>r});var i=n(4932),a=n(5670),o=n(4058),s=n(3260);const l=(t,e)=>{const n=t;"object"==typeof n&&null!==n&&((0,s.i)(n.right,1)&&(n.right={icon:n.right}),(0,s.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,o.o)(t,(()=>{try{t=(0,o.p)(t)}catch(t){}(0,o.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,s.i)(t.left,1)||(0,a.i)(t.left)||(0,s.i)(t.right,1)||(0,a.i)(t.right))),new Set(["KoliBriHorizontalIcon"]),t,{hooks:{beforePatch:l},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},5670:(t,e,n)=>{n.d(e,{i:()=>s,v:()=>l});var i=n(4058),a=n(3260);const o=(t,e,n)=>{(0,a.b)(n)?t[e]=n:(0,a.i)(n,1)&&(t[e]={icon:n})},s=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,a.a)(t.style))&&(void 0===t.label||(0,a.i)(t.label))&&(0,a.i)(t.icon,1),l=(t,e,n={})=>{(0,i.o)(e,(()=>{var l;try{e=(0,i.p)(e)}catch(t){}(0,i.w)(t,"_icons",(t=>{const e="object"==typeof t&&null!==t&&0===Object.keys(t).length;return null===t||e||(0,a.i)(t,1)||"object"==typeof t&&null!==t&&((0,a.i)(t.left,1)||s(t.left)||(0,a.i)(t.right,1)||s(t.right)||(0,a.i)(t.top,1)||s(t.top)||(0,a.i)(t.bottom,1)||s(t.bottom))}),new Set(["KoliBriIcon"]),e,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(l=n.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(t,e,i,s)=>{var l,r;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(t,e,i,s)),(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,a.i)(t,1)?e={left:{icon:t}}:"object"==typeof t&&null!==t&&(o(e,"top",t.top),o(e,"right",t.right),o(e,"bottom",t.bottom),o(e,"left",t.left)),e})(e))}})(i)}}}))}))}},3735:(t,e,n)=>{n.r(e),n.d(e,{kol_input_date:()=>f});var i=n(1114),a=n(6762),o=n(6179),s=n(4932),l=n(324),r=n(4058),d=n(2079),h=n(7883),c=n(9196),u=n(1523),p=(t,e,n)=>new Promise(((i,a)=>{var o=t=>{try{l(n.next(t))}catch(t){a(t)}},s=t=>{try{l(n.throw(t))}catch(t){a(t)}},l=t=>t.done?i(t.value):Promise.resolve(t.value).then(o,s);l((n=n.apply(t,e)).next())}));const m=["date","datetime-local","month","time","week"];class v extends l.I{constructor(t,e,n){super(t,e,n),this.validateIso8601=(t,e,n)=>(0,r.w)(this.component,t,(t=>void 0===t||null==t||""===t||this.validateDateString(t)),new Set(["Date","string{ISO-8601}"]),v.tryParseToString(e,this.component._type,this.component._step),{hooks:{afterPatch:t=>{"string"==typeof t&&n&&n(t)}}}),this.component=t}validateAutoComplete(t){(0,r.w)(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateSuggestions(t){(0,d.v)(this.component,t)}static tryParseToString(t,e,n){if("string"==typeof t||null===t)return t;if("object"==typeof t&&t instanceof Date){const i=t.getFullYear(),a=String(t.getMonth()+1).padStart(2,"0"),o=String(t.getDate()).padStart(2,"0"),s=String(t.getHours()).padStart(2,"0"),l=String(t.getMinutes()).padStart(2,"0"),r=String(t.getSeconds()).padStart(2,"0"),d=[i,a,o].join("-"),h=[s,l,r].join(":");switch(e){case"date":return d;case"datetime-local":return`${d}T${h}`;case"month":return`${i}-${a}`;case"time":return void 0===n||"60"===String(n)?`${s}:${l}`:h;case"week":return`${i}-W${this.getWeekNumberOfDate(t)}`}}}static getWeekNumberOfDate(t){const e=new Date(t),n=(e.getDay()+6)%7;e.setDate(e.getDate()-n+3);const i=e.valueOf();return e.setMonth(0,1),4!==e.getDay()&&e.setMonth(0,1+(4-e.getDay()+7)%7),(1+Math.ceil((i-e.valueOf())/6048e5)).toString().padStart(2,"0")}validateDateString(t){switch(this.component._type){case"date":return v.isoDateRegex.test(t);case"datetime-local":return v.isoLocalDateTimeRegex.test(t);case"month":return v.isoMonthRegex.test(t);case"time":return v.isoTimeRegex.test(t);case"week":return v.isoWeekRegex.test(t);default:return!1}}onBlur(t){super.onBlur(t),!!t.target.value!=!!this.component._value&&(this.component._value=t.target.value)}validateMax(t){const e=null!=t||"date"!==this.component._type&&"month"!==this.component._type&&"datetime-local"!==this.component._type?t:v.DEFAULT_MAX_DATE;this.validateIso8601("_max",e)}validateMin(t){this.validateIso8601("_min",t)}validateOn(t){(0,r.s)(this.component,"_on",Object.assign(Object.assign({},t),{onChange:(e,n)=>{!!n!=!!this.component._value&&(this.component._value=n),(null==t?void 0:t.onChange)&&t.onChange(e,n)}}))}validateReadOnly(t){((t,e)=>{(0,r.b)(t,"_readOnly",e)})(this.component,t)}validateRequired(t){(0,r.b)(this.component,"_required",t)}validateStep(t){(0,r.k)(this.component,"_step",t)}validateType(t){(0,r.w)(this.component,"_type",(t=>"string"==typeof t&&m.includes(t)),new Set([`String {${m.join(", ")}`]),t)}validateValue(t){this.validateValueEx(t)}validateValueEx(t,e){this.validateIso8601("_value",t,e),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateLabel(this.component._label),this.validateSuggestions(this.component._suggestions),this.validateOn(this.component._on),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateType(this.component._type),this.validateValue(this.component._value)}}v.isoDateRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])/,v.isoLocalDateTimeRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])[T ][0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,v.isoMonthRegex=/^\d{4}-([0]\d|1[0-2])/,v.isoTimeRegex=/^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,v.isoWeekRegex=/^\d{4}-W(?:[0-4]\d|5[0-3])$/,v.DEFAULT_MAX_DATE=new Date(9999,11,31,23,59,59);const f=class{getValue(){return p(this,null,(function*(){var t;return this.inputRef&&this.remapValue(null===(t=this.inputRef)||void 0===t?void 0:t.value)}))}focus(){return p(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return p(this,null,(function*(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}))}reset(){return p(this,null,(function*(){this.state=Object.assign(Object.assign({},this.state),{_value:null}),this.controller.setFormAssociatedValue(""),this.inputRef&&(this.inputRef.value="")}))}setInitialValueType(t){t instanceof Date?this._initialValueType="Date":this._initialValueType="string"==typeof t?"String":null}remapValue(t){return"Date"===this._initialValueType?new Date(t):t}render(){const{ariaDescribedBy:t}=(0,s.g)(this.state),e=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,n=(0,u.s)(this.state._label);return(0,i.h)(i.H,{key:"07176a94a6b2394ea9a478f973ba7bb1e7f2cc84",class:{"kol-input-date":!0,"has-value":this.state._hasValue}},(0,i.h)(h.i,{key:"8666034949394a8d3f33209e90f9c991e52adf6d",class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_msg:this.state._msg,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_suggestions:this.state._suggestions,_readOnly:this.state._readOnly,_required:this.state._required,_shortKey:this.state._shortKey,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},(0,i.h)("span",{key:"47b5518d909a0e3f8c7f5a881feee5d13ff578f7",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)(c.I,{badgeText:(0,u.b)(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",(0,i.h)("span",{class:"access-key-hint","aria-hidden":"true"},(0,u.b)(this.state._accessKey||this.state._shortKey))):(0,i.h)("span",null,this.state._label)),(0,i.h)("div",{key:"67e1e9baf01fa1c7af299050362403af9514d51f",slot:"input"},(0,i.h)("input",Object.assign({key:"f4e31fbf3b3ed50226bb460e8f3881dd7af63740",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,max:this.state._max,min:this.state._min,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,step:this.state._step,spellcheck:"false",type:this.state._type,value:this.state._value||void 0},this.controller.onFacade,{onKeyDown:this.onKeyDown,onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1},onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onChange:this.onChange,onInput:this.onInput})))))}constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.inputRef=t},this.onChange=t=>{const e=t.target.value,n=this.remapValue(e);this.controller.onFacade.onChange(t,n)},this.onInput=t=>{const e=t.target.value,n=this.remapValue(e);this.controller.onFacade.onInput(t,!0,n)},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||(0,o.p)({form:this.host,ref:this.inputRef})},this._initialValueType=null,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._max=void 0,this._min=void 0,this._msg=void 0,this._name=void 0,this._on=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._step=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type="date",this._value=void 0,this.state={_autoComplete:"off",_hasValue:!1,_hideError:!1,_id:`id-${(0,a.n)()}`,_label:"",_suggestions:[],_type:"datetime-local"},this.inputHasFocus=!1,this.controller=new v(this,"date",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)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateStep(t){this.controller.validateStep(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){t instanceof Date&&(0,r.n)("Date type will be removed in v3. Use `Iso8601` instead."),this.controller.validateValueEx(t),void 0!==t&&this.setInitialValueType(t)}componentWillLoad(){void 0!==this._value&&this.setInitialValueType(this._value),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"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};f.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  .kol-input-number {\n    display: block;\n  }\n}"}},2079:(t,e,n)=>{n.d(e,{v:()=>a});var i=n(4058);const a=(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/3766.js

@@ -1,2 +1,2 @@
 /*! For license information please see 3766.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3766],{3766:(e,c,t)=>{t.r(c),t.d(c,{kol_indented_text_wc:()=>a});var s=t(1405);const a=class{constructor(e){(0,s.r)(this,e),this.state={}}render(){return(0,s.h)(s.H,{key:"22f2e054e07ccb74cbc702ed9cb7641e874ecb50",class:"kol-indented-text-wc"},(0,s.h)("div",{key:"2eac3286c74fec80527073f1bd0cc373b8461f48"},(0,s.h)("slot",{key:"136e1fa02c44fe282291fe719d88469b4e52403c"})))}}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3766],{3766:(e,c,t)=>{t.r(c),t.d(c,{kol_indented_text_wc:()=>a});var s=t(1114);const a=class{constructor(e){(0,s.r)(this,e),this.state={}}render(){return(0,s.h)(s.H,{key:"22f2e054e07ccb74cbc702ed9cb7641e874ecb50",class:"kol-indented-text-wc"},(0,s.h)("div",{key:"2eac3286c74fec80527073f1bd0cc373b8461f48"},(0,s.h)("slot",{key:"136e1fa02c44fe282291fe719d88469b4e52403c"})))}}}}]);