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

package/dist/1636.js

@@ -1,2 +1,2 @@
 /*! For license information please see 1636.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1636],{2486:(e,t,n)=>{n.d(t,{K:()=>u});var i=n(3133),o=n(1405),a=n(4600),l=n(1100),s=n(7883),r=n(7579),d=n(6448);const c=({ariaLabel:e,icon:t})=>(0,o.h)(s.d,{class:"heading-icon",_label:e,_icons:t}),h=({type:e,label:t})=>{switch(e){case"error":return(0,o.h)(c,{ariaLabel:(0,l.t)("kol-error"),icon:"codicon codicon-error",label:t});case"info":return(0,o.h)(c,{ariaLabel:(0,l.t)("kol-info"),icon:"codicon codicon-info",label:t});case"warning":return(0,o.h)(c,{ariaLabel:(0,l.t)("kol-warning"),icon:"codicon codicon-warning",label:t});case"success":return(0,o.h)(c,{ariaLabel:(0,l.t)("kol-success"),icon:"codicon codicon-pass",label:t});default:return(0,o.h)(c,{ariaLabel:(0,l.t)("kol-message"),icon:"codicon codicon-comment",label:t})}},u=(e,t)=>{const{class:n={},type:c="default",variant:u="msg",label:p,hasCloser:b,alert:v,onAlertTimeout:f,onCloserClick:m,level:y}=e,g=(0,i._)(e,["class","type","variant","label","hasCloser","alert","onAlertTimeout","onCloserClick","level"]);if(v){try{d.L.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(e){d.L.debug("Navigator does not support vibration.")}setTimeout((()=>{null==f||f()}),1e4)}const _=Object.assign({class:(0,a.c)("kol-alert-wc","alert",c,u,{hasCloser:!!b},n),role:v?"alert":void 0},g);return(0,o.h)("div",Object.assign({},_),(0,o.h)("div",{class:"heading"},(0,o.h)(h,{label:p,type:c}),(0,o.h)("div",{class:"heading-content"},p?(0,o.h)(r.K,{level:y},p):null,"msg"===u&&(0,o.h)("div",{class:"content"},t)),b&&(0,o.h)(s.a,{class:"close",_ariaDescription:(null==p?void 0:p.trim())||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:(0,l.t)("kol-close-alert"),_on:{onClick:m},_tooltipAlign:"left"})),"card"===u&&(0,o.h)("div",{class:"content"},t))}},9662:(e,t,n)=>{n.d(t,{K:()=>l});var i=n(4600),o=n(1405),a=n(2486);const l=({_alert:e,_msg:t,_hideError:n,_id:l})=>(0,o.h)(a.K,Object.assign({"aria-hidden":"true",id:`${l}-error`,alert:e,type:"error",class:(0,i.c)({error:!0,"visually-hidden":!0===n})},t),(null==t?void 0:t._description)||void 0)},7579:(e,t,n)=>{n.d(t,{K:()=>c});var i=n(3133),o=n(1405),a=n(4600);const l=1;function s(e){return function(e){return e>=l&&e<=6}(e)?`h${e}`:"strong"}const r=(e,t)=>{var{class:n,level:r=l,variant:d}=e,c=(0,i._)(e,["class","level","variant"]);const h=s(r),u=d||h;return(0,o.h)(h,Object.assign({class:(0,a.c)("headline",`headline-${u}`,n)},c),t)},d=(e,t)=>{var{class:n,level:r=l}=e,d=(0,i._)(e,["class","level"]);const c=function(e){return 1===e?"span":s(e)}(r+1);return(0,o.h)(c,Object.assign({class:(0,a.c)("secondary-headline",n)},d),t)},c=(e,t)=>{var{secondaryHeadline:n,level:s=l,class:c,HeadingGroupProps:h={},SecondaryHeadlineProps:u={}}=e,p=(0,i._)(e,["secondaryHeadline","level","class","HeadingGroupProps","SecondaryHeadlineProps"]);const b="kol-heading-wc",v=Object.assign({level:s},p);if(!n)return(0,o.h)(r,Object.assign({class:(0,a.c)(b,c)},v),t);const{class:f}=h,m=(0,i._)(h,["class"]),y=Object.assign({class:(0,a.c)(b,f)},m);return(0,o.h)("hgroup",Object.assign({},y),(0,o.h)(r,Object.assign({class:c},v),t),(0,o.h)(d,Object.assign({level:s},u),n))}},4600:(e,t,n)=>{function i(e){var t,n,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e)){var a=e.length;for(t=0;t<a;t++)e[t]&&(n=i(e[t]))&&(o&&(o+=" "),o+=n)}else for(n in e)e[n]&&(o&&(o+=" "),o+=n);return o}function o(){for(var e,t,n=0,o="",a=arguments.length;n<a;n++)(e=arguments[n])&&(t=i(e))&&(o&&(o+=" "),o+=t);return o}n.d(t,{c:()=>o})},6179:(e,t,n)=>{n.d(t,{a:()=>s,p:()=>r});var i=n(7883),o=n(4058),a=n(6448);const l=e=>{for((0,a.a)()&&((0,o.j)("↓ Search form element start."),a.L.debug(e));e instanceof HTMLElement&&"FORM"!==e.tagName&&e.tagName!==i.j.toUpperCase();){try{e=e.parentElement instanceof HTMLElement?e.parentElement:e.parentNode instanceof ShadowRoot?e.parentNode.host:null}catch(e){}(0,a.a)()&&(a.L.debug(e),(0,o.j)("↑ Search form element finished."))}return e},s=(e={})=>{var t,n;const a=l(e.form);if(a instanceof HTMLElement){const e=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===a.tagName)(0,o.q)(e,a),a.dispatchEvent(e);else if(a.tagName===i.j.toUpperCase()){(0,o.q)(e,o.K.querySelector("form",a));const i=a;"function"==typeof(null===(t=i._on)||void 0===t?void 0:t.onReset)&&(null===(n=i._on)||void 0===n||n.onReset(e))}}},r=(e={})=>{const t=l(e.form);if(t instanceof HTMLElement){const e=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:t});if("FORM"===t.tagName)(0,a.a)()&&!1===t.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 t.requestSubmit?t.requestSubmit():((0,o.q)(e,t),t.dispatchEvent(e))}));else if(t.tagName===i.j.toUpperCase()){(0,o.q)(e,o.K.querySelector("form",t));const n=t;setTimeout((()=>{var t,i;"function"==typeof(null===(t=n._on)||void 0===t?void 0:t.onSubmit)&&(null===(i=n._on)||void 0===i||i.onSubmit(e))}))}}}},2533:(e,t,n)=>{n.d(t,{I:()=>h,a:()=>u,b:()=>s,f:()=>c,v:()=>r});var i=n(4932),o=n(4058),a=n(1085);const l=e=>{if("object"==typeof e&&null!==e){if("string"==typeof e.label&&e.label.length>0)return e.disabled=!0===e.disabled,e.label=`${e.label}`.trim(),!1===(0,a.b)(e.label,3)&&!1===(0,a.c)(e.label)&&(0,o.a)(`A differing Aria-Label (${e.label}) is not accessible. A differing Aria-Label should consist of at least three readable characters.`),!Array.isArray(e.options)||void 0===e.options.find((e=>!1===l(e)));if("number"==typeof e.label)return!0}return!1},s=(e,t,n={})=>{(0,o.g)(e,"_options",(e=>"object"==typeof e&&null!==e&&"string"==typeof e.label&&e.label.length>0),t,void 0,n)},r=(e,t,n={})=>{(0,o.g)(e,"_options",l,t,void 0,n)},d=["horizontal","vertical"],c=(e,t,n="")=>{t.forEach(((t,i)=>{const o=`${n}-${i}`;"object"==typeof t&&null!==t&&"string"==typeof t.label&&t.label.length>0&&(Array.isArray(t.options)?c(e,t.options,o):e.set(o,t))}))};class h extends i.I{constructor(e,t,n){super(e,t,n),this.component=e}validateRequired(e){((e,t)=>{(0,o.b)(e,"_required",t)})(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateRequired(this.component._required)}}class u extends h{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;Array.isArray(n)&&n.length>0&&(this.keyOptionMap.clear(),c(this.keyOptionMap,n))},this.component=e}validateOrientation(e){(0,o.w)(this.component,"_orientation",(e=>"string"==typeof e&&d.includes(e)),new Set([`Orientation {${d.join(", ")}`]),e,{defaultValue:"vertical"})}validateOptions(e){s(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateValue(e){e=(0,o.m)(e),e=Array.isArray(e)?e[0]:e,(0,o.s)(this.component,"_value",e,{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions})}componentWillLoad(){super.componentWillLoad(),this.validateOrientation(this.component._orientation),this.validateOptions(this.component._options),this.validateValue(this.component._value)}}},1100:(e,t,n)=>{n.d(t,{t:()=>a});var i=n(8457),o=n(1523);let a=(e,t)=>{var n;return(null!==(n=(0,i.g)())&&void 0!==n?n:(0,i.i)("de")).translate(e,t)};"test"===o.p&&(a=e=>e)},1636:(e,t,n)=>{n.r(t),n.d(t,{kol_input_radio:()=>b});var i=n(1405),o=n(2385),a=n(6855),l=n(4932),s=n(2533),r=n(6179),d=n(7883),c=n(4851),h=n(9662),u=n(1523),p=(e,t,n)=>new Promise(((i,o)=>{var a=e=>{try{s(n.next(e))}catch(e){o(e)}},l=e=>{try{s(n.throw(e))}catch(e){o(e)}},s=e=>e.done?i(e.value):Promise.resolve(e.value).then(a,l);s((n=n.apply(e,t)).next())}));const b=class{getValue(){return p(this,null,(function*(){return this.currentValue}))}focus(){return p(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return p(this,null,(function*(){var e;null===(e=this.inputRef)||void 0===e||e.focus()}))}render(){const{ariaDescribedBy:e,hasError:t}=(0,l.g)(this.state),n=(0,u.s)(this.state._label),o="string"==typeof this._hint&&this._hint.length>0;return(0,i.h)(i.H,{key:"5ecf7e00bca751b664c005bc4080ab0bfa335ede",class:"kol-input-radio"},(0,i.h)("fieldset",{key:"bc9e149fc31cf0ae72143935698847808a1bfb8a",class:{fieldset:!0,disabled:!0===this.state._disabled,error:!0===t,required:!0===this.state._required,"hidden-error":!0===this._hideError,[this.state._orientation]:!0}},(0,i.h)("legend",{key:"03569733012b617380c5f9aca9bb530829257eb5",class:"block w-full mb-1 leading-normal"},(0,i.h)("span",{key:"d43aad7ef349a7001118ab33f011137911278f7b"},(0,i.h)("span",{key:"e08530edc996726e7e8fd906e9f423d4107b2d36",slot:"label"},n?(0,i.h)("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?(0,i.h)(c.I,{badgeText:(0,u.b)(this.state._accessKey,this.state._shortKey),label:this._label}):this._label))),this.state._options.map(((t,n)=>{const o=`${this.state._id}-${n}`,a=`radio-${n}`,l=this.state._value===t.value;return(0,i.h)(d.i,{class:{radio:!0,disabled:Boolean(this.state._disabled||t.disabled)},key:o,_accessKey:this.state._accessKey,_disabled:this.state._disabled||t.disabled,_hideLabel:this.state._hideLabel,_hint:t.hint,_id:o,_label:t.label,_renderNoLabel:!0,_required:this.state._required,_shortKey:this.state._shortKey,_slotName:a,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},(0,i.h)("div",{slot:a,class:"radio-input-wrapper"},(0,i.h)("input",Object.assign({ref:this.state._value===t.value?this.catchRef:void 0,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof t.label?t.label:void 0,type:"radio",id:o,checked:l,name:this.state._name||this.state._id,disabled:this.state._disabled||t.disabled,required:this.state._required,tabIndex:this.state._tabIndex,value:`-${n}`},this.controller.onFacade,{onChange:this.onChange,onClick:void 0,onInput:this.onInput,onKeyDown:this.onKeyDown.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})),(0,i.h)("label",{class:"radio-label",htmlFor:`${o}`,style:{height:this.state._hideLabel?"0":void 0,margin:this.state._hideLabel?"0":void 0,padding:this.state._hideLabel?"0":void 0,visibility:this.state._hideLabel?"hidden":void 0}},(0,i.h)("span",null,(0,i.h)("span",{class:"radio-label-span-inner"},t.label)))))})),t&&(0,i.h)(h.K,{key:"a1b9faccfd3e8cb431215ffc5be92cc99c8f1252",_alert:this.showAsAlert(),_hideError:this.state._hideError,_msg:this.state._msg,_id:this.state._id}),o&&(0,i.h)("span",{key:"075eb5e3e50ad8314ef1641659d353cbd8f11235",class:"hint"},this.state._hint)))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{this.inputRef=e},this.onInput=e=>{var t;if(e.target instanceof HTMLInputElement){const n=this.controller.getOptionByKey(e.target.value);void 0!==n&&((0,a.t)("input",this.host,n.value),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onInput)&&this.state._on.onInput(e,n.value))}},this.onChange=e=>{var t;if(e.target instanceof HTMLInputElement){const n=this.controller.getOptionByKey(e.target.value);void 0!==n&&((0,a.s)(e),(0,a.t)("change",this.host,n.value),this.controller.setFormAssociatedValue(n.value),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onChange)&&this.state._on.onChange(e,n.value),this.currentValue=n.value)}},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||(0,r.p)({form:this.host,ref:this.inputRef})},this._accessKey=void 0,this._alert=void 0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._orientation="vertical",this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${(0,o.n)()}`,_label:"",_options:[],_orientation:"vertical"},this.inputHasFocus=!1,this.controller=new s.a(this,"radio",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(e){this.controller.validateAccessKey(e)}validateTooltipAlign(e){this.controller.validateTooltipAlign(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHideError(e){this.controller.validateHideError(e)}validateHint(e){this.controller.validateHint(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateOrientation(e){this.controller.validateOrientation(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.currentValue=this._value,this.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_tooltipAlign:["validateTooltipAlign"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hideError:["validateHideError"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_orientation:["validateOrientation"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};b.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-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    --border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    --input-size: 1.5em;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .icons {\n    display: none;\n  }\n  label {\n    cursor: pointer;\n  }\n  input {\n    appearance: none;\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: 100%;\n    cursor: pointer;\n    display: flex;\n    height: var(--input-size);\n    margin: 0;\n    min-height: var(--input-size);\n    min-width: var(--input-size);\n    padding: 0;\n    width: var(--input-size);\n  }\n  input:before {\n    border-radius: 100%;\n    content: \"\";\n    margin: auto;\n    height: calc(var(--input-size) / 2);\n    width: calc(var(--input-size) / 2);\n  }\n  input:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    input:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n  fieldset {\n    display: flex;\n  }\n  fieldset.vertical {\n    flex-direction: column;\n  }\n  fieldset .input-slot {\n    align-items: center;\n    display: flex;\n  }\n  /* required star is on fieldset legend */\n  .required label > span::after {\n    content: \"\";\n  }\n}"}},3133:(e,t,n)=>{function i(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o<i.length;o++)t.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(e,i[o])&&(n[i[o]]=e[i[o]])}return n}n.d(t,{_:()=>i}),"function"==typeof SuppressedError&&SuppressedError}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1636],{4913:(e,t,n)=>{n.d(t,{K:()=>u});var i=n(3133),o=n(1114),a=n(4600),l=n(1100),s=n(7883),r=n(9028),d=n(6448);const c=({ariaLabel:e,icon:t})=>(0,o.h)(s.d,{class:"heading-icon",_label:e,_icons:t}),h=({type:e,label:t})=>{switch(e){case"error":return(0,o.h)(c,{ariaLabel:(0,l.t)("kol-error"),icon:"codicon codicon-error",label:t});case"info":return(0,o.h)(c,{ariaLabel:(0,l.t)("kol-info"),icon:"codicon codicon-info",label:t});case"warning":return(0,o.h)(c,{ariaLabel:(0,l.t)("kol-warning"),icon:"codicon codicon-warning",label:t});case"success":return(0,o.h)(c,{ariaLabel:(0,l.t)("kol-success"),icon:"codicon codicon-pass",label:t});default:return(0,o.h)(c,{ariaLabel:(0,l.t)("kol-message"),icon:"codicon codicon-comment",label:t})}},u=(e,t)=>{const{class:n={},type:c="default",variant:u="msg",label:p,hasCloser:b,alert:v,onAlertTimeout:f,onCloserClick:m,level:y}=e,g=(0,i._)(e,["class","type","variant","label","hasCloser","alert","onAlertTimeout","onCloserClick","level"]);if(v){try{d.L.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(e){d.L.debug("Navigator does not support vibration.")}setTimeout((()=>{null==f||f()}),1e4)}const _=Object.assign({class:(0,a.c)("kol-alert-wc","alert",c,u,{hasCloser:!!b},n),role:v?"alert":void 0},g);return(0,o.h)("div",Object.assign({},_),(0,o.h)("div",{class:"heading"},(0,o.h)(h,{label:p,type:c}),(0,o.h)("div",{class:"heading-content"},p?(0,o.h)(r.K,{level:y},p):null,"msg"===u&&(0,o.h)("div",{class:"content"},t)),b&&(0,o.h)(s.a,{class:"close",_ariaDescription:(null==p?void 0:p.trim())||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:(0,l.t)("kol-close-alert"),_on:{onClick:m},_tooltipAlign:"left"})),"card"===u&&(0,o.h)("div",{class:"content"},t))}},9048:(e,t,n)=>{n.d(t,{K:()=>l});var i=n(4600),o=n(1114),a=n(4913);const l=({_alert:e,_msg:t,_hideError:n,_id:l})=>(0,o.h)(a.K,Object.assign({"aria-hidden":"true",id:`${l}-error`,alert:e,type:"error",class:(0,i.c)({error:!0,"visually-hidden":!0===n})},t),(null==t?void 0:t._description)||void 0)},9028:(e,t,n)=>{n.d(t,{K:()=>c});var i=n(3133),o=n(1114),a=n(4600);const l=1;function s(e){return function(e){return e>=l&&e<=6}(e)?`h${e}`:"strong"}const r=(e,t)=>{var{class:n,level:r=l,variant:d}=e,c=(0,i._)(e,["class","level","variant"]);const h=s(r),u=d||h;return(0,o.h)(h,Object.assign({class:(0,a.c)("headline",`headline-${u}`,n)},c),t)},d=(e,t)=>{var{class:n,level:r=l}=e,d=(0,i._)(e,["class","level"]);const c=function(e){return 1===e?"span":s(e)}(r+1);return(0,o.h)(c,Object.assign({class:(0,a.c)("secondary-headline",n)},d),t)},c=(e,t)=>{var{secondaryHeadline:n,level:s=l,class:c,HeadingGroupProps:h={},SecondaryHeadlineProps:u={}}=e,p=(0,i._)(e,["secondaryHeadline","level","class","HeadingGroupProps","SecondaryHeadlineProps"]);const b="kol-heading-wc",v=Object.assign({level:s},p);if(!n)return(0,o.h)(r,Object.assign({class:(0,a.c)(b,c)},v),t);const{class:f}=h,m=(0,i._)(h,["class"]),y=Object.assign({class:(0,a.c)(b,f)},m);return(0,o.h)("hgroup",Object.assign({},y),(0,o.h)(r,Object.assign({class:c},v),t),(0,o.h)(d,Object.assign({level:s},u),n))}},4600:(e,t,n)=>{function i(e){var t,n,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e)){var a=e.length;for(t=0;t<a;t++)e[t]&&(n=i(e[t]))&&(o&&(o+=" "),o+=n)}else for(n in e)e[n]&&(o&&(o+=" "),o+=n);return o}function o(){for(var e,t,n=0,o="",a=arguments.length;n<a;n++)(e=arguments[n])&&(t=i(e))&&(o&&(o+=" "),o+=t);return o}n.d(t,{c:()=>o})},6179:(e,t,n)=>{n.d(t,{a:()=>s,p:()=>r});var i=n(7883),o=n(4058),a=n(6448);const l=e=>{for((0,a.a)()&&((0,o.j)("↓ Search form element start."),a.L.debug(e));e instanceof HTMLElement&&"FORM"!==e.tagName&&e.tagName!==i.j.toUpperCase();){try{e=e.parentElement instanceof HTMLElement?e.parentElement:e.parentNode instanceof ShadowRoot?e.parentNode.host:null}catch(e){}(0,a.a)()&&(a.L.debug(e),(0,o.j)("↑ Search form element finished."))}return e},s=(e={})=>{var t,n;const a=l(e.form);if(a instanceof HTMLElement){const e=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===a.tagName)(0,o.q)(e,a),a.dispatchEvent(e);else if(a.tagName===i.j.toUpperCase()){(0,o.q)(e,o.K.querySelector("form",a));const i=a;"function"==typeof(null===(t=i._on)||void 0===t?void 0:t.onReset)&&(null===(n=i._on)||void 0===n||n.onReset(e))}}},r=(e={})=>{const t=l(e.form);if(t instanceof HTMLElement){const e=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:t});if("FORM"===t.tagName)(0,a.a)()&&!1===t.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 t.requestSubmit?t.requestSubmit():((0,o.q)(e,t),t.dispatchEvent(e))}));else if(t.tagName===i.j.toUpperCase()){(0,o.q)(e,o.K.querySelector("form",t));const n=t;setTimeout((()=>{var t,i;"function"==typeof(null===(t=n._on)||void 0===t?void 0:t.onSubmit)&&(null===(i=n._on)||void 0===i||i.onSubmit(e))}))}}}},2533:(e,t,n)=>{n.d(t,{I:()=>h,a:()=>u,b:()=>s,f:()=>c,v:()=>r});var i=n(4932),o=n(4058),a=n(1085);const l=e=>{if("object"==typeof e&&null!==e){if("string"==typeof e.label&&e.label.length>0)return e.disabled=!0===e.disabled,e.label=`${e.label}`.trim(),!1===(0,a.b)(e.label,3)&&!1===(0,a.c)(e.label)&&(0,o.a)(`A differing Aria-Label (${e.label}) is not accessible. A differing Aria-Label should consist of at least three readable characters.`),!Array.isArray(e.options)||void 0===e.options.find((e=>!1===l(e)));if("number"==typeof e.label)return!0}return!1},s=(e,t,n={})=>{(0,o.g)(e,"_options",(e=>"object"==typeof e&&null!==e&&"string"==typeof e.label&&e.label.length>0),t,void 0,n)},r=(e,t,n={})=>{(0,o.g)(e,"_options",l,t,void 0,n)},d=["horizontal","vertical"],c=(e,t,n="")=>{t.forEach(((t,i)=>{const o=`${n}-${i}`;"object"==typeof t&&null!==t&&"string"==typeof t.label&&t.label.length>0&&(Array.isArray(t.options)?c(e,t.options,o):e.set(o,t))}))};class h extends i.I{constructor(e,t,n){super(e,t,n),this.component=e}validateRequired(e){((e,t)=>{(0,o.b)(e,"_required",t)})(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateRequired(this.component._required)}}class u extends h{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;Array.isArray(n)&&n.length>0&&(this.keyOptionMap.clear(),c(this.keyOptionMap,n))},this.component=e}validateOrientation(e){(0,o.w)(this.component,"_orientation",(e=>"string"==typeof e&&d.includes(e)),new Set([`Orientation {${d.join(", ")}`]),e,{defaultValue:"vertical"})}validateOptions(e){s(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateValue(e){e=(0,o.m)(e),e=Array.isArray(e)?e[0]:e,(0,o.s)(this.component,"_value",e,{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions})}componentWillLoad(){super.componentWillLoad(),this.validateOrientation(this.component._orientation),this.validateOptions(this.component._options),this.validateValue(this.component._value)}}},1100:(e,t,n)=>{n.d(t,{t:()=>a});var i=n(8457),o=n(1523);let a=(e,t)=>{var n;return(null!==(n=(0,i.g)())&&void 0!==n?n:(0,i.i)("de")).translate(e,t)};"test"===o.p&&(a=e=>e)},1636:(e,t,n)=>{n.r(t),n.d(t,{kol_input_radio:()=>b});var i=n(1114),o=n(6762),a=n(6855),l=n(4932),s=n(2533),r=n(6179),d=n(7883),c=n(9196),h=n(9048),u=n(1523),p=(e,t,n)=>new Promise(((i,o)=>{var a=e=>{try{s(n.next(e))}catch(e){o(e)}},l=e=>{try{s(n.throw(e))}catch(e){o(e)}},s=e=>e.done?i(e.value):Promise.resolve(e.value).then(a,l);s((n=n.apply(e,t)).next())}));const b=class{getValue(){return p(this,null,(function*(){return this.currentValue}))}focus(){return p(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return p(this,null,(function*(){var e;null===(e=this.inputRef)||void 0===e||e.focus()}))}render(){const{ariaDescribedBy:e,hasError:t}=(0,l.g)(this.state),n=(0,u.s)(this.state._label),o="string"==typeof this._hint&&this._hint.length>0;return(0,i.h)(i.H,{key:"5ecf7e00bca751b664c005bc4080ab0bfa335ede",class:"kol-input-radio"},(0,i.h)("fieldset",{key:"bc9e149fc31cf0ae72143935698847808a1bfb8a",class:{fieldset:!0,disabled:!0===this.state._disabled,error:!0===t,required:!0===this.state._required,"hidden-error":!0===this._hideError,[this.state._orientation]:!0}},(0,i.h)("legend",{key:"03569733012b617380c5f9aca9bb530829257eb5",class:"block w-full mb-1 leading-normal"},(0,i.h)("span",{key:"d43aad7ef349a7001118ab33f011137911278f7b"},(0,i.h)("span",{key:"e08530edc996726e7e8fd906e9f423d4107b2d36",slot:"label"},n?(0,i.h)("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?(0,i.h)(c.I,{badgeText:(0,u.b)(this.state._accessKey,this.state._shortKey),label:this._label}):this._label))),this.state._options.map(((t,n)=>{const o=`${this.state._id}-${n}`,a=`radio-${n}`,l=this.state._value===t.value;return(0,i.h)(d.i,{class:{radio:!0,disabled:Boolean(this.state._disabled||t.disabled)},key:o,_accessKey:this.state._accessKey,_disabled:this.state._disabled||t.disabled,_hideLabel:this.state._hideLabel,_hint:t.hint,_id:o,_label:t.label,_renderNoLabel:!0,_required:this.state._required,_shortKey:this.state._shortKey,_slotName:a,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},(0,i.h)("div",{slot:a,class:"radio-input-wrapper"},(0,i.h)("input",Object.assign({ref:this.state._value===t.value?this.catchRef:void 0,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof t.label?t.label:void 0,type:"radio",id:o,checked:l,name:this.state._name||this.state._id,disabled:this.state._disabled||t.disabled,required:this.state._required,tabIndex:this.state._tabIndex,value:`-${n}`},this.controller.onFacade,{onChange:this.onChange,onClick:void 0,onInput:this.onInput,onKeyDown:this.onKeyDown.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})),(0,i.h)("label",{class:"radio-label",htmlFor:`${o}`,style:{height:this.state._hideLabel?"0":void 0,margin:this.state._hideLabel?"0":void 0,padding:this.state._hideLabel?"0":void 0,visibility:this.state._hideLabel?"hidden":void 0}},(0,i.h)("span",null,(0,i.h)("span",{class:"radio-label-span-inner"},t.label)))))})),t&&(0,i.h)(h.K,{key:"a1b9faccfd3e8cb431215ffc5be92cc99c8f1252",_alert:this.showAsAlert(),_hideError:this.state._hideError,_msg:this.state._msg,_id:this.state._id}),o&&(0,i.h)("span",{key:"075eb5e3e50ad8314ef1641659d353cbd8f11235",class:"hint"},this.state._hint)))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{this.inputRef=e},this.onInput=e=>{var t;if(e.target instanceof HTMLInputElement){const n=this.controller.getOptionByKey(e.target.value);void 0!==n&&((0,a.t)("input",this.host,n.value),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onInput)&&this.state._on.onInput(e,n.value))}},this.onChange=e=>{var t;if(e.target instanceof HTMLInputElement){const n=this.controller.getOptionByKey(e.target.value);void 0!==n&&((0,a.s)(e),(0,a.t)("change",this.host,n.value),this.controller.setFormAssociatedValue(n.value),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onChange)&&this.state._on.onChange(e,n.value),this.currentValue=n.value)}},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||(0,r.p)({form:this.host,ref:this.inputRef})},this._accessKey=void 0,this._alert=void 0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._orientation="vertical",this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${(0,o.n)()}`,_label:"",_options:[],_orientation:"vertical"},this.inputHasFocus=!1,this.controller=new s.a(this,"radio",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(e){this.controller.validateAccessKey(e)}validateTooltipAlign(e){this.controller.validateTooltipAlign(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHideError(e){this.controller.validateHideError(e)}validateHint(e){this.controller.validateHint(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateOrientation(e){this.controller.validateOrientation(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.currentValue=this._value,this.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_tooltipAlign:["validateTooltipAlign"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hideError:["validateHideError"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_orientation:["validateOrientation"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};b.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-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    --border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    --input-size: 1.5em;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .icons {\n    display: none;\n  }\n  label {\n    cursor: pointer;\n  }\n  input {\n    appearance: none;\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: 100%;\n    cursor: pointer;\n    display: flex;\n    height: var(--input-size);\n    margin: 0;\n    min-height: var(--input-size);\n    min-width: var(--input-size);\n    padding: 0;\n    width: var(--input-size);\n  }\n  input:before {\n    border-radius: 100%;\n    content: \"\";\n    margin: auto;\n    height: calc(var(--input-size) / 2);\n    width: calc(var(--input-size) / 2);\n  }\n  input:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    input:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n  fieldset {\n    display: flex;\n  }\n  fieldset.vertical {\n    flex-direction: column;\n  }\n  fieldset .input-slot {\n    align-items: center;\n    display: flex;\n  }\n  /* required star is on fieldset legend */\n  .required label > span::after {\n    content: \"\";\n  }\n}"}},3133:(e,t,n)=>{function i(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o<i.length;o++)t.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(e,i[o])&&(n[i[o]]=e[i[o]])}return n}n.d(t,{_:()=>i}),"function"==typeof SuppressedError&&SuppressedError}}]);

package/dist/1792.js

@@ -1,2 +1,2 @@
 /*! For license information please see 1792.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1792],{1792:(n,e,t)=>{t.r(e),t.d(e,{kol_tree:()=>a});var i=t(1405),o=t(7883);const a=class{constructor(n){(0,i.r)(this,n),this._label=void 0}render(){return(0,i.h)(i.H,{key:"e594a48c3146b155c3abf2b41bafe6e42f665916",class:"kol-tree"},(0,i.h)(o.q,{key:"1821bf796b951f0827ea242003bbbf23d31add09",_label:this._label},(0,i.h)("slot",{key:"2440480588b3bc01145ab44de4dc28e27b40bcaf"})))}};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    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .tree ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .tree: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}"}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1792],{1792:(n,e,t)=>{t.r(e),t.d(e,{kol_tree:()=>a});var i=t(1114),o=t(7883);const a=class{constructor(n){(0,i.r)(this,n),this._label=void 0}render(){return(0,i.h)(i.H,{key:"e594a48c3146b155c3abf2b41bafe6e42f665916",class:"kol-tree"},(0,i.h)(o.q,{key:"1821bf796b951f0827ea242003bbbf23d31add09",_label:this._label},(0,i.h)("slot",{key:"2440480588b3bc01145ab44de4dc28e27b40bcaf"})))}};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    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .tree ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .tree: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}"}}}]);

package/dist/2017.js

@@ -1,2 +1,2 @@
 /*! For license information please see 2017.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2017],{2017:(n,t,e)=>{e.r(t),e.d(t,{kol_link_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.linkWcRef=n},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._customClass=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._tabIndex=void 0,this._target=void 0,this._tooltipAlign="right",this._variant="normal"}focus(){return a(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return a(this,null,(function*(){var n;yield null===(n=this.linkWcRef)||void 0===n?void 0:n.kolFocus()}))}render(){return(0,i.h)(i.H,{key:"cbcccf120376d5c199b59153c3c591cbfad6947f",class:"kol-link-button"},(0,i.h)(o.g,{key:"18caa33e8b2e0a123fb2276ab38582017e99043b",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,_ariaCurrentValue:this._ariaCurrentValue,_ariaDescription:this._ariaDescription,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icons:this._icons,_label:this._label,_on:this._on,_role:"button",_shortKey:this._shortKey,_tabIndex:this._tabIndex,_target:this._target,_tooltipAlign:this._tooltipAlign},(0,i.h)("slot",{key:"c15f782d4069c07ffa2960d60bb29996f0a1063e",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([[2017],{2017:(n,t,e)=>{e.r(t),e.d(t,{kol_link_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.linkWcRef=n},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._customClass=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._tabIndex=void 0,this._target=void 0,this._tooltipAlign="right",this._variant="normal"}focus(){return a(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return a(this,null,(function*(){var n;yield null===(n=this.linkWcRef)||void 0===n?void 0:n.kolFocus()}))}render(){return(0,i.h)(i.H,{key:"cbcccf120376d5c199b59153c3c591cbfad6947f",class:"kol-link-button"},(0,i.h)(o.g,{key:"18caa33e8b2e0a123fb2276ab38582017e99043b",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,_ariaCurrentValue:this._ariaCurrentValue,_ariaDescription:this._ariaDescription,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icons:this._icons,_label:this._label,_on:this._on,_role:"button",_shortKey:this._shortKey,_tabIndex:this._tabIndex,_target:this._target,_tooltipAlign:this._tooltipAlign},(0,i.h)("slot",{key:"c15f782d4069c07ffa2960d60bb29996f0a1063e",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/2207.js

@@ -1,2 +1,2 @@
 /*! For license information please see 2207.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2207],{2207:(s,c,e)=>{e.r(c),e.d(c,{test_component:()=>u});var t=e(1405);const u=class{constructor(s){(0,t.r)(this,s)}}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2207],{2207:(s,c,e)=>{e.r(c),e.d(c,{test_component:()=>u});var t=e(1114);const u=class{constructor(s){(0,t.r)(this,s)}}}}]);

package/dist/2322.js

@@ -1,2 +1,2 @@
 /*! For license information please see 2322.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2322],{3260:(t,e,n)=>{n.d(e,{S:()=>s,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},s=new Event("StateChange")},6179:(t,e,n)=>{n.d(e,{a:()=>l,p:()=>r});var i=n(7883),o=n(4058),a=n(6448);const s=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},l=(t={})=>{var e,n;const a=s(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=s(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))}))}}}},324:(t,e,n)=>{n.d(e,{I:()=>r});var i=n(4932),o=n(5670),a=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,a.o)(t,(()=>{try{t=(0,a.p)(t)}catch(t){}(0,a.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,s.i)(t.left,1)||(0,o.i)(t.left)||(0,s.i)(t.right,1)||(0,o.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),o=n(3260);const a=(t,e,n)=>{(0,o.b)(n)?t[e]=n:(0,o.i)(n,1)&&(t[e]={icon:n})},s=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),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,o.i)(t,1)||"object"==typeof t&&null!==t&&((0,o.i)(t.left,1)||s(t.left)||(0,o.i)(t.right,1)||s(t.right)||(0,o.i)(t.top,1)||s(t.top)||(0,o.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,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)}}}))}))}},2322:(t,e,n)=>{n.r(e),n.d(e,{kol_input_range:()=>b});var i=n(1405),o=n(2385),a=n(6179),s=n(4932),l=n(324),r=n(4058),d=n(2079),c=n(7883),h=n(4851),u=n(1523),p=(t,e,n)=>new Promise(((i,o)=>{var a=t=>{try{l(n.next(t))}catch(t){o(t)}},s=t=>{try{l(n.throw(t))}catch(t){o(t)}},l=t=>t.done?i(t.value):Promise.resolve(t.value).then(a,s);l((n=n.apply(t,e)).next())}));class m extends l.I{constructor(t,e,n){super(t,e,n),this.component=t}validateAutoComplete(t){(0,r.w)(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateMax(t){(0,r.k)(this.component,"_max",t)}validateMin(t){(0,r.k)(this.component,"_min",t)}validateStep(t){(0,r.k)(this.component,"_step",t)}validateSuggestions(t){(0,d.v)(this.component,t)}validateValue(t){(0,r.k)(this.component,"_value",t),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.validateStep(this.component._step),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const b=class{focus(){return p(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return p(this,null,(function*(){var t;null===(t=this.refInputNumber)||void 0===t||t.focus()}))}getSanitizedFloatValue(t){const e=parseFloat(t);return this.state._max&&e>this.state._max?this.state._max:this.state._min&&e<this.state._min?this.state._min:e}getValue(){return p(this,null,(function*(){if(void 0!==this.refInputNumber){const t=this.refInputNumber.value;return this.getSanitizedFloatValue(t)}}))}componentDidLoad(){var t;!this._value&&(null===(t=this.refInputRange)||void 0===t?void 0:t.value)&&this.validateValue(parseFloat(this.refInputRange.value))}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:"8d9b4f17df843e50597631eb960f90171cdbc4b2",class:"kol-input-range"},(0,i.h)(c.i,{key:"fb451fdc5dafde69d1cc493f5de69722608acd04",class:{range:!0,"hide-label":!!this.state._hideLabel},_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,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},(0,i.h)("span",{key:"029a8015f39e9edb0077435e33c837b06f128828",slot:"label"},n?(0,i.h)("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?(0,i.h)(i.F,null,(0,i.h)(h.I,{badgeText:(0,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:"0454a83fcef01bdc991cf24bf8c419f3ddc77229",slot:"input"},(0,i.h)("div",{key:"9529f62c5661c768b5496c996ce3f486671a723b",class:"inputs-wrapper",style:{"--kolibri-input-range--input-number--width":`${this.state._max}`.length+.5+"em"}},(0,i.h)("input",Object.assign({key:"62af1b13c396038ee488af98e04f70339158d7c9",ref:this.catchInputRangeRef,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,"aria-hidden":"true",autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,list:e?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-range`:void 0,spellcheck:"false",step:this.state._step,tabIndex:-1,type:"range",value:this.state._value},this.controller.onFacade,{onChange:this.onChange,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})),(0,i.h)("input",Object.assign({key:"71fed5dea562663bf1c4b27fa0e7c856626f3073",ref:this.catchInputNumberRef,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?`${this.state._name}-number`:void 0,step:this.state._step,type:"number",value:this.state._value},this.controller.onFacade,{onKeyDown:this.onKeyDown,onChange:this.onChange,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}}))),e&&[(0,i.h)("datalist",{key:"8b99cbdf50cba3eeb9e57d18e8932545eaec34ab",id:`${this.state._id}-list`},this.state._suggestions.map((t=>(0,i.h)("option",{value:t}))))])))}constructor(t){(0,i.r)(this,t),this.catchInputNumberRef=t=>{var e;t&&(this.refInputNumber=t,!this._value&&(null===(e=this.refInputNumber)||void 0===e?void 0:e.value)&&this.validateValue(parseFloat(this.refInputNumber.value)))},this.catchInputRangeRef=t=>{t&&(this.refInputRange=t)},this.onChange=t=>{var e,n;const i=t.target.value,o=this.getSanitizedFloatValue(i);this.validateValue(o),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&(null===(n=this.state._on)||void 0===n||n.onChange(t,o))},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||(0,a.p)({form:this.host,ref:this.refInputNumber})},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._shortKey=void 0,this._step=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hideError:!1,_id:`id-${(0,o.n)()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new m(this,"range",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)}validateShortKey(t){this.controller.validateShortKey(t)}validateStep(t){this.controller.validateStep(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_step:["validateStep"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};b.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .inputs-wrapper {\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n  }\n  input[type=number] {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: var(--kolibri-input-range--input-number--width);\n  }\n  /*\n    * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n    */\n  input[type=range] {\n    appearance: none;\n    background-color: #d3d3d3;\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid #000;\n    display: inline-block;\n    flex-grow: 1;\n    height: calc(8rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    padding: 0;\n    margin: 0;\n    /* Design-Hack - related with flex-grow */\n    width: 0;\n  }\n  input[type=range]::-webkit-slider-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n    cursor: pointer;\n    -webkit-appearance: none;\n  }\n  input[type=range]::-moz-range-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n    cursor: pointer;\n    -moz-appearance: none;\n  }\n}\n/* Fix missing outline in Chromium-based browsers on Windows in high contrast mode. */\n@media (prefers-contrast: more) {\n  ::-webkit-slider-thumb {\n    outline: calc(1rem / var(--kolibri-root-font-size, 16)) solid currentColor;\n  }\n}"}},2079:(t,e,n)=>{n.d(e,{v:()=>o});var i=n(4058);const o=(t,e)=>{(0,i.g)(t,"_suggestions",(t=>"string"==typeof t||"number"==typeof t),e,void 0,{hooks:{afterPatch:t=>{Array.isArray(t)&&t.length&&(0,i.a)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2322],{3260:(t,e,n)=>{n.d(e,{S:()=>s,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},s=new Event("StateChange")},6179:(t,e,n)=>{n.d(e,{a:()=>l,p:()=>r});var i=n(7883),o=n(4058),a=n(6448);const s=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},l=(t={})=>{var e,n;const a=s(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=s(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))}))}}}},324:(t,e,n)=>{n.d(e,{I:()=>r});var i=n(4932),o=n(5670),a=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,a.o)(t,(()=>{try{t=(0,a.p)(t)}catch(t){}(0,a.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,s.i)(t.left,1)||(0,o.i)(t.left)||(0,s.i)(t.right,1)||(0,o.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),o=n(3260);const a=(t,e,n)=>{(0,o.b)(n)?t[e]=n:(0,o.i)(n,1)&&(t[e]={icon:n})},s=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),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,o.i)(t,1)||"object"==typeof t&&null!==t&&((0,o.i)(t.left,1)||s(t.left)||(0,o.i)(t.right,1)||s(t.right)||(0,o.i)(t.top,1)||s(t.top)||(0,o.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,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)}}}))}))}},2322:(t,e,n)=>{n.r(e),n.d(e,{kol_input_range:()=>b});var i=n(1114),o=n(6762),a=n(6179),s=n(4932),l=n(324),r=n(4058),d=n(2079),c=n(7883),h=n(9196),u=n(1523),p=(t,e,n)=>new Promise(((i,o)=>{var a=t=>{try{l(n.next(t))}catch(t){o(t)}},s=t=>{try{l(n.throw(t))}catch(t){o(t)}},l=t=>t.done?i(t.value):Promise.resolve(t.value).then(a,s);l((n=n.apply(t,e)).next())}));class m extends l.I{constructor(t,e,n){super(t,e,n),this.component=t}validateAutoComplete(t){(0,r.w)(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateMax(t){(0,r.k)(this.component,"_max",t)}validateMin(t){(0,r.k)(this.component,"_min",t)}validateStep(t){(0,r.k)(this.component,"_step",t)}validateSuggestions(t){(0,d.v)(this.component,t)}validateValue(t){(0,r.k)(this.component,"_value",t),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.validateStep(this.component._step),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const b=class{focus(){return p(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return p(this,null,(function*(){var t;null===(t=this.refInputNumber)||void 0===t||t.focus()}))}getSanitizedFloatValue(t){const e=parseFloat(t);return this.state._max&&e>this.state._max?this.state._max:this.state._min&&e<this.state._min?this.state._min:e}getValue(){return p(this,null,(function*(){if(void 0!==this.refInputNumber){const t=this.refInputNumber.value;return this.getSanitizedFloatValue(t)}}))}componentDidLoad(){var t;!this._value&&(null===(t=this.refInputRange)||void 0===t?void 0:t.value)&&this.validateValue(parseFloat(this.refInputRange.value))}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:"8d9b4f17df843e50597631eb960f90171cdbc4b2",class:"kol-input-range"},(0,i.h)(c.i,{key:"fb451fdc5dafde69d1cc493f5de69722608acd04",class:{range:!0,"hide-label":!!this.state._hideLabel},_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,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},(0,i.h)("span",{key:"029a8015f39e9edb0077435e33c837b06f128828",slot:"label"},n?(0,i.h)("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?(0,i.h)(i.F,null,(0,i.h)(h.I,{badgeText:(0,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:"0454a83fcef01bdc991cf24bf8c419f3ddc77229",slot:"input"},(0,i.h)("div",{key:"9529f62c5661c768b5496c996ce3f486671a723b",class:"inputs-wrapper",style:{"--kolibri-input-range--input-number--width":`${this.state._max}`.length+.5+"em"}},(0,i.h)("input",Object.assign({key:"62af1b13c396038ee488af98e04f70339158d7c9",ref:this.catchInputRangeRef,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,"aria-hidden":"true",autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,list:e?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-range`:void 0,spellcheck:"false",step:this.state._step,tabIndex:-1,type:"range",value:this.state._value},this.controller.onFacade,{onChange:this.onChange,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})),(0,i.h)("input",Object.assign({key:"71fed5dea562663bf1c4b27fa0e7c856626f3073",ref:this.catchInputNumberRef,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?`${this.state._name}-number`:void 0,step:this.state._step,type:"number",value:this.state._value},this.controller.onFacade,{onKeyDown:this.onKeyDown,onChange:this.onChange,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}}))),e&&[(0,i.h)("datalist",{key:"8b99cbdf50cba3eeb9e57d18e8932545eaec34ab",id:`${this.state._id}-list`},this.state._suggestions.map((t=>(0,i.h)("option",{value:t}))))])))}constructor(t){(0,i.r)(this,t),this.catchInputNumberRef=t=>{var e;t&&(this.refInputNumber=t,!this._value&&(null===(e=this.refInputNumber)||void 0===e?void 0:e.value)&&this.validateValue(parseFloat(this.refInputNumber.value)))},this.catchInputRangeRef=t=>{t&&(this.refInputRange=t)},this.onChange=t=>{var e,n;const i=t.target.value,o=this.getSanitizedFloatValue(i);this.validateValue(o),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&(null===(n=this.state._on)||void 0===n||n.onChange(t,o))},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||(0,a.p)({form:this.host,ref:this.refInputNumber})},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._shortKey=void 0,this._step=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hideError:!1,_id:`id-${(0,o.n)()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new m(this,"range",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)}validateShortKey(t){this.controller.validateShortKey(t)}validateStep(t){this.controller.validateStep(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_step:["validateStep"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};b.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .inputs-wrapper {\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n  }\n  input[type=number] {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: var(--kolibri-input-range--input-number--width);\n  }\n  /*\n    * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n    */\n  input[type=range] {\n    appearance: none;\n    background-color: #d3d3d3;\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid #000;\n    display: inline-block;\n    flex-grow: 1;\n    height: calc(8rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    padding: 0;\n    margin: 0;\n    /* Design-Hack - related with flex-grow */\n    width: 0;\n  }\n  input[type=range]::-webkit-slider-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n    cursor: pointer;\n    -webkit-appearance: none;\n  }\n  input[type=range]::-moz-range-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n    cursor: pointer;\n    -moz-appearance: none;\n  }\n}\n/* Fix missing outline in Chromium-based browsers on Windows in high contrast mode. */\n@media (prefers-contrast: more) {\n  ::-webkit-slider-thumb {\n    outline: calc(1rem / var(--kolibri-root-font-size, 16)) solid currentColor;\n  }\n}"}},2079:(t,e,n)=>{n.d(e,{v:()=>o});var i=n(4058);const o=(t,e)=>{(0,i.g)(t,"_suggestions",(t=>"string"==typeof t||"number"==typeof t),e,void 0,{hooks:{afterPatch:t=>{Array.isArray(t)&&t.length&&(0,i.a)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);

package/dist/2538.js

@@ -1,2 +1,2 @@
 /*! For license information please see 2538.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2538],{2538:(n,e,t)=>{t.r(e),t.d(e,{kol_tree_item:()=>a});var i=t(1405),o=t(7883),l=(n,e,t)=>new Promise(((i,o)=>{var l=n=>{try{r(t.next(n))}catch(n){o(n)}},a=n=>{try{r(t.throw(n))}catch(n){o(n)}},r=n=>n.done?i(n.value):Promise.resolve(n.value).then(l,a);r((t=t.apply(n,e)).next())}));const a=class{constructor(n){(0,i.r)(this,n),this._active=void 0,this._label=void 0,this._open=void 0,this._href=void 0}focusLink(){return l(this,null,(function*(){this.element&&(yield this.element.focusLink())}))}expand(){return l(this,null,(function*(){this.element&&(yield this.element.expand())}))}collapse(){return l(this,null,(function*(){this.element&&(yield this.element.collapse())}))}isOpen(){return l(this,null,(function*(){var n,e;return null!==(e=yield null===(n=this.element)||void 0===n?void 0:n.isOpen())&&void 0!==e&&e}))}render(){return(0,i.h)(o.r,{key:"f046cc185855307d427b1942477f3e6776f96c92",class:"kol-tree-item",_active:this._active,_label:this._label,_open:this._open,_href:this._href,ref:n=>this.element=n},(0,i.h)("slot",{key:"09bf95f97f63737cbb02cc907ce5ba4617360e52"}))}};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    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .tree-link.first-level > a {\n    padding-left: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .tree-link > a {\n    padding-right: calc(6rem / var(--kolibri-root-font-size, 16));\n    padding-left: calc((22.4rem / var(--kolibri-root-font-size, 16)) * var(--level));\n    padding-top: calc(6.4rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(6.4rem / var(--kolibri-root-font-size, 16));\n  }\n  a .kol-span-wc {\n    place-items: unset;\n  }\n}"}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2538],{2538:(n,e,t)=>{t.r(e),t.d(e,{kol_tree_item:()=>a});var i=t(1114),o=t(7883),l=(n,e,t)=>new Promise(((i,o)=>{var l=n=>{try{r(t.next(n))}catch(n){o(n)}},a=n=>{try{r(t.throw(n))}catch(n){o(n)}},r=n=>n.done?i(n.value):Promise.resolve(n.value).then(l,a);r((t=t.apply(n,e)).next())}));const a=class{constructor(n){(0,i.r)(this,n),this._active=void 0,this._label=void 0,this._open=void 0,this._href=void 0}focusLink(){return l(this,null,(function*(){this.element&&(yield this.element.focusLink())}))}expand(){return l(this,null,(function*(){this.element&&(yield this.element.expand())}))}collapse(){return l(this,null,(function*(){this.element&&(yield this.element.collapse())}))}isOpen(){return l(this,null,(function*(){var n,e;return null!==(e=yield null===(n=this.element)||void 0===n?void 0:n.isOpen())&&void 0!==e&&e}))}render(){return(0,i.h)(o.r,{key:"f046cc185855307d427b1942477f3e6776f96c92",class:"kol-tree-item",_active:this._active,_label:this._label,_open:this._open,_href:this._href,ref:n=>this.element=n},(0,i.h)("slot",{key:"09bf95f97f63737cbb02cc907ce5ba4617360e52"}))}};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    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .tree-link.first-level > a {\n    padding-left: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .tree-link > a {\n    padding-right: calc(6rem / var(--kolibri-root-font-size, 16));\n    padding-left: calc((22.4rem / var(--kolibri-root-font-size, 16)) * var(--level));\n    padding-top: calc(6.4rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(6.4rem / var(--kolibri-root-font-size, 16));\n  }\n  a .kol-span-wc {\n    place-items: unset;\n  }\n}"}}}]);

package/dist/2567.js

@@ -1,2 +1,2 @@
 /*! For license information please see 2567.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2567],{2567:(e,t,n)=>{n.r(t),n.d(t,{kol_progress:()=>d});var a,r,i=n(1405),l=n(1085),o=n(4058);(r=a||(a={})).bar="bar",r.cycle="cycle";const s=Object.keys(a),c=({state:e})=>{const t=e._label?"57%":"50%";return(0,i.h)("svg",{class:"cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},(0,i.h)("circle",{class:"background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),(0,i.h)("circle",{class:"whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),(0,i.h)("circle",{class:"border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),(0,i.h)("circle",{class:"whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),(0,i.h)("circle",{class:"border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),(0,i.h)("circle",{class:"progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"}),e._label&&(0,i.h)("text",{"aria-hidden":"true",x:"50%",y:"43%","text-anchor":"middle",fill:"currentColor"},e._label),(0,i.h)("text",{"aria-hidden":"true",x:"50%",y:t,"text-anchor":"middle",fill:"currentColor"},e._value,e._unit))},h=({state:e})=>{const t="var(--kolibri-text-label-padding, 45px)",n=e._value/e._max*100;return(0,i.h)("div",{class:"bar"},e._label&&(0,i.h)("div",null,e._label),(0,i.h)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},(0,i.h)("rect",{class:"background",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(100% - 2px - ${t})`}}),(0,i.h)("rect",{class:"border",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",style:{width:`calc(100% - 2px - ${t})`}}),(0,i.h)("rect",{class:"progress",x:"2.5",y:"2.5",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${n}% - 5px - (${t} / 100 * ${n}))`}}),(0,i.h)("text",{"aria-hidden":"true","text-anchor":"end","dominant-baseline":"middle",fill:"currentColor",x:"100%",y:"50%"},e._value,e._unit)))},d=class{constructor(e){(0,i.r)(this,e),this._label=void 0,this._max=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){return(0,i.h)(i.H,{key:"9c9c5b9ae3b69154f8ebb11c3cfe233ed75e7d1e",class:"kol-progress"},(e=>{switch(e._variant){case"cycle":return(0,i.h)(c,{state:e});case"bar":return(0,i.h)(h,{state:e});default:throw new Error(`Progress variant ${e._variant} not implemented.`)}})(this.state),(0,i.h)("progress",{key:"a4ff8dee3c7305d4544cfb8bc81aba761e651ab6","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),(0,i.h)("span",{key:"3752c4b0fed7390a85a8af840f4f1e87443e05c6","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(e){(0,l.v)(this,e)}validateMax(e){"number"!=typeof e&&(e=100),(0,o.k)(this,"_max",e,{required:!0})}validateUnit(e){(0,o.i)(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),(0,o.k)(this,"_value",e,{required:!0})}validateVariant(e){(0,o.w)(this,"_variant",(e=>"string"==typeof e&&s.includes(e)),new Set(s),e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};d.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  progress {\n    display: block;\n    height: 0;\n    overflow: hidden;\n    width: 0;\n  }\n  .bar {\n    width: calc(150rem / var(--kolibri-root-font-size, 16));\n  }\n  .bar .border {\n    fill: transparent;\n    stroke: black;\n  }\n  .bar .background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .bar .progress {\n    fill: #0075ff;\n    stroke: transparent;\n    transition: 250ms ease-in-out 50ms;\n  }\n  .cycle .background {\n    fill: transparent;\n    stroke: lightgray;\n  }\n  .cycle .border {\n    fill: transparent;\n    stroke: black;\n  }\n  .cycle .whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .cycle .progress {\n    fill: transparent;\n    stroke: #0075ff;\n    transform-origin: 50% 50%;\n    transform: rotate(-90deg);\n    transition: 250ms ease-in-out 50ms;\n  }\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */\n  @media (prefers-reduced-motion) {\n    .progress {\n      transition-duration: 0s;\n      transition-delay: 0s;\n    }\n  }\n}"}},1085:(e,t,n)=>{n.d(t,{a:()=>d,b:()=>o,c:()=>s,h:()=>r,v:()=>h});var a=n(4058);const r=[0,1,2,3,4,5,6],i=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function o(e,t=1){return function(e){var t;return"string"==typeof e&&(null===(t=e.match(i))||void 0===t?void 0:t.length)||0}(e)>=t}function s(e){return l.test(e)}const c=new Set(["string"]),h=(e,t,n={})=>{(0,a.w)(e,"_label",(e=>"string"==typeof e),c,t,function(e){var t;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(t,n,r,i)=>{var l,c;"function"==typeof(null===(l=e.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(c=e.hooks)||void 0===c||c.afterPatch(t,n,r,i)),"string"==typeof t&&!1===o(t,3)&&!1===s(t)&&(0,a.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,a.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(t=e.hooks)||void 0===t?void 0:t.beforePatch}})}(n))},d=h}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2567],{2567:(e,t,n)=>{n.r(t),n.d(t,{kol_progress:()=>d});var a,r,i=n(1114),l=n(1085),o=n(4058);(r=a||(a={})).bar="bar",r.cycle="cycle";const s=Object.keys(a),c=({state:e})=>{const t=e._label?"57%":"50%";return(0,i.h)("svg",{class:"cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},(0,i.h)("circle",{class:"background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),(0,i.h)("circle",{class:"whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),(0,i.h)("circle",{class:"border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),(0,i.h)("circle",{class:"whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),(0,i.h)("circle",{class:"border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),(0,i.h)("circle",{class:"progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"}),e._label&&(0,i.h)("text",{"aria-hidden":"true",x:"50%",y:"43%","text-anchor":"middle",fill:"currentColor"},e._label),(0,i.h)("text",{"aria-hidden":"true",x:"50%",y:t,"text-anchor":"middle",fill:"currentColor"},e._value,e._unit))},h=({state:e})=>{const t="var(--kolibri-text-label-padding, 45px)",n=e._value/e._max*100;return(0,i.h)("div",{class:"bar"},e._label&&(0,i.h)("div",null,e._label),(0,i.h)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},(0,i.h)("rect",{class:"background",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(100% - 2px - ${t})`}}),(0,i.h)("rect",{class:"border",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",style:{width:`calc(100% - 2px - ${t})`}}),(0,i.h)("rect",{class:"progress",x:"2.5",y:"2.5",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${n}% - 5px - (${t} / 100 * ${n}))`}}),(0,i.h)("text",{"aria-hidden":"true","text-anchor":"end","dominant-baseline":"middle",fill:"currentColor",x:"100%",y:"50%"},e._value,e._unit)))},d=class{constructor(e){(0,i.r)(this,e),this._label=void 0,this._max=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){return(0,i.h)(i.H,{key:"9c9c5b9ae3b69154f8ebb11c3cfe233ed75e7d1e",class:"kol-progress"},(e=>{switch(e._variant){case"cycle":return(0,i.h)(c,{state:e});case"bar":return(0,i.h)(h,{state:e});default:throw new Error(`Progress variant ${e._variant} not implemented.`)}})(this.state),(0,i.h)("progress",{key:"a4ff8dee3c7305d4544cfb8bc81aba761e651ab6","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),(0,i.h)("span",{key:"3752c4b0fed7390a85a8af840f4f1e87443e05c6","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(e){(0,l.v)(this,e)}validateMax(e){"number"!=typeof e&&(e=100),(0,o.k)(this,"_max",e,{required:!0})}validateUnit(e){(0,o.i)(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),(0,o.k)(this,"_value",e,{required:!0})}validateVariant(e){(0,o.w)(this,"_variant",(e=>"string"==typeof e&&s.includes(e)),new Set(s),e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};d.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  progress {\n    display: block;\n    height: 0;\n    overflow: hidden;\n    width: 0;\n  }\n  .bar {\n    width: calc(150rem / var(--kolibri-root-font-size, 16));\n  }\n  .bar .border {\n    fill: transparent;\n    stroke: black;\n  }\n  .bar .background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .bar .progress {\n    fill: #0075ff;\n    stroke: transparent;\n    transition: 250ms ease-in-out 50ms;\n  }\n  .cycle .background {\n    fill: transparent;\n    stroke: lightgray;\n  }\n  .cycle .border {\n    fill: transparent;\n    stroke: black;\n  }\n  .cycle .whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .cycle .progress {\n    fill: transparent;\n    stroke: #0075ff;\n    transform-origin: 50% 50%;\n    transform: rotate(-90deg);\n    transition: 250ms ease-in-out 50ms;\n  }\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */\n  @media (prefers-reduced-motion) {\n    .progress {\n      transition-duration: 0s;\n      transition-delay: 0s;\n    }\n  }\n}"}},1085:(e,t,n)=>{n.d(t,{a:()=>d,b:()=>o,c:()=>s,h:()=>r,v:()=>h});var a=n(4058);const r=[0,1,2,3,4,5,6],i=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function o(e,t=1){return function(e){var t;return"string"==typeof e&&(null===(t=e.match(i))||void 0===t?void 0:t.length)||0}(e)>=t}function s(e){return l.test(e)}const c=new Set(["string"]),h=(e,t,n={})=>{(0,a.w)(e,"_label",(e=>"string"==typeof e),c,t,function(e){var t;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(t,n,r,i)=>{var l,c;"function"==typeof(null===(l=e.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(c=e.hooks)||void 0===c||c.afterPatch(t,n,r,i)),"string"==typeof t&&!1===o(t,3)&&!1===s(t)&&(0,a.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,a.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(t=e.hooks)||void 0===t?void 0:t.beforePatch}})}(n))},d=h}}]);

package/dist/263.js

@@ -1,2 +1,2 @@
 /*! For license information please see 263.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[263],{2486:(e,t,a)=>{a.d(t,{K:()=>v});var l=a(3133),s=a(1405),n=a(4600),o=a(1100),i=a(7883),r=a(7579),c=a(6448);const d=({ariaLabel:e,icon:t})=>(0,s.h)(i.d,{class:"heading-icon",_label:e,_icons:t}),h=({type:e,label:t})=>{switch(e){case"error":return(0,s.h)(d,{ariaLabel:(0,o.t)("kol-error"),icon:"codicon codicon-error",label:t});case"info":return(0,s.h)(d,{ariaLabel:(0,o.t)("kol-info"),icon:"codicon codicon-info",label:t});case"warning":return(0,s.h)(d,{ariaLabel:(0,o.t)("kol-warning"),icon:"codicon codicon-warning",label:t});case"success":return(0,s.h)(d,{ariaLabel:(0,o.t)("kol-success"),icon:"codicon codicon-pass",label:t});default:return(0,s.h)(d,{ariaLabel:(0,o.t)("kol-message"),icon:"codicon codicon-comment",label:t})}},v=(e,t)=>{const{class:a={},type:d="default",variant:v="msg",label:u,hasCloser:b,alert:p,onAlertTimeout:f,onCloserClick:_,level:g}=e,y=(0,l._)(e,["class","type","variant","label","hasCloser","alert","onAlertTimeout","onCloserClick","level"]);if(p){try{c.L.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(e){c.L.debug("Navigator does not support vibration.")}setTimeout((()=>{null==f||f()}),1e4)}const C=Object.assign({class:(0,n.c)("kol-alert-wc","alert",d,v,{hasCloser:!!b},a),role:p?"alert":void 0},y);return(0,s.h)("div",Object.assign({},C),(0,s.h)("div",{class:"heading"},(0,s.h)(h,{label:u,type:d}),(0,s.h)("div",{class:"heading-content"},u?(0,s.h)(r.K,{level:g},u):null,"msg"===v&&(0,s.h)("div",{class:"content"},t)),b&&(0,s.h)(i.a,{class:"close",_ariaDescription:(null==u?void 0:u.trim())||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:(0,o.t)("kol-close-alert"),_on:{onClick:_},_tooltipAlign:"left"})),"card"===v&&(0,s.h)("div",{class:"content"},t))}},7579:(e,t,a)=>{a.d(t,{K:()=>d});var l=a(3133),s=a(1405),n=a(4600);const o=1;function i(e){return function(e){return e>=o&&e<=6}(e)?`h${e}`:"strong"}const r=(e,t)=>{var{class:a,level:r=o,variant:c}=e,d=(0,l._)(e,["class","level","variant"]);const h=i(r),v=c||h;return(0,s.h)(h,Object.assign({class:(0,n.c)("headline",`headline-${v}`,a)},d),t)},c=(e,t)=>{var{class:a,level:r=o}=e,c=(0,l._)(e,["class","level"]);const d=function(e){return 1===e?"span":i(e)}(r+1);return(0,s.h)(d,Object.assign({class:(0,n.c)("secondary-headline",a)},c),t)},d=(e,t)=>{var{secondaryHeadline:a,level:i=o,class:d,HeadingGroupProps:h={},SecondaryHeadlineProps:v={}}=e,u=(0,l._)(e,["secondaryHeadline","level","class","HeadingGroupProps","SecondaryHeadlineProps"]);const b="kol-heading-wc",p=Object.assign({level:i},u);if(!a)return(0,s.h)(r,Object.assign({class:(0,n.c)(b,d)},p),t);const{class:f}=h,_=(0,l._)(h,["class"]),g=Object.assign({class:(0,n.c)(b,f)},_);return(0,s.h)("hgroup",Object.assign({},g),(0,s.h)(r,Object.assign({class:d},p),t),(0,s.h)(c,Object.assign({level:i},v),a))}},4600:(e,t,a)=>{function l(e){var t,a,s="";if("string"==typeof e||"number"==typeof e)s+=e;else if("object"==typeof e)if(Array.isArray(e)){var n=e.length;for(t=0;t<n;t++)e[t]&&(a=l(e[t]))&&(s&&(s+=" "),s+=a)}else for(a in e)e[a]&&(s&&(s+=" "),s+=a);return s}function s(){for(var e,t,a=0,s="",n=arguments.length;a<n;a++)(e=arguments[a])&&(t=l(e))&&(s&&(s+=" "),s+=t);return s}a.d(t,{c:()=>s})},5029:(e,t,a)=>{a.d(t,{v:()=>s});var l=a(4058);const s=(e,t)=>{(0,l.b)(e,"_hasCloser",t)}},1100:(e,t,a)=>{a.d(t,{t:()=>n});var l=a(8457),s=a(1523);let n=(e,t)=>{var a;return(null!==(a=(0,l.g)())&&void 0!==a?a:(0,l.i)("de")).translate(e,t)};"test"===s.p&&(n=e=>e)},263:(e,t,a)=>{a.r(t),a.d(t,{kol_alert_wc:()=>h});var l=a(1405),s=a(1384),n=a(2486),o=a(4058),i=a(5029),r=a(1085);const c=["default","info","success","warning","error"],d=["card","msg"],h=class{constructor(e){(0,l.r)(this,e),this.close=()=>{var e,t;null===(t=null===(e=this._on)||void 0===e?void 0:e.onClose)||void 0===t||t.call(e,new Event("Close"))},this.handleAlertTimeout=()=>{this.validateAlert(!1)},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose,this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){const{_alert:e,_hasCloser:t,_label:a,_level:s,_type:o,_variant:i}=this.state,r={alert:e,hasCloser:t,label:a,level:s,type:o,variant:i,onCloserClick:this.close,onAlertTimeout:this.handleAlertTimeout};return(0,l.h)(l.H,{key:"8474b6eb8e56583abb97f2aa7b786216b5cd14a0"},(0,l.h)(n.K,Object.assign({key:"ec4f2676790c69196690d3b91a09cbb3dddda0ab"},r),(0,l.h)("slot",{key:"af19597be7443687ce020ac5557aeee053baa602"})))}validateAlert(e){(0,o.b)(this,"_alert",e)}validateHasCloser(e){(0,i.v)(this,e)}validateLabel(e){(0,r.v)(this,e)}validateLevel(e){(0,s.w)(this,e)}validateOn(e){this.validateOnValue(e)&&(0,o.s)(this,"_on",{onClose:e.onClose})}validateType(e){(0,o.w)(this,"_type",(e=>"string"==typeof e&&c.includes(e)),new Set(`String {${c.join(", ")}`),e)}validateVariant(e){(0,o.w)(this,"_variant",(e=>"string"==typeof e&&d.includes(e)),new Set(`AlertVariant {${d.join(", ")}`),e)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateType(this._type),this.validateVariant(this._variant)}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_type:["validateType"],_variant:["validateVariant"]}}}},1085:(e,t,a)=>{a.d(t,{a:()=>h,b:()=>i,c:()=>r,h:()=>s,v:()=>d});var l=a(4058);const s=[0,1,2,3,4,5,6],n=/[a-zA-Z0-9äöüÄÖÜß]/g,o=/^\d+$/;function i(e,t=1){return function(e){var t;return"string"==typeof e&&(null===(t=e.match(n))||void 0===t?void 0:t.length)||0}(e)>=t}function r(e){return o.test(e)}const c=new Set(["string"]),d=(e,t,a={})=>{(0,l.w)(e,"_label",(e=>"string"==typeof e),c,t,function(e){var t;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(t,a,s,n)=>{var o,c;"function"==typeof(null===(o=e.hooks)||void 0===o?void 0:o.afterPatch)&&(null===(c=e.hooks)||void 0===c||c.afterPatch(t,a,s,n)),"string"==typeof t&&!1===i(t,3)&&!1===r(t)&&(0,l.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,l.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(t=e.hooks)||void 0===t?void 0:t.beforePatch}})}(a))},h=d},1523:(e,t,a)=>{a.d(t,{b:()=>o,h:()=>s,p:()=>l,s:()=>n});let l="development";try{l="production"}catch(e){l="production"}const s=(e,t,a)=>{if(e&&t&&"string"==typeof a){const l=e.querySelector(`[slot="${a}"]`);l&&t.appendChild(l)}},n=e=>""===e,o=(e,t)=>e||t||""},3133:(e,t,a)=>{function l(e,t){var a={};for(var l in e)Object.prototype.hasOwnProperty.call(e,l)&&t.indexOf(l)<0&&(a[l]=e[l]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(l=Object.getOwnPropertySymbols(e);s<l.length;s++)t.indexOf(l[s])<0&&Object.prototype.propertyIsEnumerable.call(e,l[s])&&(a[l[s]]=e[l[s]])}return a}a.d(t,{_:()=>l}),"function"==typeof SuppressedError&&SuppressedError},1384:(e,t,a)=>{a.d(t,{w:()=>n});var l=a(1085),s=a(4058);const n=(e,t)=>{(0,s.w)(e,"_level",(e=>"number"==typeof e&&l.h.includes(e)),new Set([`Number {${l.h.join(", ")}`]),t,{defaultValue:1,required:!0})}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[263],{4913:(e,t,a)=>{a.d(t,{K:()=>v});var l=a(3133),s=a(1114),n=a(4600),o=a(1100),i=a(7883),r=a(9028),c=a(6448);const d=({ariaLabel:e,icon:t})=>(0,s.h)(i.d,{class:"heading-icon",_label:e,_icons:t}),h=({type:e,label:t})=>{switch(e){case"error":return(0,s.h)(d,{ariaLabel:(0,o.t)("kol-error"),icon:"codicon codicon-error",label:t});case"info":return(0,s.h)(d,{ariaLabel:(0,o.t)("kol-info"),icon:"codicon codicon-info",label:t});case"warning":return(0,s.h)(d,{ariaLabel:(0,o.t)("kol-warning"),icon:"codicon codicon-warning",label:t});case"success":return(0,s.h)(d,{ariaLabel:(0,o.t)("kol-success"),icon:"codicon codicon-pass",label:t});default:return(0,s.h)(d,{ariaLabel:(0,o.t)("kol-message"),icon:"codicon codicon-comment",label:t})}},v=(e,t)=>{const{class:a={},type:d="default",variant:v="msg",label:u,hasCloser:b,alert:p,onAlertTimeout:f,onCloserClick:_,level:g}=e,y=(0,l._)(e,["class","type","variant","label","hasCloser","alert","onAlertTimeout","onCloserClick","level"]);if(p){try{c.L.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(e){c.L.debug("Navigator does not support vibration.")}setTimeout((()=>{null==f||f()}),1e4)}const C=Object.assign({class:(0,n.c)("kol-alert-wc","alert",d,v,{hasCloser:!!b},a),role:p?"alert":void 0},y);return(0,s.h)("div",Object.assign({},C),(0,s.h)("div",{class:"heading"},(0,s.h)(h,{label:u,type:d}),(0,s.h)("div",{class:"heading-content"},u?(0,s.h)(r.K,{level:g},u):null,"msg"===v&&(0,s.h)("div",{class:"content"},t)),b&&(0,s.h)(i.a,{class:"close",_ariaDescription:(null==u?void 0:u.trim())||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:(0,o.t)("kol-close-alert"),_on:{onClick:_},_tooltipAlign:"left"})),"card"===v&&(0,s.h)("div",{class:"content"},t))}},9028:(e,t,a)=>{a.d(t,{K:()=>d});var l=a(3133),s=a(1114),n=a(4600);const o=1;function i(e){return function(e){return e>=o&&e<=6}(e)?`h${e}`:"strong"}const r=(e,t)=>{var{class:a,level:r=o,variant:c}=e,d=(0,l._)(e,["class","level","variant"]);const h=i(r),v=c||h;return(0,s.h)(h,Object.assign({class:(0,n.c)("headline",`headline-${v}`,a)},d),t)},c=(e,t)=>{var{class:a,level:r=o}=e,c=(0,l._)(e,["class","level"]);const d=function(e){return 1===e?"span":i(e)}(r+1);return(0,s.h)(d,Object.assign({class:(0,n.c)("secondary-headline",a)},c),t)},d=(e,t)=>{var{secondaryHeadline:a,level:i=o,class:d,HeadingGroupProps:h={},SecondaryHeadlineProps:v={}}=e,u=(0,l._)(e,["secondaryHeadline","level","class","HeadingGroupProps","SecondaryHeadlineProps"]);const b="kol-heading-wc",p=Object.assign({level:i},u);if(!a)return(0,s.h)(r,Object.assign({class:(0,n.c)(b,d)},p),t);const{class:f}=h,_=(0,l._)(h,["class"]),g=Object.assign({class:(0,n.c)(b,f)},_);return(0,s.h)("hgroup",Object.assign({},g),(0,s.h)(r,Object.assign({class:d},p),t),(0,s.h)(c,Object.assign({level:i},v),a))}},4600:(e,t,a)=>{function l(e){var t,a,s="";if("string"==typeof e||"number"==typeof e)s+=e;else if("object"==typeof e)if(Array.isArray(e)){var n=e.length;for(t=0;t<n;t++)e[t]&&(a=l(e[t]))&&(s&&(s+=" "),s+=a)}else for(a in e)e[a]&&(s&&(s+=" "),s+=a);return s}function s(){for(var e,t,a=0,s="",n=arguments.length;a<n;a++)(e=arguments[a])&&(t=l(e))&&(s&&(s+=" "),s+=t);return s}a.d(t,{c:()=>s})},5029:(e,t,a)=>{a.d(t,{v:()=>s});var l=a(4058);const s=(e,t)=>{(0,l.b)(e,"_hasCloser",t)}},1100:(e,t,a)=>{a.d(t,{t:()=>n});var l=a(8457),s=a(1523);let n=(e,t)=>{var a;return(null!==(a=(0,l.g)())&&void 0!==a?a:(0,l.i)("de")).translate(e,t)};"test"===s.p&&(n=e=>e)},263:(e,t,a)=>{a.r(t),a.d(t,{kol_alert_wc:()=>h});var l=a(1114),s=a(1384),n=a(4913),o=a(4058),i=a(5029),r=a(1085);const c=["default","info","success","warning","error"],d=["card","msg"],h=class{constructor(e){(0,l.r)(this,e),this.close=()=>{var e,t;null===(t=null===(e=this._on)||void 0===e?void 0:e.onClose)||void 0===t||t.call(e,new Event("Close"))},this.handleAlertTimeout=()=>{this.validateAlert(!1)},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose,this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){const{_alert:e,_hasCloser:t,_label:a,_level:s,_type:o,_variant:i}=this.state,r={alert:e,hasCloser:t,label:a,level:s,type:o,variant:i,onCloserClick:this.close,onAlertTimeout:this.handleAlertTimeout};return(0,l.h)(l.H,{key:"8474b6eb8e56583abb97f2aa7b786216b5cd14a0"},(0,l.h)(n.K,Object.assign({key:"ec4f2676790c69196690d3b91a09cbb3dddda0ab"},r),(0,l.h)("slot",{key:"af19597be7443687ce020ac5557aeee053baa602"})))}validateAlert(e){(0,o.b)(this,"_alert",e)}validateHasCloser(e){(0,i.v)(this,e)}validateLabel(e){(0,r.v)(this,e)}validateLevel(e){(0,s.w)(this,e)}validateOn(e){this.validateOnValue(e)&&(0,o.s)(this,"_on",{onClose:e.onClose})}validateType(e){(0,o.w)(this,"_type",(e=>"string"==typeof e&&c.includes(e)),new Set(`String {${c.join(", ")}`),e)}validateVariant(e){(0,o.w)(this,"_variant",(e=>"string"==typeof e&&d.includes(e)),new Set(`AlertVariant {${d.join(", ")}`),e)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateType(this._type),this.validateVariant(this._variant)}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_type:["validateType"],_variant:["validateVariant"]}}}},1085:(e,t,a)=>{a.d(t,{a:()=>h,b:()=>i,c:()=>r,h:()=>s,v:()=>d});var l=a(4058);const s=[0,1,2,3,4,5,6],n=/[a-zA-Z0-9äöüÄÖÜß]/g,o=/^\d+$/;function i(e,t=1){return function(e){var t;return"string"==typeof e&&(null===(t=e.match(n))||void 0===t?void 0:t.length)||0}(e)>=t}function r(e){return o.test(e)}const c=new Set(["string"]),d=(e,t,a={})=>{(0,l.w)(e,"_label",(e=>"string"==typeof e),c,t,function(e){var t;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(t,a,s,n)=>{var o,c;"function"==typeof(null===(o=e.hooks)||void 0===o?void 0:o.afterPatch)&&(null===(c=e.hooks)||void 0===c||c.afterPatch(t,a,s,n)),"string"==typeof t&&!1===i(t,3)&&!1===r(t)&&(0,l.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,l.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(t=e.hooks)||void 0===t?void 0:t.beforePatch}})}(a))},h=d},1523:(e,t,a)=>{a.d(t,{b:()=>o,h:()=>s,p:()=>l,s:()=>n});let l="development";try{l="production"}catch(e){l="production"}const s=(e,t,a)=>{if(e&&t&&"string"==typeof a){const l=e.querySelector(`[slot="${a}"]`);l&&t.appendChild(l)}},n=e=>""===e,o=(e,t)=>e||t||""},3133:(e,t,a)=>{function l(e,t){var a={};for(var l in e)Object.prototype.hasOwnProperty.call(e,l)&&t.indexOf(l)<0&&(a[l]=e[l]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(l=Object.getOwnPropertySymbols(e);s<l.length;s++)t.indexOf(l[s])<0&&Object.prototype.propertyIsEnumerable.call(e,l[s])&&(a[l[s]]=e[l[s]])}return a}a.d(t,{_:()=>l}),"function"==typeof SuppressedError&&SuppressedError},1384:(e,t,a)=>{a.d(t,{w:()=>n});var l=a(1085),s=a(4058);const n=(e,t)=>{(0,s.w)(e,"_level",(e=>"number"==typeof e&&l.h.includes(e)),new Set([`Number {${l.h.join(", ")}`]),t,{defaultValue:1,required:!0})}}}]);

package/dist/2719.js

@@ -1,2 +1,2 @@
 /*! For license information please see 2719.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2719],{2719:(n,e,t)=>{t.r(e),t.d(e,{kol_indented_text:()=>a});var i=t(1405),o=t(7883);const a=class{constructor(n){(0,i.r)(this,n)}render(){return(0,i.h)(i.H,{key:"d1fc3e8c45ca81b2816ec918e8e7dce07248a1e1",class:"kol-indented-text"},(0,i.h)(o.h,{key:"9cddb21d0be725d0360ba55e9919dcc95b95c4d5"},(0,i.h)("slot",{key:"ea1d77ccc574c635c07e646f93b289967dd7c608"})))}};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  :host > div {\n    border-left-style: solid;\n    padding-left: 0.5em;\n  }\n}"}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2719],{2719:(n,e,t)=>{t.r(e),t.d(e,{kol_indented_text:()=>a});var i=t(1114),o=t(7883);const a=class{constructor(n){(0,i.r)(this,n)}render(){return(0,i.h)(i.H,{key:"d1fc3e8c45ca81b2816ec918e8e7dce07248a1e1",class:"kol-indented-text"},(0,i.h)(o.h,{key:"9cddb21d0be725d0360ba55e9919dcc95b95c4d5"},(0,i.h)("slot",{key:"ea1d77ccc574c635c07e646f93b289967dd7c608"})))}};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  :host > div {\n    border-left-style: solid;\n    padding-left: 0.5em;\n  }\n}"}}}]);