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

package/dist/5876.js

@@ -1,2 +1,2 @@
 /*! For license information please see 5876.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5876],{375:(n,e,t)=>{t.d(e,{K:()=>a});var o=t(6783),i=t(7662);const a=n=>{const{class:e,style:t,icons:a,label:l,onClick:s}=n;return(0,o.h)(i.d,{class:e,style:t,onClick:s,_icons:a,_label:l})}},3163:(n,e,t)=>{t.d(e,{K:()=>r});var o=t(4600),i=t(6783),a=t(9060),l=t(8625),s=t(5650);const r=n=>{const{class:e,msg:t,required:r,disabled:d,touched:c,readonly:h,ariaDescribedBy:u,hideLabel:p,label:m,suggestions:b,value:v}=n,_=(0,o._)(n,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),g=(0,s.c)(t,c),f={"kol-input--disabled":Boolean(d),"kol-input--required":Boolean(r),"kol-input--touched":Boolean(c),"kol-input--readonly":Boolean(h),[`kol-input--${(null==t?void 0:t.type)||"error"}`]:g},y=Object.assign(Object.assign({class:(0,a.c)("kol-input",f,e),required:r,disabled:d,readonly:h,type:"text",list:b?`${_.id}-list`:void 0},(0,l.d)({ariaDescribedBy:u,hideLabel:p,label:m})),_);return(0,i.h)(i.F,null,(0,i.h)("input",Object.assign({},y,{value:v})),b)}},7146:(n,e,t)=>{t.d(e,{K:()=>d,a:()=>r});var o=t(4600),i=t(6783),a=t(8625),l=t(3163),s=t(5650);const r=n=>{var{id:e,suggestions:t}=n,a=(0,o._)(n,["id","suggestions"]);return t?(0,i.h)("datalist",Object.assign({id:`${e}-list`},a),t.map((n=>(0,i.h)("option",{value:n})))):null},d=n=>{var{state:e,customSuggestions:t}=n,d=(0,o._)(n,["state","customSuggestions"]);return(0,i.h)(l.K,Object.assign({},function(n,e){const{ariaDescribedBy:t}=(0,a.g)(n),o={id:n._id,hideLabel:n._hideLabel,label:n._label,accessKey:n._accessKey,disabled:n._disabled,name:n._name,ariaDescribedBy:t};return"_type"in n&&(o.type=n._type),"_value"in n&&(o.value=n._value),"_required"in n&&(o.required=n._required),"_maxLength"in n&&(o.maxlength=n._maxLength),"_placeholder"in n&&(o.placeholder=n._placeholder),"_autoComplete"in n&&(o.autoComplete=n._autoComplete),"_spellCheck"in n&&(o.spellcheck=n._spellCheck),"_pattern"in n&&(o.pattern=n._pattern),"_readOnly"in n&&(o.readonly=n._readOnly),"_min"in n&&(o.min=n._min),"_max"in n&&(o.max=n._max),"_step"in n&&(o.step=n._step),"_multiple"in n&&(o.multiple=n._multiple),"_checked"in n&&(o.checked=n._checked),"_indeterminate"in n&&(o.indeterminate=n._indeterminate),"_touched"in n&&(o.touched=n._touched),"_msg"in n&&(o.msg=(0,s.a)(n._msg)),"_suggestions"in n&&!e&&Array.isArray(n._suggestions)&&n._suggestions.length>0&&(o.suggestions=(0,i.h)(r,{id:n._id,suggestions:n._suggestions})),o}(e,t),d))}},5363:(n,e,t)=>{t.d(e,{I:()=>x,K:()=>k,a:()=>y});var o=t(6783),i=t(2587),a=t(665),l=t(4600),s=t(7662),r=t(375),d=t(9060),c=t(5650),h=t(8625),u=t(8973),p=t(5800),m=t(608);const b=(n,e)=>{var{position:t="start",class:i}=n,a=(0,l._)(n,["position","class"]);const s="kol-input-container__adornment",r=`${s}--${t}`;return(0,o.h)("div",Object.assign({class:(0,d.c)(s,r,i)},a),e)};function v(n){return!!n&&(Array.isArray(n)?n.length>0:Boolean(n))}const _=(n,e)=>{var{class:t}=n,i=(0,l._)(n,["class"]);return(0,o.h)("div",Object.assign({class:(0,d.c)("kol-input-container__container",t)},i),e)},g=(n,e)=>{const{class:t,startAdornment:i,endAdornment:a,disabled:s,msg:r,touched:h,containerProps:u,startAdornmentProps:p,endAdornmentProps:m}=n,g=(0,l._)(n,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),f=(0,c.c)(r,h),y={"kol-input-container--disabled":s,[`kol-input-container--${(null==r?void 0:r.type)||"error"}`]:f},k=Object.assign({class:(0,d.c)("kol-input-container",y,t)},g);return v(i)||v(a)?(0,o.h)("div",Object.assign({},k),(0,o.h)(b,Object.assign({},p,{position:"start"}),i),(0,o.h)(_,Object.assign({},u),e),(0,o.h)(b,Object.assign({},m,{position:"end"}),a)):(0,o.h)("div",Object.assign({},k),(0,o.h)(_,Object.assign({},u),e))},f=n=>{const{label:e,icons:t,hideLabel:i,disabled:a,onClick:r}=n,d=(0,l._)(n,["label","icons","hideLabel","disabled","onClick"]);return(0,o.h)(s.a,Object.assign({tabindex:0,_label:e,_disabled:a,_icons:t,_hideLabel:i,_on:{onClick:r}},d))},y=n=>{const{componentName:e="button",label:t,icon:i,onClick:a}=n,s=(0,l._)(n,["componentName","label","icon","onClick"]),d="button"===e?f:r.K;return(0,o.h)(d,Object.assign({label:t||"",hideLabel:!0,icons:`codicon codicon-${i}`,onClick:a},s))},k=({state:n,endAdornment:e},t)=>{const{icons:l,smartButton:s,disabled:r,msg:d,touched:h}=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 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=[],b=[];return e&&(Array.isArray(e)?b.push(...e):b.push(e)),u&&m.push((0,o.h)(y,Object.assign({componentName:"icon"},(0,a.i)(u)?u:{}))),(0,a.i)(s)&&b.push((0,o.h)(y,Object.assign({componentName:"button"},s,{hideLabel:!0,disabled:r}))),p&&b.push((0,o.h)(y,Object.assign({componentName:"icon"},(0,a.i)(p)?p:{}))),(0,o.h)(g,{disabled:r,msg:d,touched:h,startAdornment:m,endAdornment:b},t)},w=(n,e)=>{const t=n;"object"==typeof t&&null!==t&&((0,m.i)(t.right,1)&&(t.right={icon:t.right}),(0,m.i)(t.left,1)&&(t.left={icon:t.left}),e.set("_icons",t))};class x extends h.I{constructor(n,e,t){super(n,e,t),this.component=n}validateIcons(n){(0,p.o)(n,(()=>{try{n=(0,p.p)(n)}catch(n){}(0,p.w)(this.component,"_icons",(n=>"object"==typeof n&&null!==n&&((0,m.i)(n.left,1)||(0,u.i)(n.left)||(0,m.i)(n.right,1)||(0,u.i)(n.right))),new Set(["KoliBriHorizontalIcon"]),n,{hooks:{beforePatch:w},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},8973:(n,e,t)=>{t.d(e,{i:()=>l,v:()=>s});var o=t(5800),i=t(608);const a=(n,e,t)=>{(0,i.b)(t)?n[e]=t:(0,i.i)(t,1)&&(n[e]={icon:t})},l=n=>"object"==typeof n&&null!==n&&(void 0===n.style||(0,i.a)(n.style))&&(void 0===n.label||(0,i.i)(n.label))&&(0,i.i)(n.icon,1),s=(n,e,t={})=>{(0,o.o)(e,(()=>{var s;try{e=(0,o.p)(e)}catch(n){}(0,o.w)(n,"_icons",(n=>{const e="object"==typeof n&&null!==n&&0===Object.keys(n).length;return null===n||e||(0,i.i)(n,1)||"object"==typeof n&&null!==n&&((0,i.i)(n.left,1)||l(n.left)||(0,i.i)(n.right,1)||l(n.right)||(0,i.i)(n.top,1)||l(n.top)||(0,i.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,o,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,o,l)),(n=>{var e,t,o;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===(o=n.nextState)||void 0===o||o.set("_icons",(n=>{let e={};return(0,i.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))}})(o)}}}))}))}},665:(n,e,t)=>{function o(n){var e=typeof n;return null!=n&&("object"==e||"function"==e)}t.d(e,{i:()=>o})},5876:(n,e,t)=>{t.r(e),t.d(e,{kol_input_color:()=>p});var o=t(6783),i=t(7336),a=t(5363),l=t(623),s=t(5800),r=t(7146),d=t(8625),c=(n,e,t)=>new Promise(((o,i)=>{var a=n=>{try{s(t.next(n))}catch(n){i(n)}},l=n=>{try{s(t.throw(n))}catch(n){i(n)}},s=n=>n.done?o(n.value):Promise.resolve(n.value).then(a,l);s((t=t.apply(n,e)).next())}));const h=["on","off"];class u extends a.I{constructor(n,e,t){super(n,e,t),this.component=n}validateAutoComplete(n){(0,s.w)(this.component,"_autoComplete",(n=>"string"==typeof n&&h.includes(n)),new Set(h),n)}validateSuggestions(n){(0,l.v)(this.component,n)}validateValue(n){(0,s.i)(this.component,"_value",n),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const p=class{getValue(){return c(this,null,(function*(){var n;return null===(n=this.inputRef)||void 0===n?void 0:n.value}))}kolFocus(){return c(this,null,(function*(){var n;null===(n=this.inputRef)||void 0===n||n.focus()}))}getFormFieldProps(){return{state:this.state,class:"kol-input-color",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,type:"color",slot:"input",state:this.state},this.controller.onFacade),{onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput})}render(){return(0,o.h)(d.K,Object.assign({key:"2cc074d267724a8844cb3a74173a4158d5085dec"},this.getFormFieldProps()),(0,o.h)(a.K,{key:"97ab0641e442efdf1cae0db8b98ddc495dcbbb83",state:this.state},(0,o.h)(r.K,Object.assign({key:"04f39017c2a6c0056d7c72d2dbc868f6af0eb495"},this.getInputProps()))))}constructor(n){(0,o.r)(this,n),this.catchRef=n=>{this.inputRef=n},this.onBlur=n=>{this.controller.onFacade.onBlur(n),this.inputHasFocus=!1},this.onFocus=n=>{this.controller.onFacade.onFocus(n),this.inputHasFocus=!0},this.onInput=n=>{var e,t;this._value=null!==(t=null===(e=this.inputRef)||void 0===e?void 0:e.value)&&void 0!==t?t:"",this.controller.onFacade.onInput(n)},this._accessKey=void 0,this._autoComplete=void 0,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._shortKey=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hideMsg:!1,_id:`id-${(0,i.n)()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new u(this,"color",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(n){this.controller.validateAccessKey(n)}validateAutoComplete(n){this.controller.validateAutoComplete(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)}validateName(n){this.controller.validateName(n)}validateOn(n){this.controller.validateOn(n)}validateShortKey(n){this.controller.validateShortKey(n)}validateSmartButton(n){this.controller.validateSmartButton(n)}validateSuggestions(n){this.controller.validateSuggestions(n)}validateSyncValueBySelector(n){this.controller.validateSyncValueBySelector(n)}validateTabIndex(n){this.controller.validateTabIndex(n)}validateTouched(n){this.controller.validateTouched(n)}validateValue(n){this.controller.validateValue(n)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return(0,o.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};p.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}"}},623:(n,e,t)=>{t.d(e,{v:()=>i});var o=t(5800);const i=(n,e)=>{(0,o.g)(n,"_suggestions",(n=>"string"==typeof n||"number"==typeof n),e,void 0,{hooks:{afterPatch:n=>{Array.isArray(n)&&n.length&&(0,o.a)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5876],{5126:(n,e,t)=>{t.d(e,{K:()=>a});var o=t(1290),i=t(4957);const a=n=>{const{class:e,style:t,icons:a,label:l,onClick:s}=n;return(0,o.h)(i.d,{class:e,style:t,onClick:s,_icons:a,_label:l})}},6884:(n,e,t)=>{t.d(e,{K:()=>r});var o=t(4600),i=t(1290),a=t(9060),l=t(1416),s=t(9732);const r=n=>{const{class:e,msg:t,required:r,disabled:d,touched:c,readonly:h,ariaDescribedBy:u,hideLabel:p,label:m,suggestions:b,value:_}=n,g=(0,o._)(n,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),v=(0,s.c)(t,c),f={"kol-input--disabled":Boolean(d),"kol-input--required":Boolean(r),"kol-input--touched":Boolean(c),"kol-input--readonly":Boolean(h),[`kol-input--${(null==t?void 0:t.type)||"error"}`]:v},y=Object.assign(Object.assign({class:(0,a.c)("kol-input",f,e),required:r,disabled:d,readonly:h,type:"text",list:b?`${g.id}-list`:void 0},(0,l.d)({ariaDescribedBy:u,hideLabel:p,label:m})),g);return(0,i.h)(i.F,null,(0,i.h)("input",Object.assign({},y,{value:_})),b)}},4746:(n,e,t)=>{t.d(e,{K:()=>d,a:()=>r});var o=t(4600),i=t(1290),a=t(1416),l=t(6884),s=t(9732);const r=n=>{var{id:e,suggestions:t}=n,a=(0,o._)(n,["id","suggestions"]);return t?(0,i.h)("datalist",Object.assign({id:`${e}-list`},a),t.map((n=>(0,i.h)("option",{value:n})))):null},d=n=>{var{state:e,customSuggestions:t}=n,d=(0,o._)(n,["state","customSuggestions"]);return(0,i.h)(l.K,Object.assign({},function(n,e){const{ariaDescribedBy:t}=(0,a.g)(n),o={id:n._id,hideLabel:n._hideLabel,label:n._label,accessKey:n._accessKey,disabled:n._disabled,name:n._name,ariaDescribedBy:t};return"_type"in n&&(o.type=n._type),"_value"in n&&(o.value=n._value),"_required"in n&&(o.required=n._required),"_maxLength"in n&&(o.maxlength=n._maxLength),"_placeholder"in n&&(o.placeholder=n._placeholder),"_autoComplete"in n&&(o.autoComplete=n._autoComplete),"_spellCheck"in n&&(o.spellcheck=n._spellCheck),"_pattern"in n&&(o.pattern=n._pattern),"_readOnly"in n&&(o.readonly=n._readOnly),"_min"in n&&(o.min=n._min),"_max"in n&&(o.max=n._max),"_step"in n&&(o.step=n._step),"_multiple"in n&&(o.multiple=n._multiple),"_checked"in n&&(o.checked=n._checked),"_indeterminate"in n&&(o.indeterminate=n._indeterminate),"_touched"in n&&(o.touched=n._touched),"_msg"in n&&(o.msg=(0,s.a)(n._msg)),"_suggestions"in n&&!e&&Array.isArray(n._suggestions)&&n._suggestions.length>0&&(o.suggestions=(0,i.h)(r,{id:n._id,suggestions:n._suggestions})),o}(e,t),d))}},7617:(n,e,t)=>{t.d(e,{I:()=>x,K:()=>k,a:()=>y});var o=t(1290),i=t(3426),a=t(665),l=t(4600),s=t(4957),r=t(5126),d=t(9060),c=t(9732),h=t(1416),u=t(8973),p=t(5800),m=t(608);const b=(n,e)=>{var{position:t="start",class:i}=n,a=(0,l._)(n,["position","class"]);const s="kol-input-container__adornment",r=`${s}--${t}`;return(0,o.h)("div",Object.assign({class:(0,d.c)(s,r,i)},a),e)};function _(n){return!!n&&(Array.isArray(n)?n.length>0:Boolean(n))}const g=(n,e)=>{var{class:t}=n,i=(0,l._)(n,["class"]);return(0,o.h)("div",Object.assign({class:(0,d.c)("kol-input-container__container",t)},i),e)},v=(n,e)=>{const{class:t,startAdornment:i,endAdornment:a,disabled:s,msg:r,touched:h,containerProps:u,startAdornmentProps:p,endAdornmentProps:m}=n,v=(0,l._)(n,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),f=(0,c.c)(r,h),y={"kol-input-container--disabled":s,[`kol-input-container--${(null==r?void 0:r.type)||"error"}`]:f},k=Object.assign({class:(0,d.c)("kol-input-container",y,t)},v);return _(i)||_(a)?(0,o.h)("div",Object.assign({},k),(0,o.h)(b,Object.assign({},p,{position:"start"}),i),(0,o.h)(g,Object.assign({},u),e),(0,o.h)(b,Object.assign({},m,{position:"end"}),a)):(0,o.h)("div",Object.assign({},k),(0,o.h)(g,Object.assign({},u),e))},f=n=>{const{label:e,icons:t,hideLabel:i,disabled:a,onClick:r}=n,d=(0,l._)(n,["label","icons","hideLabel","disabled","onClick"]);return(0,o.h)(s.a,Object.assign({tabindex:0,_label:e,_disabled:a,_icons:t,_hideLabel:i,_on:{onClick:r}},d))},y=n=>{const{componentName:e="button",label:t,icon:i,onClick:a}=n,s=(0,l._)(n,["componentName","label","icon","onClick"]),d="button"===e?f:r.K;return(0,o.h)(d,Object.assign({label:t||"",hideLabel:!0,icons:`codicon codicon-${i}`,onClick:a},s))},k=({state:n,endAdornment:e},t)=>{const{icons:l,smartButton:s,disabled:r,msg:d,touched:h}=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 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=[],b=[];return e&&(Array.isArray(e)?b.push(...e):b.push(e)),u&&m.push((0,o.h)(y,Object.assign({componentName:"icon"},(0,a.i)(u)?u:{}))),(0,a.i)(s)&&b.push((0,o.h)(y,Object.assign({componentName:"button"},s,{hideLabel:!0,disabled:r}))),p&&b.push((0,o.h)(y,Object.assign({componentName:"icon"},(0,a.i)(p)?p:{}))),(0,o.h)(v,{disabled:r,msg:d,touched:h,startAdornment:m,endAdornment:b},t)},w=(n,e)=>{const t=n;"object"==typeof t&&null!==t&&((0,m.i)(t.right,1)&&(t.right={icon:t.right}),(0,m.i)(t.left,1)&&(t.left={icon:t.left}),e.set("_icons",t))};class x extends h.I{constructor(n,e,t){super(n,e,t),this.component=n}validateIcons(n){(0,p.o)(n,(()=>{try{n=(0,p.p)(n)}catch(n){}(0,p.w)(this.component,"_icons",(n=>"object"==typeof n&&null!==n&&((0,m.i)(n.left,1)||(0,u.i)(n.left)||(0,m.i)(n.right,1)||(0,u.i)(n.right))),new Set(["KoliBriHorizontalIcon"]),n,{hooks:{beforePatch:w},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},8973:(n,e,t)=>{t.d(e,{i:()=>l,v:()=>s});var o=t(5800),i=t(608);const a=(n,e,t)=>{(0,i.b)(t)?n[e]=t:(0,i.i)(t,1)&&(n[e]={icon:t})},l=n=>"object"==typeof n&&null!==n&&(void 0===n.style||(0,i.a)(n.style))&&(void 0===n.label||(0,i.i)(n.label))&&(0,i.i)(n.icon,1),s=(n,e,t={})=>{(0,o.o)(e,(()=>{var s;try{e=(0,o.p)(e)}catch(n){}(0,o.w)(n,"_icons",(n=>{const e="object"==typeof n&&null!==n&&0===Object.keys(n).length;return null===n||e||(0,i.i)(n,1)||"object"==typeof n&&null!==n&&((0,i.i)(n.left,1)||l(n.left)||(0,i.i)(n.right,1)||l(n.right)||(0,i.i)(n.top,1)||l(n.top)||(0,i.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,o,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,o,l)),(n=>{var e,t,o;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===(o=n.nextState)||void 0===o||o.set("_icons",(n=>{let e={};return(0,i.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))}})(o)}}}))}))}},665:(n,e,t)=>{function o(n){var e=typeof n;return null!=n&&("object"==e||"function"==e)}t.d(e,{i:()=>o})},5876:(n,e,t)=>{t.r(e),t.d(e,{kol_input_color:()=>p});var o=t(1290),i=t(526),a=t(7617),l=t(623),s=t(5800),r=t(4746),d=t(1416),c=(n,e,t)=>new Promise(((o,i)=>{var a=n=>{try{s(t.next(n))}catch(n){i(n)}},l=n=>{try{s(t.throw(n))}catch(n){i(n)}},s=n=>n.done?o(n.value):Promise.resolve(n.value).then(a,l);s((t=t.apply(n,e)).next())}));const h=["on","off"];class u extends a.I{constructor(n,e,t){super(n,e,t),this.component=n}validateAutoComplete(n){(0,s.w)(this.component,"_autoComplete",(n=>"string"==typeof n&&h.includes(n)),new Set(h),n)}validateSuggestions(n){(0,l.v)(this.component,n)}validateValue(n){(0,s.i)(this.component,"_value",n),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const p=class{getValue(){return c(this,null,(function*(){var n;return null===(n=this.inputRef)||void 0===n?void 0:n.value}))}kolFocus(){return c(this,null,(function*(){var n;null===(n=this.inputRef)||void 0===n||n.focus()}))}getFormFieldProps(){return{state:this.state,class:"kol-input-color",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,type:"color",slot:"input",state:this.state},this.controller.onFacade),{onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput})}render(){return(0,o.h)(d.K,Object.assign({key:"bdc1fbcd67a7f5b8cb7bf1abec5f210a232a9635"},this.getFormFieldProps()),(0,o.h)(a.K,{key:"173e87526dab08852abe97ecc6ddc1771ddffacb",state:this.state},(0,o.h)(r.K,Object.assign({key:"81cd202d19f8e142d0347e7321a140cb955f21dc"},this.getInputProps()))))}constructor(n){(0,o.r)(this,n),this.catchRef=n=>{this.inputRef=n},this.onBlur=n=>{this.controller.onFacade.onBlur(n),this.inputHasFocus=!1},this.onFocus=n=>{this.controller.onFacade.onFocus(n),this.inputHasFocus=!0},this.onInput=n=>{var e,t;this._value=null!==(t=null===(e=this.inputRef)||void 0===e?void 0:e.value)&&void 0!==t?t:"",this.controller.onFacade.onInput(n)},this._accessKey=void 0,this._autoComplete=void 0,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._shortKey=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hideMsg:!1,_id:`id-${(0,i.n)()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new u(this,"color",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(n){this.controller.validateAccessKey(n)}validateAutoComplete(n){this.controller.validateAutoComplete(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)}validateName(n){this.controller.validateName(n)}validateOn(n){this.controller.validateOn(n)}validateShortKey(n){this.controller.validateShortKey(n)}validateSmartButton(n){this.controller.validateSmartButton(n)}validateSuggestions(n){this.controller.validateSuggestions(n)}validateSyncValueBySelector(n){this.controller.validateSyncValueBySelector(n)}validateTouched(n){this.controller.validateTouched(n)}validateValue(n){this.controller.validateValue(n)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return(0,o.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};p.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: rem(16);\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: rem(16);\n    height: rem(44);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}"}},623:(n,e,t)=>{t.d(e,{v:()=>i});var o=t(5800);const i=(n,e)=>{(0,o.g)(n,"_suggestions",(n=>"string"==typeof n||"number"==typeof n),e,void 0,{hooks:{afterPatch:n=>{Array.isArray(n)&&n.length&&(0,o.a)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);

package/dist/597.js

@@ -1,2 +1,2 @@
 /*! For license information please see 597.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[597],{9246:(n,e,t)=>{t.d(e,{a:()=>o,v:()=>l});var i=t(5800);const o=(n,e,t)=>{(0,i.w)(n,e,(n=>"string"==typeof n&&a.includes(n)),new Set(a),t,{defaultValue:"top"})},a=["left","right","top","bottom"],l=(n,e)=>{o(n,"_align",e)}},9060:(n,e,t)=>{function i(n){var e,t,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var a=n.length;for(e=0;e<a;e++)n[e]&&(t=i(n[e]))&&(o&&(o+=" "),o+=t)}else for(t in n)n[t]&&(o&&(o+=" "),o+=t);return o}function o(){for(var n,e,t=0,o="",a=arguments.length;t<a;t++)(n=arguments[t])&&(e=i(n))&&(o&&(o+=" "),o+=e);return o}t.d(e,{c:()=>o})},597:(n,e,t)=>{t.r(e),t.d(e,{kol_drawer:()=>c});var i=t(6783),o=t(8231),a=t(9060),l=t(9246),s=t(1074),r=t(7688),d=t(5800),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())}));const c=class{constructor(n){(0,i.r)(this,n),this.getWrapperRef=n=>this.dialogWrapperElement=n,this.getRef=n=>{this.dialogElement=n,setTimeout((()=>{this.openOrCloseBasedOnState()}))},this._open=void 0,this._align=void 0,this._label=void 0,this._on=void 0,this.state={_label:"",_open:!1,_align:"left"}}open(){return h(this,null,(function*(){var n;this.state=Object.assign(Object.assign({},this.state),{_open:!0}),null===(n=this.dialogElement)||void 0===n||n.showModal()}))}close(){return h(this,null,(function*(){this.state=Object.assign(Object.assign({},this.state),{_open:!1});const n=this.dialogWrapperElement;n&&"none"===window.getComputedStyle(n).animationName&&this.handleCloseDialog()}))}renderDialogContent(){const n=this.state._align;return(0,i.h)("div",{ref:this.getWrapperRef,class:(0,a.c)("kol-drawer__wrapper",`kol-drawer__wrapper--${n}`,{"kol-drawer__wrapper--open":this.state._open,"kol-drawer__wrapper--is-closing":!1===this.state._open}),"aria-label":this.state._label},(0,i.h)("div",{class:"kol-drawer__content"},(0,i.h)("slot",null)))}render(){return(0,i.h)(i.H,{key:"cdcc1b49ef03474e9079cac14741a67b0cd3d850",class:"kol-drawer"},(0,i.h)("dialog",{key:"8a171b8b858e0a5e25cef1f28addcd72adcfe76c",class:"kol-drawer__dialog",ref:this.getRef},this.renderDialogContent()))}validateLabel(n){(0,s.v)(this,n,{required:!0})}validateAlign(n){(0,l.v)(this,n)}validateOpen(n){"boolean"==typeof n&&((0,r.v)(this,n),this.dialogElement&&this.openOrCloseBasedOnState())}openOrCloseBasedOnState(){return h(this,null,(function*(){this.state._open?yield this.open():yield this.close()}))}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"==typeof n.onClose&&(e.onClose=n.onClose),(0,d.s)(this,"_on",e)}}handleCloseDialog(){var n,e,t;null===(n=this.dialogElement)||void 0===n||n.close(),null===(t=null===(e=this._on)||void 0===e?void 0:e.onClose)||void 0===t||t.call(e),this.host&&(0,o.d)(this.host,o.K.close)}handleClose(){(()=>{h(this,null,(function*(){yield this.close(),this.handleCloseDialog()}))})()}handleAnimationEnd(n){n.animationName.includes("slideOut")&&this.handleCloseDialog()}componentDidLoad(){var n,e;null===(n=this.dialogElement)||void 0===n||n.addEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.addEventListener("close",this.handleClose.bind(this))}disconnectedCallback(){var n,e;null===(n=this.dialogElement)||void 0===n||n.removeEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.removeEventListener("close",this.handleClose.bind(this))}componentWillLoad(){this.validateLabel(this._label),this.validateOpen(this._open),this.validateAlign(this._align),this.validateOn(this._on)}get host(){return(0,i.g)(this)}static get watchers(){return{_label:["validateLabel"],_align:["validateAlign"],_open:["validateOpen"],_on:["validateOn"]}}};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%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-drawer {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-drawer__dialog {\n    padding: 0;\n    border: none;\n  }\n  .kol-drawer__wrapper {\n    position: fixed;\n    width: auto;\n    overflow: auto;\n    background-color: white;\n  }\n  .kol-drawer__wrapper--left {\n    top: 0;\n    left: 0;\n    height: 100vh;\n    max-height: 100%;\n  }\n  .kol-drawer__wrapper--right {\n    top: 0;\n    right: 0;\n    height: 100vh;\n    max-height: 100%;\n  }\n  .kol-drawer__wrapper--top {\n    left: 0;\n    top: 0;\n    width: 100vw;\n    max-width: 100%;\n  }\n  .kol-drawer__wrapper--bottom {\n    left: 0;\n    bottom: 0;\n    width: 100vw;\n    max-width: 100%;\n  }\n  .kol-drawer__content {\n    position: relative;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}"}},1074:(n,e,t)=>{t.d(e,{a:()=>c,b:()=>s,c:()=>r,h:()=>o,v:()=>h});var i=t(5800);const o=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(a))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const d=new Set(["string"]),h=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),d,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,o,a)=>{var l,d;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(e,t,o,a)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,i.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},c=h},7688:(n,e,t)=>{t.d(e,{v:()=>o});var i=t(5800);const o=(n,e,t)=>{(0,i.b)(n,"_open",e,t)}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[597],{9246:(n,e,t)=>{t.d(e,{a:()=>o,v:()=>l});var i=t(5800);const o=(n,e,t)=>{(0,i.w)(n,e,(n=>"string"==typeof n&&a.includes(n)),new Set(a),t,{defaultValue:"top"})},a=["left","right","top","bottom"],l=(n,e)=>{o(n,"_align",e)}},9060:(n,e,t)=>{function i(n){var e,t,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var a=n.length;for(e=0;e<a;e++)n[e]&&(t=i(n[e]))&&(o&&(o+=" "),o+=t)}else for(t in n)n[t]&&(o&&(o+=" "),o+=t);return o}function o(){for(var n,e,t=0,o="",a=arguments.length;t<a;t++)(n=arguments[t])&&(e=i(n))&&(o&&(o+=" "),o+=e);return o}t.d(e,{c:()=>o})},597:(n,e,t)=>{t.r(e),t.d(e,{kol_drawer:()=>c});var i=t(1290),o=t(8231),a=t(9060),l=t(9246),s=t(1074),r=t(7688),d=t(5800),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())}));const c=class{constructor(n){(0,i.r)(this,n),this.getWrapperRef=n=>this.dialogWrapperElement=n,this.getRef=n=>{this.dialogElement=n,setTimeout((()=>{this.openOrCloseBasedOnState()}))},this._open=void 0,this._align=void 0,this._label=void 0,this._on=void 0,this.state={_label:"",_open:!1,_align:"left"}}open(){return h(this,null,(function*(){var n;this.state=Object.assign(Object.assign({},this.state),{_open:!0}),null===(n=this.dialogElement)||void 0===n||n.showModal()}))}close(){return h(this,null,(function*(){this.state=Object.assign(Object.assign({},this.state),{_open:!1});const n=this.dialogWrapperElement;n&&"none"===window.getComputedStyle(n).animationName&&this.handleCloseDialog()}))}renderDialogContent(){const n=this.state._align;return(0,i.h)("div",{ref:this.getWrapperRef,class:(0,a.c)("kol-drawer__wrapper",`kol-drawer__wrapper--${n}`,{"kol-drawer__wrapper--open":this.state._open,"kol-drawer__wrapper--is-closing":!1===this.state._open}),"aria-label":this.state._label},(0,i.h)("div",{class:"kol-drawer__content"},(0,i.h)("slot",null)))}render(){return(0,i.h)(i.H,{key:"4e33d8dec59c5c93cab94c35812db4fce6bf84c3",class:"kol-drawer"},(0,i.h)("dialog",{key:"8e5db5cc7ee900ffba6f5cd5dafafbee2dc7636c",class:"kol-drawer__dialog",ref:this.getRef},this.renderDialogContent()))}validateLabel(n){(0,s.v)(this,n,{required:!0})}validateAlign(n){(0,l.v)(this,n)}validateOpen(n){"boolean"==typeof n&&((0,r.v)(this,n),this.dialogElement&&this.openOrCloseBasedOnState())}openOrCloseBasedOnState(){return h(this,null,(function*(){this.state._open?yield this.open():yield this.close()}))}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"==typeof n.onClose&&(e.onClose=n.onClose),(0,d.s)(this,"_on",e)}}handleCloseDialog(){var n,e,t;null===(n=this.dialogElement)||void 0===n||n.close(),null===(t=null===(e=this._on)||void 0===e?void 0:e.onClose)||void 0===t||t.call(e),this.host&&(0,o.d)(this.host,o.K.close)}handleClose(){(()=>{h(this,null,(function*(){yield this.close(),this.handleCloseDialog()}))})()}handleAnimationEnd(n){n.animationName.includes("slideOut")&&this.handleCloseDialog()}componentDidLoad(){var n,e;null===(n=this.dialogElement)||void 0===n||n.addEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.addEventListener("close",this.handleClose.bind(this))}disconnectedCallback(){var n,e;null===(n=this.dialogElement)||void 0===n||n.removeEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.removeEventListener("close",this.handleClose.bind(this))}componentWillLoad(){this.validateLabel(this._label),this.validateOpen(this._open),this.validateAlign(this._align),this.validateOn(this._on)}get host(){return(0,i.g)(this)}static get watchers(){return{_label:["validateLabel"],_align:["validateAlign"],_open:["validateOpen"],_on:["validateOn"]}}};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%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-drawer {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-drawer__dialog {\n    padding: 0;\n    border: none;\n  }\n  .kol-drawer__wrapper {\n    position: fixed;\n    width: auto;\n    overflow: auto;\n    background-color: white;\n  }\n  .kol-drawer__wrapper--left {\n    top: 0;\n    left: 0;\n    height: 100vh;\n    max-height: 100%;\n  }\n  .kol-drawer__wrapper--right {\n    top: 0;\n    right: 0;\n    height: 100vh;\n    max-height: 100%;\n  }\n  .kol-drawer__wrapper--top {\n    left: 0;\n    top: 0;\n    width: 100vw;\n    max-width: 100%;\n  }\n  .kol-drawer__wrapper--bottom {\n    left: 0;\n    bottom: 0;\n    width: 100vw;\n    max-width: 100%;\n  }\n  .kol-drawer__content {\n    position: relative;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}"}},1074:(n,e,t)=>{t.d(e,{a:()=>c,b:()=>s,c:()=>r,h:()=>o,v:()=>h});var i=t(5800);const o=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(a))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const d=new Set(["string"]),h=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),d,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,o,a)=>{var l,d;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(e,t,o,a)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,i.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},c=h},7688:(n,e,t)=>{t.d(e,{v:()=>o});var i=t(5800);const o=(n,e,t)=>{(0,i.b)(n,"_open",e,t)}}}]);

package/dist/6451.js

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

package/dist/6480.js

@@ -1,2 +1,2 @@
 /*! For license information please see 6480.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6480],{6480:(n,e,t)=>{t.r(e),t.d(e,{kol_alert:()=>a});var o=t(6783),i=t(7662);const a=class{constructor(n){(0,o.r)(this,n),this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=0,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:0}}render(){return(0,o.h)(i.b,{key:"bf0dcf3d99c23b32dce354988410b4e0534cce82",_alert:this._alert,_hasCloser:this._hasCloser,_label:this._label,_level:this._level,_on:this._on,_type:this._type,_variant:this._variant},(0,o.h)("slot",{key:"1248b1be19f50c8c2e33e234fd3c5aba760f866a"}))}};a.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}"}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6480],{6480:(n,e,t)=>{t.r(e),t.d(e,{kol_alert:()=>a});var o=t(1290),i=t(4957);const a=class{constructor(n){(0,o.r)(this,n),this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=0,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:0}}render(){return(0,o.h)(i.b,{key:"2864ce68b908fefb6e43f8ab8d255b67060d5999",_alert:this._alert,_hasCloser:this._hasCloser,_label:this._label,_level:this._level,_on:this._on,_type:this._type,_variant:this._variant},(0,o.h)("slot",{key:"d6ac5ace725340adf1202221172d0f9200bd8bd9"}))}};a.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    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-alert {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}"}}}]);

package/dist/6577.js

@@ -1,2 +1,2 @@
 /*! For license information please see 6577.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6577],{6577:(n,e,t)=>{t.r(e),t.d(e,{kol_breadcrumb:()=>c});var a=t(6783),i=t(1820),o=t(5606),l=t(7662),s=t(5800),r=t(1074);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%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-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}"}},1074:(n,e,t)=>{t.d(e,{a:()=>h,b:()=>s,c:()=>r,h:()=>i,v:()=>d});var a=t(5800);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},1820:(n,e,t)=>{t.d(e,{a:()=>o,r:()=>l});var a=t(1732);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)}},5606:(n,e,t)=>{t.d(e,{w:()=>i});var a=t(5800);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)}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6577],{6577:(n,e,t)=>{t.r(e),t.d(e,{kol_breadcrumb:()=>c});var a=t(1290),i=t(1820),o=t(5606),l=t(4957),s=t(5800),r=t(1074);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%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-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}"}},1074:(n,e,t)=>{t.d(e,{a:()=>h,b:()=>s,c:()=>r,h:()=>i,v:()=>d});var a=t(5800);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},1820:(n,e,t)=>{t.d(e,{a:()=>o,r:()=>l});var a=t(1732);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)}},5606:(n,e,t)=>{t.d(e,{w:()=>i});var a=t(5800);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)}}}]);

package/dist/6983.js

@@ -1,2 +1,2 @@
 /*! For license information please see 6983.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6983],{9060:(n,e,t)=>{function i(n){var e,t,a="";if("string"==typeof n||"number"==typeof n)a+=n;else if("object"==typeof n)if(Array.isArray(n)){var o=n.length;for(e=0;e<o;e++)n[e]&&(t=i(n[e]))&&(a&&(a+=" "),a+=t)}else for(t in n)n[t]&&(a&&(a+=" "),a+=t);return a}function a(){for(var n,e,t=0,a="",o=arguments.length;t<o;t++)(n=arguments[t])&&(e=i(n))&&(a&&(a+=" "),a+=e);return a}t.d(e,{c:()=>a})},6985:(n,e,t)=>{t.d(e,{v:()=>a});var i=t(5800);const a=(n,e,t={})=>{(0,i.b)(n,"_hideLabel",e,t)}},3584:(n,e,t)=>{t.d(e,{t:()=>o});var i=t(8461),a=t(5687);let o=(n,e)=>{var t;return(null!==(t=(0,i.g)())&&void 0!==t?t:(0,i.i)("de")).translate(n,e)};"test"===a.p&&(o=n=>n)},6983:(n,e,t)=>{t.r(e),t.d(e,{kol_nav:()=>p});var i=t(6783),a=t(3584),o=t(1820),l=t(5606),s=t(7662),r=t(9060),d=t(5800),h=t(6985),c=t(1074);const p=class{constructor(n){(0,i.r)(this,n),this.handleToggleExpansionClick=n=>{n&&(this.state._expandedChildren.includes(n)?this.collapseChildren(n):this.expandChildren(n))},this.linkList=n=>(0,i.h)("ul",{class:(0,r.c)("kol-nav__list",{"kol-nav__list--nested":n.deep>0,"kol-nav__list--horizontal":0===n.deep&&"horizontal"===n.orientation,"kol-nav__list--vertical":0!==n.deep||"vertical"===n.orientation}),"data-deep":n.deep},n.links.map(((e,t)=>this.li(n.collapsible,n.hideLabel,n.deep,t,e,n.orientation)))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_orientation:"vertical",_expandedChildren:[]}}expandChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[...this.state._expandedChildren,n]})}collapseChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:this.state._expandedChildren.filter((e=>e!=n))})}entry(n,e,t,a,o){const l=this.state._hasIconsWhenExpanded||this.state._hideLabel?a._icons||(this.state._hideLabel?"codicon codicon-symbol-method":void 0):void 0;return(0,i.h)("div",{class:"kol-nav__entry-wrapper"},"string"==typeof a._href?(0,i.h)(s.f,Object.assign({class:"kol-nav__entry kol-nav__entry--link"},a,{_hideLabel:e,_icons:l})):(0,i.h)(s.a,{class:"kol-nav__entry kol-nav__entry--button",_label:a._label,_hideLabel:e,_icons:l,_on:{onClick:(n,e)=>{var t,i;void 0===(t=a)._href&&"function"==typeof(null===(i=t._on)||void 0===i?void 0:i.onClick)&&"function"==typeof a._on.onClick?a._on.onClick(n,e):this.handleToggleExpansionClick(a._children)}}}),t?this.expandButton(n,a,o):"")}expandButton(n,e,t){return(0,i.h)(s.a,{class:(0,r.c)("kol-nav__expand-button",{"kol-nav__expand-button--expanded":t}),_ariaExpanded:t,_disabled:!n,_icons:"codicon codicon-"+(t?"remove":"add"),_hideLabel:!0,_label:`${t?(0,a.t)("kol-nav-label-close",{placeholders:{label:e._label}}):(0,a.t)("kol-nav-label-open",{placeholders:{label:e._label}})}`,_on:{onClick:()=>this.handleToggleExpansionClick(e._children)}})}li(n,e,t,a,o,l){const s=!!o._active,d=Array.isArray(o._children)&&o._children.length>0,h=Boolean(o._children&&this.state._expandedChildren.includes(o._children));return(0,i.h)("li",{class:(0,r.c)("kol-nav__list-item",{"kol-nav__list-item--active":s,"kol-nav__list-item--expanded":h,"kol-nav__list-item--has-children":d}),key:a},this.entry(n,e,d,o,h),h&&(0,i.h)(this.linkList,{collapsible:n,hideLabel:e,deep:t+1,links:o._children||[],orientation:l}))}initializeExpandedChildren(){const n=e=>{if(e._active)return e._children&&this.expandChildren(e._children),!0;if(e._children)for(const t of e._children)if(n(t))return this.expandChildren(e._children),!0;return!1};this.state._links.forEach(n)}render(){let n=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(n=!1,(0,d.l)("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const e=!0===this.state._collapsible,t=!0===this.state._hideLabel,o=this.state._orientation;return(0,i.h)("div",{key:"cfbe64daec9896d7ff1c5f56fd867e2adab579d5",class:(0,r.c)("kol-nav",`kol-nav--${o}`,{"kol-nav--is-compact":this.state._hideLabel})},(0,i.h)("nav",{key:"82c17d35f3424eb239176fae6da4090a647f8fe4",class:"kol-nav__navigation","aria-label":this.state._label,id:"nav"},(0,i.h)(this.linkList,{key:"da5b3a23c215608d7f391ebfde2f24f8a86e6d72",collapsible:e,hideLabel:t,deep:0,links:this.state._links,orientation:o})),n&&(0,i.h)("div",{key:"57e94f3af9250c43d340a9657cac977842c3b49b",class:"kol-nav__compact"},(0,i.h)(s.i,{key:"001bf20dee912e10e3236d3ba85690118588a015",_ariaControls:"nav",_ariaExpanded:!t,_icons:t?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:(0,a.t)(t?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_variant:"ghost"})))}validateCollapsible(n){((n,e)=>{(0,d.b)(n,"_collapsible",e)})(this,n)}validateHasCompactButton(n){((n,e)=>{(0,d.b)(n,"_hasCompactButton",e)})(this,n)}validateHasIconsWhenExpanded(n){((n,e)=>{(0,d.b)(n,"_hasIconsWhenExpanded",e)})(this,n)}validateHideLabel(n){(0,h.v)(this,n)}validateLabel(n,e,t=!1){t||(0,o.r)(this.state._label),(0,c.v)(this,n,{required:!0}),(0,d.e)(n),(0,o.a)(this.state._label)}validateLinks(n){(0,l.w)("KolNav",this,n),(0,d.j)("[KolNav] The navigation structure is not yet validated recursively.")}validateOrientation(n){(0,d.w)(this,"_orientation",(n=>"horizontal"===n||"vertical"===n),new Set(["Orientation {horizontal, vertical}"]),n,{defaultValue:"vertical"})}componentWillLoad(){this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.validateOrientation(this._orientation),this.initializeExpandedChildren()}disconnectedCallback(){(0,o.r)(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}};p.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-nav {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: grid;\n    place-items: center;\n  }\n  .kol-nav--horizontal {\n    width: 100%;\n  }\n  .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n    width: 100%;\n  }\n  .kol-nav__list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-nav__list--vertical {\n    flex-direction: column;\n  }\n  .kol-nav__list--horizontal {\n    flex-wrap: wrap;\n  }\n  .kol-nav__entry-wrapper {\n    display: flex;\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n}"}},1074:(n,e,t)=>{t.d(e,{a:()=>c,b:()=>s,c:()=>r,h:()=>a,v:()=>h});var i=t(5800);const a=[0,1,2,3,4,5,6],o=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(o))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const d=new Set(["string"]),h=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),d,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,a,o)=>{var l,d;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(e,t,a,o)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,i.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},c=h},5687:(n,e,t)=>{t.d(e,{b:()=>l,h:()=>a,p:()=>i,s:()=>o});let i="development";try{i="production"}catch(n){i="production"}const a=(n,e,t)=>{if(n&&e&&"string"==typeof t){const i=n.querySelector(`[slot="${t}"]`);i&&e.appendChild(i)}},o=n=>""===n,l=(n,e)=>n||e||""},1820:(n,e,t)=>{t.d(e,{a:()=>o,r:()=>l});var i=t(1732);const a=new Set;function o(n){a.has(n)?i.L.error(`There already is a nav element with the label "${n}"`,{forceLog:!0}):a.add(n)}function l(n){a.delete(n)}},5606:(n,e,t)=>{t.d(e,{w:()=>a});var i=t(5800);const a=(n,e,t)=>{(0,i.g)(e,"_links",(n=>"object"==typeof n&&("string"==typeof n._href||"string"==typeof n._label)),t),(0,i.h)(n,e.state._links.length)}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6983],{9060:(n,e,t)=>{function i(n){var e,t,a="";if("string"==typeof n||"number"==typeof n)a+=n;else if("object"==typeof n)if(Array.isArray(n)){var o=n.length;for(e=0;e<o;e++)n[e]&&(t=i(n[e]))&&(a&&(a+=" "),a+=t)}else for(t in n)n[t]&&(a&&(a+=" "),a+=t);return a}function a(){for(var n,e,t=0,a="",o=arguments.length;t<o;t++)(n=arguments[t])&&(e=i(n))&&(a&&(a+=" "),a+=e);return a}t.d(e,{c:()=>a})},6985:(n,e,t)=>{t.d(e,{v:()=>a});var i=t(5800);const a=(n,e,t={})=>{(0,i.b)(n,"_hideLabel",e,t)}},3180:(n,e,t)=>{t.d(e,{t:()=>o});var i=t(4216),a=t(5687);let o=(n,e)=>{var t;return(null!==(t=(0,i.g)())&&void 0!==t?t:(0,i.i)("de")).translate(n,e)};"test"===a.p&&(o=n=>n)},6983:(n,e,t)=>{t.r(e),t.d(e,{kol_nav:()=>p});var i=t(1290),a=t(3180),o=t(1820),l=t(5606),s=t(4957),r=t(9060),d=t(5800),h=t(6985),c=t(1074);const p=class{constructor(n){(0,i.r)(this,n),this.handleToggleExpansionClick=n=>{n&&(this.state._expandedChildren.includes(n)?this.collapseChildren(n):this.expandChildren(n))},this.linkList=n=>(0,i.h)("ul",{class:(0,r.c)("kol-nav__list",{"kol-nav__list--nested":n.deep>0,"kol-nav__list--horizontal":0===n.deep&&"horizontal"===n.orientation,"kol-nav__list--vertical":0!==n.deep||"vertical"===n.orientation}),"data-deep":n.deep},n.links.map(((e,t)=>this.li(n.collapsible,n.hideLabel,n.deep,t,e,n.orientation)))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_orientation:"vertical",_expandedChildren:[]}}expandChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[...this.state._expandedChildren,n]})}collapseChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:this.state._expandedChildren.filter((e=>e!=n))})}entry(n,e,t,a,o){const l=this.state._hasIconsWhenExpanded||this.state._hideLabel?a._icons||(this.state._hideLabel?"codicon codicon-symbol-method":void 0):void 0;return(0,i.h)("div",{class:"kol-nav__entry-wrapper"},"string"==typeof a._href?(0,i.h)(s.f,Object.assign({class:"kol-nav__entry kol-nav__entry--link"},a,{_hideLabel:e,_icons:l})):(0,i.h)(s.a,{class:"kol-nav__entry kol-nav__entry--button",_label:a._label,_hideLabel:e,_icons:l,_on:{onClick:(n,e)=>{var t,i;void 0===(t=a)._href&&"function"==typeof(null===(i=t._on)||void 0===i?void 0:i.onClick)&&"function"==typeof a._on.onClick?a._on.onClick(n,e):this.handleToggleExpansionClick(a._children)}}}),t?this.expandButton(n,a,o):"")}expandButton(n,e,t){return(0,i.h)(s.a,{class:(0,r.c)("kol-nav__expand-button",{"kol-nav__expand-button--expanded":t}),_ariaExpanded:t,_disabled:!n,_icons:"codicon codicon-"+(t?"remove":"add"),_hideLabel:!0,_label:`${t?(0,a.t)("kol-nav-label-close",{placeholders:{label:e._label}}):(0,a.t)("kol-nav-label-open",{placeholders:{label:e._label}})}`,_on:{onClick:()=>this.handleToggleExpansionClick(e._children)}})}li(n,e,t,a,o,l){const s=!!o._active,d=Array.isArray(o._children)&&o._children.length>0,h=Boolean(o._children&&this.state._expandedChildren.includes(o._children));return(0,i.h)("li",{class:(0,r.c)("kol-nav__list-item",{"kol-nav__list-item--active":s,"kol-nav__list-item--expanded":h,"kol-nav__list-item--has-children":d}),key:a},this.entry(n,e,d,o,h),h&&(0,i.h)(this.linkList,{collapsible:n,hideLabel:e,deep:t+1,links:o._children||[],orientation:l}))}initializeExpandedChildren(){const n=e=>{if(e._active)return e._children&&this.expandChildren(e._children),!0;if(e._children)for(const t of e._children)if(n(t))return this.expandChildren(e._children),!0;return!1};this.state._links.forEach(n)}render(){let n=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(n=!1,(0,d.l)("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const e=!0===this.state._collapsible,t=!0===this.state._hideLabel,o=this.state._orientation;return(0,i.h)("div",{key:"d3dd34dbb67e713f5b4f8cc7118c611e07a4f6c6",class:(0,r.c)("kol-nav",`kol-nav--${o}`,{"kol-nav--is-compact":this.state._hideLabel})},(0,i.h)("nav",{key:"af9e5118faba2aa004860f167673397982bcebe0",class:"kol-nav__navigation","aria-label":this.state._label,id:"nav"},(0,i.h)(this.linkList,{key:"39bbc13a655265fc7c428505738a1b8512a4610d",collapsible:e,hideLabel:t,deep:0,links:this.state._links,orientation:o})),n&&(0,i.h)("div",{key:"347dbc8e6225d6420d7189f4436b172bb4461aa9",class:"kol-nav__compact"},(0,i.h)(s.i,{key:"0d71a721a6c5aea5eeb4b69bbf6b0073339deb50",_ariaControls:"nav",_ariaExpanded:!t,_icons:t?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:(0,a.t)(t?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_variant:"ghost"})))}validateCollapsible(n){((n,e)=>{(0,d.b)(n,"_collapsible",e)})(this,n)}validateHasCompactButton(n){((n,e)=>{(0,d.b)(n,"_hasCompactButton",e)})(this,n)}validateHasIconsWhenExpanded(n){((n,e)=>{(0,d.b)(n,"_hasIconsWhenExpanded",e)})(this,n)}validateHideLabel(n){(0,h.v)(this,n)}validateLabel(n,e,t=!1){t||(0,o.r)(this.state._label),(0,c.v)(this,n,{required:!0}),(0,d.e)(n),(0,o.a)(this.state._label)}validateLinks(n){(0,l.w)("KolNav",this,n),(0,d.j)("[KolNav] The navigation structure is not yet validated recursively.")}validateOrientation(n){(0,d.w)(this,"_orientation",(n=>"horizontal"===n||"vertical"===n),new Set(["Orientation {horizontal, vertical}"]),n,{defaultValue:"vertical"})}componentWillLoad(){this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.validateOrientation(this._orientation),this.initializeExpandedChildren()}disconnectedCallback(){(0,o.r)(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}};p.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    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-nav {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: grid;\n    place-items: center;\n  }\n  .kol-nav--horizontal {\n    width: 100%;\n  }\n  .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n    width: 100%;\n  }\n  .kol-nav__list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-nav__list--vertical {\n    flex-direction: column;\n  }\n  .kol-nav__list--horizontal {\n    flex-wrap: wrap;\n  }\n  .kol-nav__entry-wrapper {\n    display: flex;\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n}"}},1074:(n,e,t)=>{t.d(e,{a:()=>c,b:()=>s,c:()=>r,h:()=>a,v:()=>h});var i=t(5800);const a=[0,1,2,3,4,5,6],o=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(o))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const d=new Set(["string"]),h=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),d,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,a,o)=>{var l,d;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(e,t,a,o)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,i.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},c=h},5687:(n,e,t)=>{t.d(e,{b:()=>l,h:()=>a,p:()=>i,s:()=>o});let i="development";try{i="production"}catch(n){i="production"}const a=(n,e,t)=>{if(n&&e&&"string"==typeof t){const i=n.querySelector(`[slot="${t}"]`);i&&e.appendChild(i)}},o=n=>""===n,l=(n,e)=>n||e||""},1820:(n,e,t)=>{t.d(e,{a:()=>o,r:()=>l});var i=t(1732);const a=new Set;function o(n){a.has(n)?i.L.error(`There already is a nav element with the label "${n}"`,{forceLog:!0}):a.add(n)}function l(n){a.delete(n)}},5606:(n,e,t)=>{t.d(e,{w:()=>a});var i=t(5800);const a=(n,e,t)=>{(0,i.g)(e,"_links",(n=>"object"==typeof n&&("string"==typeof n._href||"string"==typeof n._label)),t),(0,i.h)(n,e.state._links.length)}}}]);

package/dist/7084.js

@@ -1,2 +1,2 @@
 /*! For license information please see 7084.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[7084],{7084:(n,e,t)=>{t.r(e),t.d(e,{kol_tree:()=>a});var i=t(6783),o=t(7662);const a=class{constructor(n){(0,i.r)(this,n),this._label=void 0}render(){return(0,i.h)(o.n,{key:"69fcda89930476d36e84516cc64cc7eebf1094db",_label:this._label},(0,i.h)("slot",{key:"5259ea6f1eb1fb6f3ed8b8a64e7a442f27e4abce"}))}};a.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tree {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tree__treeview-navigation {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree:focus-within {\n    outline: calc(1rem / var(--kolibri-root-font-size, 16)) solid;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n}"}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[7084],{7084:(n,e,t)=>{t.r(e),t.d(e,{kol_tree:()=>a});var i=t(1290),o=t(4957);const a=class{constructor(n){(0,i.r)(this,n),this._label=void 0}render(){return(0,i.h)(o.n,{key:"488c1ec5aa83a5436a0fc47df28c29ab0c27ec70",_label:this._label},(0,i.h)("slot",{key:"a8f2a7e8bdb0be1e94e5814d6ec48890773482c0"}))}};a.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tree {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tree__treeview-navigation {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}"}}}]);

package/dist/7225.js

@@ -1,2 +1,2 @@
 /*! For license information please see 7225.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[7225],{3661:(e,t,n)=>{n.d(t,{C:()=>r,a:()=>c,b:()=>d,g:()=>l});var i=n(6783),o=n(7662),s=n(3584),a=n(9060);const l=e=>{var t,n;const i=Boolean("error"===(null===(t=e._msg)||void 0===t?void 0:t._type)&&e._msg._description&&(null===(n=e._msg._description)||void 0===n?void 0:n.length)>0)&&!0===e._touched,o="string"==typeof e._hint&&e._hint.length>0,s=[];return!0===i&&s.push(`${e._id}-error`),!0===o&&s.push(`${e._id}-hint`),{hasError:i,hasHint:o,ariaDescribedBy:s}},r=({onClick:e,disabled:t})=>(0,i.h)("button",{tabindex:"-1",class:"kol-custom-suggestions-toggle",onClick:e,disabled:t},(0,i.h)(o.d,{_icons:"codicon codicon-triangle-down",_label:(0,s.t)("kol-dropdown")})),d=({index:e,ref:t,selected:n,onClick:o,onMouseOver:s,onFocus:a,onKeyDown:l,option:r})=>(0,i.h)("li",{id:`option-${e}`,key:`-${e}`,ref:t,"data-index":e,tabIndex:-1,role:"option","aria-selected":n?"true":void 0,onClick:o,onMouseOver:s,onFocus:a,class:"kol-custom-suggestions-option",onKeyDown:l},r),c=({blockSuggestionMouseOver:e,onKeyDown:t},n)=>(0,i.h)("ul",{role:"listbox",class:(0,a.c)("kol-custom-suggestions-options-group",{"kol-custom-suggestions-options-group--cursor-hidden":e}),onKeyDown:t},n)},375:(e,t,n)=>{n.d(t,{K:()=>s});var i=n(6783),o=n(7662);const s=e=>{const{class:t,style:n,icons:s,label:a,onClick:l}=e;return(0,i.h)(o.d,{class:t,style:n,onClick:l,_icons:s,_label:a})}},3163:(e,t,n)=>{n.d(t,{K:()=>r});var i=n(4600),o=n(6783),s=n(9060),a=n(8625),l=n(5650);const r=e=>{const{class:t,msg:n,required:r,disabled:d,touched:c,readonly:h,ariaDescribedBy:u,hideLabel:p,label:_,suggestions:b,value:f}=e,v=(0,i._)(e,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),g=(0,l.c)(n,c),m={"kol-input--disabled":Boolean(d),"kol-input--required":Boolean(r),"kol-input--touched":Boolean(c),"kol-input--readonly":Boolean(h),[`kol-input--${(null==n?void 0:n.type)||"error"}`]:g},y=Object.assign(Object.assign({class:(0,s.c)("kol-input",m,t),required:r,disabled:d,readonly:h,type:"text",list:b?`${v.id}-list`:void 0},(0,a.d)({ariaDescribedBy:u,hideLabel:p,label:_})),v);return(0,o.h)(o.F,null,(0,o.h)("input",Object.assign({},y,{value:f})),b)}},7146:(e,t,n)=>{n.d(t,{K:()=>d,a:()=>r});var i=n(4600),o=n(6783),s=n(8625),a=n(3163),l=n(5650);const r=e=>{var{id:t,suggestions:n}=e,s=(0,i._)(e,["id","suggestions"]);return n?(0,o.h)("datalist",Object.assign({id:`${t}-list`},s),n.map((e=>(0,o.h)("option",{value:e})))):null},d=e=>{var{state:t,customSuggestions:n}=e,d=(0,i._)(e,["state","customSuggestions"]);return(0,o.h)(a.K,Object.assign({},function(e,t){const{ariaDescribedBy:n}=(0,s.g)(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:n};return"_type"in e&&(i.type=e._type),"_value"in e&&(i.value=e._value),"_required"in e&&(i.required=e._required),"_maxLength"in e&&(i.maxlength=e._maxLength),"_placeholder"in e&&(i.placeholder=e._placeholder),"_autoComplete"in e&&(i.autoComplete=e._autoComplete),"_spellCheck"in e&&(i.spellcheck=e._spellCheck),"_pattern"in e&&(i.pattern=e._pattern),"_readOnly"in e&&(i.readonly=e._readOnly),"_min"in e&&(i.min=e._min),"_max"in e&&(i.max=e._max),"_step"in e&&(i.step=e._step),"_multiple"in e&&(i.multiple=e._multiple),"_checked"in e&&(i.checked=e._checked),"_indeterminate"in e&&(i.indeterminate=e._indeterminate),"_touched"in e&&(i.touched=e._touched),"_msg"in e&&(i.msg=(0,l.a)(e._msg)),"_suggestions"in e&&!t&&Array.isArray(e._suggestions)&&e._suggestions.length>0&&(i.suggestions=(0,o.h)(r,{id:e._id,suggestions:e._suggestions})),i}(t,n),d))}},7358:(e,t,n)=>{n.d(t,{I:()=>h,a:()=>u,b:()=>l,f:()=>c,v:()=>r});var i=n(8625),o=n(5800),s=n(1074);const a=e=>{if("object"==typeof e&&null!==e){if("string"==typeof e.label&&e.label.length>0)return e.disabled=!0===e.disabled,e.label=`${e.label}`.trim(),!1===(0,s.b)(e.label,3)&&!1===(0,s.c)(e.label)&&(0,o.a)(`A differing Aria-Label (${e.label}) is not accessible. A differing Aria-Label should consist of at least three readable characters.`),!Array.isArray(e.options)||void 0===e.options.find((e=>!1===a(e)));if("number"==typeof e.label)return!0}return!1},l=(e,t,n={})=>{(0,o.g)(e,"_options",(e=>"object"==typeof e&&null!==e&&"string"==typeof e.label&&e.label.length>0),t,void 0,n)},r=(e,t,n={})=>{(0,o.g)(e,"_options",a,t,void 0,n)},d=["horizontal","vertical"],c=(e,t,n="")=>{t.forEach(((t,i)=>{const o=`${n}-${i}`;"object"==typeof t&&null!==t&&"string"==typeof t.label&&t.label.length>0&&(Array.isArray(t.options)?c(e,t.options,o):e.set(o,t))}))};class h extends i.I{constructor(e,t,n){super(e,t,n),this.component=e}validateRequired(e){((e,t)=>{(0,o.b)(e,"_required",t)})(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateRequired(this.component._required)}}class u extends h{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;Array.isArray(n)&&n.length>0&&(this.keyOptionMap.clear(),c(this.keyOptionMap,n))},this.component=e}validateOrientation(e){(0,o.w)(this.component,"_orientation",(e=>"string"==typeof e&&d.includes(e)),new Set([`Orientation {${d.join(", ")}`]),e,{defaultValue:"vertical"})}validateOptions(e){l(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateValue(e){e=(0,o.m)(e),e=Array.isArray(e)?e[0]:e,(0,o.s)(this.component,"_value",e,{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions})}componentWillLoad(){super.componentWillLoad(),this.validateOrientation(this.component._orientation),this.validateOptions(this.component._options),this.validateValue(this.component._value)}}},5363:(e,t,n)=>{n.d(t,{I:()=>w,K:()=>k,a:()=>y});var i=n(6783),o=n(2587),s=n(665),a=n(4600),l=n(7662),r=n(375),d=n(9060),c=n(5650),h=n(8625),u=n(8973),p=n(5800),_=n(608);const b=(e,t)=>{var{position:n="start",class:o}=e,s=(0,a._)(e,["position","class"]);const l="kol-input-container__adornment",r=`${l}--${n}`;return(0,i.h)("div",Object.assign({class:(0,d.c)(l,r,o)},s),t)};function f(e){return!!e&&(Array.isArray(e)?e.length>0:Boolean(e))}const v=(e,t)=>{var{class:n}=e,o=(0,a._)(e,["class"]);return(0,i.h)("div",Object.assign({class:(0,d.c)("kol-input-container__container",n)},o),t)},g=(e,t)=>{const{class:n,startAdornment:o,endAdornment:s,disabled:l,msg:r,touched:h,containerProps:u,startAdornmentProps:p,endAdornmentProps:_}=e,g=(0,a._)(e,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),m=(0,c.c)(r,h),y={"kol-input-container--disabled":l,[`kol-input-container--${(null==r?void 0:r.type)||"error"}`]:m},k=Object.assign({class:(0,d.c)("kol-input-container",y,n)},g);return f(o)||f(s)?(0,i.h)("div",Object.assign({},k),(0,i.h)(b,Object.assign({},p,{position:"start"}),o),(0,i.h)(v,Object.assign({},u),t),(0,i.h)(b,Object.assign({},_,{position:"end"}),s)):(0,i.h)("div",Object.assign({},k),(0,i.h)(v,Object.assign({},u),t))},m=e=>{const{label:t,icons:n,hideLabel:o,disabled:s,onClick:r}=e,d=(0,a._)(e,["label","icons","hideLabel","disabled","onClick"]);return(0,i.h)(l.a,Object.assign({tabindex:0,_label:t,_disabled:s,_icons:n,_hideLabel:o,_on:{onClick:r}},d))},y=e=>{const{componentName:t="button",label:n,icon:o,onClick:s}=e,l=(0,a._)(e,["componentName","label","icon","onClick"]),d="button"===t?m:r.K;return(0,i.h)(d,Object.assign({label:n||"",hideLabel:!0,icons:`codicon codicon-${o}`,onClick:s},l))},k=({state:e,endAdornment:t},n)=>{const{icons:a,smartButton:l,disabled:r,msg:d,touched:h}=function(e){let t,n;return"_icons"in e&&(t=e._icons),"_smartButton"in e&&(n=e._smartButton),{icons:t,smartButton:n,disabled:e._disabled,msg:(0,c.a)(e._msg),touched:e._touched}}(e);let u=null==a?void 0:a.left;(0,o.i)(u)&&(u={icon:u});let p=null==a?void 0:a.right;(0,o.i)(p)&&(p={icon:p});const _=[],b=[];return t&&(Array.isArray(t)?b.push(...t):b.push(t)),u&&_.push((0,i.h)(y,Object.assign({componentName:"icon"},(0,s.i)(u)?u:{}))),(0,s.i)(l)&&b.push((0,i.h)(y,Object.assign({componentName:"button"},l,{hideLabel:!0,disabled:r}))),p&&b.push((0,i.h)(y,Object.assign({componentName:"icon"},(0,s.i)(p)?p:{}))),(0,i.h)(g,{disabled:r,msg:d,touched:h,startAdornment:_,endAdornment:b},n)},O=(e,t)=>{const n=e;"object"==typeof n&&null!==n&&((0,_.i)(n.right,1)&&(n.right={icon:n.right}),(0,_.i)(n.left,1)&&(n.left={icon:n.left}),t.set("_icons",n))};class w extends h.I{constructor(e,t,n){super(e,t,n),this.component=e}validateIcons(e){(0,p.o)(e,(()=>{try{e=(0,p.p)(e)}catch(e){}(0,p.w)(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&((0,_.i)(e.left,1)||(0,u.i)(e.left)||(0,_.i)(e.right,1)||(0,u.i)(e.right))),new Set(["KoliBriHorizontalIcon"]),e,{hooks:{beforePatch:O},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},8973:(e,t,n)=>{n.d(t,{i:()=>a,v:()=>l});var i=n(5800),o=n(608);const s=(e,t,n)=>{(0,o.b)(n)?e[t]=n:(0,o.i)(n,1)&&(e[t]={icon:n})},a=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,o.a)(e.style))&&(void 0===e.label||(0,o.i)(e.label))&&(0,o.i)(e.icon,1),l=(e,t,n={})=>{(0,i.o)(t,(()=>{var l;try{t=(0,i.p)(t)}catch(e){}(0,i.w)(e,"_icons",(e=>{const t="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||t||(0,o.i)(e,1)||"object"==typeof e&&null!==e&&((0,o.i)(e.left,1)||a(e.left)||(0,o.i)(e.right,1)||a(e.right)||(0,o.i)(e.top,1)||a(e.top)||(0,o.i)(e.bottom,1)||a(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(l=n.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(e,t,i,a)=>{var l,r;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(e,t,i,a)),(e=>{var t,n,i;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(n=e.nextState)||void 0===n?void 0:n.get("_icons");null===(i=e.nextState)||void 0===i||i.set("_icons",(e=>{let t={};return(0,o.i)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(s(t,"top",e.top),s(t,"right",e.right),s(t,"bottom",e.bottom),s(t,"left",e.left)),t})(t))}})(i)}}}))}))}},665:(e,t,n)=>{function i(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}n.d(t,{i:()=>i})},7225:(e,t,n)=>{n.r(t),n.d(t,{kol_single_select:()=>b});var i=n(6783),o=n(7336),s=n(5363),a=n(7358),l=n(5800),r=n(7662),d=n(3661),c=n(3584),h=n(7146),u=n(8625),p=(e,t,n)=>new Promise(((i,o)=>{var s=e=>{try{l(n.next(e))}catch(e){o(e)}},a=e=>{try{l(n.throw(e))}catch(e){o(e)}},l=e=>e.done?i(e.value):Promise.resolve(e.value).then(s,a);l((n=n.apply(e,t)).next())}));class _ extends s.I{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;Array.isArray(n)&&n.length>0&&(this.keyOptionMap.clear(),(0,a.f)(this.keyOptionMap,n))},this.component=e}validateOptions(e){(0,a.b)(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){(0,l.b)(this.component,"_required",e)}validateValue(e){(0,l.i)(this.component,"_value",e)}validatePlaceholder(e){(0,l.i)(this.component,"_placeholder",e)}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder)}}const b=class{getValue(){return p(this,null,(function*(){return this._value}))}kolFocus(){return p(this,null,(function*(){var e;null===(e=this.refInput)||void 0===e||e.focus()}))}onBlur(){var e;Array.isArray(this.state._options)&&this.state._options.length>0&&!this.state._options.some((e=>e.label===this._inputValue))&&(this._inputValue=null===(e=this.state._options.find((e=>e.value===this._value)))||void 0===e?void 0:e.label,this._filteredOptions=[...this.state._options]),this._isOpen=!1}clearSelection(){this.state._disabled||(this._focusedOptionIndex=-1,this._value="",this._inputValue="",this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this._value))}selectOption(e,t){this._value=t.value,this._inputValue=t.label,this.controller.onFacade.onChange(e,t.value),this.controller.onFacade.onInput(e,!1,t.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this._value)}onInput(e){const t=e.target;this._inputValue=t.value,this._isOpen=!0,this.setFilteredOptionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(e.preventDefault(),this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredOptionsByQuery(e){""===(null==e?void 0:e.trim())?this._filteredOptions=[...this.state._options]:Array.isArray(this.state._options)&&this.state._options.length>0&&e.length>0&&(this._filteredOptions=this.state._options.filter((t=>{var n,i;return null===(i=null===(n=t.label)||void 0===n?void 0:n.toLowerCase())||void 0===i?void 0:i.includes(null==e?void 0:e.toLowerCase())})))}moveFocus(e){if(!this._filteredOptions)return;let t=this._focusedOptionIndex+e;t>=this._filteredOptions.length&&(t=0),t<0&&(t=this._filteredOptions.length-1),this._focusedOptionIndex=t,this.focusOption(this._focusedOptionIndex)}focusOption(e){if(this.refOptions){const t=this.refOptions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),n=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex((e=>e.label.toLowerCase().startsWith(t)));"number"==typeof n&&(this._focusedOptionIndex=n,this.focusOption(n))}getFormFieldProps(){return{state:this.state,class:"kol-single-select",tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.refInput)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getInputProps(){const{ariaDescribedBy:e}=(0,d.g)(this.state);return Object.assign(Object.assign({"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,"aria-autocomplete":"both","aria-controls":"listbox","aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,accessKey:this.state._accessKey,autocapitalize:"off",autocorrect:"off",class:"kol-single-select__input",disabled:this.state._disabled,name:this.state._name,placeholder:this.state._placeholder,ref:this.catchRef,required:this.state._required,state:this.state,type:"text",value:this._inputValue},this.controller.onFacade),{onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onInput:this.onInput.bind(this),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)(u.K,Object.assign({key:"a8337d95ef18c12894dc607ff24bfb137b4fc293"},this.getFormFieldProps()),(0,i.h)(s.K,{key:"ca146a5bde07e23d8798ce590426176ec0df463a",state:this.state},(0,i.h)("div",{key:"43e0cef9fef3d9b72dd4b11c9441e3cd69b7b76e",class:"kol-single-select__group"},(0,i.h)(h.K,Object.assign({key:"2825c0ac997cc509f39e8da4c8b818edd0842155"},this.getInputProps())),this._inputValue&&(0,i.h)(r.d,{key:"5b7e670f970674f35e903cc473a520f7e9be4a18",_icons:"codicon codicon-close",_label:(0,c.t)("kol-delete-selection"),onClick:()=>{var e;this.clearSelection(),null===(e=this.refInput)||void 0===e||e.focus()},class:"kol-single-select__delete"}),(0,i.h)(d.C,{key:"2ff836ca1dc8c67711416091d7d8b0119c91871e",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled})),this._isOpen&&!(!0===this.state._disabled)&&(0,i.h)(d.a,{key:"d3038c42215c8bb71745d9aa4f9f8a124541d7b6",blockSuggestionMouseOver:this.blockSuggestionMouseOver,onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0?this._filteredOptions.map(((e,t)=>(0,i.h)(d.b,{index:t,option:e.label,ref:e=>{e&&(this.refOptions[t]=e)},selected:this._value===e.value,onClick:t=>{var n;this.selectOption(t,e),null===(n=this.refInput)||void 0===n||n.focus(),this.toggleListbox(t)},onMouseOver:()=>{this.blockSuggestionMouseOver||(this._focusedOptionIndex=t,this.focusOption(t))},onFocus:()=>{this._focusedOptionIndex=t,this.focusOption(t)},onKeyDown:t=>{var n;"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(t,e),null===(n=this.refInput)||void 0===n||n.focus(),this.toggleListbox(t),t.preventDefault())}}))):(0,i.h)("li",{class:"kol-single-select__no-results-message"},(0,c.t)("kol-no-results-message")," "))))}handleFocusOut(){setTimeout((()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()}),0)}handleWindowBlur(){this.onBlur()}handleKeyDown(e){var t,n;const i=(t,n)=>{var i;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(-1)));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":i(!1);break;case" ":this._isOpen?Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&(this.selectOption(e,this._filteredOptions[this._focusedOptionIndex]),null===(n=this.refInput)||void 0===n||n.focus(),i(!1)):this.toggleListbox(e);break;case"NumpadEnter":case"Enter":this.toggleListbox(e);break;case"Home":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=0,this.focusOption(this._focusedOptionIndex))}));break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=this._filteredOptions?this._filteredOptions.length-1:0,this.focusOption(this._focusedOptionIndex))}));break;case"PageUp":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(-10)));break;case"PageDown":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(10)))}}constructor(e){(0,i.r)(this,e),this.refOptions=[],this.catchRef=e=>{this.refInput=e},this.toggleListbox=e=>{var t;if(null==e||e.preventDefault(),!this.state._disabled&&(this._isOpen=!this._isOpen,this._isOpen)){null===(t=this.refInput)||void 0===t||t.focus();const e=Array.isArray(this._filteredOptions)?this._filteredOptions.findIndex((e=>e.label===this._inputValue)):-1;this._focusedOptionIndex=e>=0?e:0,this.focusOption(this._focusedOptionIndex)}},this._focusedOptionIndex=-1,this._isOpen=!1,this._filteredOptions=[],this._inputValue="",this.blockSuggestionMouseOver=!1,this._accessKey=void 0,this._placeholder=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._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideMsg:!1,_id:`id-${(0,o.n)()}`,_label:"",_options:[]},this.inputHasFocus=!1,this.controller=new _(this,"single-select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validatePlaceholder(e){this.controller.validatePlaceholder(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)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e),this._filteredOptions=e,this.updateInputValue(this._value)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.oldValue=e,this.updateInputValue(e)}handleMouseEvent(){this.blockSuggestionMouseOver=!1}updateInputValue(e){if(Array.isArray(this._options)){const t=this._options.find((t=>t.value===e));this._inputValue=t?t.label:""}}componentWillLoad(){this.refOptions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this.state._options,this.updateInputValue(this._value)}onChange(e){var t,n;this.oldValue!==(null===(t=this.refInput)||void 0===t?void 0:t.value)&&(this.oldValue=null===(n=this.refInput)||void 0===n?void 0:n.value),this._isOpen||this.controller.onFacade.onChange(e,this._value)}onClick(e){this.toggleListbox(e),this.controller.onFacade.onClick(e)}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};b.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-option {\n    cursor: pointer;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-options-group {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-toggle {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}\n@layer kol-component {\n  .kol-single-select__no-results-message {\n    cursor: default;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n  }\n}"}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[7225],{2519:(e,t,n)=>{n.d(t,{C:()=>r,a:()=>c,b:()=>d,g:()=>l});var i=n(1290),o=n(4957),s=n(3180),a=n(9060);const l=e=>{var t,n;const i=Boolean("error"===(null===(t=e._msg)||void 0===t?void 0:t._type)&&e._msg._description&&(null===(n=e._msg._description)||void 0===n?void 0:n.length)>0)&&!0===e._touched,o="string"==typeof e._hint&&e._hint.length>0,s=[];return!0===i&&s.push(`${e._id}-error`),!0===o&&s.push(`${e._id}-hint`),{hasError:i,hasHint:o,ariaDescribedBy:s}},r=({onClick:e,disabled:t})=>(0,i.h)("button",{tabindex:"-1",class:"kol-custom-suggestions-toggle",onClick:e,disabled:t},(0,i.h)(o.d,{_icons:"codicon codicon-triangle-down",_label:(0,s.t)("kol-dropdown")})),d=({index:e,ref:t,selected:n,onClick:o,onMouseOver:s,onFocus:a,onKeyDown:l,option:r})=>(0,i.h)("li",{id:`option-${e}`,key:`-${e}`,ref:t,"data-index":e,tabIndex:-1,role:"option","aria-selected":n?"true":void 0,onClick:o,onMouseOver:s,onFocus:a,class:"kol-custom-suggestions-option",onKeyDown:l},r),c=({blockSuggestionMouseOver:e,onKeyDown:t},n)=>(0,i.h)("ul",{role:"listbox",class:(0,a.c)("kol-custom-suggestions-options-group",{"kol-custom-suggestions-options-group--cursor-hidden":e}),onKeyDown:t},n)},5126:(e,t,n)=>{n.d(t,{K:()=>s});var i=n(1290),o=n(4957);const s=e=>{const{class:t,style:n,icons:s,label:a,onClick:l}=e;return(0,i.h)(o.d,{class:t,style:n,onClick:l,_icons:s,_label:a})}},6884:(e,t,n)=>{n.d(t,{K:()=>r});var i=n(4600),o=n(1290),s=n(9060),a=n(1416),l=n(9732);const r=e=>{const{class:t,msg:n,required:r,disabled:d,touched:c,readonly:h,ariaDescribedBy:u,hideLabel:p,label:b,suggestions:_,value:f}=e,v=(0,i._)(e,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),m=(0,l.c)(n,c),g={"kol-input--disabled":Boolean(d),"kol-input--required":Boolean(r),"kol-input--touched":Boolean(c),"kol-input--readonly":Boolean(h),[`kol-input--${(null==n?void 0:n.type)||"error"}`]:m},y=Object.assign(Object.assign({class:(0,s.c)("kol-input",g,t),required:r,disabled:d,readonly:h,type:"text",list:_?`${v.id}-list`:void 0},(0,a.d)({ariaDescribedBy:u,hideLabel:p,label:b})),v);return(0,o.h)(o.F,null,(0,o.h)("input",Object.assign({},y,{value:f})),_)}},4746:(e,t,n)=>{n.d(t,{K:()=>d,a:()=>r});var i=n(4600),o=n(1290),s=n(1416),a=n(6884),l=n(9732);const r=e=>{var{id:t,suggestions:n}=e,s=(0,i._)(e,["id","suggestions"]);return n?(0,o.h)("datalist",Object.assign({id:`${t}-list`},s),n.map((e=>(0,o.h)("option",{value:e})))):null},d=e=>{var{state:t,customSuggestions:n}=e,d=(0,i._)(e,["state","customSuggestions"]);return(0,o.h)(a.K,Object.assign({},function(e,t){const{ariaDescribedBy:n}=(0,s.g)(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:n};return"_type"in e&&(i.type=e._type),"_value"in e&&(i.value=e._value),"_required"in e&&(i.required=e._required),"_maxLength"in e&&(i.maxlength=e._maxLength),"_placeholder"in e&&(i.placeholder=e._placeholder),"_autoComplete"in e&&(i.autoComplete=e._autoComplete),"_spellCheck"in e&&(i.spellcheck=e._spellCheck),"_pattern"in e&&(i.pattern=e._pattern),"_readOnly"in e&&(i.readonly=e._readOnly),"_min"in e&&(i.min=e._min),"_max"in e&&(i.max=e._max),"_step"in e&&(i.step=e._step),"_multiple"in e&&(i.multiple=e._multiple),"_checked"in e&&(i.checked=e._checked),"_indeterminate"in e&&(i.indeterminate=e._indeterminate),"_touched"in e&&(i.touched=e._touched),"_msg"in e&&(i.msg=(0,l.a)(e._msg)),"_suggestions"in e&&!t&&Array.isArray(e._suggestions)&&e._suggestions.length>0&&(i.suggestions=(0,o.h)(r,{id:e._id,suggestions:e._suggestions})),i}(t,n),d))}},8543:(e,t,n)=>{n.d(t,{I:()=>h,a:()=>u,b:()=>l,f:()=>c,v:()=>r});var i=n(1416),o=n(5800),s=n(1074);const a=e=>{if("object"==typeof e&&null!==e){if("string"==typeof e.label&&e.label.length>0)return e.disabled=!0===e.disabled,e.label=`${e.label}`.trim(),!1===(0,s.b)(e.label,3)&&!1===(0,s.c)(e.label)&&(0,o.a)(`A differing Aria-Label (${e.label}) is not accessible. A differing Aria-Label should consist of at least three readable characters.`),!Array.isArray(e.options)||void 0===e.options.find((e=>!1===a(e)));if("number"==typeof e.label)return!0}return!1},l=(e,t,n={})=>{(0,o.g)(e,"_options",(e=>"object"==typeof e&&null!==e&&"string"==typeof e.label&&e.label.length>0),t,void 0,n)},r=(e,t,n={})=>{(0,o.g)(e,"_options",a,t,void 0,n)},d=["horizontal","vertical"],c=(e,t,n="")=>{t.forEach(((t,i)=>{const o=`${n}-${i}`;"object"==typeof t&&null!==t&&"string"==typeof t.label&&t.label.length>0&&(Array.isArray(t.options)?c(e,t.options,o):e.set(o,t))}))};class h extends i.I{constructor(e,t,n){super(e,t,n),this.component=e}validateRequired(e){((e,t)=>{(0,o.b)(e,"_required",t)})(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateRequired(this.component._required)}}class u extends h{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;Array.isArray(n)&&n.length>0&&(this.keyOptionMap.clear(),c(this.keyOptionMap,n))},this.component=e}validateOrientation(e){(0,o.w)(this.component,"_orientation",(e=>"string"==typeof e&&d.includes(e)),new Set([`Orientation {${d.join(", ")}`]),e,{defaultValue:"vertical"})}validateOptions(e){l(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateValue(e){e=(0,o.m)(e),e=Array.isArray(e)?e[0]:e,(0,o.s)(this.component,"_value",e,{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions})}componentWillLoad(){super.componentWillLoad(),this.validateOrientation(this.component._orientation),this.validateOptions(this.component._options),this.validateValue(this.component._value)}}},7617:(e,t,n)=>{n.d(t,{I:()=>w,K:()=>k,a:()=>y});var i=n(1290),o=n(3426),s=n(665),a=n(4600),l=n(4957),r=n(5126),d=n(9060),c=n(9732),h=n(1416),u=n(8973),p=n(5800),b=n(608);const _=(e,t)=>{var{position:n="start",class:o}=e,s=(0,a._)(e,["position","class"]);const l="kol-input-container__adornment",r=`${l}--${n}`;return(0,i.h)("div",Object.assign({class:(0,d.c)(l,r,o)},s),t)};function f(e){return!!e&&(Array.isArray(e)?e.length>0:Boolean(e))}const v=(e,t)=>{var{class:n}=e,o=(0,a._)(e,["class"]);return(0,i.h)("div",Object.assign({class:(0,d.c)("kol-input-container__container",n)},o),t)},m=(e,t)=>{const{class:n,startAdornment:o,endAdornment:s,disabled:l,msg:r,touched:h,containerProps:u,startAdornmentProps:p,endAdornmentProps:b}=e,m=(0,a._)(e,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),g=(0,c.c)(r,h),y={"kol-input-container--disabled":l,[`kol-input-container--${(null==r?void 0:r.type)||"error"}`]:g},k=Object.assign({class:(0,d.c)("kol-input-container",y,n)},m);return f(o)||f(s)?(0,i.h)("div",Object.assign({},k),(0,i.h)(_,Object.assign({},p,{position:"start"}),o),(0,i.h)(v,Object.assign({},u),t),(0,i.h)(_,Object.assign({},b,{position:"end"}),s)):(0,i.h)("div",Object.assign({},k),(0,i.h)(v,Object.assign({},u),t))},g=e=>{const{label:t,icons:n,hideLabel:o,disabled:s,onClick:r}=e,d=(0,a._)(e,["label","icons","hideLabel","disabled","onClick"]);return(0,i.h)(l.a,Object.assign({tabindex:0,_label:t,_disabled:s,_icons:n,_hideLabel:o,_on:{onClick:r}},d))},y=e=>{const{componentName:t="button",label:n,icon:o,onClick:s}=e,l=(0,a._)(e,["componentName","label","icon","onClick"]),d="button"===t?g:r.K;return(0,i.h)(d,Object.assign({label:n||"",hideLabel:!0,icons:`codicon codicon-${o}`,onClick:s},l))},k=({state:e,endAdornment:t},n)=>{const{icons:a,smartButton:l,disabled:r,msg:d,touched:h}=function(e){let t,n;return"_icons"in e&&(t=e._icons),"_smartButton"in e&&(n=e._smartButton),{icons:t,smartButton:n,disabled:e._disabled,msg:(0,c.a)(e._msg),touched:e._touched}}(e);let u=null==a?void 0:a.left;(0,o.i)(u)&&(u={icon:u});let p=null==a?void 0:a.right;(0,o.i)(p)&&(p={icon:p});const b=[],_=[];return t&&(Array.isArray(t)?_.push(...t):_.push(t)),u&&b.push((0,i.h)(y,Object.assign({componentName:"icon"},(0,s.i)(u)?u:{}))),(0,s.i)(l)&&_.push((0,i.h)(y,Object.assign({componentName:"button"},l,{hideLabel:!0,disabled:r}))),p&&_.push((0,i.h)(y,Object.assign({componentName:"icon"},(0,s.i)(p)?p:{}))),(0,i.h)(m,{disabled:r,msg:d,touched:h,startAdornment:b,endAdornment:_},n)},O=(e,t)=>{const n=e;"object"==typeof n&&null!==n&&((0,b.i)(n.right,1)&&(n.right={icon:n.right}),(0,b.i)(n.left,1)&&(n.left={icon:n.left}),t.set("_icons",n))};class w extends h.I{constructor(e,t,n){super(e,t,n),this.component=e}validateIcons(e){(0,p.o)(e,(()=>{try{e=(0,p.p)(e)}catch(e){}(0,p.w)(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&((0,b.i)(e.left,1)||(0,u.i)(e.left)||(0,b.i)(e.right,1)||(0,u.i)(e.right))),new Set(["KoliBriHorizontalIcon"]),e,{hooks:{beforePatch:O},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},8973:(e,t,n)=>{n.d(t,{i:()=>a,v:()=>l});var i=n(5800),o=n(608);const s=(e,t,n)=>{(0,o.b)(n)?e[t]=n:(0,o.i)(n,1)&&(e[t]={icon:n})},a=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,o.a)(e.style))&&(void 0===e.label||(0,o.i)(e.label))&&(0,o.i)(e.icon,1),l=(e,t,n={})=>{(0,i.o)(t,(()=>{var l;try{t=(0,i.p)(t)}catch(e){}(0,i.w)(e,"_icons",(e=>{const t="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||t||(0,o.i)(e,1)||"object"==typeof e&&null!==e&&((0,o.i)(e.left,1)||a(e.left)||(0,o.i)(e.right,1)||a(e.right)||(0,o.i)(e.top,1)||a(e.top)||(0,o.i)(e.bottom,1)||a(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(l=n.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(e,t,i,a)=>{var l,r;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(e,t,i,a)),(e=>{var t,n,i;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(n=e.nextState)||void 0===n?void 0:n.get("_icons");null===(i=e.nextState)||void 0===i||i.set("_icons",(e=>{let t={};return(0,o.i)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(s(t,"top",e.top),s(t,"right",e.right),s(t,"bottom",e.bottom),s(t,"left",e.left)),t})(t))}})(i)}}}))}))}},665:(e,t,n)=>{function i(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}n.d(t,{i:()=>i})},7225:(e,t,n)=>{n.r(t),n.d(t,{kol_single_select:()=>_});var i=n(1290),o=n(526),s=n(7617),a=n(8543),l=n(5800),r=n(4957),d=n(2519),c=n(3180),h=n(4746),u=n(1416),p=(e,t,n)=>new Promise(((i,o)=>{var s=e=>{try{l(n.next(e))}catch(e){o(e)}},a=e=>{try{l(n.throw(e))}catch(e){o(e)}},l=e=>e.done?i(e.value):Promise.resolve(e.value).then(s,a);l((n=n.apply(e,t)).next())}));class b extends s.I{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;Array.isArray(n)&&n.length>0&&(this.keyOptionMap.clear(),(0,a.f)(this.keyOptionMap,n))},this.component=e}validateOptions(e){(0,a.b)(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){(0,l.b)(this.component,"_required",e)}validateValue(e){(0,l.w)(this.component,"_value",(e=>void 0!==e),new Set(["StencilUnknown"]),e)}validatePlaceholder(e){(0,l.i)(this.component,"_placeholder",e)}validateHideClearButton(e){(0,l.b)(this.component,"_hideClearButton",e)}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder),this.validateHideClearButton(this.component._hideClearButton)}}const _=class{getValue(){return p(this,null,(function*(){return this._value}))}kolFocus(){return p(this,null,(function*(){var e;null===(e=this.refInput)||void 0===e||e.focus()}))}onBlur(){var e;Array.isArray(this.state._options)&&this.state._options.length>0&&!this.state._options.some((e=>e.label===this._inputValue))&&(this._inputValue=null===(e=this.state._options.find((e=>e.value===this._value)))||void 0===e?void 0:e.label,this._filteredOptions=[...this.state._options]),this._isOpen=!1}clearSelection(){if(!this.state._disabled){const e="";this._focusedOptionIndex=-1,this._value=e,this._inputValue=e,this._filteredOptions=[...this.state._options],this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:{name:this.state._name,value:e}}),!0,e),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:{name:this.state._name,value:e}}),e)}}selectOption(e){this._value=e.value,this._inputValue=e.label,this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:{name:this.state._name,value:e.value}}),!1,e.value),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:{name:this.state._name,value:e.value}}),e.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this._value)}onInput(e){const t=e.target;this._inputValue=t.value,this._isOpen=!0,this.setFilteredOptionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(e.preventDefault(),this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredOptionsByQuery(e){""===(null==e?void 0:e.trim())?this._filteredOptions=[...this.state._options]:Array.isArray(this.state._options)&&this.state._options.length>0&&e.length>0&&(this._filteredOptions=this.state._options.filter((t=>{var n,i;return null===(i=null===(n=t.label)||void 0===n?void 0:n.toLowerCase())||void 0===i?void 0:i.includes(null==e?void 0:e.toLowerCase())})))}moveFocus(e){if(!this._filteredOptions)return;let t=this._focusedOptionIndex+e;t>=this._filteredOptions.length&&(t=0),t<0&&(t=this._filteredOptions.length-1),this._focusedOptionIndex=t,this.focusOption(this._focusedOptionIndex)}focusOption(e){if(this.refOptions){const t=this.refOptions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),n=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex((e=>e.label.toLowerCase().startsWith(t)));"number"==typeof n&&(this._focusedOptionIndex=n,this.focusOption(n))}getFormFieldProps(){return{state:this.state,class:"kol-single-select",tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.refInput)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getInputProps(){const{ariaDescribedBy:e}=(0,d.g)(this.state);return Object.assign(Object.assign({"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,"aria-autocomplete":"both","aria-controls":"listbox","aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,accessKey:this.state._accessKey,autocapitalize:"off",autocorrect:"off",class:"kol-single-select__input",disabled:this.state._disabled,name:this.state._name,placeholder:this.state._placeholder,ref:this.catchRef,required:this.state._required,state:this.state,type:"text",value:this._inputValue},this.controller.onFacade),{onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onInput:this.onInput.bind(this),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)(u.K,Object.assign({key:"4e28a3321bceb2bd900197ee6c9137bc874d692d"},this.getFormFieldProps()),(0,i.h)(s.K,{key:"16ec96a67f59a91a7712dbabff4973e5cc5a1111",state:this.state},(0,i.h)("div",{key:"fb9e1e3d27ee6c2f255b4aec216b39966dd12f55",class:"kol-single-select__group"},(0,i.h)(h.K,Object.assign({key:"3f289d841cd9eccba72d12a754c8b4b40237c7c4"},this.getInputProps())),this._inputValue&&!this.state._hideClearButton&&(0,i.h)(r.d,{key:"329c9f06f8bf5504207fa2f5274185b65174916a",_icons:"codicon codicon-close",_label:(0,c.t)("kol-delete-selection"),onClick:()=>{var e;this.clearSelection(),null===(e=this.refInput)||void 0===e||e.focus()},class:"kol-single-select__delete"}),(0,i.h)(d.C,{key:"055c83eecaa4afe4f5c6b5ff02740eccd7c274e1",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled})),this._isOpen&&!(!0===this.state._disabled)&&(0,i.h)(d.a,{key:"17ddaed530cfacf28f73a75ba08b6a76f3c57eb7",blockSuggestionMouseOver:this.blockSuggestionMouseOver,onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0?this._filteredOptions.map(((e,t)=>(0,i.h)(d.b,{index:t,option:e.label,ref:e=>{e&&(this.refOptions[t]=e)},selected:this._value===e.value,onClick:t=>{var n;this.selectOption(e),null===(n=this.refInput)||void 0===n||n.focus(),this.toggleListbox(t)},onMouseOver:()=>{this.blockSuggestionMouseOver||(this._focusedOptionIndex=t,this.focusOption(t))},onFocus:()=>{this._focusedOptionIndex=t,this.focusOption(t)},onKeyDown:t=>{var n;"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(e),null===(n=this.refInput)||void 0===n||n.focus(),this.toggleListbox(t),t.preventDefault())}}))):(0,i.h)("li",{class:"kol-single-select__no-results-message"},(0,c.t)("kol-no-results-message")," "))))}handleFocusOut(){setTimeout((()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()}),0)}handleWindowBlur(){this.onBlur()}handleKeyDown(e){var t,n;const i=(t,n)=>{var i;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(-1)));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":i(!1);break;case" ":this._isOpen?Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&(this.selectOption(this._filteredOptions[this._focusedOptionIndex]),null===(n=this.refInput)||void 0===n||n.focus(),i(!1)):this.toggleListbox(e);break;case"NumpadEnter":case"Enter":this.toggleListbox(e);break;case"Home":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=0,this.focusOption(this._focusedOptionIndex))}));break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=this._filteredOptions?this._filteredOptions.length-1:0,this.focusOption(this._focusedOptionIndex))}));break;case"PageUp":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(-10)));break;case"PageDown":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(10)))}}constructor(e){(0,i.r)(this,e),this.refOptions=[],this.catchRef=e=>{this.refInput=e},this.toggleListbox=e=>{var t;if(null==e||e.preventDefault(),!this.state._disabled&&(this._isOpen=!this._isOpen,this._isOpen)){null===(t=this.refInput)||void 0===t||t.focus();const e=Array.isArray(this._filteredOptions)?this._filteredOptions.findIndex((e=>e.label===this._inputValue)):-1;this._focusedOptionIndex=e>=0?e:0,this.focusOption(this._focusedOptionIndex)}},this._focusedOptionIndex=-1,this._isOpen=!1,this._filteredOptions=[],this._inputValue="",this.blockSuggestionMouseOver=!1,this._accessKey=void 0,this._placeholder=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._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this._hideClearButton=!1,this.state={_hideMsg:!1,_id:`id-${(0,o.n)()}`,_label:"",_options:[],_hideClearButton:!1},this.inputHasFocus=!1,this.controller=new b(this,"single-select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validatePlaceholder(e){this.controller.validatePlaceholder(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)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e),this._filteredOptions=e,this.updateInputValue(this._value)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.oldValue=e,this.updateInputValue(e)}validateHideClearButton(e){this.controller.validateHideClearButton(e)}handleMouseEvent(){this.blockSuggestionMouseOver=!1}updateInputValue(e){if(Array.isArray(this._options)){const t=this._options.find((t=>t.value===e));this._inputValue=t?String(t.label):""}}componentWillLoad(){this.refOptions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this.state._options,this.updateInputValue(this._value)}onChange(e){var t,n;this.oldValue!==(null===(t=this.refInput)||void 0===t?void 0:t.value)&&(this.oldValue=null===(n=this.refInput)||void 0===n?void 0:n.value),this._isOpen||this.controller.onFacade.onChange(e,this._value)}onClick(e){this.toggleListbox(e),this.controller.onFacade.onClick(e)}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"],"_hideClearButton ":["validateHideClearButton"]}}};_.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-option {\n    cursor: pointer;\n    white-space: normal;\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n    line-height: 1.5;\n    box-sizing: border-box;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-options-group {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: rem(250);\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-toggle {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: rem(16);\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: rem(16);\n    height: rem(44);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}\n@layer kol-component {\n  .kol-single-select__no-results-message {\n    cursor: default;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n  }\n}"}}}]);

package/dist/7267.js

@@ -1,2 +1,2 @@
 /*! For license information please see 7267.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[7267],{7267:(n,e,t)=>{t.r(e),t.d(e,{kol_table_stateless:()=>l});var o=t(6783),i=t(7662);const l=class{constructor(n){(0,o.r)(this,n),this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}render(){return(0,o.h)(i.l,{key:"048855cd40a5b65261de66ea0ef42be89f37557e",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection})}};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%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__focus-element:focus {\n    outline: 0 !important;\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto Highlight;\n    outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto -webkit-focus-ring-color;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}"}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[7267],{7267:(n,e,t)=>{t.r(e),t.d(e,{kol_table_stateless:()=>l});var i=t(1290),o=t(4957);const l=class{constructor(n){(0,i.r)(this,n),this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}render(){return(0,i.h)(o.m,{key:"09eea3b93727bb01ed67c8949a15bcd109505c49",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection})}};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%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__focus-element:focus {\n    outline: 0 !important;\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}"}}}]);