@public-ui/sample-react 3.0.0-rc.4 → 3.0.0-rc.6

package/dist/4390.js

@@ -1,2 +1,2 @@
 /*! For license information please see 4390.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4390],{375:(e,t,n)=>{n.d(t,{K:()=>a});var i=n(6783),o=n(7662);const a=e=>{const{class:t,style:n,icons:a,label:l,onClick:s}=e;return(0,i.h)(o.d,{class:t,style:n,onClick:s,_icons:a,_label:l})}},3163:(e,t,n)=>{n.d(t,{K:()=>r});var i=n(4600),o=n(6783),a=n(9060),l=n(8625),s=n(5650);const r=e=>{const{class:t,msg:n,required:r,disabled:d,touched:c,readonly:h,ariaDescribedBy:u,hideLabel:p,label:m,suggestions:b,value:v}=e,f=(0,i._)(e,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),_=(0,s.c)(n,c),g={"kol-input--disabled":Boolean(d),"kol-input--required":Boolean(r),"kol-input--touched":Boolean(c),"kol-input--readonly":Boolean(h),[`kol-input--${(null==n?void 0:n.type)||"error"}`]:_},y=Object.assign(Object.assign({class:(0,a.c)("kol-input",g,t),required:r,disabled:d,readonly:h,type:"text",list:b?`${f.id}-list`:void 0},(0,l.d)({ariaDescribedBy:u,hideLabel:p,label:m})),f);return(0,o.h)(o.F,null,(0,o.h)("input",Object.assign({},y,{value:v})),b)}},7146:(e,t,n)=>{n.d(t,{K:()=>d,a:()=>r});var i=n(4600),o=n(6783),a=n(8625),l=n(3163),s=n(5650);const r=e=>{var{id:t,suggestions:n}=e,a=(0,i._)(e,["id","suggestions"]);return n?(0,o.h)("datalist",Object.assign({id:`${t}-list`},a),n.map((e=>(0,o.h)("option",{value:e})))):null},d=e=>{var{state:t,customSuggestions:n}=e,d=(0,i._)(e,["state","customSuggestions"]);return(0,o.h)(l.K,Object.assign({},function(e,t){const{ariaDescribedBy:n}=(0,a.g)(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:n};return"_type"in e&&(i.type=e._type),"_value"in e&&(i.value=e._value),"_required"in e&&(i.required=e._required),"_maxLength"in e&&(i.maxlength=e._maxLength),"_placeholder"in e&&(i.placeholder=e._placeholder),"_autoComplete"in e&&(i.autoComplete=e._autoComplete),"_spellCheck"in e&&(i.spellcheck=e._spellCheck),"_pattern"in e&&(i.pattern=e._pattern),"_readOnly"in e&&(i.readonly=e._readOnly),"_min"in e&&(i.min=e._min),"_max"in e&&(i.max=e._max),"_step"in e&&(i.step=e._step),"_multiple"in e&&(i.multiple=e._multiple),"_checked"in e&&(i.checked=e._checked),"_indeterminate"in e&&(i.indeterminate=e._indeterminate),"_touched"in e&&(i.touched=e._touched),"_msg"in e&&(i.msg=(0,s.a)(e._msg)),"_suggestions"in e&&!t&&Array.isArray(e._suggestions)&&e._suggestions.length>0&&(i.suggestions=(0,o.h)(r,{id:e._id,suggestions:e._suggestions})),i}(t,n),d))}},9574:(e,t,n)=>{n.d(t,{a:()=>s,p:()=>r});var i=n(7662),o=n(5800),a=n(1732);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.h.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.h.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.h.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))}))}}}},5363:(e,t,n)=>{n.d(t,{I:()=>x,K:()=>k,a:()=>y});var i=n(6783),o=n(2587),a=n(665),l=n(4600),s=n(7662),r=n(375),d=n(9060),c=n(5650),h=n(8625),u=n(8973),p=n(5800),m=n(608);const b=(e,t)=>{var{position:n="start",class:o}=e,a=(0,l._)(e,["position","class"]);const s="kol-input-container__adornment",r=`${s}--${n}`;return(0,i.h)("div",Object.assign({class:(0,d.c)(s,r,o)},a),t)};function v(e){return!!e&&(Array.isArray(e)?e.length>0:Boolean(e))}const f=(e,t)=>{var{class:n}=e,o=(0,l._)(e,["class"]);return(0,i.h)("div",Object.assign({class:(0,d.c)("kol-input-container__container",n)},o),t)},_=(e,t)=>{const{class:n,startAdornment:o,endAdornment:a,disabled:s,msg:r,touched:h,containerProps:u,startAdornmentProps:p,endAdornmentProps:m}=e,_=(0,l._)(e,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),g=(0,c.c)(r,h),y={"kol-input-container--disabled":s,[`kol-input-container--${(null==r?void 0:r.type)||"error"}`]:g},k=Object.assign({class:(0,d.c)("kol-input-container",y,n)},_);return v(o)||v(a)?(0,i.h)("div",Object.assign({},k),(0,i.h)(b,Object.assign({},p,{position:"start"}),o),(0,i.h)(f,Object.assign({},u),t),(0,i.h)(b,Object.assign({},m,{position:"end"}),a)):(0,i.h)("div",Object.assign({},k),(0,i.h)(f,Object.assign({},u),t))},g=e=>{const{label:t,icons:n,hideLabel:o,disabled:a,onClick:r}=e,d=(0,l._)(e,["label","icons","hideLabel","disabled","onClick"]);return(0,i.h)(s.a,Object.assign({tabindex:0,_label:t,_disabled:a,_icons:n,_hideLabel:o,_on:{onClick:r}},d))},y=e=>{const{componentName:t="button",label:n,icon:o,onClick:a}=e,s=(0,l._)(e,["componentName","label","icon","onClick"]),d="button"===t?g:r.K;return(0,i.h)(d,Object.assign({label:n||"",hideLabel:!0,icons:`codicon codicon-${o}`,onClick:a},s))},k=({state:e,endAdornment:t},n)=>{const{icons:l,smartButton:s,disabled:r,msg:d,touched:h}=function(e){let t,n;return"_icons"in e&&(t=e._icons),"_smartButton"in e&&(n=e._smartButton),{icons:t,smartButton:n,disabled:e._disabled,msg:(0,c.a)(e._msg),touched:e._touched}}(e);let u=null==l?void 0:l.left;(0,o.i)(u)&&(u={icon:u});let p=null==l?void 0:l.right;(0,o.i)(p)&&(p={icon:p});const m=[],b=[];return t&&(Array.isArray(t)?b.push(...t):b.push(t)),u&&m.push((0,i.h)(y,Object.assign({componentName:"icon"},(0,a.i)(u)?u:{}))),(0,a.i)(s)&&b.push((0,i.h)(y,Object.assign({componentName:"button"},s,{hideLabel:!0,disabled:r}))),p&&b.push((0,i.h)(y,Object.assign({componentName:"icon"},(0,a.i)(p)?p:{}))),(0,i.h)(_,{disabled:r,msg:d,touched:h,startAdornment:m,endAdornment:b},n)},w=(e,t)=>{const n=e;"object"==typeof n&&null!==n&&((0,m.i)(n.right,1)&&(n.right={icon:n.right}),(0,m.i)(n.left,1)&&(n.left={icon:n.left}),t.set("_icons",n))};class x extends h.I{constructor(e,t,n){super(e,t,n),this.component=e}validateIcons(e){(0,p.o)(e,(()=>{try{e=(0,p.p)(e)}catch(e){}(0,p.w)(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&((0,m.i)(e.left,1)||(0,u.i)(e.left)||(0,m.i)(e.right,1)||(0,u.i)(e.right))),new Set(["KoliBriHorizontalIcon"]),e,{hooks:{beforePatch:w},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},8973:(e,t,n)=>{n.d(t,{i:()=>l,v:()=>s});var i=n(5800),o=n(608);const a=(e,t,n)=>{(0,o.b)(n)?e[t]=n:(0,o.i)(n,1)&&(e[t]={icon:n})},l=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,o.a)(e.style))&&(void 0===e.label||(0,o.i)(e.label))&&(0,o.i)(e.icon,1),s=(e,t,n={})=>{(0,i.o)(t,(()=>{var s;try{t=(0,i.p)(t)}catch(e){}(0,i.w)(e,"_icons",(e=>{const t="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||t||(0,o.i)(e,1)||"object"==typeof e&&null!==e&&((0,o.i)(e.left,1)||l(e.left)||(0,o.i)(e.right,1)||l(e.right)||(0,o.i)(e.top,1)||l(e.top)||(0,o.i)(e.bottom,1)||l(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(s=n.hooks)||void 0===s?void 0:s.afterPatch,beforePatch:(e,t,i,l)=>{var s,r;"function"==typeof(null===(s=n.hooks)||void 0===s?void 0:s.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(e,t,i,l)),(e=>{var t,n,i;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(n=e.nextState)||void 0===n?void 0:n.get("_icons");null===(i=e.nextState)||void 0===i||i.set("_icons",(e=>{let t={};return(0,o.i)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(a(t,"top",e.top),a(t,"right",e.right),a(t,"bottom",e.bottom),a(t,"left",e.left)),t})(t))}})(i)}}}))}))}},665:(e,t,n)=>{function i(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}n.d(t,{i:()=>i})},4390:(e,t,n)=>{n.r(t),n.d(t,{kol_input_number:()=>m});var i=n(6783),o=n(9060),a=n(7336),l=n(9574),s=n(5363),r=n(5800),d=n(623),c=n(7146),h=n(8625),u=(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())}));class p extends s.I{constructor(e,t,n){super(e,t,n),this.numberOrIsoDateRegex=/^\d+$|(^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])([T ][0-2]\d:[0-5]\d:[0-5]\d(?:\.\d+)?([+-][0-2]\d:[0-5]\d|Z)?)?$)|(^[0-2]\d:[0-5]\d(:[0-5]\d)?$)/,this.parseToString=e=>"string"==typeof e?e:"number"==typeof e?`${e}`:"object"==typeof e&&e instanceof Date?e.toISOString():"",this.validateIso8601=(e,t,n)=>{const i=parseFloat(t),o=i==t;return(0,r.w)(this.component,e,(e=>void 0===e||""===e||o&&"number"==typeof i||this.numberOrIsoDateRegex.test(e)),new Set(["number","Date","string{ISO-8601}"]),this.parseToString(t),{hooks:{afterPatch:e=>{"string"==typeof e&&n&&n(e)}}})},this.component=e}validateAutoComplete(e){(0,r.w)(this.component,"_autoComplete",(e=>"string"==typeof e&&("on"===e||"off"===e)),new Set(["on | off"]),e)}validateSuggestions(e){(0,d.v)(this.component,e)}onChange(e){super.onChange(e),!!e.target.value!=!!this.component._value&&(this.component._value=parseFloat(e.target.value))}validateMax(e){this.validateIso8601("_max",e)}validateMin(e){this.validateIso8601("_min",e)}validatePlaceholder(e){(0,r.i)(this.component,"_placeholder",e)}validateReadOnly(e){(0,r.b)(this.component,"_readOnly",e)}validateRequired(e){(0,r.b)(this.component,"_required",e)}validateStep(e){(0,r.k)(this.component,"_step",e)}validateValue(e){this.validateValueEx(e)}validateValueEx(e,t){this.validateIso8601("_value",e,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.validateSuggestions(this.component._suggestions),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateValue(this.component._value)}}const m=class{getValue(){return u(this,null,(function*(){var e;return null===(e=this.inputRef)||void 0===e?void 0:e.value}))}kolFocus(){return u(this,null,(function*(){var e;null===(e=this.inputRef)||void 0===e||e.focus()}))}getFormFieldProps(){return{state:this.state,class:(0,o.c)("kol-input-number","number",{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.inputRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getInputProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state,type:"number"},this.controller.onFacade),{onInput:this.onInput,onKeyDown:this.onKeyDown,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return(0,i.h)(h.K,Object.assign({key:"6a2b442199bca0bde5330fe6c8752669d5f4e934"},this.getFormFieldProps()),(0,i.h)(s.K,{key:"1b8bbc0f5b79acc5c479a07e5273bf560de6959f",state:this.state},(0,i.h)(c.K,Object.assign({key:"dcf8e4c7d7907c1f87a7fa9bde93df0c2a1ff1dd"},this.getInputProps()))))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{this.inputRef=e},this.onInput=e=>{var t;this._value=Number(null===(t=this.inputRef)||void 0===t?void 0:t.value),this.controller.onFacade.onInput(e)},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||(0,l.p)({form:this.host,ref:this.inputRef})},this._accessKey=void 0,this._autoComplete=void 0,this._disabled=!1,this._hideMsg=!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._placeholder=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._smartButton=void 0,this._suggestions=void 0,this._step=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hasValue:!1,_hideMsg:!1,_id:`id-${(0,a.n)()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new p(this,"number",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMax(e){this.controller.validateMax(e)}validateMin(e){this.controller.validateMin(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateStep(e){this.controller.validateStep(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValueEx(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};m.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n  [disabled]:focus .kol-span {\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 {\n    display: contents;\n  }\n  .kol-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  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\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__content {\n    background-color: #fff;\n    color: #000;\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  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}"}},623:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(5800);const o=(e,t)=>{(0,i.g)(e,"_suggestions",(e=>"string"==typeof e||"number"==typeof e),t,void 0,{hooks:{afterPatch:e=>{Array.isArray(e)&&e.length&&(0,i.a)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4390],{5126:(e,t,n)=>{n.d(t,{K:()=>a});var i=n(1290),o=n(4957);const a=e=>{const{class:t,style:n,icons:a,label:l,onClick:s}=e;return(0,i.h)(o.d,{class:t,style:n,onClick:s,_icons:a,_label:l})}},6884:(e,t,n)=>{n.d(t,{K:()=>r});var i=n(4600),o=n(1290),a=n(9060),l=n(1416),s=n(9732);const r=e=>{const{class:t,msg:n,required:r,disabled:d,touched:c,readonly:h,ariaDescribedBy:u,hideLabel:p,label:m,suggestions:b,value:v}=e,_=(0,i._)(e,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),f=(0,s.c)(n,c),g={"kol-input--disabled":Boolean(d),"kol-input--required":Boolean(r),"kol-input--touched":Boolean(c),"kol-input--readonly":Boolean(h),[`kol-input--${(null==n?void 0:n.type)||"error"}`]:f},y=Object.assign(Object.assign({class:(0,a.c)("kol-input",g,t),required:r,disabled:d,readonly:h,type:"text",list:b?`${_.id}-list`:void 0},(0,l.d)({ariaDescribedBy:u,hideLabel:p,label:m})),_);return(0,o.h)(o.F,null,(0,o.h)("input",Object.assign({},y,{value:v})),b)}},4746:(e,t,n)=>{n.d(t,{K:()=>d,a:()=>r});var i=n(4600),o=n(1290),a=n(1416),l=n(6884),s=n(9732);const r=e=>{var{id:t,suggestions:n}=e,a=(0,i._)(e,["id","suggestions"]);return n?(0,o.h)("datalist",Object.assign({id:`${t}-list`},a),n.map((e=>(0,o.h)("option",{value:e})))):null},d=e=>{var{state:t,customSuggestions:n}=e,d=(0,i._)(e,["state","customSuggestions"]);return(0,o.h)(l.K,Object.assign({},function(e,t){const{ariaDescribedBy:n}=(0,a.g)(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:n};return"_type"in e&&(i.type=e._type),"_value"in e&&(i.value=e._value),"_required"in e&&(i.required=e._required),"_maxLength"in e&&(i.maxlength=e._maxLength),"_placeholder"in e&&(i.placeholder=e._placeholder),"_autoComplete"in e&&(i.autoComplete=e._autoComplete),"_spellCheck"in e&&(i.spellcheck=e._spellCheck),"_pattern"in e&&(i.pattern=e._pattern),"_readOnly"in e&&(i.readonly=e._readOnly),"_min"in e&&(i.min=e._min),"_max"in e&&(i.max=e._max),"_step"in e&&(i.step=e._step),"_multiple"in e&&(i.multiple=e._multiple),"_checked"in e&&(i.checked=e._checked),"_indeterminate"in e&&(i.indeterminate=e._indeterminate),"_touched"in e&&(i.touched=e._touched),"_msg"in e&&(i.msg=(0,s.a)(e._msg)),"_suggestions"in e&&!t&&Array.isArray(e._suggestions)&&e._suggestions.length>0&&(i.suggestions=(0,o.h)(r,{id:e._id,suggestions:e._suggestions})),i}(t,n),d))}},359:(e,t,n)=>{n.d(t,{a:()=>s,p:()=>r});var i=n(4957),o=n(5800),a=n(1732);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.h.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.h.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.h.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))}))}}}},7617:(e,t,n)=>{n.d(t,{I:()=>x,K:()=>k,a:()=>y});var i=n(1290),o=n(3426),a=n(665),l=n(4600),s=n(4957),r=n(5126),d=n(9060),c=n(9732),h=n(1416),u=n(8973),p=n(5800),m=n(608);const b=(e,t)=>{var{position:n="start",class:o}=e,a=(0,l._)(e,["position","class"]);const s="kol-input-container__adornment",r=`${s}--${n}`;return(0,i.h)("div",Object.assign({class:(0,d.c)(s,r,o)},a),t)};function v(e){return!!e&&(Array.isArray(e)?e.length>0:Boolean(e))}const _=(e,t)=>{var{class:n}=e,o=(0,l._)(e,["class"]);return(0,i.h)("div",Object.assign({class:(0,d.c)("kol-input-container__container",n)},o),t)},f=(e,t)=>{const{class:n,startAdornment:o,endAdornment:a,disabled:s,msg:r,touched:h,containerProps:u,startAdornmentProps:p,endAdornmentProps:m}=e,f=(0,l._)(e,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),g=(0,c.c)(r,h),y={"kol-input-container--disabled":s,[`kol-input-container--${(null==r?void 0:r.type)||"error"}`]:g},k=Object.assign({class:(0,d.c)("kol-input-container",y,n)},f);return v(o)||v(a)?(0,i.h)("div",Object.assign({},k),(0,i.h)(b,Object.assign({},p,{position:"start"}),o),(0,i.h)(_,Object.assign({},u),t),(0,i.h)(b,Object.assign({},m,{position:"end"}),a)):(0,i.h)("div",Object.assign({},k),(0,i.h)(_,Object.assign({},u),t))},g=e=>{const{label:t,icons:n,hideLabel:o,disabled:a,onClick:r}=e,d=(0,l._)(e,["label","icons","hideLabel","disabled","onClick"]);return(0,i.h)(s.a,Object.assign({tabindex:0,_label:t,_disabled:a,_icons:n,_hideLabel:o,_on:{onClick:r}},d))},y=e=>{const{componentName:t="button",label:n,icon:o,onClick:a}=e,s=(0,l._)(e,["componentName","label","icon","onClick"]),d="button"===t?g:r.K;return(0,i.h)(d,Object.assign({label:n||"",hideLabel:!0,icons:`codicon codicon-${o}`,onClick:a},s))},k=({state:e,endAdornment:t},n)=>{const{icons:l,smartButton:s,disabled:r,msg:d,touched:h}=function(e){let t,n;return"_icons"in e&&(t=e._icons),"_smartButton"in e&&(n=e._smartButton),{icons:t,smartButton:n,disabled:e._disabled,msg:(0,c.a)(e._msg),touched:e._touched}}(e);let u=null==l?void 0:l.left;(0,o.i)(u)&&(u={icon:u});let p=null==l?void 0:l.right;(0,o.i)(p)&&(p={icon:p});const m=[],b=[];return t&&(Array.isArray(t)?b.push(...t):b.push(t)),u&&m.push((0,i.h)(y,Object.assign({componentName:"icon"},(0,a.i)(u)?u:{}))),(0,a.i)(s)&&b.push((0,i.h)(y,Object.assign({componentName:"button"},s,{hideLabel:!0,disabled:r}))),p&&b.push((0,i.h)(y,Object.assign({componentName:"icon"},(0,a.i)(p)?p:{}))),(0,i.h)(f,{disabled:r,msg:d,touched:h,startAdornment:m,endAdornment:b},n)},w=(e,t)=>{const n=e;"object"==typeof n&&null!==n&&((0,m.i)(n.right,1)&&(n.right={icon:n.right}),(0,m.i)(n.left,1)&&(n.left={icon:n.left}),t.set("_icons",n))};class x extends h.I{constructor(e,t,n){super(e,t,n),this.component=e}validateIcons(e){(0,p.o)(e,(()=>{try{e=(0,p.p)(e)}catch(e){}(0,p.w)(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&((0,m.i)(e.left,1)||(0,u.i)(e.left)||(0,m.i)(e.right,1)||(0,u.i)(e.right))),new Set(["KoliBriHorizontalIcon"]),e,{hooks:{beforePatch:w},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},8973:(e,t,n)=>{n.d(t,{i:()=>l,v:()=>s});var i=n(5800),o=n(608);const a=(e,t,n)=>{(0,o.b)(n)?e[t]=n:(0,o.i)(n,1)&&(e[t]={icon:n})},l=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,o.a)(e.style))&&(void 0===e.label||(0,o.i)(e.label))&&(0,o.i)(e.icon,1),s=(e,t,n={})=>{(0,i.o)(t,(()=>{var s;try{t=(0,i.p)(t)}catch(e){}(0,i.w)(e,"_icons",(e=>{const t="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||t||(0,o.i)(e,1)||"object"==typeof e&&null!==e&&((0,o.i)(e.left,1)||l(e.left)||(0,o.i)(e.right,1)||l(e.right)||(0,o.i)(e.top,1)||l(e.top)||(0,o.i)(e.bottom,1)||l(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(s=n.hooks)||void 0===s?void 0:s.afterPatch,beforePatch:(e,t,i,l)=>{var s,r;"function"==typeof(null===(s=n.hooks)||void 0===s?void 0:s.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(e,t,i,l)),(e=>{var t,n,i;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(n=e.nextState)||void 0===n?void 0:n.get("_icons");null===(i=e.nextState)||void 0===i||i.set("_icons",(e=>{let t={};return(0,o.i)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(a(t,"top",e.top),a(t,"right",e.right),a(t,"bottom",e.bottom),a(t,"left",e.left)),t})(t))}})(i)}}}))}))}},665:(e,t,n)=>{function i(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}n.d(t,{i:()=>i})},4390:(e,t,n)=>{n.r(t),n.d(t,{kol_input_number:()=>m});var i=n(1290),o=n(9060),a=n(526),l=n(359),s=n(7617),r=n(5800),d=n(623),c=n(4746),h=n(1416),u=(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())}));class p extends s.I{constructor(e,t,n){super(e,t,n),this.numberOrIsoDateRegex=/^\d+$|(^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])([T ][0-2]\d:[0-5]\d:[0-5]\d(?:\.\d+)?([+-][0-2]\d:[0-5]\d|Z)?)?$)|(^[0-2]\d:[0-5]\d(:[0-5]\d)?$)/,this.parseToString=e=>"string"==typeof e?e:"number"==typeof e?`${e}`:"object"==typeof e&&e instanceof Date?e.toISOString():"",this.validateIso8601=(e,t,n)=>{const i=parseFloat(t),o=i==t;return(0,r.w)(this.component,e,(e=>void 0===e||""===e||o&&"number"==typeof i||this.numberOrIsoDateRegex.test(e)),new Set(["number","Date","string{ISO-8601}"]),this.parseToString(t),{hooks:{afterPatch:e=>{"string"==typeof e&&n&&n(e)}}})},this.component=e}validateAutoComplete(e){(0,r.w)(this.component,"_autoComplete",(e=>"string"==typeof e&&("on"===e||"off"===e)),new Set(["on | off"]),e)}validateSuggestions(e){(0,d.v)(this.component,e)}onChange(e){super.onChange(e),!!e.target.value!=!!this.component._value&&(this.component._value=parseFloat(e.target.value))}validateMax(e){this.validateIso8601("_max",e)}validateMin(e){this.validateIso8601("_min",e)}validatePlaceholder(e){(0,r.i)(this.component,"_placeholder",e)}validateReadOnly(e){(0,r.b)(this.component,"_readOnly",e)}validateRequired(e){(0,r.b)(this.component,"_required",e)}validateStep(e){(0,r.k)(this.component,"_step",e)}validateValue(e){this.validateValueEx(e)}validateValueEx(e,t){this.validateIso8601("_value",e,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.validateSuggestions(this.component._suggestions),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateValue(this.component._value)}}const m=class{getValue(){return u(this,null,(function*(){var e;return null===(e=this.inputRef)||void 0===e?void 0:e.value}))}kolFocus(){return u(this,null,(function*(){var e;null===(e=this.inputRef)||void 0===e||e.focus()}))}getFormFieldProps(){return{state:this.state,class:(0,o.c)("kol-input-number","number",{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.inputRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getInputProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state,type:"number"},this.controller.onFacade),{onInput:this.onInput,onKeyDown:this.onKeyDown,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return(0,i.h)(h.K,Object.assign({key:"ee072e3bb1589750c05498358e4a3360a0993c3e"},this.getFormFieldProps()),(0,i.h)(s.K,{key:"f5c7c2b067e06adcd017276059af68f58c27e20b",state:this.state},(0,i.h)(c.K,Object.assign({key:"65b420701868d214fe447e9f85eb8b41dae9f3b1"},this.getInputProps()))))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{this.inputRef=e},this.onInput=e=>{var t;this._value=Number(null===(t=this.inputRef)||void 0===t?void 0:t.value),this.controller.onFacade.onInput(e)},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||(0,l.p)({form:this.host,ref:this.inputRef})},this._accessKey=void 0,this._autoComplete=void 0,this._disabled=!1,this._hideMsg=!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._placeholder=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._smartButton=void 0,this._suggestions=void 0,this._step=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hasValue:!1,_hideMsg:!1,_id:`id-${(0,a.n)()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new p(this,"number",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMax(e){this.controller.validateMax(e)}validateMin(e){this.controller.validateMin(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateStep(e){this.controller.validateStep(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValueEx(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};m.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n  [disabled]:focus .kol-span {\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 {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\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  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\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__content {\n    background-color: #fff;\n    color: #000;\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  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: rem(16);\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: rem(16);\n    height: rem(44);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}"}},623:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(5800);const o=(e,t)=>{(0,i.g)(e,"_suggestions",(e=>"string"==typeof e||"number"==typeof e),t,void 0,{hooks:{afterPatch:e=>{Array.isArray(e)&&e.length&&(0,i.a)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);

package/dist/4566.js

@@ -1,2 +1,2 @@
 /*! For license information please see 4566.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4566],{9060:(e,n,t)=>{function i(e){var n,t,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e)){var a=e.length;for(n=0;n<a;n++)e[n]&&(t=i(e[n]))&&(o&&(o+=" "),o+=t)}else for(t in e)e[t]&&(o&&(o+=" "),o+=t);return o}function o(){for(var e,n,t=0,o="",a=arguments.length;t<a;t++)(e=arguments[t])&&(n=i(e))&&(o&&(o+=" "),o+=n);return o}t.d(n,{c:()=>o})},4566:(e,n,t)=>{t.r(n),t.d(n,{kol_quote:()=>h});var i=t(6783),o=t(7662),a=t(9060),l=t(1074),r=t(5800),s=t(5687);const d=["block","inline"],h=class{constructor(e){(0,i.r)(this,e),this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){(0,l.v)(this,e)}validateHref(e){(0,r.i)(this,"_href",e,{required:!0})}validateQuote(e){(0,r.i)(this,"_quote",e,{required:!0})}validateVariant(e){(0,r.w)(this,"_variant",(e=>"string"==typeof e&&d.includes(e)),new Set(d),e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const e=(0,s.s)(this.state._quote);return(0,i.h)("figure",{key:"78d631f0d5dd0dad6b89eae8b0dc4dbaf4ead851",class:(0,a.c)("kol-quote",`kol-quote--${this.state._variant}`)},"block"===this.state._variant?(0,i.h)("blockquote",{class:"kol-quote__blockquote",cite:this.state._href},this.state._quote,(0,i.h)("span",{"aria-hidden":e?void 0:"true",hidden:!e},(0,i.h)("slot",{name:"expert"}))):(0,i.h)("q",{class:"kol-quote__quote",cite:this.state._href},this.state._quote,(0,i.h)("span",{"aria-hidden":e?void 0:"true",hidden:!e},(0,i.h)("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&(0,i.h)("figcaption",{key:"c4d64d8ac6593ac6dcd153c2f4fbb18b7c327278",class:"kol-quote__figcaption"},(0,i.h)("cite",{key:"a7d71571245e7110e97cf9e37bd0560ed5f67a88",class:"kol-quote__cite"},(0,i.h)(o.e,{key:"295878eecc876a4e9864dd87e779318f30a0dd63",_href:this.state._href,_label:this.state._label,_target:"_blank"}))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};h.style={default:"@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 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    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-quote {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__cite::before {\n    content: \"—\";\n  }\n  .kol-quote--block .kol-quote__cite::before {\n    padding-right: 0.5em;\n  }\n  .kol-quote--inline .kol-quote__cite::before {\n    padding: 0.5em;\n  }\n  .kol-quote--block .kol-quote__figcaption {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__blockquote::before {\n    content: open-quote;\n  }\n  .kol-quote__blockquote::after {\n    content: close-quote;\n  }\n}"}},1074:(e,n,t)=>{t.d(n,{a:()=>c,b:()=>r,c:()=>s,h:()=>o,v:()=>h});var i=t(5800);const o=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function r(e,n=1){return function(e){var n;return"string"==typeof e&&(null===(n=e.match(a))||void 0===n?void 0:n.length)||0}(e)>=n}function s(e){return l.test(e)}const d=new Set(["string"]),h=(e,n,t={})=>{(0,i.w)(e,"_label",(e=>"string"==typeof e),d,n,function(e){var n;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(n,t,o,a)=>{var l,d;"function"==typeof(null===(l=e.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=e.hooks)||void 0===d||d.afterPatch(n,t,o,a)),"string"==typeof n&&!1===r(n,3)&&!1===s(n)&&(0,i.a)(`The heading or label ("${n}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof n&&n.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(n=e.hooks)||void 0===n?void 0:n.beforePatch}})}(t))},c=h},5687:(e,n,t)=>{t.d(n,{b:()=>l,h:()=>o,p:()=>i,s:()=>a});let i="development";try{i="production"}catch(e){i="production"}const o=(e,n,t)=>{if(e&&n&&"string"==typeof t){const i=e.querySelector(`[slot="${t}"]`);i&&n.appendChild(i)}},a=e=>""===e,l=(e,n)=>e||n||""}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4566],{9060:(e,n,t)=>{function i(e){var n,t,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e)){var a=e.length;for(n=0;n<a;n++)e[n]&&(t=i(e[n]))&&(o&&(o+=" "),o+=t)}else for(t in e)e[t]&&(o&&(o+=" "),o+=t);return o}function o(){for(var e,n,t=0,o="",a=arguments.length;t<a;t++)(e=arguments[t])&&(n=i(e))&&(o&&(o+=" "),o+=n);return o}t.d(n,{c:()=>o})},4566:(e,n,t)=>{t.r(n),t.d(n,{kol_quote:()=>d});var i=t(1290),o=t(4957),a=t(9060),l=t(1074),r=t(5800),s=t(5687);const h=["block","inline"],d=class{constructor(e){(0,i.r)(this,e),this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){(0,l.v)(this,e)}validateHref(e){(0,r.i)(this,"_href",e,{required:!0})}validateQuote(e){(0,r.i)(this,"_quote",e,{required:!0})}validateVariant(e){(0,r.w)(this,"_variant",(e=>"string"==typeof e&&h.includes(e)),new Set(h),e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const e=(0,s.s)(this.state._quote);return(0,i.h)("figure",{key:"661ac89e0a34459346b1e65c724487d23b9d5547",class:(0,a.c)("kol-quote",`kol-quote--${this.state._variant}`)},"block"===this.state._variant?(0,i.h)("blockquote",{class:"kol-quote__blockquote",cite:this.state._href},this.state._quote,(0,i.h)("span",{"aria-hidden":e?void 0:"true",hidden:!e},(0,i.h)("slot",{name:"expert"}))):(0,i.h)("q",{class:"kol-quote__quote",cite:this.state._href},this.state._quote,(0,i.h)("span",{"aria-hidden":e?void 0:"true",hidden:!e},(0,i.h)("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&(0,i.h)("figcaption",{key:"9b570265bd92e167f4fd0480b4554fde522a0143",class:"kol-quote__figcaption"},(0,i.h)("cite",{key:"c08c33988375652359bf2390f86af8558e2f3fab",class:"kol-quote__cite"},(0,i.h)(o.e,{key:"db6d9693b6a0e09f9d1570c9c68c0a8b0215b704",_href:this.state._href,_label:this.state._label,_target:"_blank"}))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};d.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    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-quote {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__cite::before {\n    content: \"—\";\n  }\n  .kol-quote--block .kol-quote__cite::before {\n    padding-right: 0.5em;\n  }\n  .kol-quote--inline .kol-quote__cite::before {\n    padding: 0.5em;\n  }\n  .kol-quote--block .kol-quote__figcaption {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__blockquote::before {\n    content: open-quote;\n  }\n  .kol-quote__blockquote::after {\n    content: close-quote;\n  }\n}"}},1074:(e,n,t)=>{t.d(n,{a:()=>c,b:()=>r,c:()=>s,h:()=>o,v:()=>d});var i=t(5800);const o=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function r(e,n=1){return function(e){var n;return"string"==typeof e&&(null===(n=e.match(a))||void 0===n?void 0:n.length)||0}(e)>=n}function s(e){return l.test(e)}const h=new Set(["string"]),d=(e,n,t={})=>{(0,i.w)(e,"_label",(e=>"string"==typeof e),h,n,function(e){var n;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(n,t,o,a)=>{var l,h;"function"==typeof(null===(l=e.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(h=e.hooks)||void 0===h||h.afterPatch(n,t,o,a)),"string"==typeof n&&!1===r(n,3)&&!1===s(n)&&(0,i.a)(`The heading or label ("${n}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof n&&n.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(n=e.hooks)||void 0===n?void 0:n.beforePatch}})}(t))},c=d},5687:(e,n,t)=>{t.d(n,{b:()=>l,h:()=>o,p:()=>i,s:()=>a});let i="development";try{i="production"}catch(e){i="production"}const o=(e,n,t)=>{if(e&&n&&"string"==typeof t){const i=e.querySelector(`[slot="${t}"]`);i&&n.appendChild(i)}},a=e=>""===e,l=(e,n)=>e||n||""}}]);

package/dist/4662.js

@@ -1,2 +1,2 @@
 /*! For license information please see 4662.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4662],{375:(e,t,n)=>{n.d(t,{K:()=>a});var i=n(6783),o=n(7662);const a=e=>{const{class:t,style:n,icons:a,label:s,onClick:l}=e;return(0,i.h)(o.d,{class:t,style:n,onClick:l,_icons:a,_label:s})}},3163:(e,t,n)=>{n.d(t,{K:()=>r});var i=n(4600),o=n(6783),a=n(9060),s=n(8625),l=n(5650);const r=e=>{const{class:t,msg:n,required:r,disabled:d,touched:c,readonly:u,ariaDescribedBy:h,hideLabel:p,label:m,suggestions:b,value:g}=e,v=(0,i._)(e,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),_=(0,l.c)(n,c),f={"kol-input--disabled":Boolean(d),"kol-input--required":Boolean(r),"kol-input--touched":Boolean(c),"kol-input--readonly":Boolean(u),[`kol-input--${(null==n?void 0:n.type)||"error"}`]:_},k=Object.assign(Object.assign({class:(0,a.c)("kol-input",f,t),required:r,disabled:d,readonly:u,type:"text",list:b?`${v.id}-list`:void 0},(0,s.d)({ariaDescribedBy:h,hideLabel:p,label:m})),v);return(0,o.h)(o.F,null,(0,o.h)("input",Object.assign({},k,{value:g})),b)}},7146:(e,t,n)=>{n.d(t,{K:()=>d,a:()=>r});var i=n(4600),o=n(6783),a=n(8625),s=n(3163),l=n(5650);const r=e=>{var{id:t,suggestions:n}=e,a=(0,i._)(e,["id","suggestions"]);return n?(0,o.h)("datalist",Object.assign({id:`${t}-list`},a),n.map((e=>(0,o.h)("option",{value:e})))):null},d=e=>{var{state:t,customSuggestions:n}=e,d=(0,i._)(e,["state","customSuggestions"]);return(0,o.h)(s.K,Object.assign({},function(e,t){const{ariaDescribedBy:n}=(0,a.g)(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:n};return"_type"in e&&(i.type=e._type),"_value"in e&&(i.value=e._value),"_required"in e&&(i.required=e._required),"_maxLength"in e&&(i.maxlength=e._maxLength),"_placeholder"in e&&(i.placeholder=e._placeholder),"_autoComplete"in e&&(i.autoComplete=e._autoComplete),"_spellCheck"in e&&(i.spellcheck=e._spellCheck),"_pattern"in e&&(i.pattern=e._pattern),"_readOnly"in e&&(i.readonly=e._readOnly),"_min"in e&&(i.min=e._min),"_max"in e&&(i.max=e._max),"_step"in e&&(i.step=e._step),"_multiple"in e&&(i.multiple=e._multiple),"_checked"in e&&(i.checked=e._checked),"_indeterminate"in e&&(i.indeterminate=e._indeterminate),"_touched"in e&&(i.touched=e._touched),"_msg"in e&&(i.msg=(0,l.a)(e._msg)),"_suggestions"in e&&!t&&Array.isArray(e._suggestions)&&e._suggestions.length>0&&(i.suggestions=(0,o.h)(r,{id:e._id,suggestions:e._suggestions})),i}(t,n),d))}},9574:(e,t,n)=>{n.d(t,{a:()=>l,p:()=>r});var i=n(7662),o=n(5800),a=n(1732);const s=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.h.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},l=(e={})=>{var t,n;const a=s(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.h.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=s(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.h.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))}))}}}},5363:(e,t,n)=>{n.d(t,{I:()=>x,K:()=>y,a:()=>k});var i=n(6783),o=n(2587),a=n(665),s=n(4600),l=n(7662),r=n(375),d=n(9060),c=n(5650),u=n(8625),h=n(8973),p=n(5800),m=n(608);const b=(e,t)=>{var{position:n="start",class:o}=e,a=(0,s._)(e,["position","class"]);const l="kol-input-container__adornment",r=`${l}--${n}`;return(0,i.h)("div",Object.assign({class:(0,d.c)(l,r,o)},a),t)};function g(e){return!!e&&(Array.isArray(e)?e.length>0:Boolean(e))}const v=(e,t)=>{var{class:n}=e,o=(0,s._)(e,["class"]);return(0,i.h)("div",Object.assign({class:(0,d.c)("kol-input-container__container",n)},o),t)},_=(e,t)=>{const{class:n,startAdornment:o,endAdornment:a,disabled:l,msg:r,touched:u,containerProps:h,startAdornmentProps:p,endAdornmentProps:m}=e,_=(0,s._)(e,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),f=(0,c.c)(r,u),k={"kol-input-container--disabled":l,[`kol-input-container--${(null==r?void 0:r.type)||"error"}`]:f},y=Object.assign({class:(0,d.c)("kol-input-container",k,n)},_);return g(o)||g(a)?(0,i.h)("div",Object.assign({},y),(0,i.h)(b,Object.assign({},p,{position:"start"}),o),(0,i.h)(v,Object.assign({},h),t),(0,i.h)(b,Object.assign({},m,{position:"end"}),a)):(0,i.h)("div",Object.assign({},y),(0,i.h)(v,Object.assign({},h),t))},f=e=>{const{label:t,icons:n,hideLabel:o,disabled:a,onClick:r}=e,d=(0,s._)(e,["label","icons","hideLabel","disabled","onClick"]);return(0,i.h)(l.a,Object.assign({tabindex:0,_label:t,_disabled:a,_icons:n,_hideLabel:o,_on:{onClick:r}},d))},k=e=>{const{componentName:t="button",label:n,icon:o,onClick:a}=e,l=(0,s._)(e,["componentName","label","icon","onClick"]),d="button"===t?f:r.K;return(0,i.h)(d,Object.assign({label:n||"",hideLabel:!0,icons:`codicon codicon-${o}`,onClick:a},l))},y=({state:e,endAdornment:t},n)=>{const{icons:s,smartButton:l,disabled:r,msg:d,touched:u}=function(e){let t,n;return"_icons"in e&&(t=e._icons),"_smartButton"in e&&(n=e._smartButton),{icons:t,smartButton:n,disabled:e._disabled,msg:(0,c.a)(e._msg),touched:e._touched}}(e);let h=null==s?void 0:s.left;(0,o.i)(h)&&(h={icon:h});let p=null==s?void 0:s.right;(0,o.i)(p)&&(p={icon:p});const m=[],b=[];return t&&(Array.isArray(t)?b.push(...t):b.push(t)),h&&m.push((0,i.h)(k,Object.assign({componentName:"icon"},(0,a.i)(h)?h:{}))),(0,a.i)(l)&&b.push((0,i.h)(k,Object.assign({componentName:"button"},l,{hideLabel:!0,disabled:r}))),p&&b.push((0,i.h)(k,Object.assign({componentName:"icon"},(0,a.i)(p)?p:{}))),(0,i.h)(_,{disabled:r,msg:d,touched:u,startAdornment:m,endAdornment:b},n)},w=(e,t)=>{const n=e;"object"==typeof n&&null!==n&&((0,m.i)(n.right,1)&&(n.right={icon:n.right}),(0,m.i)(n.left,1)&&(n.left={icon:n.left}),t.set("_icons",n))};class x extends u.I{constructor(e,t,n){super(e,t,n),this.component=e}validateIcons(e){(0,p.o)(e,(()=>{try{e=(0,p.p)(e)}catch(e){}(0,p.w)(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&((0,m.i)(e.left,1)||(0,h.i)(e.left)||(0,m.i)(e.right,1)||(0,h.i)(e.right))),new Set(["KoliBriHorizontalIcon"]),e,{hooks:{beforePatch:w},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},8973:(e,t,n)=>{n.d(t,{i:()=>s,v:()=>l});var i=n(5800),o=n(608);const a=(e,t,n)=>{(0,o.b)(n)?e[t]=n:(0,o.i)(n,1)&&(e[t]={icon:n})},s=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,o.a)(e.style))&&(void 0===e.label||(0,o.i)(e.label))&&(0,o.i)(e.icon,1),l=(e,t,n={})=>{(0,i.o)(t,(()=>{var l;try{t=(0,i.p)(t)}catch(e){}(0,i.w)(e,"_icons",(e=>{const t="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||t||(0,o.i)(e,1)||"object"==typeof e&&null!==e&&((0,o.i)(e.left,1)||s(e.left)||(0,o.i)(e.right,1)||s(e.right)||(0,o.i)(e.top,1)||s(e.top)||(0,o.i)(e.bottom,1)||s(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(l=n.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(e,t,i,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(e,t,i,s)),(e=>{var t,n,i;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(n=e.nextState)||void 0===n?void 0:n.get("_icons");null===(i=e.nextState)||void 0===i||i.set("_icons",(e=>{let t={};return(0,o.i)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(a(t,"top",e.top),a(t,"right",e.right),a(t,"bottom",e.bottom),a(t,"left",e.left)),t})(t))}})(i)}}}))}))}},665:(e,t,n)=>{function i(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}n.d(t,{i:()=>i})},4662:(e,t,n)=>{n.r(t),n.d(t,{kol_input_range:()=>b});var i=n(6783),o=n(4600),a=n(9060),s=n(7336),l=n(9574),r=n(5363),d=n(5800),c=n(623),u=n(7146),h=n(8625),p=(e,t,n)=>new Promise(((i,o)=>{var a=e=>{try{l(n.next(e))}catch(e){o(e)}},s=e=>{try{l(n.throw(e))}catch(e){o(e)}},l=e=>e.done?i(e.value):Promise.resolve(e.value).then(a,s);l((n=n.apply(e,t)).next())}));class m extends r.I{constructor(e,t,n){super(e,t,n),this.component=e}validateAutoComplete(e){(0,d.w)(this.component,"_autoComplete",(e=>"string"==typeof e&&("on"===e||"off"===e)),new Set(["on | off"]),e)}validateMax(e){(0,d.k)(this.component,"_max",e)}validateMin(e){(0,d.k)(this.component,"_min",e)}validateStep(e){(0,d.k)(this.component,"_step",e)}validateSuggestions(e){(0,c.v)(this.component,e)}validateValue(e){(0,d.k)(this.component,"_value",e),this.component._value=e,this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateStep(this.component._step),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const b=class{kolFocus(){return p(this,null,(function*(){var e;null===(e=this.refInputNumber)||void 0===e||e.focus()}))}getSanitizedFloatValue(e){const t=parseFloat(e);return this.state._max&&t>this.state._max?this.state._max:this.state._min&&t<this.state._min?this.state._min:t}getValue(){return p(this,null,(function*(){if(void 0!==this.refInputNumber){const e=this.refInputNumber.value;return this.getSanitizedFloatValue(e)}}))}componentDidLoad(){var e;!this._value&&(null===(e=this.refInputRange)||void 0===e?void 0:e.value)&&this.validateValue(parseFloat(this.refInputRange.value))}getFormFieldProps(){return{state:this.state,class:(0,a.c)("kol-input-range","range"),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.refInputRange)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getGenericInputProps(){const e=this.state,t=(0,o._)(e,["_suggestions"]);return Object.assign(Object.assign({state:Object.assign(Object.assign({},t),{_suggestions:[]})},this.controller.onFacade),{onChange:this.onChange,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}get hasSuggestions(){return Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0}getInputRangeProps(){return Object.assign(Object.assign({},this.getGenericInputProps()),{name:this.state._name?`${this.state._name}-range`:void 0,list:this.hasSuggestions?`${this.state._id}-list`:void 0,type:"range",tabIndex:-1,id:void 0,"aria-hidden":"true",ref:this.catchInputRangeRef})}getInputNumberProps(){return Object.assign(Object.assign({},this.getGenericInputProps()),{name:this.state._name?`${this.state._name}-number`:void 0,list:this.hasSuggestions?`${this.state._id}-list`:void 0,type:"number",ref:this.catchInputNumberRef,onKeyDown:this.onKeyDown})}render(){var e;const t={"--kolibri-input-range--input-number--width":`calc(${String(null!==(e=this.state._max)&&void 0!==e?e:1e3).length}ch + 1.5em)`};return(0,i.h)(h.K,Object.assign({key:"e3e7627159a0e18e30e701a45c4b3ab01d7d2e2b"},this.getFormFieldProps()),(0,i.h)(r.K,{key:"e4e46a99e464f80d46914f05786fbb7c8c2bebc1",state:this.state},(0,i.h)("div",{key:"1b8e0d82edec1936a5942389ec2d867a6ea10d8e",class:"kol-input-range__inputs-wrapper",style:t},(0,i.h)(u.K,Object.assign({key:"3ce9b5705d25c03ac18910656b7f0700b7e89b83",class:"kol-input-range__input kol-input-range__input--range"},this.getInputRangeProps())),(0,i.h)(u.K,Object.assign({key:"235b9bf93e39cc78b91044da2addaba0e9bd78a3",class:"kol-input-range__input kol-input-range__input--number"},this.getInputNumberProps()))),this.hasSuggestions&&(0,i.h)(u.a,{key:"1681fc5c7b9f9fe1a320a649d66d305bffe22e8a",id:this.state._id,suggestions:this.state._suggestions})))}constructor(e){(0,i.r)(this,e),this.catchInputNumberRef=e=>{var t;e&&(this.refInputNumber=e,!this._value&&(null===(t=this.refInputNumber)||void 0===t?void 0:t.value)&&this.validateValue(parseFloat(this.refInputNumber.value)))},this.catchInputRangeRef=e=>{e&&(this.refInputRange=e)},this.onChange=e=>{const t=e.target.value,n=this.getSanitizedFloatValue(t);this.validateValue(n),this.controller.onFacade.onChange(e,n)},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||(0,l.p)({form:this.host,ref:this.refInputNumber})},this._accessKey=void 0,this._autoComplete=void 0,this._disabled=!1,this._hideMsg=!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",_hideMsg:!1,_id:`id-${(0,s.n)()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new m(this,"range",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMax(e){this.controller.validateMax(e)}validateMin(e){this.controller.validateMin(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateStep(e){this.controller.validateStep(e)}validateSuggestions(e){this.controller.validateSuggestions(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.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_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    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n  [disabled]:focus .kol-span {\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 {\n    display: contents;\n  }\n  .kol-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  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\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__content {\n    background-color: #fff;\n    color: #000;\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  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}\n@layer kol-component {\n  .kol-input-range__inputs-wrapper {\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    flex-grow: 1;\n  }\n  .kol-input-range__input--number {\n    width: var(--kolibri-input-range--input-number--width);\n  }\n  .kol-input-range__input--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  .kol-input-range__input--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  @media (prefers-contrast: more) or (forced-colors: active) {\n    .kol-input-range__input--range::-webkit-slider-thumb {\n      outline: calc(1rem / var(--kolibri-root-font-size, 16)) solid currentColor;\n    }\n  }\n  .kol-input-range__input--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}"}},623:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(5800);const o=(e,t)=>{(0,i.g)(e,"_suggestions",(e=>"string"==typeof e||"number"==typeof e),t,void 0,{hooks:{afterPatch:e=>{Array.isArray(e)&&e.length&&(0,i.a)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4662],{5126:(e,t,n)=>{n.d(t,{K:()=>a});var i=n(1290),o=n(4957);const a=e=>{const{class:t,style:n,icons:a,label:s,onClick:l}=e;return(0,i.h)(o.d,{class:t,style:n,onClick:l,_icons:a,_label:s})}},6884:(e,t,n)=>{n.d(t,{K:()=>r});var i=n(4600),o=n(1290),a=n(9060),s=n(1416),l=n(9732);const r=e=>{const{class:t,msg:n,required:r,disabled:d,touched:c,readonly:u,ariaDescribedBy:h,hideLabel:p,label:m,suggestions:b,value:g}=e,f=(0,i._)(e,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),_=(0,l.c)(n,c),v={"kol-input--disabled":Boolean(d),"kol-input--required":Boolean(r),"kol-input--touched":Boolean(c),"kol-input--readonly":Boolean(u),[`kol-input--${(null==n?void 0:n.type)||"error"}`]:_},y=Object.assign(Object.assign({class:(0,a.c)("kol-input",v,t),required:r,disabled:d,readonly:u,type:"text",list:b?`${f.id}-list`:void 0},(0,s.d)({ariaDescribedBy:h,hideLabel:p,label:m})),f);return(0,o.h)(o.F,null,(0,o.h)("input",Object.assign({},y,{value:g})),b)}},4746:(e,t,n)=>{n.d(t,{K:()=>d,a:()=>r});var i=n(4600),o=n(1290),a=n(1416),s=n(6884),l=n(9732);const r=e=>{var{id:t,suggestions:n}=e,a=(0,i._)(e,["id","suggestions"]);return n?(0,o.h)("datalist",Object.assign({id:`${t}-list`},a),n.map((e=>(0,o.h)("option",{value:e})))):null},d=e=>{var{state:t,customSuggestions:n}=e,d=(0,i._)(e,["state","customSuggestions"]);return(0,o.h)(s.K,Object.assign({},function(e,t){const{ariaDescribedBy:n}=(0,a.g)(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:n};return"_type"in e&&(i.type=e._type),"_value"in e&&(i.value=e._value),"_required"in e&&(i.required=e._required),"_maxLength"in e&&(i.maxlength=e._maxLength),"_placeholder"in e&&(i.placeholder=e._placeholder),"_autoComplete"in e&&(i.autoComplete=e._autoComplete),"_spellCheck"in e&&(i.spellcheck=e._spellCheck),"_pattern"in e&&(i.pattern=e._pattern),"_readOnly"in e&&(i.readonly=e._readOnly),"_min"in e&&(i.min=e._min),"_max"in e&&(i.max=e._max),"_step"in e&&(i.step=e._step),"_multiple"in e&&(i.multiple=e._multiple),"_checked"in e&&(i.checked=e._checked),"_indeterminate"in e&&(i.indeterminate=e._indeterminate),"_touched"in e&&(i.touched=e._touched),"_msg"in e&&(i.msg=(0,l.a)(e._msg)),"_suggestions"in e&&!t&&Array.isArray(e._suggestions)&&e._suggestions.length>0&&(i.suggestions=(0,o.h)(r,{id:e._id,suggestions:e._suggestions})),i}(t,n),d))}},359:(e,t,n)=>{n.d(t,{a:()=>l,p:()=>r});var i=n(4957),o=n(5800),a=n(1732);const s=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.h.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},l=(e={})=>{var t,n;const a=s(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.h.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=s(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.h.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))}))}}}},7617:(e,t,n)=>{n.d(t,{I:()=>x,K:()=>k,a:()=>y});var i=n(1290),o=n(3426),a=n(665),s=n(4600),l=n(4957),r=n(5126),d=n(9060),c=n(9732),u=n(1416),h=n(8973),p=n(5800),m=n(608);const b=(e,t)=>{var{position:n="start",class:o}=e,a=(0,s._)(e,["position","class"]);const l="kol-input-container__adornment",r=`${l}--${n}`;return(0,i.h)("div",Object.assign({class:(0,d.c)(l,r,o)},a),t)};function g(e){return!!e&&(Array.isArray(e)?e.length>0:Boolean(e))}const f=(e,t)=>{var{class:n}=e,o=(0,s._)(e,["class"]);return(0,i.h)("div",Object.assign({class:(0,d.c)("kol-input-container__container",n)},o),t)},_=(e,t)=>{const{class:n,startAdornment:o,endAdornment:a,disabled:l,msg:r,touched:u,containerProps:h,startAdornmentProps:p,endAdornmentProps:m}=e,_=(0,s._)(e,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),v=(0,c.c)(r,u),y={"kol-input-container--disabled":l,[`kol-input-container--${(null==r?void 0:r.type)||"error"}`]:v},k=Object.assign({class:(0,d.c)("kol-input-container",y,n)},_);return g(o)||g(a)?(0,i.h)("div",Object.assign({},k),(0,i.h)(b,Object.assign({},p,{position:"start"}),o),(0,i.h)(f,Object.assign({},h),t),(0,i.h)(b,Object.assign({},m,{position:"end"}),a)):(0,i.h)("div",Object.assign({},k),(0,i.h)(f,Object.assign({},h),t))},v=e=>{const{label:t,icons:n,hideLabel:o,disabled:a,onClick:r}=e,d=(0,s._)(e,["label","icons","hideLabel","disabled","onClick"]);return(0,i.h)(l.a,Object.assign({tabindex:0,_label:t,_disabled:a,_icons:n,_hideLabel:o,_on:{onClick:r}},d))},y=e=>{const{componentName:t="button",label:n,icon:o,onClick:a}=e,l=(0,s._)(e,["componentName","label","icon","onClick"]),d="button"===t?v:r.K;return(0,i.h)(d,Object.assign({label:n||"",hideLabel:!0,icons:`codicon codicon-${o}`,onClick:a},l))},k=({state:e,endAdornment:t},n)=>{const{icons:s,smartButton:l,disabled:r,msg:d,touched:u}=function(e){let t,n;return"_icons"in e&&(t=e._icons),"_smartButton"in e&&(n=e._smartButton),{icons:t,smartButton:n,disabled:e._disabled,msg:(0,c.a)(e._msg),touched:e._touched}}(e);let h=null==s?void 0:s.left;(0,o.i)(h)&&(h={icon:h});let p=null==s?void 0:s.right;(0,o.i)(p)&&(p={icon:p});const m=[],b=[];return t&&(Array.isArray(t)?b.push(...t):b.push(t)),h&&m.push((0,i.h)(y,Object.assign({componentName:"icon"},(0,a.i)(h)?h:{}))),(0,a.i)(l)&&b.push((0,i.h)(y,Object.assign({componentName:"button"},l,{hideLabel:!0,disabled:r}))),p&&b.push((0,i.h)(y,Object.assign({componentName:"icon"},(0,a.i)(p)?p:{}))),(0,i.h)(_,{disabled:r,msg:d,touched:u,startAdornment:m,endAdornment:b},n)},w=(e,t)=>{const n=e;"object"==typeof n&&null!==n&&((0,m.i)(n.right,1)&&(n.right={icon:n.right}),(0,m.i)(n.left,1)&&(n.left={icon:n.left}),t.set("_icons",n))};class x extends u.I{constructor(e,t,n){super(e,t,n),this.component=e}validateIcons(e){(0,p.o)(e,(()=>{try{e=(0,p.p)(e)}catch(e){}(0,p.w)(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&((0,m.i)(e.left,1)||(0,h.i)(e.left)||(0,m.i)(e.right,1)||(0,h.i)(e.right))),new Set(["KoliBriHorizontalIcon"]),e,{hooks:{beforePatch:w},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},8973:(e,t,n)=>{n.d(t,{i:()=>s,v:()=>l});var i=n(5800),o=n(608);const a=(e,t,n)=>{(0,o.b)(n)?e[t]=n:(0,o.i)(n,1)&&(e[t]={icon:n})},s=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,o.a)(e.style))&&(void 0===e.label||(0,o.i)(e.label))&&(0,o.i)(e.icon,1),l=(e,t,n={})=>{(0,i.o)(t,(()=>{var l;try{t=(0,i.p)(t)}catch(e){}(0,i.w)(e,"_icons",(e=>{const t="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||t||(0,o.i)(e,1)||"object"==typeof e&&null!==e&&((0,o.i)(e.left,1)||s(e.left)||(0,o.i)(e.right,1)||s(e.right)||(0,o.i)(e.top,1)||s(e.top)||(0,o.i)(e.bottom,1)||s(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(l=n.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(e,t,i,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(e,t,i,s)),(e=>{var t,n,i;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(n=e.nextState)||void 0===n?void 0:n.get("_icons");null===(i=e.nextState)||void 0===i||i.set("_icons",(e=>{let t={};return(0,o.i)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(a(t,"top",e.top),a(t,"right",e.right),a(t,"bottom",e.bottom),a(t,"left",e.left)),t})(t))}})(i)}}}))}))}},665:(e,t,n)=>{function i(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}n.d(t,{i:()=>i})},4662:(e,t,n)=>{n.r(t),n.d(t,{kol_input_range:()=>b});var i=n(1290),o=n(4600),a=n(9060),s=n(526),l=n(359),r=n(7617),d=n(5800),c=n(623),u=n(4746),h=n(1416),p=(e,t,n)=>new Promise(((i,o)=>{var a=e=>{try{l(n.next(e))}catch(e){o(e)}},s=e=>{try{l(n.throw(e))}catch(e){o(e)}},l=e=>e.done?i(e.value):Promise.resolve(e.value).then(a,s);l((n=n.apply(e,t)).next())}));class m extends r.I{constructor(e,t,n){super(e,t,n),this.component=e}validateAutoComplete(e){(0,d.w)(this.component,"_autoComplete",(e=>"string"==typeof e&&("on"===e||"off"===e)),new Set(["on | off"]),e)}validateMax(e){(0,d.k)(this.component,"_max",e)}validateMin(e){(0,d.k)(this.component,"_min",e)}validateStep(e){(0,d.k)(this.component,"_step",e)}validateSuggestions(e){(0,c.v)(this.component,e)}validateValue(e){(0,d.k)(this.component,"_value",e),this.component._value=e,this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateStep(this.component._step),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const b=class{kolFocus(){return p(this,null,(function*(){var e;null===(e=this.refInputNumber)||void 0===e||e.focus()}))}getSanitizedFloatValue(e){const t=parseFloat(e);return this.state._max&&t>this.state._max?this.state._max:this.state._min&&t<this.state._min?this.state._min:t}getValue(){return p(this,null,(function*(){if(void 0!==this.refInputNumber){const e=this.refInputNumber.value;return this.getSanitizedFloatValue(e)}}))}componentDidLoad(){var e;!this._value&&(null===(e=this.refInputRange)||void 0===e?void 0:e.value)&&this.validateValue(parseFloat(this.refInputRange.value))}getFormFieldProps(){return{state:this.state,class:(0,a.c)("kol-input-range","range"),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.refInputRange)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getGenericInputProps(){const e=this.state,t=(0,o._)(e,["_suggestions"]);return Object.assign(Object.assign({state:Object.assign(Object.assign({},t),{_suggestions:[]})},this.controller.onFacade),{onChange:this.onChange,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}get hasSuggestions(){return Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0}getInputRangeProps(){return Object.assign(Object.assign({},this.getGenericInputProps()),{name:this.state._name?`${this.state._name}-range`:void 0,list:this.hasSuggestions?`${this.state._id}-list`:void 0,type:"range",tabIndex:-1,id:void 0,"aria-hidden":"true",ref:this.catchInputRangeRef})}getInputNumberProps(){return Object.assign(Object.assign({},this.getGenericInputProps()),{name:this.state._name?`${this.state._name}-number`:void 0,list:this.hasSuggestions?`${this.state._id}-list`:void 0,type:"number",ref:this.catchInputNumberRef,onKeyDown:this.onKeyDown})}render(){var e;const t={"--kolibri-input-range--input-number--width":`calc(${String(null!==(e=this.state._max)&&void 0!==e?e:1e3).length}ch + 1.5em)`};return(0,i.h)(h.K,Object.assign({key:"c1f968019f22e0b30c1f564b61ef58dc3b7c191c"},this.getFormFieldProps()),(0,i.h)(r.K,{key:"531452bc88e06de34a7d967ff2d8782eccb83fd5",state:this.state},(0,i.h)("div",{key:"7a43d49f3143c54fbbf5a639c5d88a1445bda98b",class:"kol-input-range__inputs-wrapper",style:t},(0,i.h)(u.K,Object.assign({key:"feea212586ac909d1febededef511d169dad8753",class:"kol-input-range__input kol-input-range__input--range"},this.getInputRangeProps())),(0,i.h)(u.K,Object.assign({key:"fb1337ec24554dfa2a84fff033b6f8afece24b2b",class:"kol-input-range__input kol-input-range__input--number"},this.getInputNumberProps()))),this.hasSuggestions&&(0,i.h)(u.a,{key:"dde6401d05c5dd1f8c8d2a0220cb2b77a32ac05a",id:this.state._id,suggestions:this.state._suggestions})))}constructor(e){(0,i.r)(this,e),this.catchInputNumberRef=e=>{var t;e&&(this.refInputNumber=e,!this._value&&(null===(t=this.refInputNumber)||void 0===t?void 0:t.value)&&this.validateValue(parseFloat(this.refInputNumber.value)))},this.catchInputRangeRef=e=>{e&&(this.refInputRange=e)},this.onChange=e=>{const t=e.target.value,n=this.getSanitizedFloatValue(t);this.validateValue(n),this.controller.onFacade.onChange(e,n)},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||(0,l.p)({form:this.host,ref:this.refInputNumber})},this._accessKey=void 0,this._autoComplete=void 0,this._disabled=!1,this._hideMsg=!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._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hideMsg:!1,_id:`id-${(0,s.n)()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new m(this,"range",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMax(e){this.controller.validateMax(e)}validateMin(e){this.controller.validateMin(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateStep(e){this.controller.validateStep(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}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"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_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"],_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    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n  [disabled]:focus .kol-span {\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 {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\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  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\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__content {\n    background-color: #fff;\n    color: #000;\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  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: rem(16);\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: rem(16);\n    height: rem(44);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}\n@layer kol-component {\n  .kol-input-range__inputs-wrapper {\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    flex-grow: 1;\n  }\n  .kol-input-range__input--number {\n    width: var(--kolibri-input-range--input-number--width);\n  }\n  .kol-input-range__input--range {\n    appearance: none;\n    background-color: #d3d3d3;\n    border: 1px 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  .kol-input-range__input--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: 20px;\n    cursor: pointer;\n    -webkit-appearance: none;\n  }\n  @media (prefers-contrast: more) or (forced-colors: active) {\n    .kol-input-range__input--range::-webkit-slider-thumb {\n      outline: 1px solid currentColor;\n    }\n  }\n  .kol-input-range__input--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: 20px;\n    cursor: pointer;\n    -moz-appearance: none;\n  }\n}"}},623:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(5800);const o=(e,t)=>{(0,i.g)(e,"_suggestions",(e=>"string"==typeof e||"number"==typeof e),t,void 0,{hooks:{afterPatch:e=>{Array.isArray(e)&&e.length&&(0,i.a)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);

package/dist/4928.js

@@ -1,2 +1,2 @@
 /*! For license information please see 4928.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4928],{4928:(n,e,t)=>{t.r(e),t.d(e,{kol_link:()=>a});var i=t(6783),o=t(7662);const a=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._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"}kolFocus(){return n=this,e=function*(){var n;yield null===(n=this.linkWcRef)||void 0===n?void 0:n.kolFocus()},new Promise(((t,i)=>{var o=n=>{try{l(e.next(n))}catch(n){i(n)}},a=n=>{try{l(e.throw(n))}catch(n){i(n)}},l=n=>n.done?t(n.value):Promise.resolve(n.value).then(o,a);l((e=e.apply(n,null)).next())}));var n,e}render(){return(0,i.h)(o.f,{key:"08fcc3e8a5d1735df8ad6e8d7633f838204e7116",ref:this.catchRef,_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:this._role,_shortKey:this._shortKey,_tabIndex:this._tabIndex,_target:this._target,_tooltipAlign:this._tooltipAlign},(0,i.h)("slot",{key:"e2b7d9d3a195e135fec2d659f934f1cc9e37b7f1",name:"expert",slot:"expert"}))}static get delegatesFocus(){return!0}};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    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n  [disabled]:focus .kol-span {\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 {\n    display: contents;\n  }\n  .kol-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  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\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__content {\n    background-color: #fff;\n    color: #000;\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    display: inline-block;\n  }\n  .kol-link {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    align-items: baseline;\n    display: inline-flex;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n}"}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4928],{4928:(n,e,t)=>{t.r(e),t.d(e,{kol_link:()=>a});var i=t(1290),o=t(4957);const a=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._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._target=void 0,this._tooltipAlign="right"}kolFocus(){return n=this,e=function*(){var n;yield null===(n=this.linkWcRef)||void 0===n?void 0:n.kolFocus()},new Promise(((t,i)=>{var o=n=>{try{l(e.next(n))}catch(n){i(n)}},a=n=>{try{l(e.throw(n))}catch(n){i(n)}},l=n=>n.done?t(n.value):Promise.resolve(n.value).then(o,a);l((e=e.apply(n,null)).next())}));var n,e}render(){return(0,i.h)(o.f,{key:"d147ff16b0297d1aa68eb5e36b143052e9e378e8",ref:this.catchRef,_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:this._role,_shortKey:this._shortKey,_target:this._target,_tooltipAlign:this._tooltipAlign},(0,i.h)("slot",{key:"4effb1ee103d6184a1d066183df7c5e7e9cee5d1",name:"expert",slot:"expert"}))}static get delegatesFocus(){return!0}};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    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n  [disabled]:focus .kol-span {\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 {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\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  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\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__content {\n    background-color: #fff;\n    color: #000;\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    display: inline-block;\n  }\n  .kol-link {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    align-items: baseline;\n    display: inline-flex;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n}"}}}]);

package/dist/5000.js

@@ -1,2 +1,2 @@
 /*! For license information please see 5000.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5e3],{2677:(e,n,t)=>{t.d(n,{K:()=>r});var i=t(4600),o=t(6783),l=t(9060),a=t(7662),s=t(3334);const r=(e,n)=>{const{id:t,class:r,label:c,level:d=1,disabled:h,open:p,onClick:u,HeadingProps:b={},HeadingButtonProps:v={},ContentProps:f={}}=e,m=(0,i._)(e,["id","class","label","level","disabled","open","onClick","HeadingProps","HeadingButtonProps","ContentProps"]),g=p?"remove":"add";return(0,o.h)("div",Object.assign({id:t,class:(0,l.c)("collapsible",{"collapsible--disabled":!0===h,"collapsible--open":!0===p},r)},m),(0,o.h)(s.K,{ref:null==b?void 0:b.ref,level:d,class:(0,l.c)("collapsible__heading",null==b?void 0:b.class)},(0,o.h)(a.a,{class:(0,l.c)("collapsible__heading-button",null==v?void 0:v.class),ref:null==v?void 0:v.ref,slot:"expert",_ariaControls:`${t}-control`,_ariaExpanded:p,_disabled:h,_icons:(null==v?void 0:v._icons)||`codicon codicon-${g}`,_label:c,_on:{onClick:u}})),(0,o.h)("div",{class:(0,l.c)("collapsible__wrapper",null==f?void 0:f.wrapperClass)},(0,o.h)("div",{class:(0,l.c)("collapsible__wrapper-animation",null==f?void 0:f.animationClass)},(0,o.h)("div",{"aria-hidden":!1===p?"true":void 0,class:(0,l.c)("collapsible__content",null==f?void 0:f.class),id:`${t}-control`},n))))}},3334:(e,n,t)=>{t.d(n,{K:()=>d});var i=t(4600),o=t(6783),l=t(9060);const a=1;function s(e){return function(e){return e>=a&&e<=6}(e)?`h${e}`:"strong"}const r=(e,n)=>{var{class:t,level:r=a,variant:c}=e,d=(0,i._)(e,["class","level","variant"]);const h=s(r),p=c||h;return(0,o.h)(h,Object.assign({class:(0,l.c)("kol-headline",`kol-headline--${p}`,t)},d),n)},c=(e,n)=>{var{class:t,level:r=a}=e,c=(0,i._)(e,["class","level"]);const d=function(e){return 1===e?"span":s(e)}(r+1);return(0,o.h)(d,Object.assign({class:(0,l.c)("kol-headline kol-headline--group kol-headline--secondary",t)},c),n)},d=(e,n)=>{var{secondaryHeadline:t,level:s=a,class:d,HeadingGroupProps:h={},SecondaryHeadlineProps:p={}}=e,u=(0,i._)(e,["secondaryHeadline","level","class","HeadingGroupProps","SecondaryHeadlineProps"]);const b=Object.assign({level:s},u);if(!t)return(0,o.h)(r,Object.assign({class:(0,l.c)(d,"kol-headline--single")},b),n);const{class:v}=h,f=(0,i._)(h,["class"]),m=Object.assign({class:(0,l.c)("kol-heading-group",v)},f);return(0,o.h)("hgroup",Object.assign({},m),(0,o.h)(r,Object.assign({class:(0,l.c)(d,"kol-headline--group","kol-headline--primary")},b),n),(0,o.h)(c,Object.assign({level:s},p),t))}},9060:(e,n,t)=>{function i(e){var n,t,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e)){var l=e.length;for(n=0;n<l;n++)e[n]&&(t=i(e[n]))&&(o&&(o+=" "),o+=t)}else for(t in e)e[t]&&(o&&(o+=" "),o+=t);return o}function o(){for(var e,n,t=0,o="",l=arguments.length;t<l;t++)(e=arguments[t])&&(n=i(e))&&(o&&(o+=" "),o+=n);return o}t.d(n,{c:()=>o})},7336:(e,n,t)=>{t.d(n,{i:()=>s,n:()=>c,r:()=>r});var i=t(6783),o=t(5687),l=t(1732);const a=()=>{let e=(0,l.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,l.d)(),"KoliBri",{value:e,writable:!1})),e},s=()=>{(()=>{const e=(0,l.g)().querySelector('meta[name="kolibri"]');if(e&&e.hasAttribute("content")){const n=e.getAttribute("content");"string"==typeof n&&((0,l.s)(n.includes("dev-mode=true")),(0,l.b)(n.includes("experimental-mode=true")),(0,l.c)(n.includes("color-contrast-analysis=true")))}})(),l.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${i.E.kolibriVersion}\n\t`,{forceLog:!0})},r=()=>{!0!==a().adviceShown&&(Object.defineProperty(a(),"adviceShown",{get:function(){return!0}}),l.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let c=()=>Math.floor(16777215*Math.random()).toString(16);"test"===o.p&&(c=()=>"nonce")},3970:(e,n,t)=>{t.d(n,{v:()=>o});var i=t(5800);const o=(e,n)=>{(0,i.b)(e,"_disabled",n,{hooks:{afterPatch:e=>{!0===e&&(0,i.c)()}}})}},5e3:(e,n,t)=>{t.r(n),t.d(n,{kol_accordion:()=>p});var i=t(6783),o=t(7336),l=t(8228),a=t(8231),s=t(5800),r=t(2677),c=t(3970),d=t(7688),h=t(1074);(0,s.f)("[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend"),(0,s.f)("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const p=class{constructor(e){(0,i.r)(this,e),this.nonce=(0,o.n)(),this.catchRef=e=>{this.buttonWcRef=e},this.handleOnClick=e=>{this._open=!this._open,setTimeout((()=>{var n,t;null===(t=null===(n=this.state._on)||void 0===n?void 0:n.onClick)||void 0===t||t.call(n,e,!0===this._open),this.host&&(0,a.d)(this.host,a.K.click,!0===this._open)}))},this._disabled=!1,this._label=void 0,this._level=0,this._on=void 0,this._open=!1,this.state={_label:"",_level:0,_on:{}}}kolFocus(){return e=this,n=function*(){var e;yield null===(e=this.buttonWcRef)||void 0===e?void 0:e.kolFocus()},new Promise(((t,i)=>{var o=e=>{try{a(n.next(e))}catch(e){i(e)}},l=e=>{try{a(n.throw(e))}catch(e){i(e)}},a=e=>e.done?t(e.value):Promise.resolve(e.value).then(o,l);a((n=n.apply(e,null)).next())}));var e,n}render(){const{_open:e,_label:n,_disabled:t,_level:o}=this.state,l="kol-accordion",a={id:this.nonce,label:n,open:e,disabled:t,level:o,onClick:this.handleOnClick,class:l,HeadingProps:{class:`${l}__heading`},HeadingButtonProps:{ref:this.catchRef,class:`${l}__heading-button`},ContentProps:{class:`${l}__content`,wrapperClass:`${l}__wrapper`,animationClass:`${l}__wrapper-animation`}};return(0,i.h)(r.K,Object.assign({key:"1dbccb17356ce71203174127364c940a335db42d"},a),(0,i.h)("slot",{key:"a04b6c07d149b451f549400a506d7b97e6cf3ed7"}))}validateDisabled(e){(0,c.v)(this,e)}validateLabel(e){(0,h.v)(this,e,{required:!0})}validateLevel(e){(0,l.w)(this,e)}validateOn(e){var n;n=e,(0,s.w)(this,"_on",(e=>"object"==typeof e&&null!==e),new Set(["AccordionCallbacksPropType {Events.onClick}"]),n)}validateOpen(e){(0,d.v)(this,e)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}get host(){return(0,i.g)(this)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};p.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    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n  .collapsible {\n    /* @see https://github.com/public-ui/kolibri/issues/5952 */\n    /*\n          * Inside a button, the caption text is always centered.\n          * So we have to align the text to the left.\n          */\n  }\n  .collapsible__wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    overflow: hidden;\n    transition: grid-template-rows 0.3s;\n  }\n  .collapsible__wrapper-animation {\n    min-height: 0;\n    transition: visibility 0.3s;\n    /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n    visibility: hidden;\n  }\n  .collapsible--open .collapsible__wrapper {\n    grid-template-rows: 1fr;\n  }\n  .collapsible--open .collapsible__wrapper-animation {\n    visibility: visible;\n  }\n  @media (prefers-reduced-motion) {\n    .collapsible__wrapper-animation, .collapsible__wrapper {\n      transition-duration: 0s;\n    }\n  }\n  @media print {\n    :not(.collapsible--open) .collapsible__wrapper-animation {\n      display: none;\n    }\n  }\n  .collapsible__heading-button button .kol-span {\n    justify-items: start;\n  }\n}\n@layer kol-component {\n  .kol-accordion {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}"}},1074:(e,n,t)=>{t.d(n,{a:()=>h,b:()=>s,c:()=>r,h:()=>o,v:()=>d});var i=t(5800);const o=[0,1,2,3,4,5,6],l=/[a-zA-Z0-9äöüÄÖÜß]/g,a=/^\d+$/;function s(e,n=1){return function(e){var n;return"string"==typeof e&&(null===(n=e.match(l))||void 0===n?void 0:n.length)||0}(e)>=n}function r(e){return a.test(e)}const c=new Set(["string"]),d=(e,n,t={})=>{(0,i.w)(e,"_label",(e=>"string"==typeof e),c,n,function(e){var n;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(n,t,o,l)=>{var a,c;"function"==typeof(null===(a=e.hooks)||void 0===a?void 0:a.afterPatch)&&(null===(c=e.hooks)||void 0===c||c.afterPatch(n,t,o,l)),"string"==typeof n&&!1===s(n,3)&&!1===r(n)&&(0,i.a)(`The heading or label ("${n}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof n&&n.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(n=e.hooks)||void 0===n?void 0:n.beforePatch}})}(t))},h=d},7688:(e,n,t)=>{t.d(n,{v:()=>o});var i=t(5800);const o=(e,n,t)=>{(0,i.b)(e,"_open",n,t)}},5687:(e,n,t)=>{t.d(n,{b:()=>a,h:()=>o,p:()=>i,s:()=>l});let i="development";try{i="production"}catch(e){i="production"}const o=(e,n,t)=>{if(e&&n&&"string"==typeof t){const i=e.querySelector(`[slot="${t}"]`);i&&n.appendChild(i)}},l=e=>""===e,a=(e,n)=>e||n||""},4600:(e,n,t)=>{function i(e,n){var t={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&n.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o<i.length;o++)n.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(e,i[o])&&(t[i[o]]=e[i[o]])}return t}t.d(n,{_:()=>i}),"function"==typeof SuppressedError&&SuppressedError},8228:(e,n,t)=>{t.d(n,{w:()=>l});var i=t(1074),o=t(5800);const l=(e,n)=>{(0,o.w)(e,"_level",(e=>"number"==typeof e&&i.h.includes(e)),new Set([`Number {${i.h.join(", ")}`]),n,{defaultValue:1,required:!0})}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5e3],{1085:(e,n,t)=>{t.d(n,{K:()=>r});var i=t(4600),o=t(1290),l=t(9060),a=t(4957),s=t(4692);const r=(e,n)=>{const{id:t,class:r,label:c,level:d=1,disabled:h,open:p,onClick:u,HeadingProps:b={},HeadingButtonProps:v={},ContentProps:f={}}=e,m=(0,i._)(e,["id","class","label","level","disabled","open","onClick","HeadingProps","HeadingButtonProps","ContentProps"]),g=p?"remove":"add";return(0,o.h)("div",Object.assign({id:t,class:(0,l.c)("collapsible",{"collapsible--disabled":!0===h,"collapsible--open":!0===p},r)},m),(0,o.h)(s.K,{ref:null==b?void 0:b.ref,level:d,class:(0,l.c)("collapsible__heading",null==b?void 0:b.class)},(0,o.h)(a.a,{class:(0,l.c)("collapsible__heading-button",null==v?void 0:v.class),ref:null==v?void 0:v.ref,slot:"expert",_ariaControls:`${t}-control`,_ariaExpanded:p,_disabled:h,_icons:(null==v?void 0:v._icons)||`codicon codicon-${g}`,_label:c,_on:{onClick:u}})),(0,o.h)("div",{class:(0,l.c)("collapsible__wrapper",null==f?void 0:f.wrapperClass)},(0,o.h)("div",{class:(0,l.c)("collapsible__wrapper-animation",null==f?void 0:f.animationClass)},(0,o.h)("div",{"aria-hidden":!1===p?"true":void 0,class:(0,l.c)("collapsible__content",null==f?void 0:f.class),id:`${t}-control`},n))))}},4692:(e,n,t)=>{t.d(n,{K:()=>d});var i=t(4600),o=t(1290),l=t(9060);const a=1;function s(e){return function(e){return e>=a&&e<=6}(e)?`h${e}`:"strong"}const r=(e,n)=>{var{class:t,level:r=a,variant:c}=e,d=(0,i._)(e,["class","level","variant"]);const h=s(r),p=c||h;return(0,o.h)(h,Object.assign({class:(0,l.c)("kol-headline",`kol-headline--${p}`,t)},d),n)},c=(e,n)=>{var{class:t,level:r=a}=e,c=(0,i._)(e,["class","level"]);const d=function(e){return 1===e?"span":s(e)}(r+1);return(0,o.h)(d,Object.assign({class:(0,l.c)("kol-headline kol-headline--group kol-headline--secondary",t)},c),n)},d=(e,n)=>{var{secondaryHeadline:t,level:s=a,class:d,HeadingGroupProps:h={},SecondaryHeadlineProps:p={}}=e,u=(0,i._)(e,["secondaryHeadline","level","class","HeadingGroupProps","SecondaryHeadlineProps"]);const b=Object.assign({level:s},u);if(!t)return(0,o.h)(r,Object.assign({class:(0,l.c)(d,"kol-headline--single")},b),n);const{class:v}=h,f=(0,i._)(h,["class"]),m=Object.assign({class:(0,l.c)("kol-heading-group",v)},f);return(0,o.h)("hgroup",Object.assign({},m),(0,o.h)(r,Object.assign({class:(0,l.c)(d,"kol-headline--group","kol-headline--primary")},b),n),(0,o.h)(c,Object.assign({level:s},p),t))}},9060:(e,n,t)=>{function i(e){var n,t,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e)){var l=e.length;for(n=0;n<l;n++)e[n]&&(t=i(e[n]))&&(o&&(o+=" "),o+=t)}else for(t in e)e[t]&&(o&&(o+=" "),o+=t);return o}function o(){for(var e,n,t=0,o="",l=arguments.length;t<l;t++)(e=arguments[t])&&(n=i(e))&&(o&&(o+=" "),o+=n);return o}t.d(n,{c:()=>o})},526:(e,n,t)=>{t.d(n,{i:()=>s,n:()=>c,r:()=>r});var i=t(1290),o=t(5687),l=t(1732);const a=()=>{let e=(0,l.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,l.d)(),"KoliBri",{value:e,writable:!1})),e},s=()=>{(()=>{const e=(0,l.g)().querySelector('meta[name="kolibri"]');if(e&&e.hasAttribute("content")){const n=e.getAttribute("content");"string"==typeof n&&((0,l.s)(n.includes("dev-mode=true")),(0,l.b)(n.includes("experimental-mode=true")),(0,l.c)(n.includes("color-contrast-analysis=true")))}})(),l.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${i.E.kolibriVersion}\n\t`,{forceLog:!0})},r=()=>{!0!==a().adviceShown&&(Object.defineProperty(a(),"adviceShown",{get:function(){return!0}}),l.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let c=()=>Math.floor(16777215*Math.random()).toString(16);"test"===o.p&&(c=()=>"nonce")},3970:(e,n,t)=>{t.d(n,{v:()=>o});var i=t(5800);const o=(e,n)=>{(0,i.b)(e,"_disabled",n,{hooks:{afterPatch:e=>{!0===e&&(0,i.c)()}}})}},5e3:(e,n,t)=>{t.r(n),t.d(n,{kol_accordion:()=>p});var i=t(1290),o=t(526),l=t(8228),a=t(8231),s=t(5800),r=t(1085),c=t(3970),d=t(7688),h=t(1074);(0,s.f)("[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend"),(0,s.f)("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const p=class{constructor(e){(0,i.r)(this,e),this.nonce=(0,o.n)(),this.catchRef=e=>{this.buttonWcRef=e},this.handleOnClick=e=>{this._open=!this._open,setTimeout((()=>{var n,t;null===(t=null===(n=this.state._on)||void 0===n?void 0:n.onClick)||void 0===t||t.call(n,e,!0===this._open),this.host&&(0,a.d)(this.host,a.K.click,!0===this._open)}))},this._disabled=!1,this._label=void 0,this._level=0,this._on=void 0,this._open=!1,this.state={_label:"",_level:0,_on:{}}}kolFocus(){return e=this,n=function*(){var e;yield null===(e=this.buttonWcRef)||void 0===e?void 0:e.kolFocus()},new Promise(((t,i)=>{var o=e=>{try{a(n.next(e))}catch(e){i(e)}},l=e=>{try{a(n.throw(e))}catch(e){i(e)}},a=e=>e.done?t(e.value):Promise.resolve(e.value).then(o,l);a((n=n.apply(e,null)).next())}));var e,n}render(){const{_open:e,_label:n,_disabled:t,_level:o}=this.state,l="kol-accordion",a={id:this.nonce,label:n,open:e,disabled:t,level:o,onClick:this.handleOnClick,class:l,HeadingProps:{class:`${l}__heading`},HeadingButtonProps:{ref:this.catchRef,class:`${l}__heading-button`},ContentProps:{class:`${l}__content`,wrapperClass:`${l}__wrapper`,animationClass:`${l}__wrapper-animation`}};return(0,i.h)(r.K,Object.assign({key:"1dbccb17356ce71203174127364c940a335db42d"},a),(0,i.h)("slot",{key:"a04b6c07d149b451f549400a506d7b97e6cf3ed7"}))}validateDisabled(e){(0,c.v)(this,e)}validateLabel(e){(0,h.v)(this,e,{required:!0})}validateLevel(e){(0,l.w)(this,e)}validateOn(e){var n;n=e,(0,s.w)(this,"_on",(e=>"object"==typeof e&&null!==e),new Set(["AccordionCallbacksPropType {Events.onClick}"]),n)}validateOpen(e){(0,d.v)(this,e)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}get host(){return(0,i.g)(this)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};p.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    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n  .collapsible {\n    /* @see https://github.com/public-ui/kolibri/issues/5952 */\n    /*\n          * Inside a button, the caption text is always centered.\n          * So we have to align the text to the left.\n          */\n  }\n  .collapsible__wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    overflow: hidden;\n    transition: grid-template-rows 0.3s;\n  }\n  .collapsible__wrapper-animation {\n    min-height: 0;\n    transition: visibility 0.3s;\n    /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n    visibility: hidden;\n  }\n  .collapsible--open .collapsible__wrapper {\n    grid-template-rows: 1fr;\n  }\n  .collapsible--open .collapsible__wrapper-animation {\n    visibility: visible;\n  }\n  @media (prefers-reduced-motion) {\n    .collapsible__wrapper-animation, .collapsible__wrapper {\n      transition-duration: 0s;\n    }\n  }\n  @media print {\n    :not(.collapsible--open) .collapsible__wrapper-animation {\n      display: none;\n    }\n  }\n  .collapsible__heading-button button .kol-span {\n    justify-items: start;\n  }\n}\n@layer kol-component {\n  .kol-accordion {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}"}},1074:(e,n,t)=>{t.d(n,{a:()=>h,b:()=>s,c:()=>r,h:()=>o,v:()=>d});var i=t(5800);const o=[0,1,2,3,4,5,6],l=/[a-zA-Z0-9äöüÄÖÜß]/g,a=/^\d+$/;function s(e,n=1){return function(e){var n;return"string"==typeof e&&(null===(n=e.match(l))||void 0===n?void 0:n.length)||0}(e)>=n}function r(e){return a.test(e)}const c=new Set(["string"]),d=(e,n,t={})=>{(0,i.w)(e,"_label",(e=>"string"==typeof e),c,n,function(e){var n;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(n,t,o,l)=>{var a,c;"function"==typeof(null===(a=e.hooks)||void 0===a?void 0:a.afterPatch)&&(null===(c=e.hooks)||void 0===c||c.afterPatch(n,t,o,l)),"string"==typeof n&&!1===s(n,3)&&!1===r(n)&&(0,i.a)(`The heading or label ("${n}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof n&&n.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(n=e.hooks)||void 0===n?void 0:n.beforePatch}})}(t))},h=d},7688:(e,n,t)=>{t.d(n,{v:()=>o});var i=t(5800);const o=(e,n,t)=>{(0,i.b)(e,"_open",n,t)}},5687:(e,n,t)=>{t.d(n,{b:()=>a,h:()=>o,p:()=>i,s:()=>l});let i="development";try{i="production"}catch(e){i="production"}const o=(e,n,t)=>{if(e&&n&&"string"==typeof t){const i=e.querySelector(`[slot="${t}"]`);i&&n.appendChild(i)}},l=e=>""===e,a=(e,n)=>e||n||""},4600:(e,n,t)=>{function i(e,n){var t={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&n.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o<i.length;o++)n.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(e,i[o])&&(t[i[o]]=e[i[o]])}return t}t.d(n,{_:()=>i}),"function"==typeof SuppressedError&&SuppressedError},8228:(e,n,t)=>{t.d(n,{w:()=>l});var i=t(1074),o=t(5800);const l=(e,n)=>{(0,o.w)(e,"_level",(e=>"number"==typeof e&&i.h.includes(e)),new Set([`Number {${i.h.join(", ")}`]),n,{defaultValue:1,required:!0})}}}]);

package/dist/5151.js

@@ -1,2 +1,2 @@
 /*! For license information please see 5151.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5151],{5626:(t,e,n)=>{n.d(e,{K:()=>h});var o=n(4600),a=n(6783),i=n(9060),s=n(3584),l=n(7662),r=n(3334);const c=({ariaLabel:t,icon:e})=>(0,a.h)(l.d,{class:"kol-alert__heading-icon",_label:t,_icons:e}),d=({type:t,label:e})=>{switch(t){case"error":return(0,a.h)(c,{ariaLabel:(0,s.t)("kol-error"),icon:"codicon codicon-error",label:e});case"info":return(0,a.h)(c,{ariaLabel:(0,s.t)("kol-info"),icon:"codicon codicon-info",label:e});case"warning":return(0,a.h)(c,{ariaLabel:(0,s.t)("kol-warning"),icon:"codicon codicon-warning",label:e});case"success":return(0,a.h)(c,{ariaLabel:(0,s.t)("kol-success"),icon:"codicon codicon-pass",label:e});default:return(0,a.h)(c,{ariaLabel:(0,s.t)("kol-message"),icon:"codicon codicon-comment",label:e})}},h=(t,e)=>{var n,c;const{class:h={},type:u="default",variant:b="msg",label:p,hasCloser:f,alert:m,onAlertTimeout:g,onCloserClick:v,level:k}=t,y=(0,o._)(t,["class","type","variant","label","hasCloser","alert","onAlertTimeout","onCloserClick","level"]);m&&((null===(n=navigator.userActivation)||void 0===n?void 0:n.hasBeenActive)&&(null===(c=null===navigator||void 0===navigator?void 0:navigator.vibrate)||void 0===c||c.call(navigator,[100,75,100,75,100])),setTimeout((()=>{null==g||g()}),1e4));const _=Object.assign({class:(0,i.c)("kol-alert",`kol-alert--${u}`,`kol-alert--${b}`,{"kol-alert--hasCloser":!!f},h),role:m?"alert":void 0},y);return(0,a.h)("div",Object.assign({},_),(0,a.h)("div",{class:"kol-alert__container"},(0,a.h)(d,{label:p,type:u}),(0,a.h)("div",{class:"kol-alert__container-content"},p?(0,a.h)(r.K,{class:"kol-alert__heading",level:k},p):null,"msg"===b&&(0,a.h)("div",{class:"kol-alert__content"},e)),f&&(0,a.h)(l.a,{class:"kol-alert__close-button close","data-testid":"alert-close-button",_ariaDescription:(null==p?void 0:p.trim())||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:(0,s.t)("kol-close-alert"),_on:{onClick:v},_tooltipAlign:"left"})),"card"===b&&(0,a.h)("div",{class:"kol-alert__content"},e))}},3334:(t,e,n)=>{n.d(e,{K:()=>d});var o=n(4600),a=n(6783),i=n(9060);const s=1;function l(t){return function(t){return t>=s&&t<=6}(t)?`h${t}`:"strong"}const r=(t,e)=>{var{class:n,level:r=s,variant:c}=t,d=(0,o._)(t,["class","level","variant"]);const h=l(r),u=c||h;return(0,a.h)(h,Object.assign({class:(0,i.c)("kol-headline",`kol-headline--${u}`,n)},d),e)},c=(t,e)=>{var{class:n,level:r=s}=t,c=(0,o._)(t,["class","level"]);const d=function(t){return 1===t?"span":l(t)}(r+1);return(0,a.h)(d,Object.assign({class:(0,i.c)("kol-headline kol-headline--group kol-headline--secondary",n)},c),e)},d=(t,e)=>{var{secondaryHeadline:n,level:l=s,class:d,HeadingGroupProps:h={},SecondaryHeadlineProps:u={}}=t,b=(0,o._)(t,["secondaryHeadline","level","class","HeadingGroupProps","SecondaryHeadlineProps"]);const p=Object.assign({level:l},b);if(!n)return(0,a.h)(r,Object.assign({class:(0,i.c)(d,"kol-headline--single")},p),e);const{class:f}=h,m=(0,o._)(h,["class"]),g=Object.assign({class:(0,i.c)("kol-heading-group",f)},m);return(0,a.h)("hgroup",Object.assign({},g),(0,a.h)(r,Object.assign({class:(0,i.c)(d,"kol-headline--group","kol-headline--primary")},p),e),(0,a.h)(c,Object.assign({level:l},u),n))}},9060:(t,e,n)=>{function o(t){var e,n,a="";if("string"==typeof t||"number"==typeof t)a+=t;else if("object"==typeof t)if(Array.isArray(t)){var i=t.length;for(e=0;e<i;e++)t[e]&&(n=o(t[e]))&&(a&&(a+=" "),a+=n)}else for(n in t)t[n]&&(a&&(a+=" "),a+=n);return a}function a(){for(var t,e,n=0,a="",i=arguments.length;n<i;n++)(t=arguments[n])&&(e=o(t))&&(a&&(a+=" "),a+=e);return a}n.d(e,{c:()=>a})},7336:(t,e,n)=>{n.d(e,{i:()=>l,n:()=>c,r:()=>r});var o=n(6783),a=n(5687),i=n(1732);const s=()=>{let t=(0,i.d)().KoliBri;return void 0===t&&(t={},Object.defineProperty((0,i.d)(),"KoliBri",{value:t,writable:!1})),t},l=()=>{(()=>{const t=(0,i.g)().querySelector('meta[name="kolibri"]');if(t&&t.hasAttribute("content")){const e=t.getAttribute("content");"string"==typeof e&&((0,i.s)(e.includes("dev-mode=true")),(0,i.b)(e.includes("experimental-mode=true")),(0,i.c)(e.includes("color-contrast-analysis=true")))}})(),i.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${o.E.kolibriVersion}\n\t`,{forceLog:!0})},r=()=>{!0!==s().adviceShown&&(Object.defineProperty(s(),"adviceShown",{get:function(){return!0}}),i.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let c=()=>Math.floor(16777215*Math.random()).toString(16);"test"===a.p&&(c=()=>"nonce")},3584:(t,e,n)=>{n.d(e,{t:()=>i});var o=n(8461),a=n(5687);let i=(t,e)=>{var n;return(null!==(n=(0,o.g)())&&void 0!==n?n:(0,o.i)("de")).translate(t,e)};"test"===a.p&&(i=t=>t)},5151:(t,e,n)=>{n.r(e),n.d(e,{kol_toast_container:()=>u});var o=n(6783),a=n(3584),i=n(7336),s=n(7662),l=n(4600),r=n(9060),c=n(5626),d=(t,e,n)=>new Promise(((o,a)=>{var i=t=>{try{l(n.next(t))}catch(t){a(t)}},s=t=>{try{l(n.throw(t))}catch(t){a(t)}},l=t=>t.done?o(t.value):Promise.resolve(t.value).then(i,s);l((n=n.apply(t,e)).next())}));const h=t=>{var{status:e,toast:n,onClose:a}=t,i=(0,l._)(t,["status","toast","onClose"]);const{type:s,label:d,description:h,variant:u}=n;return(0,o.h)("div",{class:(0,r.c)("kol-toast-item",`kol-toast-item--${e}`)},(0,o.h)(c.K,{class:"kol-toast-item__alert",alert:!0,label:d,level:0,hasCloser:!0,type:s,variant:u||"card",onCloserClick:a},(0,o.h)("div",Object.assign({},i),h)))},u=class{constructor(t){(0,o.r)(this,t),this.knownRenderFunctions=new Set,this.state={_toastStates:[]}}enqueue(t){return d(this,null,(function*(){const e={toast:t,status:"adding",id:`toast-${(0,i.n)()}`};return this.state=Object.assign(Object.assign({},this.state),{_toastStates:[e,...this.state._toastStates]}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((t=>t.id===e.id&&"removing"!==t.status?Object.assign(Object.assign({},t),{status:"settled"}):t))})}),300),()=>{this.handleClose(e)}}))}handleClose(t){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((e=>(e.id===t.id&&(e.status="removing"),e)))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((e=>e.id!==t.id))})}),300)}closeAll(t=!1){return d(this,null,(function*(){if(t)this.state=Object.assign(Object.assign({},this.state),{_toastStates:[]});else{const t=[...this.state._toastStates];this.state=Object.assign(Object.assign({},this.state),{_toastStates:t.map((t=>Object.assign(Object.assign({},t),{status:"removing"})))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((e=>t.every((t=>t.id!==e.id))))})}),300)}}))}handleToastRef(t,e){e&&"function"==typeof t.toast.render&&!this.knownRenderFunctions.has(t.toast.render)&&(this.knownRenderFunctions.add(t.toast.render),t.toast.render(e,{close:()=>this.handleClose(t)}))}render(){return(0,o.h)(o.H,{key:"4446bc4544f05d74ee8afd3757d8c0b7ce58d6c4",class:"kol-toast-container"},this.state._toastStates.length>1&&(0,o.h)(s.i,{key:"923a3ae7f4463e710bebbe94ffb7d55812510f70",_label:(0,a.t)("kol-toast-close-all"),class:"kol-toast-container__button-close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map((t=>(0,o.h)(h,{key:t.id,onClose:()=>this.handleClose(t),ref:e=>this.handleToastRef(t,e),toast:t.toast,status:t.status}))))}};u.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    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n  [disabled]:focus .kol-span {\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 {\n    display: contents;\n  }\n  .kol-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  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\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__content {\n    background-color: #fff;\n    color: #000;\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  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\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    display: flex;\n    flex-direction: column;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: fixed;\n    z-index: 200;\n  }\n  .kol-toast-container__close-all {\n    align-self: flex-end;\n  }\n}"}},5687:(t,e,n)=>{n.d(e,{b:()=>s,h:()=>a,p:()=>o,s:()=>i});let o="development";try{o="production"}catch(t){o="production"}const a=(t,e,n)=>{if(t&&e&&"string"==typeof n){const o=t.querySelector(`[slot="${n}"]`);o&&e.appendChild(o)}},i=t=>""===t,s=(t,e)=>t||e||""},4600:(t,e,n)=>{function o(t,e){var n={};for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&e.indexOf(o)<0&&(n[o]=t[o]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(o=Object.getOwnPropertySymbols(t);a<o.length;a++)e.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(t,o[a])&&(n[o[a]]=t[o[a]])}return n}n.d(e,{_:()=>o}),"function"==typeof SuppressedError&&SuppressedError}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5151],{5285:(t,e,n)=>{n.d(e,{K:()=>h});var o=n(4600),a=n(1290),i=n(9060),s=n(3180),l=n(4957),r=n(4692);const c=({ariaLabel:t,icon:e})=>(0,a.h)(l.d,{class:"kol-alert__heading-icon",_label:t,_icons:e}),d=({type:t,label:e})=>{switch(t){case"error":return(0,a.h)(c,{ariaLabel:(0,s.t)("kol-error"),icon:"codicon codicon-error",label:e});case"info":return(0,a.h)(c,{ariaLabel:(0,s.t)("kol-info"),icon:"codicon codicon-info",label:e});case"warning":return(0,a.h)(c,{ariaLabel:(0,s.t)("kol-warning"),icon:"codicon codicon-warning",label:e});case"success":return(0,a.h)(c,{ariaLabel:(0,s.t)("kol-success"),icon:"codicon codicon-pass",label:e});default:return(0,a.h)(c,{ariaLabel:(0,s.t)("kol-message"),icon:"codicon codicon-comment",label:e})}},h=(t,e)=>{var n,c;const{class:h={},type:u="default",variant:b="msg",label:p,hasCloser:f,alert:m,onAlertTimeout:g,onCloserClick:v,level:k}=t,y=(0,o._)(t,["class","type","variant","label","hasCloser","alert","onAlertTimeout","onCloserClick","level"]);m&&((null===(n=navigator.userActivation)||void 0===n?void 0:n.hasBeenActive)&&(null===(c=null===navigator||void 0===navigator?void 0:navigator.vibrate)||void 0===c||c.call(navigator,[100,75,100,75,100])),setTimeout((()=>{null==g||g()}),1e4));const _=Object.assign({class:(0,i.c)("kol-alert",`kol-alert--${u}`,`kol-alert--${b}`,{"kol-alert--hasCloser":!!f},h),role:m?"alert":void 0},y);return(0,a.h)("div",Object.assign({},_),(0,a.h)("div",{class:"kol-alert__container"},(0,a.h)(d,{label:p,type:u}),(0,a.h)("div",{class:"kol-alert__container-content"},p?(0,a.h)(r.K,{class:"kol-alert__heading",level:k},p):null,"msg"===b&&(0,a.h)("div",{class:"kol-alert__content"},e)),f&&(0,a.h)(l.a,{class:"kol-alert__close-button close","data-testid":"alert-close-button",_ariaDescription:(null==p?void 0:p.trim())||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:(0,s.t)("kol-close-alert"),_on:{onClick:v},_tooltipAlign:"left"})),"card"===b&&(0,a.h)("div",{class:"kol-alert__content"},e))}},4692:(t,e,n)=>{n.d(e,{K:()=>d});var o=n(4600),a=n(1290),i=n(9060);const s=1;function l(t){return function(t){return t>=s&&t<=6}(t)?`h${t}`:"strong"}const r=(t,e)=>{var{class:n,level:r=s,variant:c}=t,d=(0,o._)(t,["class","level","variant"]);const h=l(r),u=c||h;return(0,a.h)(h,Object.assign({class:(0,i.c)("kol-headline",`kol-headline--${u}`,n)},d),e)},c=(t,e)=>{var{class:n,level:r=s}=t,c=(0,o._)(t,["class","level"]);const d=function(t){return 1===t?"span":l(t)}(r+1);return(0,a.h)(d,Object.assign({class:(0,i.c)("kol-headline kol-headline--group kol-headline--secondary",n)},c),e)},d=(t,e)=>{var{secondaryHeadline:n,level:l=s,class:d,HeadingGroupProps:h={},SecondaryHeadlineProps:u={}}=t,b=(0,o._)(t,["secondaryHeadline","level","class","HeadingGroupProps","SecondaryHeadlineProps"]);const p=Object.assign({level:l},b);if(!n)return(0,a.h)(r,Object.assign({class:(0,i.c)(d,"kol-headline--single")},p),e);const{class:f}=h,m=(0,o._)(h,["class"]),g=Object.assign({class:(0,i.c)("kol-heading-group",f)},m);return(0,a.h)("hgroup",Object.assign({},g),(0,a.h)(r,Object.assign({class:(0,i.c)(d,"kol-headline--group","kol-headline--primary")},p),e),(0,a.h)(c,Object.assign({level:l},u),n))}},9060:(t,e,n)=>{function o(t){var e,n,a="";if("string"==typeof t||"number"==typeof t)a+=t;else if("object"==typeof t)if(Array.isArray(t)){var i=t.length;for(e=0;e<i;e++)t[e]&&(n=o(t[e]))&&(a&&(a+=" "),a+=n)}else for(n in t)t[n]&&(a&&(a+=" "),a+=n);return a}function a(){for(var t,e,n=0,a="",i=arguments.length;n<i;n++)(t=arguments[n])&&(e=o(t))&&(a&&(a+=" "),a+=e);return a}n.d(e,{c:()=>a})},526:(t,e,n)=>{n.d(e,{i:()=>l,n:()=>c,r:()=>r});var o=n(1290),a=n(5687),i=n(1732);const s=()=>{let t=(0,i.d)().KoliBri;return void 0===t&&(t={},Object.defineProperty((0,i.d)(),"KoliBri",{value:t,writable:!1})),t},l=()=>{(()=>{const t=(0,i.g)().querySelector('meta[name="kolibri"]');if(t&&t.hasAttribute("content")){const e=t.getAttribute("content");"string"==typeof e&&((0,i.s)(e.includes("dev-mode=true")),(0,i.b)(e.includes("experimental-mode=true")),(0,i.c)(e.includes("color-contrast-analysis=true")))}})(),i.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${o.E.kolibriVersion}\n\t`,{forceLog:!0})},r=()=>{!0!==s().adviceShown&&(Object.defineProperty(s(),"adviceShown",{get:function(){return!0}}),i.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let c=()=>Math.floor(16777215*Math.random()).toString(16);"test"===a.p&&(c=()=>"nonce")},3180:(t,e,n)=>{n.d(e,{t:()=>i});var o=n(4216),a=n(5687);let i=(t,e)=>{var n;return(null!==(n=(0,o.g)())&&void 0!==n?n:(0,o.i)("de")).translate(t,e)};"test"===a.p&&(i=t=>t)},5151:(t,e,n)=>{n.r(e),n.d(e,{kol_toast_container:()=>u});var o=n(1290),a=n(3180),i=n(526),s=n(4957),l=n(4600),r=n(9060),c=n(5285),d=(t,e,n)=>new Promise(((o,a)=>{var i=t=>{try{l(n.next(t))}catch(t){a(t)}},s=t=>{try{l(n.throw(t))}catch(t){a(t)}},l=t=>t.done?o(t.value):Promise.resolve(t.value).then(i,s);l((n=n.apply(t,e)).next())}));const h=t=>{var{status:e,toast:n,onClose:a}=t,i=(0,l._)(t,["status","toast","onClose"]);const{type:s,label:d,description:h,variant:u}=n;return(0,o.h)("div",{class:(0,r.c)("kol-toast-item",`kol-toast-item--${e}`)},(0,o.h)(c.K,{class:"kol-toast-item__alert",alert:!0,label:d,level:0,hasCloser:!0,type:s,variant:u||"card",onCloserClick:a},(0,o.h)("div",Object.assign({},i),h)))},u=class{constructor(t){(0,o.r)(this,t),this.knownRenderFunctions=new Set,this.state={_toastStates:[]}}enqueue(t){return d(this,null,(function*(){const e={toast:t,status:"adding",id:`toast-${(0,i.n)()}`};return this.state=Object.assign(Object.assign({},this.state),{_toastStates:[e,...this.state._toastStates]}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((t=>t.id===e.id&&"removing"!==t.status?Object.assign(Object.assign({},t),{status:"settled"}):t))})}),300),()=>{this.handleClose(e)}}))}handleClose(t){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((e=>(e.id===t.id&&(e.status="removing"),e)))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((e=>e.id!==t.id))})}),300)}closeAll(t=!1){return d(this,null,(function*(){if(t)this.state=Object.assign(Object.assign({},this.state),{_toastStates:[]});else{const t=[...this.state._toastStates];this.state=Object.assign(Object.assign({},this.state),{_toastStates:t.map((t=>Object.assign(Object.assign({},t),{status:"removing"})))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((e=>t.every((t=>t.id!==e.id))))})}),300)}}))}handleToastRef(t,e){e&&"function"==typeof t.toast.render&&!this.knownRenderFunctions.has(t.toast.render)&&(this.knownRenderFunctions.add(t.toast.render),t.toast.render(e,{close:()=>this.handleClose(t)}))}render(){return(0,o.h)(o.H,{key:"3da212ef32465c5dedc95c8e05e15fa7240d9842",class:"kol-toast-container"},this.state._toastStates.length>1&&(0,o.h)(s.i,{key:"39a14c88696b2a635d61a4ab35bf1042a5e97389",_label:(0,a.t)("kol-toast-close-all"),class:"kol-toast-container__button-close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map((t=>(0,o.h)(h,{key:t.id,onClose:()=>this.handleClose(t),ref:e=>this.handleToastRef(t,e),toast:t.toast,status:t.status}))))}};u.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    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n  [disabled]:focus .kol-span {\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 {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\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  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\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__content {\n    background-color: #fff;\n    color: #000;\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  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\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    display: flex;\n    flex-direction: column;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: fixed;\n    z-index: 200;\n  }\n  .kol-toast-container__close-all {\n    align-self: flex-end;\n  }\n}"}},5687:(t,e,n)=>{n.d(e,{b:()=>s,h:()=>a,p:()=>o,s:()=>i});let o="development";try{o="production"}catch(t){o="production"}const a=(t,e,n)=>{if(t&&e&&"string"==typeof n){const o=t.querySelector(`[slot="${n}"]`);o&&e.appendChild(o)}},i=t=>""===t,s=(t,e)=>t||e||""},4600:(t,e,n)=>{function o(t,e){var n={};for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&e.indexOf(o)<0&&(n[o]=t[o]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(o=Object.getOwnPropertySymbols(t);a<o.length;a++)e.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(t,o[a])&&(n[o[a]]=t[o[a]])}return n}n.d(e,{_:()=>o}),"function"==typeof SuppressedError&&SuppressedError}}]);

package/dist/5171.js

@@ -1,2 +1,2 @@
 /*! For license information please see 5171.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5171],{4667:(e,t,n)=>{n.d(t,{I:()=>r,a:()=>d});var i=n(970),o=n(1799),a=n(5800),l=n(623);const s=["text","search","url","tel"];class r extends i.I{constructor(e,t,n){super(e,t,n),this.component=e}validateSuggestions(e){(0,l.v)(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateSuggestions(this.component._suggestions)}}class d extends r{constructor(e,t,n){super(e,t,n),this.hasError=!1,this.component=e}validateSpellCheck(e){(0,o.v)(this.component,e)}validateType(e){(0,a.w)(this.component,"_type",(e=>"string"==typeof e&&s.includes(e)),new Set([`String {${s.join(", ")}`]),e)}componentWillLoad(){super.componentWillLoad(),this.validateSpellCheck(this.component._spellCheck),this.validateType(this.component._type)}}},5171:(e,t,n)=>{n.r(t),n.d(t,{kol_input_email:()=>m});var i=n(6783),o=n(9060),a=n(7336),l=n(9574),s=n(4667),r=n(5800),d=n(5363),c=n(7146),h=n(8625),u=(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())}));class p extends s.I{constructor(e,t,n){super(e,t,n),this.component=e}validateMultiple(e){((e,t)=>{(0,r.b)(e,"_multiple",t)})(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateMultiple(this.component._multiple)}}const m=class{getValue(){return u(this,null,(function*(){var e;return null===(e=this.inputRef)||void 0===e?void 0:e.value}))}kolFocus(){return u(this,null,(function*(){var e;null===(e=this.inputRef)||void 0===e||e.focus()}))}getFormFieldProps(){return{state:this.state,class:(0,o.c)("kol-input-email","email",{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.inputRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getInputProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state,type:"email"},this.controller.onFacade),{onInput:this.onInput,onKeyDown:this.onKeyDown,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return(0,i.h)(h.K,Object.assign({key:"1da21bd08b98eaa5d1fd8b0570a5305b753fb3d8"},this.getFormFieldProps()),(0,i.h)(d.K,{key:"e4a2763de575dd266cd0367a5221d2f301b09bc8",state:this.state},(0,i.h)(c.K,Object.assign({key:"6ca6d3beed387300f7ed049a3d32f4bff1d3a2eb"},this.getInputProps()))))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{this.inputRef=e},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||(0,l.p)({form:this.host,ref:this.inputRef})},this.onInput=e=>{const t=e.target.value;(0,r.s)(this,"_currentLength",t.length),this._value=t,this.controller.onFacade.onInput(e)},this._accessKey=void 0,this._autoComplete=void 0,this._disabled=!1,this._hasCounter=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideMsg:!1,_id:`id-${(0,a.n)()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new p(this,"email",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePattern(e){this.controller.validatePattern(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hasCounter:["validateHasCounter"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};m.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n  [disabled]:focus .kol-span {\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 {\n    display: contents;\n  }\n  .kol-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  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\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__content {\n    background-color: #fff;\n    color: #000;\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  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}"}},1799:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(5800);const o=(e,t)=>{(0,i.b)(e,"_spellCheck",t,{defaultValue:void 0})}},623:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(5800);const o=(e,t)=>{(0,i.g)(e,"_suggestions",(e=>"string"==typeof e||"number"==typeof e),t,void 0,{hooks:{afterPatch:e=>{Array.isArray(e)&&e.length&&(0,i.a)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5171],{9718:(e,t,n)=>{n.d(t,{I:()=>r,a:()=>d});var i=n(5951),o=n(1799),a=n(5800),l=n(623);const s=["text","search","url","tel"];class r extends i.I{constructor(e,t,n){super(e,t,n),this.component=e}validateSuggestions(e){(0,l.v)(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateSuggestions(this.component._suggestions)}}class d extends r{constructor(e,t,n){super(e,t,n),this.hasError=!1,this.component=e}validateSpellCheck(e){(0,o.v)(this.component,e)}validateType(e){(0,a.w)(this.component,"_type",(e=>"string"==typeof e&&s.includes(e)),new Set([`String {${s.join(", ")}`]),e)}componentWillLoad(){super.componentWillLoad(),this.validateSpellCheck(this.component._spellCheck),this.validateType(this.component._type)}}},5171:(e,t,n)=>{n.r(t),n.d(t,{kol_input_email:()=>m});var i=n(1290),o=n(9060),a=n(526),l=n(359),s=n(9718),r=n(5800),d=n(7617),h=n(4746),c=n(1416),u=(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())}));class p extends s.I{constructor(e,t,n){super(e,t,n),this.component=e}validateMultiple(e){((e,t)=>{(0,r.b)(e,"_multiple",t)})(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateMultiple(this.component._multiple)}}const m=class{getValue(){return u(this,null,(function*(){var e;return null===(e=this.inputRef)||void 0===e?void 0:e.value}))}kolFocus(){return u(this,null,(function*(){var e;null===(e=this.inputRef)||void 0===e||e.focus()}))}getFormFieldProps(){return{state:this.state,class:(0,o.c)("kol-input-email","email",{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.inputRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getInputProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state,type:"email"},this.controller.onFacade),{onInput:this.onInput,onKeyDown:this.onKeyDown,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return(0,i.h)(c.K,Object.assign({key:"0a0acab5e1a634398dd711d6a6ffa464a5258ffa"},this.getFormFieldProps()),(0,i.h)(d.K,{key:"a90d069c75eb4fff41d93b38398185d7a17121a4",state:this.state},(0,i.h)(h.K,Object.assign({key:"0bfb77f669e95f3393795b316f975b2e9fdf6667"},this.getInputProps()))))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{this.inputRef=e},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||(0,l.p)({form:this.host,ref:this.inputRef})},this.onInput=e=>{const t=e.target.value;(0,r.s)(this,"_currentLength",t.length),this._value=t,this.controller.onFacade.onInput(e)},this._accessKey=void 0,this._autoComplete=void 0,this._disabled=!1,this._hasCounter=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideMsg:!1,_id:`id-${(0,a.n)()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new p(this,"email",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePattern(e){this.controller.validatePattern(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hasCounter:["validateHasCounter"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};m.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n  [disabled]:focus .kol-span {\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 {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\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  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\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__content {\n    background-color: #fff;\n    color: #000;\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  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: rem(16);\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: rem(16);\n    height: rem(44);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}"}},1799:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(5800);const o=(e,t)=>{(0,i.b)(e,"_spellCheck",t,{defaultValue:void 0})}},623:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(5800);const o=(e,t)=>{(0,i.g)(e,"_suggestions",(e=>"string"==typeof e||"number"==typeof e),t,void 0,{hooks:{afterPatch:e=>{Array.isArray(e)&&e.length&&(0,i.a)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);