@public-ui/sample-react 3.0.0-rc.9 → 3.0.0

package/dist/5301.js

@@ -1,2 +1,2 @@
 /*! For license information please see 5301.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5301],{1251:(t,e,n)=>{n.d(e,{v:()=>s});var o=n(3892),i=n(7125);const a=(t,e,n)=>{(0,i.b)(n)?t[e]=n:(0,i.i)(n,1)&&(t[e]={icon:n})},l=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,i.a)(t.style))&&(void 0===t.label||(0,i.i)(t.label))&&(0,i.i)(t.icon,1),s=(t,e,n={})=>{(0,o.o)(e,(()=>{var s;try{e=(0,o.p)(e)}catch(t){}(0,o.w)(t,"_icons",(t=>{const e="object"==typeof t&&null!==t&&0===Object.keys(t).length;return null===t||e||(0,i.i)(t,1)||"object"==typeof t&&null!==t&&((0,i.i)(t.left,1)||l(t.left)||(0,i.i)(t.right,1)||l(t.right)||(0,i.i)(t.top,1)||l(t.top)||(0,i.i)(t.bottom,1)||l(t.bottom))}),new Set(["KoliBriIcon"]),e,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(s=n.hooks)||void 0===s?void 0:s.afterPatch,beforePatch:(t,e,o,l)=>{var s,r;"function"==typeof(null===(s=n.hooks)||void 0===s?void 0:s.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(t,e,o,l)),(t=>{var e,n,o;if(null===(e=t.nextState)||void 0===e?void 0:e.has("_icons")){const e=null===(n=t.nextState)||void 0===n?void 0:n.get("_icons");null===(o=t.nextState)||void 0===o||o.set("_icons",(t=>{let e={};return(0,i.i)(t,1)?e={left:{icon:t}}:"object"==typeof t&&null!==t&&(a(e,"top",t.top),a(e,"right",t.right),a(e,"bottom",t.bottom),a(e,"left",t.left)),e})(e))}})(o)}}}))}))}},1476:(t,e,n)=>{function o(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}n.d(e,{i:()=>o})},1621:(t,e,n)=>{n.d(e,{K:()=>r,a:()=>s});var o=n(1111),i=n(5191),a=n(3299),l=n(9346);const s=t=>{var{id:e,suggestions:n}=t,a=(0,o._)(t,["id","suggestions"]);return n?(0,i.h)("datalist",Object.assign({id:`${e}-list`},a),n.map((t=>(0,i.h)("option",{value:t})))):null},r=t=>{var{state:e,customSuggestions:n}=t,r=(0,o._)(t,["state","customSuggestions"]);return(0,i.h)(l.K,Object.assign({},function(t,e){const{ariaDescribedBy:n}=(0,a.g)(t),o={id:t._id,hideLabel:t._hideLabel,label:t._label,accessKey:t._accessKey,disabled:t._disabled,name:t._name,ariaDescribedBy:n};return"_type"in t&&(o.type=t._type),"_value"in t&&(o.value=t._value),"_required"in t&&(o.required=t._required),"_maxLength"in t&&(o.maxlength=t._maxLength),"_placeholder"in t&&(o.placeholder=t._placeholder),"_autoComplete"in t&&(o.autoComplete=t._autoComplete),"_spellCheck"in t&&(o.spellcheck=t._spellCheck),"_pattern"in t&&(o.pattern=t._pattern),"_readOnly"in t&&(o.readonly=t._readOnly),"_min"in t&&(o.min=t._min),"_max"in t&&(o.max=t._max),"_step"in t&&(o.step=t._step),"_multiple"in t&&(o.multiple=t._multiple),"_checked"in t&&(o.checked=t._checked),"_indeterminate"in t&&(o.indeterminate=t._indeterminate),"_touched"in t&&(o.touched=t._touched),"_msg"in t&&(o.msg=(0,a.a)(t._msg)),"_suggestions"in t&&!e&&Array.isArray(t._suggestions)&&t._suggestions.length>0&&(o.suggestions=(0,i.h)(s,{id:t._id,suggestions:t._suggestions})),o}(e,n),r))}},2757:(t,e,n)=>{n.d(e,{K:()=>a});var o=n(5191),i=n(7763);const a=t=>{const{class:e,style:n,icons:a,label:l,onClick:s}=t;return(0,o.h)(i.d,{class:e,style:n,onClick:s,_icons:a,_label:l})}},5301:(t,e,n)=>{n.r(e),n.d(e,{kol_input_password:()=>m});var o=n(5191),i=n(8045),a=n(6943),l=n(9293),s=n(9007),r=n(5452),d=n(8341),c=n(1621),h=n(3299),u=n(3892),p=(t,e,n)=>new Promise(((o,i)=>{var a=t=>{try{s(n.next(t))}catch(t){i(t)}},l=t=>{try{s(n.throw(t))}catch(t){i(t)}},s=t=>t.done?o(t.value):Promise.resolve(t.value).then(a,l);s((n=n.apply(t,e)).next())}));const m=class{getValue(){return p(this,null,(function*(){var t;return null===(t=this.inputRef)||void 0===t?void 0:t.value}))}kolFocus(){return p(this,null,(function*(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}))}getFormFieldProps(){return{state:this.state,class:(0,i.c)("kol-input-password","password",{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var t;return null===(t=this.inputRef)||void 0===t?void 0:t.focus()},alert:this.showAsAlert()}}getInputProps(){return Object.assign(Object.assign({ref:this.catchRef,type:this._passwordVisible?"text":"password",state:this.state},this.controller.onFacade),{onInput:this.onInput,onKeyDown:this.onKeyDown,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})}getShowPasswordButton(){return"visibility-toggle"!==this._variant?null:(0,o.h)(d.a,{componentName:"button",class:"kol-input-password__password-toggle-button","data-testid":"kol-input-password-toggle-button",label:this._passwordVisible?(0,r.t)("kol-hide-password"):(0,r.t)("kol-show-password"),variant:"ghost",onClick:()=>{var t;this._passwordVisible=!this._passwordVisible,null===(t=this.inputRef)||void 0===t||t.focus()},icon:"codicon codicon-eye-"+(this._passwordVisible?"closed":"watch"),disabled:this._disabled})}render(){return(0,o.h)(h.K,Object.assign({key:"8812e872d476550cc508273147cca8d238111c24"},this.getFormFieldProps()),(0,o.h)(d.K,{key:"540aa1b375bbbae76f7a8f873b6908b8c31b633d",state:this.state,endAdornment:this.getShowPasswordButton()},(0,o.h)(c.K,Object.assign({key:"bb5cbd480045b6ab5e9a37200edff80a2d01637f"},this.getInputProps()))))}constructor(t){(0,o.r)(this,t),this.catchRef=t=>{this.inputRef=t},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||(0,l.p)({form:this.host,ref:this.inputRef})},this.onInput=t=>{const e=t.target.value;(0,u.s)(this,"_currentLength",e.length),this._value=e,this.controller.onFacade.onInput(t)},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._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._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this._variant="default",this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideMsg:!1,_id:`id-${(0,a.n)()}`,_label:"",_variant:"default"},this._passwordVisible=!1,this.inputHasFocus=!1,this.controller=new s.I(this,"password",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t),"on"===t&&(0,u.j)("[KolInputPassword] The 'autocomplete' option should not be set to \"on\" for a password input field")}validateDisabled(t){this.controller.validateDisabled(t)}validateVariant(t){this.controller.validateVariant(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideMsg(t){this.controller.validateHideMsg(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}static get delegatesFocus(){return!0}get host(){return(0,o.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_variant:["validateVariant"],_hasCounter:["validateHasCounter"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_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%;\n    /* 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  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\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: 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    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    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-password {\n    --kol-tooltip-width: calc(160rem / var(--kolibri-root-font-size, 16));\n  }\n}"}},8341:(t,e,n)=>{n.d(e,{I:()=>g,K:()=>f,a:()=>_});var o=n(5191),i=n(8933),a=n(1476),l=n(1111),s=n(7763),r=n(2757),d=n(8045),c=n(3299),h=n(1251);const u=(t,e)=>{var{position:n="start",class:i}=t,a=(0,l._)(t,["position","class"]);const s="kol-input-container__adornment",r=`${s}--${n}`;return(0,o.h)("div",Object.assign({class:(0,d.c)(s,r,i)},a),e)};function p(t){return!!t&&(Array.isArray(t)?t.length>0:Boolean(t))}const m=(t,e)=>{var{class:n}=t,i=(0,l._)(t,["class"]);return(0,o.h)("div",Object.assign({class:(0,d.c)("kol-input-container__container",n)},i),e)},b=(t,e)=>{const{class:n,startAdornment:i,endAdornment:a,disabled:s,msg:r,touched:h,containerProps:b,startAdornmentProps:v,endAdornmentProps:_}=t,f=(0,l._)(t,["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 p(i)||p(a)?(0,o.h)("div",Object.assign({},k),(0,o.h)(u,Object.assign({},v,{position:"start"}),i),(0,o.h)(m,Object.assign({},b),e),(0,o.h)(u,Object.assign({},_,{position:"end"}),a)):(0,o.h)("div",Object.assign({},k),(0,o.h)(m,Object.assign({},b),e))},v=t=>{const{label:e,icons:n,hideLabel:i,disabled:a,onClick:r}=t,d=(0,l._)(t,["label","icons","hideLabel","disabled","onClick"]);return(0,o.h)(s.a,Object.assign({_label:e,_disabled:a,_icons:n,_hideLabel:i,_on:{onClick:r}},d))},_=t=>{const{componentName:e="button",label:n,icon:i,onClick:a}=t,s=(0,l._)(t,["componentName","label","icon","onClick"]),d="button"===e?v:r.K;return(0,o.h)(d,Object.assign({label:n||"",hideLabel:!0,icons:`codicon codicon-${i}`,onClick:a},s))},f=({state:t,endAdornment:e},n)=>{const{icons:l,smartButton:s,disabled:r,msg:d,touched:h}=function(t){let e,n;return"_icons"in t&&(e=t._icons),"_smartButton"in t&&(n=t._smartButton),{icons:e,smartButton:n,disabled:t._disabled,msg:(0,c.a)(t._msg),touched:t._touched}}(t);let u=null==l?void 0:l.left;(0,i.i)(u)&&(u={icon:u});let p=null==l?void 0:l.right;(0,i.i)(p)&&(p={icon:p});const m=[],v=[];return e&&(Array.isArray(e)?v.push(...e):v.push(e)),u&&m.push((0,o.h)(_,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,a.i)(u)?u:{}))),(0,a.i)(s)&&v.push((0,o.h)(_,Object.assign({componentName:"button",class:"kol-input-container__smart-button"},s,{hideLabel:!0,disabled:r}))),p&&v.push((0,o.h)(_,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,a.i)(p)?p:{}))),(0,o.h)(b,{disabled:r,msg:d,touched:h,startAdornment:m,endAdornment:v},n)};class g extends c.I{constructor(t,e,n){super(t,e,n),this.component=t}validateIcons(t){(0,h.v)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},9e3:(t,e,n)=>{n.d(e,{v:()=>i});var o=n(3892);const i=(t,e,n)=>{(0,o.b)(t,"_hasCounter",e,n)}},9007:(t,e,n)=>{n.d(e,{I:()=>s});var o=n(3892),i=n(8341),a=n(9e3);const l=["default","visibility-toggle"];class s extends i.I{constructor(t,e,n){super(t,e,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=t}validateAutoComplete(t){(0,o.w)(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateHasCounter(t){(0,a.v)(this.component,t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateVariant(t){((t,e)=>{(0,o.w)(t,"_variant",(t=>"string"==typeof t&&l.includes(t)),new Set(l),e)})(this.component,t)}validateMaxLength(t){(0,o.k)(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePattern(t){(0,o.i)(this.component,"_pattern",t)}validatePlaceholder(t){(0,o.i)(this.component,"_placeholder",t)}validateReadOnly(t){(0,o.b)(this.component,"_readOnly",t)}validateRequired(t){(0,o.b)(this.component,"_required",t)}validateValue(t){(0,o.i)(this.component,"_value",t,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePattern(this.component._pattern),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validateVariant(this.component._variant)}}},9293:(t,e,n)=>{n.d(e,{a:()=>s,p:()=>r});var o=n(7763),i=n(3892),a=n(3051);const l=t=>{for((0,a.a)()&&((0,i.j)("↓ Search form element start."),a.L.debug(t));t instanceof HTMLElement&&"FORM"!==t.tagName&&t.tagName!==o.h.toUpperCase();){try{t=t.parentElement instanceof HTMLElement?t.parentElement:t.parentNode instanceof ShadowRoot?t.parentNode.host:null}catch(t){}(0,a.a)()&&(a.L.debug(t),(0,i.j)("↑ Search form element finished."))}return t},s=(t={})=>{var e,n;const a=l(t.form);if(a instanceof HTMLElement){const t=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===a.tagName)(0,i.n)(t,a),a.dispatchEvent(t);else if(a.tagName===o.h.toUpperCase()){(0,i.n)(t,i.K.querySelector("form",a));const o=a;"function"==typeof(null===(e=o._on)||void 0===e?void 0:e.onReset)&&(null===(n=o._on)||void 0===n||n.onReset(t))}}},r=(t={})=>{const e=l(t.form);if(e instanceof HTMLElement){const t=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:e});if("FORM"===e.tagName)(0,a.a)()&&!1===e.noValidate&&(0,i.j)("If you have not focusable or hidden form fields in your form, you should enable noValidate for your form.",{force:!0}),setTimeout((()=>{"function"==typeof e.requestSubmit?e.requestSubmit():((0,i.n)(t,e),e.dispatchEvent(t))}));else if(e.tagName===o.h.toUpperCase()){(0,i.n)(t,i.K.querySelector("form",e));const n=e;setTimeout((()=>{var e,o;"function"==typeof(null===(e=n._on)||void 0===e?void 0:e.onSubmit)&&(null===(o=n._on)||void 0===o||o.onSubmit(t))}))}}}},9346:(t,e,n)=>{n.d(e,{K:()=>s});var o=n(1111),i=n(5191),a=n(8045),l=n(3299);const s=t=>{const{class:e,msg:n,required:s,disabled:r,touched:d,readonly:c,ariaDescribedBy:h,hideLabel:u,label:p,suggestions:m,value:b}=t,v=(0,o._)(t,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),_=(0,l.c)(n,d),f={"kol-input--disabled":Boolean(r),"kol-input--required":Boolean(s),"kol-input--touched":Boolean(d),"kol-input--readonly":Boolean(c),[`kol-input--${(null==n?void 0:n.type)||"error"}`]:_},g=Object.assign(Object.assign({class:(0,a.c)("kol-input",f,e),required:s,disabled:r,readonly:c,type:"text",list:m?`${v.id}-list`:void 0},(0,l.f)({ariaDescribedBy:h,hideLabel:u,label:p})),v);return(0,i.h)(i.F,null,(0,i.h)("input",Object.assign({},g,{value:b})),m)}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5301],{182:(t,e,n)=>{n.d(e,{I:()=>y,K:()=>f,a:()=>g});var o=n(6733),i=n(257),a=n(1111),l=n(8045),s=n(9867),r=n(1698),d=n(3885),c=n(376),h=n(1476),u=n(8057);const p=(t,e)=>{var{position:n="start",class:i}=t,s=(0,a._)(t,["position","class"]);const r="kol-input-container__adornment",d=`${r}--${n}`;return(0,o.h)("div",Object.assign({class:(0,l.c)(r,d,i)},s),e)};function m(t){return!!t&&(Array.isArray(t)?t.length>0:Boolean(t))}const b=(t,e)=>{var{class:n}=t,i=(0,a._)(t,["class"]);return(0,o.h)("div",Object.assign({class:(0,l.c)("kol-input-container__container",n)},i),e)},v=(t,e)=>{const{class:n,startAdornment:i,endAdornment:r,disabled:d,msg:c,touched:h,containerProps:u,startAdornmentProps:v,endAdornmentProps:_}=t,f=(0,a._)(t,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),g=(0,s.c)(c,h),y={"kol-input-container--disabled":d,[`kol-input-container--${(null==c?void 0:c.type)||"error"}`]:g},k=Object.assign({class:(0,l.c)("kol-input-container",y,n)},f);return m(i)||m(r)?(0,o.h)("div",Object.assign({},k),(0,o.h)(p,Object.assign({},v,{position:"start"}),i),(0,o.h)(b,Object.assign({},u),e),(0,o.h)(p,Object.assign({},_,{position:"end"}),r)):(0,o.h)("div",Object.assign({},k),(0,o.h)(b,Object.assign({},u),e))},_=t=>{const{label:e,icons:n,hideLabel:i,disabled:l,onClick:s}=t,d=(0,a._)(t,["label","icons","hideLabel","disabled","onClick"]);return(0,o.h)(r.a,Object.assign({_label:e,_disabled:l,_icons:n,_hideLabel:i,_on:{onClick:s}},d))},f=t=>{const{componentName:e="button",label:n,icon:i,onClick:l}=t,s=(0,a._)(t,["componentName","label","icon","onClick"]),r="button"===e?_:d.K;return(0,o.h)(r,Object.assign({label:n||"",hideLabel:!0,icons:`codicon codicon-${i}`,onClick:l},s))},g=({state:t,endAdornment:e},n)=>{const{icons:i,smartButton:a,disabled:l,msg:r,touched:d}=function(t){let e,n;return"_icons"in t&&(e=t._icons),"_smartButton"in t&&(n=t._smartButton),{icons:e,smartButton:n,disabled:t._disabled,msg:(0,s.a)(t._msg),touched:t._touched}}(t);let u=null==i?void 0:i.left;(0,c.i)(u)&&(u={icon:u});let p=null==i?void 0:i.right;(0,c.i)(p)&&(p={icon:p});const m=[],b=[];return e&&(Array.isArray(e)?b.push(...e):b.push(e)),u&&m.push((0,o.h)(f,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,h.i)(u)?u:{}))),(0,h.i)(a)&&b.push((0,o.h)(f,Object.assign({componentName:"button",class:"kol-input-container__smart-button"},a,{hideLabel:!0,disabled:l}))),p&&b.push((0,o.h)(f,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,h.i)(p)?p:{}))),(0,o.h)(v,{disabled:l,msg:r,touched:d,startAdornment:m,endAdornment:b},n)};class y extends s.I{constructor(t,e,n){super(t,e,n),this.numberStringRegex=/^\d+(\.\d+)?$/,this.parseToNumber=t=>"number"==typeof t?isNaN(t)?null:t:this.isNumberString(t)?parseFloat(t):null,this.validateNumber=(t,e)=>(0,i.w)(this.component,t,(t=>null==t||"number"==typeof t||"string"==typeof t&&this.numberStringRegex.test(t)),new Set(["number","NumberString"]),e,{hooks:{beforePatch:(e,n)=>{(null==n?void 0:n.has(t))&&(null==n||n.set(t,this.parseToNumber(e)))}}}),this.component=t}validateIcons(t){(0,u.v)(this.component,t)}isNumberString(t){return"string"==typeof t&&this.numberStringRegex.test(t)}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},1040:(t,e,n)=>{n.d(e,{I:()=>s});var o=n(257),i=n(182),a=n(3359);const l=["default","visibility-toggle"];class s extends i.I{constructor(t,e,n){super(t,e,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=t}validateAutoComplete(t){(0,o.w)(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateHasCounter(t){(0,a.v)(this.component,t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateVariant(t){((t,e)=>{(0,o.w)(t,"_variant",(t=>"string"==typeof t&&l.includes(t)),new Set(l),e)})(this.component,t)}validateMaxLength(t){(0,o.E)(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePattern(t){(0,o.A)(this.component,"_pattern",t)}validatePlaceholder(t){(0,o.A)(this.component,"_placeholder",t)}validateReadOnly(t){(0,o.h)(this.component,"_readOnly",t)}validateRequired(t){(0,o.h)(this.component,"_required",t)}validateValue(t){(0,o.A)(this.component,"_value",t,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePattern(this.component._pattern),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validateVariant(this.component._variant)}}},1476:(t,e,n)=>{function o(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}n.d(e,{i:()=>o})},3359:(t,e,n)=>{n.d(e,{v:()=>i});var o=n(257);const i=(t,e,n)=>{(0,o.h)(t,"_hasCounter",e,n)}},3885:(t,e,n)=>{n.d(e,{K:()=>a});var o=n(6733),i=n(1698);const a=t=>{const{class:e,style:n,icons:a,label:l,onClick:s}=t;return(0,o.h)(i.d,{class:e,style:n,onClick:s,_icons:a,_label:l})}},5151:(t,e,n)=>{n.d(e,{a:()=>l,p:()=>s});var o=n(257),i=n(1698);const a=t=>{for((0,o.F)()&&((0,o.D)("↓ Search form element start."),o.L.debug(t));t instanceof HTMLElement&&"FORM"!==t.tagName&&t.tagName!==i.g.toUpperCase();){try{t=t.parentElement instanceof HTMLElement?t.parentElement:t.parentNode instanceof ShadowRoot?t.parentNode.host:null}catch(t){}(0,o.F)()&&(o.L.debug(t),(0,o.D)("↑ Search form element finished."))}return t},l=(t={})=>{var e,n;const l=a(t.form);if(l instanceof HTMLElement){const t=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===l.tagName)(0,o.I)(t,l),l.dispatchEvent(t);else if(l.tagName===i.g.toUpperCase()){(0,o.I)(t,o.a.querySelector("form",l));const i=l;"function"==typeof(null===(e=i._on)||void 0===e?void 0:e.onReset)&&(null===(n=i._on)||void 0===n||n.onReset(t))}}},s=(t={})=>{const e=a(t.form);if(e instanceof HTMLElement){const t=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:e});if("FORM"===e.tagName)(0,o.F)()&&!1===e.noValidate&&(0,o.D)("If you have not focusable or hidden form fields in your form, you should enable noValidate for your form.",{force:!0}),setTimeout((()=>{"function"==typeof e.requestSubmit?e.requestSubmit():((0,o.I)(t,e),e.dispatchEvent(t))}));else if(e.tagName===i.g.toUpperCase()){(0,o.I)(t,o.a.querySelector("form",e));const n=e;setTimeout((()=>{var e,o;"function"==typeof(null===(e=n._on)||void 0===e?void 0:e.onSubmit)&&(null===(o=n._on)||void 0===o||o.onSubmit(t))}))}}}},5301:(t,e,n)=>{n.r(e),n.d(e,{kol_input_password:()=>m});var o=n(6733),i=n(8045),a=n(257),l=n(2190),s=n(5151),r=n(9867),d=n(7162),c=n(182),h=n(1040),u=n(9272),p=(n(1698),n(3694),n(1042),n(8296),n(4269),n(3710),n(5561),n(5154),n(753),n(3472),n(1111),n(9709),n(6660),n(3185),n(2425),n(376),n(5538),n(8176),n(3885),n(1476),n(8057),n(3359),(t,e,n)=>new Promise(((o,i)=>{var a=t=>{try{s(n.next(t))}catch(t){i(t)}},l=t=>{try{s(n.throw(t))}catch(t){i(t)}},s=t=>t.done?o(t.value):Promise.resolve(t.value).then(a,l);s((n=n.apply(t,e)).next())})));const m=class{getValue(){return p(this,null,(function*(){var t;return null===(t=this.inputRef)||void 0===t?void 0:t.value}))}kolFocus(){return p(this,null,(function*(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}))}getFormFieldProps(){return{state:this.state,class:(0,i.c)("kol-input-password","password",{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var t;return null===(t=this.inputRef)||void 0===t?void 0:t.focus()},alert:this.showAsAlert()}}getInputProps(){return Object.assign(Object.assign({ref:this.catchRef,type:this._passwordVisible?"text":"password",state:this.state},this.controller.onFacade),{onInput:this.onInput,onKeyDown:this.onKeyDown,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})}getShowPasswordButton(){return"visibility-toggle"!==this._variant?null:(0,o.h)(c.K,{componentName:"button",class:"kol-input-password__password-toggle-button","data-testid":"kol-input-password-toggle-button",label:this._passwordVisible?(0,u.t)("kol-hide-password"):(0,u.t)("kol-show-password"),variant:"ghost",onClick:()=>{var t;this._passwordVisible=!this._passwordVisible,null===(t=this.inputRef)||void 0===t||t.focus()},icon:"codicon codicon-eye-"+(this._passwordVisible?"closed":"watch"),disabled:this._disabled})}render(){return(0,o.h)(r.F,Object.assign({key:"8812e872d476550cc508273147cca8d238111c24"},this.getFormFieldProps()),(0,o.h)(c.a,{key:"540aa1b375bbbae76f7a8f873b6908b8c31b633d",state:this.state,endAdornment:this.getShowPasswordButton()},(0,o.h)(d.I,Object.assign({key:"bb5cbd480045b6ab5e9a37200edff80a2d01637f"},this.getInputProps()))))}constructor(t){(0,o.r)(this,t),this.catchRef=t=>{this.inputRef=t},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||(0,s.p)({form:this.host,ref:this.inputRef})},this.onInput=t=>{const e=t.target.value;(0,a.k)(this,"_currentLength",e.length),this._value=e,this.controller.onFacade.onInput(t)},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._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._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this._variant="default",this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideMsg:!1,_id:`id-${(0,l.n)()}`,_label:"",_variant:"default"},this._passwordVisible=!1,this.inputHasFocus=!1,this.controller=new h.I(this,"password",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t),"on"===t&&(0,a.D)("[KolInputPassword] The 'autocomplete' option should not be set to \"on\" for a password input field")}validateDisabled(t){this.controller.validateDisabled(t)}validateVariant(t){this.controller.validateVariant(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideMsg(t){this.controller.validateHideMsg(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}static get delegatesFocus(){return!0}get host(){return(0,o.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_variant:["validateVariant"],_hasCounter:["validateHasCounter"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_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%;\n    /* 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  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\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__closer {\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    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    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-password {\n    --kol-tooltip-width: calc(160rem / var(--kolibri-root-font-size, 16));\n  }\n}"}},7162:(t,e,n)=>{n.d(e,{I:()=>r,S:()=>s});var o=n(1111),i=n(6733),a=n(8176),l=(n(257),n(9867));const s=t=>{var{id:e,suggestions:n}=t,a=(0,o._)(t,["id","suggestions"]);return n?(0,i.h)("datalist",Object.assign({id:`${e}-list`},a),n.map((t=>(0,i.h)("option",{value:t})))):null},r=t=>{var{state:e,customSuggestions:n}=t,r=(0,o._)(t,["state","customSuggestions"]);return(0,i.h)(a.I,Object.assign({},function(t,e){const{ariaDescribedBy:n}=(0,l.g)(t),o={id:t._id,hideLabel:t._hideLabel,label:t._label,accessKey:t._accessKey,disabled:t._disabled,name:t._name,ariaDescribedBy:n};return"_type"in t&&(o.type=t._type),"_value"in t&&(o.value=t._value),"_required"in t&&(o.required=t._required),"_maxLength"in t&&(o.maxlength=t._maxLength),"_placeholder"in t&&(o.placeholder=t._placeholder),"_autoComplete"in t&&(o.autoComplete=t._autoComplete),"_spellCheck"in t&&(o.spellcheck=t._spellCheck),"_pattern"in t&&(o.pattern=t._pattern),"_readOnly"in t&&(o.readonly=t._readOnly),"_min"in t&&(o.min=t._min),"_max"in t&&(o.max=t._max),"_step"in t&&(o.step=t._step),"_multiple"in t&&(o.multiple=t._multiple),"_checked"in t&&(o.checked=t._checked),"_indeterminate"in t&&(o.indeterminate=t._indeterminate),"_touched"in t&&(o.touched=t._touched),"_msg"in t&&(o.msg=(0,l.a)(t._msg)),"_suggestions"in t&&!e&&Array.isArray(t._suggestions)&&t._suggestions.length>0&&(o.suggestions=(0,i.h)(s,{id:t._id,suggestions:t._suggestions})),o}(e,n),r))}},8057:(t,e,n)=>{n.d(e,{v:()=>l});var o=n(257);const i=(t,e,n)=>{(0,o.v)(n)?t[e]=n:(0,o.q)(n,1)&&(t[e]={icon:n})},a=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,o.t)(t.style))&&(void 0===t.label||(0,o.q)(t.label))&&(0,o.q)(t.icon,1),l=(t,e,n={})=>{(0,o.o)(e,(()=>{var l;try{e=(0,o.j)(e)}catch(t){}(0,o.w)(t,"_icons",(t=>{const e="object"==typeof t&&null!==t&&0===Object.keys(t).length;return null===t||e||(0,o.q)(t,1)||"object"==typeof t&&null!==t&&((0,o.q)(t.left,1)||a(t.left)||(0,o.q)(t.right,1)||a(t.right)||(0,o.q)(t.top,1)||a(t.top)||(0,o.q)(t.bottom,1)||a(t.bottom))}),new Set(["KoliBriIcon"]),e,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(l=n.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(t,e,a,l)=>{var s,r;"function"==typeof(null===(s=n.hooks)||void 0===s?void 0:s.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(t,e,a,l)),(t=>{var e,n,a;if(null===(e=t.nextState)||void 0===e?void 0:e.has("_icons")){const e=null===(n=t.nextState)||void 0===n?void 0:n.get("_icons");null===(a=t.nextState)||void 0===a||a.set("_icons",(t=>{let e={};return(0,o.q)(t,1)?e={left:{icon:t}}:"object"==typeof t&&null!==t&&(i(e,"top",t.top),i(e,"right",t.right),i(e,"bottom",t.bottom),i(e,"left",t.left)),e})(e))}})(a)}}}))}))}},8176:(t,e,n)=>{n.d(e,{I:()=>s});var o=n(1111),i=n(6733),a=n(8045),l=(n(257),n(9867));const s=t=>{const{class:e,msg:n,required:s,disabled:r,touched:d,readonly:c,ariaDescribedBy:h,hideLabel:u,label:p,suggestions:m,value:b}=t,v=(0,o._)(t,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),_=(0,l.c)(n,d),f={"kol-input--disabled":Boolean(r),"kol-input--required":Boolean(s),"kol-input--touched":Boolean(d),"kol-input--readonly":Boolean(c),[`kol-input--${(null==n?void 0:n.type)||"error"}`]:_},g=Object.assign(Object.assign({class:(0,a.c)("kol-input",f,e),required:s,disabled:r,readonly:c,type:"text",list:m?`${v.id}-list`:void 0},(0,l.e)({ariaDescribedBy:h,hideLabel:u,label:p})),v);return(0,i.h)(i.F,null,(0,i.h)("input",Object.assign({},g,{value:b})),m)}}}]);

package/dist/5690.js

@@ -1,2 +1,2 @@
 /*! For license information please see 5690.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5690],{2677:(n,e,t)=>{t.d(e,{w:()=>i});var a=t(3892);const i=(n,e,t)=>{(0,a.g)(e,"_links",(n=>"object"==typeof n&&("string"==typeof n._href||"string"==typeof n._label)),t),(0,a.h)(n,e.state._links.length)}},3638:(n,e,t)=>{t.d(e,{a:()=>h,b:()=>s,c:()=>r,h:()=>i,v:()=>d});var a=t(3892);const i=[0,1,2,3,4,5,6],o=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(o))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const c=new Set(["string"]),d=(n,e,t={})=>{(0,a.w)(n,"_label",(n=>"string"==typeof n),c,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,i,o)=>{var l,c;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(c=n.hooks)||void 0===c||c.afterPatch(e,t,i,o)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,a.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,a.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},h=d},5690:(n,e,t)=>{t.r(e),t.d(e,{kol_breadcrumb:()=>c});var a=t(5191),i=t(6043),o=t(2677),l=t(7763),s=t(3892),r=t(3638);const c=class{constructor(n){(0,a.r)(this,n),this.renderLink=(n,e)=>{const t=this.state._links.length-1;return(0,a.h)("li",{class:"kol-breadcrumb__list-element",key:e},0!==e&&(0,a.h)(l.d,{class:"kol-breadcrumb__icon",_label:"",_icons:"codicon codicon-chevron-right"}),e===t?(0,a.h)("span",{class:"kol-breadcrumb__list-element-span"},n._hideLabel?(0,a.h)(l.d,{class:"kol-breadcrumb__icon",_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):(0,a.h)(a.F,null,n._label)):(0,a.h)(l.e,Object.assign({class:"kol-breadcrumb__link"},n)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return(0,a.h)("nav",{key:"d086ccf1b9fccd3c2d9afe55f56a285e58f451f5",class:"kol-breadcrumb","aria-label":this.state._label},(0,a.h)("ul",{key:"ea55b4eed94749a422d06e470f3f09b75e0a7978",class:"kol-breadcrumb__list"},0===this.state._links.length&&(0,a.h)("li",{key:"e601d2603ba034b4b0d553138f1d4e762fc372e8"},(0,a.h)(l.d,{key:"025141bd396636bccac3f3991f6a91cfa1ad994c",class:"kol-breadcrumb_icon",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink)))}validateLabel(n,e,t=!1){t||(0,i.r)(this.state._label),(0,r.v)(this,n,{required:!0}),(0,s.e)(n),(0,i.a)(this.state._label)}validateLinks(n){(0,o.w)("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){(0,i.r)(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};c.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    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%;\n    /* 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  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\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-breadcrumb {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-breadcrumb__list, .kol-breadcrumb__list-element {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    place-items: center;\n  }\n  .kol-breadcrumb__icon::part(separator) {\n    font-weight: 900;\n    font-size: 0.7em;\n  }\n  .kol-breadcrumb__icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}"}},6043:(n,e,t)=>{t.d(e,{a:()=>o,r:()=>l});var a=t(3051);const i=new Set;function o(n){i.has(n)?a.L.error(`There already is a nav element with the label "${n}"`,{forceLog:!0}):i.add(n)}function l(n){i.delete(n)}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5690],{1615:(n,e,t)=>{t.d(e,{a:()=>a,r:()=>l});var i=t(257);const o=new Set;function a(n){o.has(n)?i.L.error(`There already is a nav element with the label "${n}"`,{forceLog:!0}):o.add(n)}function l(n){o.delete(n)}},3472:(n,e,t)=>{t.d(e,{a:()=>h,b:()=>s,c:()=>r,h:()=>o,v:()=>d});var i=t(257);const o=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(a))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const c=new Set(["string"]),d=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),c,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,o,a)=>{var l,c;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(c=n.hooks)||void 0===c||c.afterPatch(e,t,o,a)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,i.b)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},h=d},5690:(n,e,t)=>{t.r(e),t.d(e,{kol_breadcrumb:()=>c});var i=t(6733),o=t(257),a=t(1615),l=t(9638),s=t(1698),r=t(3472);const c=class{constructor(n){(0,i.r)(this,n),this.renderLink=(n,e)=>{const t=this.state._links.length-1;return(0,i.h)("li",{class:"kol-breadcrumb__list-element",key:e},0!==e&&(0,i.h)(s.d,{class:"kol-breadcrumb__icon",_label:"",_icons:"codicon codicon-chevron-right"}),e===t?(0,i.h)("span",{class:"kol-breadcrumb__list-element-span"},n._hideLabel?(0,i.h)(s.d,{class:"kol-breadcrumb__icon",_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):(0,i.h)(i.F,null,n._label)):(0,i.h)(s.e,Object.assign({class:"kol-breadcrumb__link"},n)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return(0,i.h)("nav",{key:"ec5c76bf09d3c9feaaf2e54dea8849f3df35f8cf",class:"kol-breadcrumb","aria-label":this.state._label},(0,i.h)("ul",{key:"58258d0d211e35b1c10ea81d57ce664b5b365da1",class:"kol-breadcrumb__list"},0===this.state._links.length&&(0,i.h)("li",{key:"380473fa2c97a40a8f36042a7859edc30a13dcea"},(0,i.h)(s.d,{key:"6f9289fa4d708da3b9bfbb7da105db05807dce39",class:"kol-breadcrumb_icon",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink)))}validateLabel(n,e,t=!1){t||(0,a.r)(this.state._label),(0,r.v)(this,n,{required:!0}),(0,o.x)(n),(0,a.a)(this.state._label)}validateLinks(n){(0,l.w)("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){(0,a.r)(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};c.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    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%;\n    /* 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  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\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}\n@layer kol-component {\n  .kol-breadcrumb {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-breadcrumb__list, .kol-breadcrumb__list-element {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    place-items: center;\n  }\n  .kol-breadcrumb__icon::part(separator) {\n    font-weight: 900;\n    font-size: 0.7em;\n  }\n  .kol-breadcrumb__icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}"}},9638:(n,e,t)=>{t.d(e,{w:()=>o});var i=t(257);const o=(n,e,t)=>{(0,i.y)(e,"_links",(n=>"object"==typeof n&&("string"==typeof n._href||"string"==typeof n._label)),t),(0,i.z)(n,e.state._links.length)}}}]);

package/dist/5746.js

@@ -1,2 +1,2 @@
 /*! For license information please see 5746.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5746],{1251:(n,e,t)=>{t.d(e,{v:()=>s});var i=t(3892),o=t(7125);const a=(n,e,t)=>{(0,o.b)(t)?n[e]=t:(0,o.i)(t,1)&&(n[e]={icon:t})},l=n=>"object"==typeof n&&null!==n&&(void 0===n.style||(0,o.a)(n.style))&&(void 0===n.label||(0,o.i)(n.label))&&(0,o.i)(n.icon,1),s=(n,e,t={})=>{(0,i.o)(e,(()=>{var s;try{e=(0,i.p)(e)}catch(n){}(0,i.w)(n,"_icons",(n=>{const e="object"==typeof n&&null!==n&&0===Object.keys(n).length;return null===n||e||(0,o.i)(n,1)||"object"==typeof n&&null!==n&&((0,o.i)(n.left,1)||l(n.left)||(0,o.i)(n.right,1)||l(n.right)||(0,o.i)(n.top,1)||l(n.top)||(0,o.i)(n.bottom,1)||l(n.bottom))}),new Set(["KoliBriIcon"]),e,Object.assign(Object.assign({},t),{defaultValue:{},hooks:{afterPatch:null===(s=t.hooks)||void 0===s?void 0:s.afterPatch,beforePatch:(n,e,i,l)=>{var s,r;"function"==typeof(null===(s=t.hooks)||void 0===s?void 0:s.beforePatch)&&(null===(r=t.hooks)||void 0===r||r.beforePatch(n,e,i,l)),(n=>{var e,t,i;if(null===(e=n.nextState)||void 0===e?void 0:e.has("_icons")){const e=null===(t=n.nextState)||void 0===t?void 0:t.get("_icons");null===(i=n.nextState)||void 0===i||i.set("_icons",(n=>{let e={};return(0,o.i)(n,1)?e={left:{icon:n}}:"object"==typeof n&&null!==n&&(a(e,"top",n.top),a(e,"right",n.right),a(e,"bottom",n.bottom),a(e,"left",n.left)),e})(e))}})(i)}}}))}))}},1476:(n,e,t)=>{function i(n){var e=typeof n;return null!=n&&("object"==e||"function"==e)}t.d(e,{i:()=>i})},1621:(n,e,t)=>{t.d(e,{K:()=>r,a:()=>s});var i=t(1111),o=t(5191),a=t(3299),l=t(9346);const s=n=>{var{id:e,suggestions:t}=n,a=(0,i._)(n,["id","suggestions"]);return t?(0,o.h)("datalist",Object.assign({id:`${e}-list`},a),t.map((n=>(0,o.h)("option",{value:n})))):null},r=n=>{var{state:e,customSuggestions:t}=n,r=(0,i._)(n,["state","customSuggestions"]);return(0,o.h)(l.K,Object.assign({},function(n,e){const{ariaDescribedBy:t}=(0,a.g)(n),i={id:n._id,hideLabel:n._hideLabel,label:n._label,accessKey:n._accessKey,disabled:n._disabled,name:n._name,ariaDescribedBy:t};return"_type"in n&&(i.type=n._type),"_value"in n&&(i.value=n._value),"_required"in n&&(i.required=n._required),"_maxLength"in n&&(i.maxlength=n._maxLength),"_placeholder"in n&&(i.placeholder=n._placeholder),"_autoComplete"in n&&(i.autoComplete=n._autoComplete),"_spellCheck"in n&&(i.spellcheck=n._spellCheck),"_pattern"in n&&(i.pattern=n._pattern),"_readOnly"in n&&(i.readonly=n._readOnly),"_min"in n&&(i.min=n._min),"_max"in n&&(i.max=n._max),"_step"in n&&(i.step=n._step),"_multiple"in n&&(i.multiple=n._multiple),"_checked"in n&&(i.checked=n._checked),"_indeterminate"in n&&(i.indeterminate=n._indeterminate),"_touched"in n&&(i.touched=n._touched),"_msg"in n&&(i.msg=(0,a.a)(n._msg)),"_suggestions"in n&&!e&&Array.isArray(n._suggestions)&&n._suggestions.length>0&&(i.suggestions=(0,o.h)(s,{id:n._id,suggestions:n._suggestions})),i}(e,t),r))}},2757:(n,e,t)=>{t.d(e,{K:()=>a});var i=t(5191),o=t(7763);const a=n=>{const{class:e,style:t,icons:a,label:l,onClick:s}=n;return(0,i.h)(o.d,{class:e,style:t,onClick:s,_icons:a,_label:l})}},5746:(n,e,t)=>{t.r(e),t.d(e,{kol_input_file:()=>m});var i=t(5191),o=t(8045),a=t(6943),l=t(8341),s=t(3892),r=t(5452),d=t(7763),c=t(1621),u=t(3299),h=(n,e,t)=>new Promise(((i,o)=>{var a=n=>{try{s(t.next(n))}catch(n){o(n)}},l=n=>{try{s(t.throw(n))}catch(n){o(n)}},s=n=>n.done?i(n.value):Promise.resolve(n.value).then(a,l);s((t=t.apply(n,e)).next())}));class p extends l.I{constructor(n,e,t){super(n,e,t),this.component=n}validateAccept(n){(0,s.i)(this.component,"_accept",n)}validateMultiple(n){(0,s.b)(this.component,"_multiple",n)}validateRequired(n){(0,s.b)(this.component,"_required",n)}componentWillLoad(){super.componentWillLoad(),this.validateAccept(this.component._accept),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required)}}const m=class{getValue(){return h(this,null,(function*(){var n;return null===(n=this.inputRef)||void 0===n?void 0:n.files}))}kolFocus(){return h(this,null,(function*(){var n;null===(n=this.inputRef)||void 0===n||n.focus()}))}getFormFieldProps(){return{state:this.state,class:(0,o.c)("kol-input-file","file"),tooltipAlign:this._tooltipAlign,onClick:()=>{var n;return null===(n=this.inputRef)||void 0===n?void 0:n.focus()},alert:this.showAsAlert()}}getInputProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state,type:"file",accept:this.state._accept,multiple:this.state._multiple},this.controller.onFacade),{onChange:this.onChange,onInput:this.onInput,onFocus:n=>{this.controller.onFacade.onFocus(n),this.inputHasFocus=!0},onBlur:n=>{this.controller.onFacade.onBlur(n),this.inputHasFocus=!1}})}render(){return(0,i.h)(u.K,Object.assign({key:"6c81b473b7ba7db7b45405159e0ae33913fdea8a"},this.getFormFieldProps()),(0,i.h)(l.K,{key:"5e7229bb6eb56acb38c9354bd3a2f1d5e101aa93",state:this.state},(0,i.h)("span",{key:"a7042630ccb23c6ec891ba4160726f1754025acc",class:"kol-input-container__filename"},this.filename),(0,i.h)(c.K,Object.assign({key:"dfda5c0d86387248fb77a34c3cec9e05d36e907f"},this.getInputProps())),(0,i.h)(d.a,{key:"ee240516c779742894f67acb98d2d8d6b247541a",class:"kol-input-container__button",_label:(0,r.t)("kol-data-browse-text"),_variant:"primary",_disabled:this._disabled})))}constructor(n){(0,i.r)(this,n),this.catchRef=n=>{this.inputRef=n},this.onDragOver=n=>{var e,t,i;n.preventDefault(),null===(i=null===(t=null===(e=this.inputRef)||void 0===e?void 0:e.parentElement)||void 0===t?void 0:t.parentElement)||void 0===i||i.classList.add("kol-input-container--is-dragover")},this.onDragLeave=()=>{var n,e,t;null===(t=null===(e=null===(n=this.inputRef)||void 0===n?void 0:n.parentElement)||void 0===e?void 0:e.parentElement)||void 0===t||t.classList.remove("kol-input-container--is-dragover")},this.onDrop=n=>{var e,t,i,o;if(n.preventDefault(),null===(i=null===(t=null===(e=this.inputRef)||void 0===e?void 0:e.parentElement)||void 0===t?void 0:t.parentElement)||void 0===i||i.classList.remove("kol-input-container--is-dragover"),null===(o=n.dataTransfer)||void 0===o?void 0:o.files.length){const e=n.dataTransfer.files;this.filename=Array.from(e).map((n=>n.name)).join(", "),this.controller.setFormAssociatedValue(e)}},this.onChange=n=>{if(this.inputRef instanceof HTMLInputElement&&"file"===this.inputRef.type){const e=this.inputRef.files;this.filename=(null==e?void 0:e.length)?Array.from(e).map((n=>n.name)).join(", "):(0,r.t)("kol-filename-text"),this.controller.onFacade.onChange(n,e),this.controller.setFormAssociatedValue(e)}},this.onInput=n=>{if(this.inputRef instanceof HTMLInputElement&&"file"===this.inputRef.type){const e=this.inputRef.files;this.controller.onFacade.onInput(n,!1,e)}},this._accept=void 0,this._accessKey=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._msg=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=!1,this._shortKey=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this.filename=(0,r.t)("kol-filename-text"),this.state={_hideMsg:!1,_id:`id-${(0,a.n)()}`,_label:""},this.inputHasFocus=!1,this.controller=new p(this,"file",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccept(n){this.controller.validateAccept(n)}validateAccessKey(n){this.controller.validateAccessKey(n)}validateDisabled(n){this.controller.validateDisabled(n)}validateHideMsg(n){this.controller.validateHideMsg(n)}validateHideLabel(n){this.controller.validateHideLabel(n)}validateHint(n){this.controller.validateHint(n)}validateIcons(n){this.controller.validateIcons(n)}validateId(n){this.controller.validateId(n)}validateLabel(n){this.controller.validateLabel(n)}validateMsg(n){this.controller.validateMsg(n)}validateMultiple(n){this.controller.validateMultiple(n)}validateName(n){this.controller.validateName(n)}validateOn(n){this.controller.validateOn(n)}validateRequired(n){this.controller.validateRequired(n)}validateShortKey(n){this.controller.validateShortKey(n)}validateSmartButton(n){this.controller.validateSmartButton(n)}validateSyncValueBySelector(n){this.controller.validateSyncValueBySelector(n)}validateTouched(n){this.controller.validateTouched(n)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad()}componentDidLoad(){var n,e;const t=null===(e=null===(n=this.inputRef)||void 0===n?void 0:n.parentElement)||void 0===e?void 0:e.parentElement;null==t||t.addEventListener("dragover",this.onDragOver),null==t||t.addEventListener("dragleave",this.onDragLeave),null==t||t.addEventListener("drop",this.onDrop)}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accept:["validateAccept"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"]}}};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%;\n    /* 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  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\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: 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    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    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 {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    cursor: pointer;\n  }\n  .kol-input::-webkit-file-upload-button, .kol-input::file-selector-button {\n    cursor: pointer;\n  }\n  .kol-input:disabled, .kol-input:disabled::-webkit-file-upload-button, .kol-input:disabled::file-selector-button {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n  .kol-input-container {\n    padding: 0 0 0 calc(8rem / var(--kolibri-root-font-size, 16)) !important;\n  }\n  .kol-input-container__container {\n    display: flex;\n    align-items: center;\n    overflow: hidden;\n    height: var(--a11y-min-size);\n  }\n  .kol-input-container__filename {\n    flex-grow: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr;\n  }\n}"}},8341:(n,e,t)=>{t.d(e,{I:()=>g,K:()=>_,a:()=>f});var i=t(5191),o=t(8933),a=t(1476),l=t(1111),s=t(7763),r=t(2757),d=t(8045),c=t(3299),u=t(1251);const h=(n,e)=>{var{position:t="start",class:o}=n,a=(0,l._)(n,["position","class"]);const s="kol-input-container__adornment",r=`${s}--${t}`;return(0,i.h)("div",Object.assign({class:(0,d.c)(s,r,o)},a),e)};function p(n){return!!n&&(Array.isArray(n)?n.length>0:Boolean(n))}const m=(n,e)=>{var{class:t}=n,o=(0,l._)(n,["class"]);return(0,i.h)("div",Object.assign({class:(0,d.c)("kol-input-container__container",t)},o),e)},b=(n,e)=>{const{class:t,startAdornment:o,endAdornment:a,disabled:s,msg:r,touched:u,containerProps:b,startAdornmentProps:v,endAdornmentProps:f}=n,_=(0,l._)(n,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),g=(0,c.c)(r,u),k={"kol-input-container--disabled":s,[`kol-input-container--${(null==r?void 0:r.type)||"error"}`]:g},y=Object.assign({class:(0,d.c)("kol-input-container",k,t)},_);return p(o)||p(a)?(0,i.h)("div",Object.assign({},y),(0,i.h)(h,Object.assign({},v,{position:"start"}),o),(0,i.h)(m,Object.assign({},b),e),(0,i.h)(h,Object.assign({},f,{position:"end"}),a)):(0,i.h)("div",Object.assign({},y),(0,i.h)(m,Object.assign({},b),e))},v=n=>{const{label:e,icons:t,hideLabel:o,disabled:a,onClick:r}=n,d=(0,l._)(n,["label","icons","hideLabel","disabled","onClick"]);return(0,i.h)(s.a,Object.assign({_label:e,_disabled:a,_icons:t,_hideLabel:o,_on:{onClick:r}},d))},f=n=>{const{componentName:e="button",label:t,icon:o,onClick:a}=n,s=(0,l._)(n,["componentName","label","icon","onClick"]),d="button"===e?v:r.K;return(0,i.h)(d,Object.assign({label:t||"",hideLabel:!0,icons:`codicon codicon-${o}`,onClick:a},s))},_=({state:n,endAdornment:e},t)=>{const{icons:l,smartButton:s,disabled:r,msg:d,touched:u}=function(n){let e,t;return"_icons"in n&&(e=n._icons),"_smartButton"in n&&(t=n._smartButton),{icons:e,smartButton:t,disabled:n._disabled,msg:(0,c.a)(n._msg),touched:n._touched}}(n);let h=null==l?void 0:l.left;(0,o.i)(h)&&(h={icon:h});let p=null==l?void 0:l.right;(0,o.i)(p)&&(p={icon:p});const m=[],v=[];return e&&(Array.isArray(e)?v.push(...e):v.push(e)),h&&m.push((0,i.h)(f,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,a.i)(h)?h:{}))),(0,a.i)(s)&&v.push((0,i.h)(f,Object.assign({componentName:"button",class:"kol-input-container__smart-button"},s,{hideLabel:!0,disabled:r}))),p&&v.push((0,i.h)(f,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,a.i)(p)?p:{}))),(0,i.h)(b,{disabled:r,msg:d,touched:u,startAdornment:m,endAdornment:v},t)};class g extends c.I{constructor(n,e,t){super(n,e,t),this.component=n}validateIcons(n){(0,u.v)(this.component,n)}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},9346:(n,e,t)=>{t.d(e,{K:()=>s});var i=t(1111),o=t(5191),a=t(8045),l=t(3299);const s=n=>{const{class:e,msg:t,required:s,disabled:r,touched:d,readonly:c,ariaDescribedBy:u,hideLabel:h,label:p,suggestions:m,value:b}=n,v=(0,i._)(n,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),f=(0,l.c)(t,d),_={"kol-input--disabled":Boolean(r),"kol-input--required":Boolean(s),"kol-input--touched":Boolean(d),"kol-input--readonly":Boolean(c),[`kol-input--${(null==t?void 0:t.type)||"error"}`]:f},g=Object.assign(Object.assign({class:(0,a.c)("kol-input",_,e),required:s,disabled:r,readonly:c,type:"text",list:m?`${v.id}-list`:void 0},(0,l.f)({ariaDescribedBy:u,hideLabel:h,label:p})),v);return(0,o.h)(o.F,null,(0,o.h)("input",Object.assign({},g,{value:b})),m)}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5746],{182:(e,n,t)=>{t.d(n,{I:()=>k,K:()=>_,a:()=>g});var i=t(6733),o=t(257),a=t(1111),l=t(8045),s=t(9867),r=t(1698),d=t(3885),c=t(376),u=t(1476),h=t(8057);const p=(e,n)=>{var{position:t="start",class:o}=e,s=(0,a._)(e,["position","class"]);const r="kol-input-container__adornment",d=`${r}--${t}`;return(0,i.h)("div",Object.assign({class:(0,l.c)(r,d,o)},s),n)};function m(e){return!!e&&(Array.isArray(e)?e.length>0:Boolean(e))}const b=(e,n)=>{var{class:t}=e,o=(0,a._)(e,["class"]);return(0,i.h)("div",Object.assign({class:(0,l.c)("kol-input-container__container",t)},o),n)},v=(e,n)=>{const{class:t,startAdornment:o,endAdornment:r,disabled:d,msg:c,touched:u,containerProps:h,startAdornmentProps:v,endAdornmentProps:f}=e,_=(0,a._)(e,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),g=(0,s.c)(c,u),k={"kol-input-container--disabled":d,[`kol-input-container--${(null==c?void 0:c.type)||"error"}`]:g},y=Object.assign({class:(0,l.c)("kol-input-container",k,t)},_);return m(o)||m(r)?(0,i.h)("div",Object.assign({},y),(0,i.h)(p,Object.assign({},v,{position:"start"}),o),(0,i.h)(b,Object.assign({},h),n),(0,i.h)(p,Object.assign({},f,{position:"end"}),r)):(0,i.h)("div",Object.assign({},y),(0,i.h)(b,Object.assign({},h),n))},f=e=>{const{label:n,icons:t,hideLabel:o,disabled:l,onClick:s}=e,d=(0,a._)(e,["label","icons","hideLabel","disabled","onClick"]);return(0,i.h)(r.a,Object.assign({_label:n,_disabled:l,_icons:t,_hideLabel:o,_on:{onClick:s}},d))},_=e=>{const{componentName:n="button",label:t,icon:o,onClick:l}=e,s=(0,a._)(e,["componentName","label","icon","onClick"]),r="button"===n?f:d.K;return(0,i.h)(r,Object.assign({label:t||"",hideLabel:!0,icons:`codicon codicon-${o}`,onClick:l},s))},g=({state:e,endAdornment:n},t)=>{const{icons:o,smartButton:a,disabled:l,msg:r,touched:d}=function(e){let n,t;return"_icons"in e&&(n=e._icons),"_smartButton"in e&&(t=e._smartButton),{icons:n,smartButton:t,disabled:e._disabled,msg:(0,s.a)(e._msg),touched:e._touched}}(e);let h=null==o?void 0:o.left;(0,c.i)(h)&&(h={icon:h});let p=null==o?void 0:o.right;(0,c.i)(p)&&(p={icon:p});const m=[],b=[];return n&&(Array.isArray(n)?b.push(...n):b.push(n)),h&&m.push((0,i.h)(_,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,u.i)(h)?h:{}))),(0,u.i)(a)&&b.push((0,i.h)(_,Object.assign({componentName:"button",class:"kol-input-container__smart-button"},a,{hideLabel:!0,disabled:l}))),p&&b.push((0,i.h)(_,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,u.i)(p)?p:{}))),(0,i.h)(v,{disabled:l,msg:r,touched:d,startAdornment:m,endAdornment:b},t)};class k extends s.I{constructor(e,n,t){super(e,n,t),this.numberStringRegex=/^\d+(\.\d+)?$/,this.parseToNumber=e=>"number"==typeof e?isNaN(e)?null:e:this.isNumberString(e)?parseFloat(e):null,this.validateNumber=(e,n)=>(0,o.w)(this.component,e,(e=>null==e||"number"==typeof e||"string"==typeof e&&this.numberStringRegex.test(e)),new Set(["number","NumberString"]),n,{hooks:{beforePatch:(n,t)=>{(null==t?void 0:t.has(e))&&(null==t||t.set(e,this.parseToNumber(n)))}}}),this.component=e}validateIcons(e){(0,h.v)(this.component,e)}isNumberString(e){return"string"==typeof e&&this.numberStringRegex.test(e)}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},1476:(e,n,t)=>{function i(e){var n=typeof e;return null!=e&&("object"==n||"function"==n)}t.d(n,{i:()=>i})},3885:(e,n,t)=>{t.d(n,{K:()=>a});var i=t(6733),o=t(1698);const a=e=>{const{class:n,style:t,icons:a,label:l,onClick:s}=e;return(0,i.h)(o.d,{class:n,style:t,onClick:s,_icons:a,_label:l})}},5746:(e,n,t)=>{t.r(n),t.d(n,{kol_input_file:()=>m});var i=t(6733),o=t(8045),a=t(2190),l=t(9867),s=t(7162),r=t(182),d=t(257),c=t(9272),u=t(1698),h=(t(3694),t(1042),t(8296),t(4269),t(3710),t(5561),t(5154),t(753),t(3472),t(1111),t(9709),t(6660),t(3185),t(2425),t(376),t(5538),t(8176),t(3885),t(1476),t(8057),(e,n,t)=>new Promise(((i,o)=>{var a=e=>{try{s(t.next(e))}catch(e){o(e)}},l=e=>{try{s(t.throw(e))}catch(e){o(e)}},s=e=>e.done?i(e.value):Promise.resolve(e.value).then(a,l);s((t=t.apply(e,n)).next())})));class p extends r.I{constructor(e,n,t){super(e,n,t),this.component=e}validateAccept(e){(0,d.A)(this.component,"_accept",e)}validateMultiple(e){(0,d.h)(this.component,"_multiple",e)}validateRequired(e){(0,d.h)(this.component,"_required",e)}componentWillLoad(){super.componentWillLoad(),this.validateAccept(this.component._accept),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required)}}const m=class{getValue(){return h(this,null,(function*(){var e;return null===(e=this.inputRef)||void 0===e?void 0:e.files}))}kolFocus(){return h(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-file","file"),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:"file",accept:this.state._accept,multiple:this.state._multiple},this.controller.onFacade),{onChange:this.onChange,onInput:this.onInput,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)(l.F,Object.assign({key:"6c81b473b7ba7db7b45405159e0ae33913fdea8a"},this.getFormFieldProps()),(0,i.h)(r.a,{key:"5e7229bb6eb56acb38c9354bd3a2f1d5e101aa93",state:this.state},(0,i.h)("span",{key:"3742d51be8c2cc4ee6723269a964589a990f9e23",class:(0,o.c)("kol-input-container__filename",{"kol-input-container__filename--has-file":this.hasFileSelected})},this.filename),(0,i.h)(s.I,Object.assign({key:"a1f03cccb74166437976eea391187546537fdfff"},this.getInputProps())),(0,i.h)(u.a,{key:"97492f6a7ef31282d00a182281ea29571cd056a8",class:"kol-input-container__button",_label:(0,c.t)("kol-data-browse-text"),_variant:"primary",_disabled:this._disabled})))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{this.inputRef=e},this.onDragOver=e=>{var n,t,i;e.preventDefault(),null===(i=null===(t=null===(n=this.inputRef)||void 0===n?void 0:n.parentElement)||void 0===t?void 0:t.parentElement)||void 0===i||i.classList.add("kol-input-container--is-dragover")},this.onDragLeave=()=>{var e,n,t;null===(t=null===(n=null===(e=this.inputRef)||void 0===e?void 0:e.parentElement)||void 0===n?void 0:n.parentElement)||void 0===t||t.classList.remove("kol-input-container--is-dragover")},this.onDrop=e=>{var n,t,i,o;if(e.preventDefault(),null===(i=null===(t=null===(n=this.inputRef)||void 0===n?void 0:n.parentElement)||void 0===t?void 0:t.parentElement)||void 0===i||i.classList.remove("kol-input-container--is-dragover"),null===(o=e.dataTransfer)||void 0===o?void 0:o.files.length){const n=e.dataTransfer.files;this.filename=Array.from(n).map((e=>e.name)).join(", "),this.controller.setFormAssociatedValue(n)}},this.onChange=e=>{if(this.inputRef instanceof HTMLInputElement&&"file"===this.inputRef.type){const n=this.inputRef.files;this.hasFileSelected=!!(null==n?void 0:n.length),this.filename=(null==n?void 0:n.length)?Array.from(n).map((e=>e.name)).join(", "):(0,c.t)("kol-filename-text"),this.controller.onFacade.onChange(e,n),this.controller.setFormAssociatedValue(n)}},this.onInput=e=>{if(this.inputRef instanceof HTMLInputElement&&"file"===this.inputRef.type){const n=this.inputRef.files;this.controller.onFacade.onInput(e,!1,n)}},this._accept=void 0,this._accessKey=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._msg=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=!1,this._shortKey=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this.filename=(0,c.t)("kol-filename-text"),this.hasFileSelected=!1,this.state={_hideMsg:!1,_id:`id-${(0,a.n)()}`,_label:""},this.inputHasFocus=!1,this.controller=new p(this,"file",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccept(e){this.controller.validateAccept(e)}validateAccessKey(e){this.controller.validateAccessKey(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)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad()}componentDidLoad(){var e,n;const t=null===(n=null===(e=this.inputRef)||void 0===e?void 0:e.parentElement)||void 0===n?void 0:n.parentElement;null==t||t.addEventListener("dragover",this.onDragOver),null==t||t.addEventListener("dragleave",this.onDragLeave),null==t||t.addEventListener("drop",this.onDrop)}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accept:["validateAccept"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"]}}};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%;\n    /* 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  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\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__closer {\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    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    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 {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    cursor: pointer;\n  }\n  .kol-input::-webkit-file-upload-button, .kol-input::file-selector-button {\n    cursor: pointer;\n  }\n  .kol-input:disabled, .kol-input:disabled::-webkit-file-upload-button, .kol-input:disabled::file-selector-button {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n  .kol-input-container__container {\n    display: flex;\n    align-items: center;\n    overflow: hidden;\n    height: var(--a11y-min-size);\n  }\n  .kol-input-container__filename {\n    flex-grow: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr;\n  }\n}"}},7162:(e,n,t)=>{t.d(n,{I:()=>r,S:()=>s});var i=t(1111),o=t(6733),a=t(8176),l=(t(257),t(9867));const s=e=>{var{id:n,suggestions:t}=e,a=(0,i._)(e,["id","suggestions"]);return t?(0,o.h)("datalist",Object.assign({id:`${n}-list`},a),t.map((e=>(0,o.h)("option",{value:e})))):null},r=e=>{var{state:n,customSuggestions:t}=e,r=(0,i._)(e,["state","customSuggestions"]);return(0,o.h)(a.I,Object.assign({},function(e,n){const{ariaDescribedBy:t}=(0,l.g)(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t};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&&!n&&Array.isArray(e._suggestions)&&e._suggestions.length>0&&(i.suggestions=(0,o.h)(s,{id:e._id,suggestions:e._suggestions})),i}(n,t),r))}},8057:(e,n,t)=>{t.d(n,{v:()=>l});var i=t(257);const o=(e,n,t)=>{(0,i.v)(t)?e[n]=t:(0,i.q)(t,1)&&(e[n]={icon:t})},a=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,i.t)(e.style))&&(void 0===e.label||(0,i.q)(e.label))&&(0,i.q)(e.icon,1),l=(e,n,t={})=>{(0,i.o)(n,(()=>{var l;try{n=(0,i.j)(n)}catch(e){}(0,i.w)(e,"_icons",(e=>{const n="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||n||(0,i.q)(e,1)||"object"==typeof e&&null!==e&&((0,i.q)(e.left,1)||a(e.left)||(0,i.q)(e.right,1)||a(e.right)||(0,i.q)(e.top,1)||a(e.top)||(0,i.q)(e.bottom,1)||a(e.bottom))}),new Set(["KoliBriIcon"]),n,Object.assign(Object.assign({},t),{defaultValue:{},hooks:{afterPatch:null===(l=t.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(e,n,a,l)=>{var s,r;"function"==typeof(null===(s=t.hooks)||void 0===s?void 0:s.beforePatch)&&(null===(r=t.hooks)||void 0===r||r.beforePatch(e,n,a,l)),(e=>{var n,t,a;if(null===(n=e.nextState)||void 0===n?void 0:n.has("_icons")){const n=null===(t=e.nextState)||void 0===t?void 0:t.get("_icons");null===(a=e.nextState)||void 0===a||a.set("_icons",(e=>{let n={};return(0,i.q)(e,1)?n={left:{icon:e}}:"object"==typeof e&&null!==e&&(o(n,"top",e.top),o(n,"right",e.right),o(n,"bottom",e.bottom),o(n,"left",e.left)),n})(n))}})(a)}}}))}))}},8176:(e,n,t)=>{t.d(n,{I:()=>s});var i=t(1111),o=t(6733),a=t(8045),l=(t(257),t(9867));const s=e=>{const{class:n,msg:t,required:s,disabled:r,touched:d,readonly:c,ariaDescribedBy:u,hideLabel:h,label:p,suggestions:m,value:b}=e,v=(0,i._)(e,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),f=(0,l.c)(t,d),_={"kol-input--disabled":Boolean(r),"kol-input--required":Boolean(s),"kol-input--touched":Boolean(d),"kol-input--readonly":Boolean(c),[`kol-input--${(null==t?void 0:t.type)||"error"}`]:f},g=Object.assign(Object.assign({class:(0,a.c)("kol-input",_,n),required:s,disabled:r,readonly:c,type:"text",list:m?`${v.id}-list`:void 0},(0,l.e)({ariaDescribedBy:u,hideLabel:h,label:p})),v);return(0,o.h)(o.F,null,(0,o.h)("input",Object.assign({},g,{value:b})),m)}}}]);

package/dist/6047.js

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

package/dist/6066.js

@@ -1,2 +1,2 @@
 /*! For license information please see 6066.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6066],{6066:(n,e,t)=>{t.r(e),t.d(e,{kol_image:()=>l});var i=t(5191),a=t(3892),s=t(7826);const o=["eager","lazy"],l=class{constructor(n){(0,i.r)(this,n),this._alt=void 0,this._loading="lazy",this._sizes=void 0,this._src=void 0,this._srcset=void 0,this.state={_alt:"",_loading:"lazy",_src:""}}validateAlt(n){(0,a.i)(this,"_alt",n,{required:!0})}validateLoading(n){!function(n,e){(0,a.w)(n,"_loading",(n=>"string"==typeof n&&o.includes(n)),new Set(o),e)}(this,n)}validateSizes(n){(0,a.i)(this,"_sizes",n)}validateSrc(n){(0,s.v)(this,n,{required:!0})}validateSrcset(n){(0,a.i)(this,"_srcset",n)}componentWillLoad(){this.validateAlt(this._alt),this.validateLoading(this._loading),this.validateSizes(this._sizes),this.validateSrc(this._src),this.validateSrcset(this._srcset)}render(){return(0,i.h)("img",{key:"4e7a343118526969cd9823e2900daaa9de531f44",class:"kol-image",alt:this.state._alt,loading:this.state._loading,sizes:this.state._sizes,src:this.state._src,srcset:this.state._srcset})}static get watchers(){return{_alt:["validateAlt"],_loading:["validateLoading"],_sizes:["validateSizes"],_src:["validateSrc"],_srcset:["validateSrcset"]}}};l.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    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%;\n    /* 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  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\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-image {\n    display: inline-block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-height: 100%;\n    max-width: 100%;\n  }\n}"}},7826:(n,e,t)=>{t.d(e,{v:()=>a});var i=t(3892);const a=(n,e,t)=>{(0,i.i)(n,"_src",e,t)}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6066],{3257:(n,e,t)=>{t.d(e,{v:()=>a});var i=t(257);const a=(n,e,t)=>{(0,i.A)(n,"_src",e,t)}},6066:(n,e,t)=>{t.r(e),t.d(e,{kol_image:()=>l});var i=t(6733),a=t(257),s=t(3257);const o=["eager","lazy"],l=class{constructor(n){(0,i.r)(this,n),this._alt=void 0,this._loading="lazy",this._sizes=void 0,this._src=void 0,this._srcset=void 0,this.state={_alt:"",_loading:"lazy",_src:""}}validateAlt(n){(0,a.A)(this,"_alt",n,{required:!0})}validateLoading(n){!function(n,e){(0,a.w)(n,"_loading",(n=>"string"==typeof n&&o.includes(n)),new Set(o),e)}(this,n)}validateSizes(n){(0,a.A)(this,"_sizes",n)}validateSrc(n){(0,s.v)(this,n,{required:!0})}validateSrcset(n){(0,a.A)(this,"_srcset",n)}componentWillLoad(){this.validateAlt(this._alt),this.validateLoading(this._loading),this.validateSizes(this._sizes),this.validateSrc(this._src),this.validateSrcset(this._srcset)}render(){return(0,i.h)("img",{key:"4e7a343118526969cd9823e2900daaa9de531f44",class:"kol-image",alt:this.state._alt,loading:this.state._loading,sizes:this.state._sizes,src:this.state._src,srcset:this.state._srcset})}static get watchers(){return{_alt:["validateAlt"],_loading:["validateLoading"],_sizes:["validateSizes"],_src:["validateSrc"],_srcset:["validateSrcset"]}}};l.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    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%;\n    /* 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  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\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-image {\n    display: inline-block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-height: 100%;\n    max-width: 100%;\n  }\n}"}}}]);

package/dist/6256.js

@@ -1,2 +1,2 @@
 /*! For license information please see 6256.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6256],{3648:(e,t,s)=>{s.d(t,{b:()=>l,p:()=>a,s:()=>i});let a="development";try{a="production"}catch(e){a="production"}const i=e=>""===e,l=(e,t)=>e||t||""},5452:(e,t,s)=>{s.d(t,{t:()=>l});var a=s(4269),i=s(3648);let l=(e,t)=>{var s;return(null!==(s=(0,a.g)())&&void 0!==s?s:(0,a.i)("de")).translate(e,t)};"test"===i.p&&(l=e=>e)},6256:(e,t,s)=>{s.r(t),s.d(t,{kol_table_settings_wc:()=>o});var a=s(5191),i=s(5452),l=s(7763),n=s(3694);const o=class{constructor(e){(0,a.r)(this,e),this.tableSettings={columns:[]},this.errorMessage=null,this._tableSettings={columns:[]}}handleTableSettingsChange(e){this.tableSettings=Object.assign(Object.assign({},e),{columns:this.sortColumnsByPosition(e.columns)})}componentWillLoad(){this.handleTableSettingsChange(this._tableSettings)}sortColumnsByPosition(e){return[...e].sort(((e,t)=>e.position-t.position))}moveColumn(e,t){const s=[...this.tableSettings.columns],a=s.findIndex((t=>t.key===e)),i="up"===t?a-1:a+1,l=s[a],n=s[i],o=s.map((e=>e.key===l.key?Object.assign(Object.assign({},e),{position:n.position}):e.key===n.key?Object.assign(Object.assign({},e),{position:l.position}):e));this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.sortColumnsByPosition(o)})}handleVisibilityChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map((s=>s.key===e?Object.assign(Object.assign({},s),{visible:Boolean(t)}):s))})}handleWidthChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map((s=>s.key===e?Object.assign(Object.assign({},s),{width:Number(t)}):s))})}handleCancel(){var e;null===(e=this.popoverRef)||void 0===e||e.hidePopover()}handleSubmit(e){var t;e.preventDefault(),this.tableSettings.columns.some((e=>e.visible))?this.host&&(this.errorMessage=null,(0,n.d)(this.host,n.K.settingsChange,this.tableSettings),null===(t=this.popoverRef)||void 0===t||t.hidePopover()):this.errorMessage=(0,i.t)("kol-table-settings-error-all-invisible")}render(){const e=[...this.tableSettings.columns].sort(((e,t)=>e.position-t.position));return(0,a.h)(l.j,{key:"a3e0145a3399d8dee361f7e29e34198b1ec99b27",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"codicon codicon-settings-gear",_label:(0,i.t)("kol-table-settings"),_popoverAlign:"top",_hideLabel:!0},(0,a.h)("div",{key:"66f2e14ac78f6d865a6a6ad9e2393c94c42fa8a7",class:"kol-table-settings__content"},(0,a.h)(l.l,{key:"558f2b97ac8c7f049147125a642e5e4862108dda",_label:(0,i.t)("kol-table-settings"),_level:0}),this.errorMessage&&(0,a.h)(l.b,{key:"433c0381c504eff423516b40d899751ae5ea4658",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),(0,a.h)("form",{key:"404aae1da74273e840c1980fe3a94d126cbfbe8b",onSubmit:this.handleSubmit.bind(this)},(0,a.h)("div",{key:"d18a3fe79c0f576dbf23444eb06a744d003b77af",class:"kol-table-settings__columns-container"},(0,a.h)("div",{key:"adb1ad8d4afc6e0dc062f7dfb2cbbfebbc5b83d1",class:"kol-table-settings__columns"},e.map(((t,s)=>(0,a.h)("div",{key:t.key,class:"kol-table-settings__column"},(0,a.h)(l.m,{_checked:t.visible,_label:(0,i.t)("kol-table-settings-show-column",{placeholders:{column:t.label}}),_value:!0,_hideLabel:!0,_on:{onInput:(e,s)=>this.handleVisibilityChange(t.key,s)}}),(0,a.h)("span",null,t.label),(0,a.h)(l.n,{_hideLabel:!0,_value:t.width,_label:(0,i.t)("kol-table-settings-column-width",{placeholders:{column:t.label}}),_min:1,_on:{onInput:(e,s)=>this.handleWidthChange(t.key,s)}}),(0,a.h)(l.a,{_icons:"codicon codicon-arrow-up",_label:(0,i.t)("kol-table-settings-move-up",{placeholders:{column:t.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>this.moveColumn(t.key,"up")},_disabled:0===s,"data-testid":"table-settings-move-up"}),(0,a.h)(l.a,{_icons:"codicon codicon-arrow-down",_label:(0,i.t)("kol-table-settings-move-down",{placeholders:{column:t.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>this.moveColumn(t.key,"down")},_disabled:s===e.length-1,"data-testid":"table-settings-move-down"})))))),(0,a.h)("div",{key:"d0f48d73ce013cbd5b185a437756482c855ac9dc",class:"kol-table-settings__actions"},(0,a.h)(l.a,{key:"a7e5797e348e821f8054a92121ecff1d61b13135",_label:(0,i.t)("kol-table-settings-cancel"),_variant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),(0,a.h)(l.a,{key:"b42ca9c4f951fcc93a281f022dabafda59fe3373",_label:(0,i.t)("kol-table-settings-apply"),_variant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return(0,a.g)(this)}static get watchers(){return{_tableSettings:["handleTableSettingsChange"]}}}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6256],{6256:(e,t,s)=>{s.r(t),s.d(t,{kol_table_settings_wc:()=>o});var a=s(6733),i=s(9272),l=s(1698),n=s(3694);s(4269),s(257);const o=class{constructor(e){(0,a.r)(this,e),this.tableSettings={columns:[]},this.errorMessage=null,this._tableSettings={columns:[]}}handleTableSettingsChange(e){this.tableSettings=Object.assign(Object.assign({},e),{columns:this.sortColumnsByPosition(e.columns)})}componentWillLoad(){this.handleTableSettingsChange(this._tableSettings)}sortColumnsByPosition(e){return[...e].sort(((e,t)=>e.position-t.position))}moveColumn(e,t){const s=[...this.tableSettings.columns],a=s.findIndex((t=>t.key===e)),i="up"===t?a-1:a+1,l=s[a],n=s[i],o=s.map((e=>e.key===l.key?Object.assign(Object.assign({},e),{position:n.position}):e.key===n.key?Object.assign(Object.assign({},e),{position:l.position}):e));this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.sortColumnsByPosition(o)})}handleVisibilityChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map((s=>s.key===e?Object.assign(Object.assign({},s),{visible:Boolean(t)}):s))})}handleWidthChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map((s=>s.key===e?Object.assign(Object.assign({},s),{width:Number(t)}):s))})}handleCancel(){var e;null===(e=this.popoverRef)||void 0===e||e.hidePopover()}handleSubmit(e){var t;e.preventDefault(),this.tableSettings.columns.some((e=>e.visible))?this.host&&(this.errorMessage=null,(0,n.d)(this.host,n.K.settingsChange,this.tableSettings),null===(t=this.popoverRef)||void 0===t||t.hidePopover()):this.errorMessage=(0,i.t)("kol-table-settings-error-all-invisible")}render(){const e=[...this.tableSettings.columns].sort(((e,t)=>e.position-t.position));return(0,a.h)(l.i,{key:"a3e0145a3399d8dee361f7e29e34198b1ec99b27",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"codicon codicon-settings-gear",_label:(0,i.t)("kol-table-settings"),_popoverAlign:"top",_hideLabel:!0},(0,a.h)("div",{key:"66f2e14ac78f6d865a6a6ad9e2393c94c42fa8a7",class:"kol-table-settings__content"},(0,a.h)(l.r,{key:"558f2b97ac8c7f049147125a642e5e4862108dda",_label:(0,i.t)("kol-table-settings"),_level:0}),this.errorMessage&&(0,a.h)(l.b,{key:"433c0381c504eff423516b40d899751ae5ea4658",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),(0,a.h)("form",{key:"404aae1da74273e840c1980fe3a94d126cbfbe8b",onSubmit:this.handleSubmit.bind(this)},(0,a.h)("div",{key:"d18a3fe79c0f576dbf23444eb06a744d003b77af",class:"kol-table-settings__columns-container"},(0,a.h)("div",{key:"adb1ad8d4afc6e0dc062f7dfb2cbbfebbc5b83d1",class:"kol-table-settings__columns"},e.map(((t,s)=>(0,a.h)("div",{key:t.key,class:"kol-table-settings__column"},(0,a.h)(l.t,{_checked:t.visible,_label:(0,i.t)("kol-table-settings-show-column",{placeholders:{column:t.label}}),_value:!0,_hideLabel:!0,_on:{onInput:(e,s)=>this.handleVisibilityChange(t.key,s)}}),(0,a.h)("span",null,t.label),(0,a.h)(l.u,{_hideLabel:!0,_value:t.width,_label:(0,i.t)("kol-table-settings-column-width",{placeholders:{column:t.label}}),_min:1,_on:{onInput:(e,s)=>this.handleWidthChange(t.key,s)}}),(0,a.h)(l.a,{_icons:"codicon codicon-arrow-up",_label:(0,i.t)("kol-table-settings-move-up",{placeholders:{column:t.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>this.moveColumn(t.key,"up")},_disabled:0===s,"data-testid":"table-settings-move-up"}),(0,a.h)(l.a,{_icons:"codicon codicon-arrow-down",_label:(0,i.t)("kol-table-settings-move-down",{placeholders:{column:t.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>this.moveColumn(t.key,"down")},_disabled:s===e.length-1,"data-testid":"table-settings-move-down"})))))),(0,a.h)("div",{key:"d0f48d73ce013cbd5b185a437756482c855ac9dc",class:"kol-table-settings__actions"},(0,a.h)(l.a,{key:"a7e5797e348e821f8054a92121ecff1d61b13135",_label:(0,i.t)("kol-table-settings-cancel"),_variant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),(0,a.h)(l.a,{key:"b42ca9c4f951fcc93a281f022dabafda59fe3373",_label:(0,i.t)("kol-table-settings-apply"),_variant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return(0,a.g)(this)}static get watchers(){return{_tableSettings:["handleTableSettingsChange"]}}}},9272:(e,t,s)=>{s.d(t,{t:()=>l});var a=s(4269),i=s(257);let l=(e,t)=>{var s;return(null!==(s=(0,a.g)())&&void 0!==s?s:(0,a.i)("de")).translate(e,t)};"test"===i.p&&(l=e=>e)}}]);

package/dist/6304.js

@@ -1,2 +1,2 @@
 /*! For license information please see 6304.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6304],{3638:(e,t,n)=>{n.d(t,{a:()=>d,b:()=>l,c:()=>o,h:()=>r,v:()=>h});var a=n(3892);const r=[0,1,2,3,4,5,6],s=/[a-zA-Z0-9äöüÄÖÜß]/g,i=/^\d+$/;function l(e,t=1){return function(e){var t;return"string"==typeof e&&(null===(t=e.match(s))||void 0===t?void 0:t.length)||0}(e)>=t}function o(e){return i.test(e)}const c=new Set(["string"]),h=(e,t,n={})=>{(0,a.w)(e,"_label",(e=>"string"==typeof e),c,t,function(e){var t;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(t,n,r,s)=>{var i,c;"function"==typeof(null===(i=e.hooks)||void 0===i?void 0:i.afterPatch)&&(null===(c=e.hooks)||void 0===c||c.afterPatch(t,n,r,s)),"string"==typeof t&&!1===l(t,3)&&!1===o(t)&&(0,a.a)(`The heading or label ("${t}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof t&&t.length>80&&(0,a.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(t=e.hooks)||void 0===t?void 0:t.beforePatch}})}(n))},d=h},6304:(e,t,n)=>{n.r(t),n.d(t,{kol_progress:()=>d});var a,r,s=n(5191),i=n(3638),l=n(3892);(r=a||(a={})).bar="bar",r.cycle="cycle";const o=Object.keys(a),c=({state:e})=>(0,s.h)("svg",{width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},(0,s.h)("circle",{class:"kol-progress__cycle-background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),(0,s.h)("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),(0,s.h)("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),(0,s.h)("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),(0,s.h)("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),(0,s.h)("circle",{class:"kol-progress__cycle-progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"})),h=({state:e})=>{const t=e._value/e._max*100;return(0,s.h)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},(0,s.h)("rect",{class:"kol-progress__bar-background",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:"100%"}}),(0,s.h)("rect",{class:"kol-progress__bar-border",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",style:{width:"100%"}}),(0,s.h)("rect",{class:"kol-progress__bar-progress",x:"3",y:"3",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${t}% - 4px)`}}))},d=class{constructor(e){(0,s.r)(this,e),this._label=void 0,this._max=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){const e="%"===this.state._unit,t=e?`${Math.round(this.state._liveValue/this.state._max*100)}`:this.state._liveValue,n=e?Math.round(this.state._value/this.state._max*100):this.state._value;return(0,s.h)("div",{key:"a3cb72fa70f83e640758aa2a9a9b05f3144586d1",class:"kol-progress"},(0,s.h)("div",{key:"3f9f7a83fa9fe5f0e01ab96051b0f058afeb6ba0","aria-hidden":"true",class:{"kol-progress__cycle":"cycle"===this.state._variant,"kol-progress__bar":"bar"===this.state._variant}},"bar"===this.state._variant&&this.state._label&&(0,s.h)("div",{key:"e53ad6ee7ff680988179e7b57208cb0361783d31",class:"kol-progress__bar-label"},this.state._label),(e=>{switch(e._variant){case"cycle":return(0,s.h)(c,{state:e});case"bar":return(0,s.h)(h,{state:e});default:throw new Error(`Progress variant ${e._variant} not implemented.`)}})(this.state),"cycle"==this.state._variant&&(0,s.h)("div",{key:"10a3aabfee33e6093dd63a028482854fb47735ac",class:"kol-progress__cycle-text"},this.state._label&&(0,s.h)("div",{key:"d83981b1b6376f07474f1ec2e5909efb5e436ff6",class:"kol-progress__cycle-label"},this.state._label),(0,s.h)("div",{key:"9bde39e955af81f1fd1e97039485c051e8837be3",class:"kol-progress__cycle-value"},`${n} ${this.state._unit}`)),"bar"==this.state._variant&&(0,s.h)("div",{key:"b8b3317b036e8026d83cca7e4d4d49dd744a02f5",class:"kol-progress__bar-value",style:{width:`${`${(e?100:this.state._max)+1}`.length}ch`}},n),"bar"==this.state._variant&&(0,s.h)("div",{key:"ae0e71db447b5f49db88ccddb143975883a9ae41",class:"kol-progress__bar-unit"},this.state._unit)),(0,s.h)("progress",{key:"dfad86c10b981a615481c51f15f54217a2f65f62",class:"visually-hidden","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),(0,s.h)("span",{key:"751c3a8f4cb2d0b7bd99da19ee91c94975df4cbe","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},e?`${t} %`:`${t} von ${this.state._max} ${this.state._unit}`))}validateLabel(e){(0,i.v)(this,e)}validateMax(e){"number"!=typeof e&&(e=100),(0,l.k)(this,"_max",e,{required:!0})}validateUnit(e){(0,l.i)(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),(0,l.k)(this,"_value",e,{required:!0})}validateVariant(e){(0,l.w)(this,"_variant",(e=>"string"==typeof e&&o.includes(e)),new Set(o),e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};d.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    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%;\n    /* 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  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\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-progress {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-progress__bar {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n    align-items: center;\n    column-gap: 0.05rem;\n  }\n  .kol-progress__bar-label {\n    grid-column-end: 2;\n    grid-area: LABEL;\n  }\n  .kol-progress__bar svg {\n    grid-area: BAR;\n  }\n  .kol-progress__bar-value {\n    grid-area: VALUE;\n    text-align: right;\n  }\n  .kol-progress__bar-unit {\n    grid-area: UNIT;\n  }\n  .kol-progress__bar-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__bar-background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .kol-progress__bar-progress {\n    fill: #0075ff;\n    stroke: transparent;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__bar-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-progress__cycle {\n    display: grid;\n    grid-template-columns: auto;\n    grid-template-areas: \"ALL\";\n    justify-items: center;\n    align-content: center;\n  }\n  .kol-progress__cycle > * {\n    grid-area: ALL;\n  }\n  .kol-progress__cycle-text {\n    text-align: center;\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    font-size: x-small;\n  }\n  .kol-progress__cycle-text * {\n    background-color: white;\n  }\n  .kol-progress__cycle-background {\n    fill: transparent;\n    stroke: lightgray;\n  }\n  .kol-progress__cycle-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__cycle-whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-progress {\n    fill: transparent;\n    stroke: #0075ff;\n    transform-origin: 50% 50%;\n    transform: rotate(-90deg);\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}"}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6304],{3472:(e,t,n)=>{n.d(t,{a:()=>d,b:()=>l,c:()=>o,h:()=>r,v:()=>h});var a=n(257);const r=[0,1,2,3,4,5,6],s=/[a-zA-Z0-9äöüÄÖÜß]/g,i=/^\d+$/;function l(e,t=1){return function(e){var t;return"string"==typeof e&&(null===(t=e.match(s))||void 0===t?void 0:t.length)||0}(e)>=t}function o(e){return i.test(e)}const c=new Set(["string"]),h=(e,t,n={})=>{(0,a.w)(e,"_label",(e=>"string"==typeof e),c,t,function(e){var t;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(t,n,r,s)=>{var i,c;"function"==typeof(null===(i=e.hooks)||void 0===i?void 0:i.afterPatch)&&(null===(c=e.hooks)||void 0===c||c.afterPatch(t,n,r,s)),"string"==typeof t&&!1===l(t,3)&&!1===o(t)&&(0,a.b)(`The heading or label ("${t}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof t&&t.length>80&&(0,a.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(t=e.hooks)||void 0===t?void 0:t.beforePatch}})}(n))},d=h},6304:(e,t,n)=>{n.r(t),n.d(t,{kol_progress:()=>c});var a=n(6733),r=n(257),s=n(3472);const i=Object.keys(r.J),l=({state:e})=>(0,a.h)("svg",{width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},(0,a.h)("circle",{class:"kol-progress__cycle-background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),(0,a.h)("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),(0,a.h)("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),(0,a.h)("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),(0,a.h)("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),(0,a.h)("circle",{class:"kol-progress__cycle-progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"})),o=({state:e})=>{const t=e._value/e._max*100;return(0,a.h)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},(0,a.h)("rect",{class:"kol-progress__bar-background",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:"100%"}}),(0,a.h)("rect",{class:"kol-progress__bar-border",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",style:{width:"100%"}}),(0,a.h)("rect",{class:"kol-progress__bar-progress",x:"3",y:"3",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${t}% - 4px)`}}))},c=class{constructor(e){(0,a.r)(this,e),this._label=void 0,this._max=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){const e="%"===this.state._unit,t=e?`${Math.round(this.state._liveValue/this.state._max*100)}`:this.state._liveValue,n=e?Math.round(this.state._value/this.state._max*100):this.state._value;return(0,a.h)("div",{key:"a3cb72fa70f83e640758aa2a9a9b05f3144586d1",class:"kol-progress"},(0,a.h)("div",{key:"3f9f7a83fa9fe5f0e01ab96051b0f058afeb6ba0","aria-hidden":"true",class:{"kol-progress__cycle":"cycle"===this.state._variant,"kol-progress__bar":"bar"===this.state._variant}},"bar"===this.state._variant&&this.state._label&&(0,a.h)("div",{key:"e53ad6ee7ff680988179e7b57208cb0361783d31",class:"kol-progress__bar-label"},this.state._label),(e=>{switch(e._variant){case"cycle":return(0,a.h)(l,{state:e});case"bar":return(0,a.h)(o,{state:e});default:throw new Error(`Progress variant ${e._variant} not implemented.`)}})(this.state),"cycle"==this.state._variant&&(0,a.h)("div",{key:"10a3aabfee33e6093dd63a028482854fb47735ac",class:"kol-progress__cycle-text"},this.state._label&&(0,a.h)("div",{key:"d83981b1b6376f07474f1ec2e5909efb5e436ff6",class:"kol-progress__cycle-label"},this.state._label),(0,a.h)("div",{key:"9bde39e955af81f1fd1e97039485c051e8837be3",class:"kol-progress__cycle-value"},`${n} ${this.state._unit}`)),"bar"==this.state._variant&&(0,a.h)("div",{key:"b8b3317b036e8026d83cca7e4d4d49dd744a02f5",class:"kol-progress__bar-value",style:{width:`${`${(e?100:this.state._max)+1}`.length}ch`}},n),"bar"==this.state._variant&&(0,a.h)("div",{key:"ae0e71db447b5f49db88ccddb143975883a9ae41",class:"kol-progress__bar-unit"},this.state._unit)),(0,a.h)("progress",{key:"dfad86c10b981a615481c51f15f54217a2f65f62",class:"visually-hidden","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),(0,a.h)("span",{key:"751c3a8f4cb2d0b7bd99da19ee91c94975df4cbe","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},e?`${t} %`:`${t} von ${this.state._max} ${this.state._unit}`))}validateLabel(e){(0,s.v)(this,e)}validateMax(e){"number"!=typeof e&&(e=100),(0,r.E)(this,"_max",e,{required:!0})}validateUnit(e){(0,r.A)(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),(0,r.E)(this,"_value",e,{required:!0})}validateVariant(e){(0,r.w)(this,"_variant",(e=>"string"==typeof e&&i.includes(e)),new Set(i),e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};c.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    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%;\n    /* 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  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\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-progress {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-progress__bar {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n    align-items: center;\n    column-gap: 0.05rem;\n  }\n  .kol-progress__bar-label {\n    grid-column-end: 2;\n    grid-area: LABEL;\n  }\n  .kol-progress__bar svg {\n    grid-area: BAR;\n  }\n  .kol-progress__bar-value {\n    grid-area: VALUE;\n    text-align: right;\n  }\n  .kol-progress__bar-unit {\n    grid-area: UNIT;\n  }\n  .kol-progress__bar-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__bar-background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .kol-progress__bar-progress {\n    fill: #0075ff;\n    stroke: transparent;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__bar-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-progress__cycle {\n    display: grid;\n    grid-template-columns: auto;\n    grid-template-areas: \"ALL\";\n    justify-items: center;\n    align-content: center;\n  }\n  .kol-progress__cycle > * {\n    grid-area: ALL;\n  }\n  .kol-progress__cycle-text {\n    text-align: center;\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    font-size: x-small;\n  }\n  .kol-progress__cycle-text * {\n    background-color: white;\n  }\n  .kol-progress__cycle-background {\n    fill: transparent;\n    stroke: lightgray;\n  }\n  .kol-progress__cycle-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__cycle-whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-progress {\n    fill: transparent;\n    stroke: #0075ff;\n    transform-origin: 50% 50%;\n    transform: rotate(-90deg);\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}"}}}]);