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

package/dist/9162.js

@@ -1,2 +1,2 @@
 /*! For license information please see 9162.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9162],{781:(e,t,n)=>{n.d(t,{K:()=>a});var i=n(6922),o=n(7662);const a=e=>{const{class:t,style:n,icons:a,label:l,onClick:s}=e;return(0,i.h)(o.d,{class:t,style:n,onClick:s,_icons:a,_label:l})}},7055:(e,t,n)=>{n.d(t,{I:()=>x,K:()=>k,a:()=>y});var i=n(6922),o=n(8788),a=n(665),l=n(4600),s=n(7662),r=n(781),d=n(9060),c=n(8439),h=n(3623),u=n(8973),p=n(5800),v=n(608);const m=(e,t)=>{var{position:n="start",class:o}=e,a=(0,l._)(e,["position","class"]);const s="kol-input-container__adornment",r=`${s}--${n}`;return(0,i.h)("div",Object.assign({class:(0,d.c)(s,r,o)},a),t)};function b(e){return!!e&&(Array.isArray(e)?e.length>0:Boolean(e))}const _=(e,t)=>{var{class:n}=e,o=(0,l._)(e,["class"]);return(0,i.h)("div",Object.assign({class:(0,d.c)("kol-input-container__container",n)},o),t)},f=(e,t)=>{const{class:n,startAdornment:o,endAdornment:a,disabled:s,msg:r,touched:h,containerProps:u,startAdornmentProps:p,endAdornmentProps:v}=e,f=(0,l._)(e,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),g=(0,c.c)(r,h),y={"kol-input-container--disabled":s,[`kol-input-container--${(null==r?void 0:r.type)||"error"}`]:g},k=Object.assign({class:(0,d.c)("kol-input-container",y,n)},f);return b(o)||b(a)?(0,i.h)("div",Object.assign({},k),(0,i.h)(m,Object.assign({},p,{position:"start"}),o),(0,i.h)(_,Object.assign({},u),t),(0,i.h)(m,Object.assign({},v,{position:"end"}),a)):(0,i.h)("div",Object.assign({},k),(0,i.h)(_,Object.assign({},u),t))},g=e=>{const{label:t,icons:n,hideLabel:o,disabled:a,onClick:r}=e,d=(0,l._)(e,["label","icons","hideLabel","disabled","onClick"]);return(0,i.h)(s.a,Object.assign({tabindex:0,_label:t,_disabled:a,_icons:n,_hideLabel:o,_on:{onClick:r}},d))},y=e=>{const{componentName:t="button",label:n,icon:o,onClick:a}=e,s=(0,l._)(e,["componentName","label","icon","onClick"]),d="button"===t?g:r.K;return(0,i.h)(d,Object.assign({label:n||"",hideLabel:!0,icons:`codicon codicon-${o}`,onClick:a},s))},k=({state:e,endAdornment:t},n)=>{const{icons:l,smartButton:s,disabled:r,msg:d,touched:h}=function(e){let t,n;return"_icons"in e&&(t=e._icons),"_smartButton"in e&&(n=e._smartButton),{icons:t,smartButton:n,disabled:e._disabled,msg:(0,c.a)(e._msg),touched:e._touched}}(e);let u=null==l?void 0:l.left;(0,o.i)(u)&&(u={icon:u});let p=null==l?void 0:l.right;(0,o.i)(p)&&(p={icon:p});const v=[],m=[];return t&&(Array.isArray(t)?m.push(...t):m.push(t)),u&&v.push((0,i.h)(y,Object.assign({componentName:"icon"},(0,a.i)(u)?u:{}))),(0,a.i)(s)&&m.push((0,i.h)(y,Object.assign({componentName:"button"},s,{hideLabel:!0,disabled:r}))),p&&m.push((0,i.h)(y,Object.assign({componentName:"icon"},(0,a.i)(p)?p:{}))),(0,i.h)(f,{disabled:r,msg:d,touched:h,startAdornment:v,endAdornment:m},n)},w=(e,t)=>{const n=e;"object"==typeof n&&null!==n&&((0,v.i)(n.right,1)&&(n.right={icon:n.right}),(0,v.i)(n.left,1)&&(n.left={icon:n.left}),t.set("_icons",n))};class x extends h.I{constructor(e,t,n){super(e,t,n),this.component=e}validateIcons(e){(0,p.o)(e,(()=>{try{e=(0,p.p)(e)}catch(e){}(0,p.w)(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&((0,v.i)(e.left,1)||(0,u.i)(e.left)||(0,v.i)(e.right,1)||(0,u.i)(e.right))),new Set(["KoliBriHorizontalIcon"]),e,{hooks:{beforePatch:w},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},1166:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(5800);const o=(e,t,n)=>{(0,i.b)(e,"_hasCounter",t,n)}},8973:(e,t,n)=>{n.d(t,{i:()=>l,v:()=>s});var i=n(5800),o=n(608);const a=(e,t,n)=>{(0,o.b)(n)?e[t]=n:(0,o.i)(n,1)&&(e[t]={icon:n})},l=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,o.a)(e.style))&&(void 0===e.label||(0,o.i)(e.label))&&(0,o.i)(e.icon,1),s=(e,t,n={})=>{(0,i.o)(t,(()=>{var s;try{t=(0,i.p)(t)}catch(e){}(0,i.w)(e,"_icons",(e=>{const t="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||t||(0,o.i)(e,1)||"object"==typeof e&&null!==e&&((0,o.i)(e.left,1)||l(e.left)||(0,o.i)(e.right,1)||l(e.right)||(0,o.i)(e.top,1)||l(e.top)||(0,o.i)(e.bottom,1)||l(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(s=n.hooks)||void 0===s?void 0:s.afterPatch,beforePatch:(e,t,i,l)=>{var s,r;"function"==typeof(null===(s=n.hooks)||void 0===s?void 0:s.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(e,t,i,l)),(e=>{var t,n,i;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(n=e.nextState)||void 0===n?void 0:n.get("_icons");null===(i=e.nextState)||void 0===i||i.set("_icons",(e=>{let t={};return(0,o.i)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(a(t,"top",e.top),a(t,"right",e.right),a(t,"bottom",e.bottom),a(t,"left",e.left)),t})(t))}})(i)}}}))}))}},665:(e,t,n)=>{function i(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}n.d(t,{i:()=>i})},9162:(e,t,n)=>{n.r(t),n.d(t,{kol_textarea:()=>y});var i=n(6922),o=n(9060),a=n(4215),l=n(7055),s=n(1166),r=n(5800),d=n(9444),c=n(1799),h=n(4600),u=n(3623),p=n(8439),v=(e,t,n)=>new Promise(((i,o)=>{var a=e=>{try{s(n.next(e))}catch(e){o(e)}},l=e=>{try{s(n.throw(e))}catch(e){o(e)}},s=e=>e.done?i(e.value):Promise.resolve(e.value).then(a,l);s((n=n.apply(e,t)).next())}));const m=["vertical","none"],b=e=>{const{class:t,msg:n,touched:a,readonly:l,disabled:s,required:r,ariaDescribedBy:d,hideLabel:c,label:v}=e,m=(0,h._)(e,["class","msg","touched","readonly","disabled","required","ariaDescribedBy","hideLabel","label"]),b=(0,p.c)(n,a),_={"kol-textarea--disabled":Boolean(s),"kol-textarea--required":Boolean(r),"kol-textarea--touched":Boolean(a),"kol-textarea--readonly":Boolean(l),[`kol-textarea--${(null==n?void 0:n.type)||"error"}`]:b},f=Object.assign(Object.assign({class:(0,o.c)("kol-textarea",_,t),required:r,disabled:s,readonly:l},(0,u.d)({ariaDescribedBy:d,hideLabel:c,label:v})),m);return(0,i.h)("textarea",Object.assign({},f))},_=e=>{var{state:t}=e,n=(0,h._)(e,["state"]);return(0,i.h)(b,Object.assign({},function(e){const{ariaDescribedBy:t}=(0,u.g)(e);return{id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,rows:e._rows,readonly:e._readOnly,required:e._required,placeholder:e._placeholder,maxLength:e._maxLength,touched:e._touched,msg:(0,p.a)(e._msg)}}(t),n))};class f extends l.I{constructor(e,t,n){super(e,t,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=e}validateHasCounter(e){(0,s.v)(this.component,e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(e){(0,r.k)(this.component,"_maxLength",e,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(e){(0,r.i)(this.component,"_placeholder",e)}validateReadOnly(e){(0,r.b)(this.component,"_readOnly",e)}validateResize(e){(0,r.w)(this.component,"_resize",(e=>"string"==typeof e&&m.includes(e)),new Set(`String {${m.join(", ")}`),e,{defaultValue:"vertical"})}validateRequired(e){(0,r.b)(this.component,"_required",e)}validateRows(e){(0,d.v)(this.component,e)}validateSpellCheck(e){(0,c.v)(this.component,e)}validateValue(e){(0,r.i)(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateSpellCheck(this.component._spellCheck),this.validateValue(this.component._value)}}const g=e=>{e.style.overflow="hidden";const t=e.rows,n=e.clientHeight/t;e.rows=1;const i=Math.round(e.scrollHeight/n);return e.rows=t,i},y=class{getValue(){return v(this,null,(function*(){var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.value}))}kolFocus(){return v(this,null,(function*(){var e;null===(e=this.textareaRef)||void 0===e||e.focus()}))}getFormFieldProps(){return{state:this.state,class:(0,o.c)("kol-form-field-textarea",{"kol-form-field--has-value":this.state._hasValue,"kol-form-field--has-counter":!!this.state._hasCounter}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getTextAreaProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state,style:{resize:this.state._resize}},this.controller.onFacade),{onInput:this.onInput,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return(0,i.h)(u.K,Object.assign({key:"872d9e86581bcaa2f890bc1922f51e150e719dcc"},this.getFormFieldProps()),(0,i.h)(l.K,{key:"d606938ceeb96ddd460e0da945a41de58201ed8a",state:this.state},(0,i.h)(_,Object.assign({key:"e1fff4989bfb2c73e5b33ee6c81be446de2b1994"},this.getTextAreaProps()))))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{this.textareaRef=e},this.onInput=e=>{if(this.textareaRef instanceof HTMLTextAreaElement){const t=this.textareaRef.value;(0,r.s)(this,"_currentLength",t.length),this._value=t,this.state._adjustHeight&&(this._rows=g(this.textareaRef)),this.controller.onFacade.onInput(e)}},this._accessKey=void 0,this._adjustHeight=!1,this._disabled=!1,this._hasCounter=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._resize="vertical",this._required=!1,this._rows=void 0,this._shortKey=void 0,this._spellCheck=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_hideMsg:!1,_id:`id-${(0,a.n)()}`,_label:"",_resize:"vertical"},this.inputHasFocus=!1,this.controller=new f(this,"textarea",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSpellCheck(e){this.controller.validateSpellCheck(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)}componentDidLoad(){setTimeout((()=>{var e;!0===this._adjustHeight&&this.textareaRef?this._rows=(null===(e=this.state)||void 0===e?void 0:e._rows)&&this.state._rows>g(this.textareaRef)?this.state._rows:g(this.textareaRef):this._rows||(this._rows=1)}),0)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_disabled:["validateDisabled"],_hasCounter:["validateHasCounter"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};y.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-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-textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  .kol-textarea:focus {\n    outline: none;\n  }\n}"}},9444:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(5800);const o=(e,t)=>{(0,i.k)(e,"_rows",t,{min:1})}},1799:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(5800);const o=(e,t)=>{(0,i.b)(e,"_spellCheck",t,{defaultValue:void 0})}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9162],{5126:(e,t,n)=>{n.d(t,{K:()=>a});var i=n(1290),o=n(4957);const a=e=>{const{class:t,style:n,icons:a,label:l,onClick:s}=e;return(0,i.h)(o.d,{class:t,style:n,onClick:s,_icons:a,_label:l})}},7617:(e,t,n)=>{n.d(t,{I:()=>x,K:()=>k,a:()=>y});var i=n(1290),o=n(3426),a=n(665),l=n(4600),s=n(4957),r=n(5126),d=n(9060),c=n(9732),h=n(1416),u=n(8973),p=n(5800),m=n(608);const v=(e,t)=>{var{position:n="start",class:o}=e,a=(0,l._)(e,["position","class"]);const s="kol-input-container__adornment",r=`${s}--${n}`;return(0,i.h)("div",Object.assign({class:(0,d.c)(s,r,o)},a),t)};function b(e){return!!e&&(Array.isArray(e)?e.length>0:Boolean(e))}const _=(e,t)=>{var{class:n}=e,o=(0,l._)(e,["class"]);return(0,i.h)("div",Object.assign({class:(0,d.c)("kol-input-container__container",n)},o),t)},f=(e,t)=>{const{class:n,startAdornment:o,endAdornment:a,disabled:s,msg:r,touched:h,containerProps:u,startAdornmentProps:p,endAdornmentProps:m}=e,f=(0,l._)(e,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),g=(0,c.c)(r,h),y={"kol-input-container--disabled":s,[`kol-input-container--${(null==r?void 0:r.type)||"error"}`]:g},k=Object.assign({class:(0,d.c)("kol-input-container",y,n)},f);return b(o)||b(a)?(0,i.h)("div",Object.assign({},k),(0,i.h)(v,Object.assign({},p,{position:"start"}),o),(0,i.h)(_,Object.assign({},u),t),(0,i.h)(v,Object.assign({},m,{position:"end"}),a)):(0,i.h)("div",Object.assign({},k),(0,i.h)(_,Object.assign({},u),t))},g=e=>{const{label:t,icons:n,hideLabel:o,disabled:a,onClick:r}=e,d=(0,l._)(e,["label","icons","hideLabel","disabled","onClick"]);return(0,i.h)(s.a,Object.assign({tabindex:0,_label:t,_disabled:a,_icons:n,_hideLabel:o,_on:{onClick:r}},d))},y=e=>{const{componentName:t="button",label:n,icon:o,onClick:a}=e,s=(0,l._)(e,["componentName","label","icon","onClick"]),d="button"===t?g:r.K;return(0,i.h)(d,Object.assign({label:n||"",hideLabel:!0,icons:`codicon codicon-${o}`,onClick:a},s))},k=({state:e,endAdornment:t},n)=>{const{icons:l,smartButton:s,disabled:r,msg:d,touched:h}=function(e){let t,n;return"_icons"in e&&(t=e._icons),"_smartButton"in e&&(n=e._smartButton),{icons:t,smartButton:n,disabled:e._disabled,msg:(0,c.a)(e._msg),touched:e._touched}}(e);let u=null==l?void 0:l.left;(0,o.i)(u)&&(u={icon:u});let p=null==l?void 0:l.right;(0,o.i)(p)&&(p={icon:p});const m=[],v=[];return t&&(Array.isArray(t)?v.push(...t):v.push(t)),u&&m.push((0,i.h)(y,Object.assign({componentName:"icon"},(0,a.i)(u)?u:{}))),(0,a.i)(s)&&v.push((0,i.h)(y,Object.assign({componentName:"button"},s,{hideLabel:!0,disabled:r}))),p&&v.push((0,i.h)(y,Object.assign({componentName:"icon"},(0,a.i)(p)?p:{}))),(0,i.h)(f,{disabled:r,msg:d,touched:h,startAdornment:m,endAdornment:v},n)},w=(e,t)=>{const n=e;"object"==typeof n&&null!==n&&((0,m.i)(n.right,1)&&(n.right={icon:n.right}),(0,m.i)(n.left,1)&&(n.left={icon:n.left}),t.set("_icons",n))};class x extends h.I{constructor(e,t,n){super(e,t,n),this.component=e}validateIcons(e){(0,p.o)(e,(()=>{try{e=(0,p.p)(e)}catch(e){}(0,p.w)(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&((0,m.i)(e.left,1)||(0,u.i)(e.left)||(0,m.i)(e.right,1)||(0,u.i)(e.right))),new Set(["KoliBriHorizontalIcon"]),e,{hooks:{beforePatch:w},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},1166:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(5800);const o=(e,t,n)=>{(0,i.b)(e,"_hasCounter",t,n)}},8973:(e,t,n)=>{n.d(t,{i:()=>l,v:()=>s});var i=n(5800),o=n(608);const a=(e,t,n)=>{(0,o.b)(n)?e[t]=n:(0,o.i)(n,1)&&(e[t]={icon:n})},l=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,o.a)(e.style))&&(void 0===e.label||(0,o.i)(e.label))&&(0,o.i)(e.icon,1),s=(e,t,n={})=>{(0,i.o)(t,(()=>{var s;try{t=(0,i.p)(t)}catch(e){}(0,i.w)(e,"_icons",(e=>{const t="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||t||(0,o.i)(e,1)||"object"==typeof e&&null!==e&&((0,o.i)(e.left,1)||l(e.left)||(0,o.i)(e.right,1)||l(e.right)||(0,o.i)(e.top,1)||l(e.top)||(0,o.i)(e.bottom,1)||l(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(s=n.hooks)||void 0===s?void 0:s.afterPatch,beforePatch:(e,t,i,l)=>{var s,r;"function"==typeof(null===(s=n.hooks)||void 0===s?void 0:s.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(e,t,i,l)),(e=>{var t,n,i;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(n=e.nextState)||void 0===n?void 0:n.get("_icons");null===(i=e.nextState)||void 0===i||i.set("_icons",(e=>{let t={};return(0,o.i)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(a(t,"top",e.top),a(t,"right",e.right),a(t,"bottom",e.bottom),a(t,"left",e.left)),t})(t))}})(i)}}}))}))}},665:(e,t,n)=>{function i(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}n.d(t,{i:()=>i})},9162:(e,t,n)=>{n.r(t),n.d(t,{kol_textarea:()=>y});var i=n(1290),o=n(9060),a=n(526),l=n(7617),s=n(1166),r=n(5800),d=n(9444),c=n(1799),h=n(4600),u=n(1416),p=n(9732),m=(e,t,n)=>new Promise(((i,o)=>{var a=e=>{try{s(n.next(e))}catch(e){o(e)}},l=e=>{try{s(n.throw(e))}catch(e){o(e)}},s=e=>e.done?i(e.value):Promise.resolve(e.value).then(a,l);s((n=n.apply(e,t)).next())}));const v=["vertical","none"],b=e=>{const{class:t,msg:n,touched:a,readonly:l,disabled:s,required:r,ariaDescribedBy:d,hideLabel:c,label:m}=e,v=(0,h._)(e,["class","msg","touched","readonly","disabled","required","ariaDescribedBy","hideLabel","label"]),b=(0,p.c)(n,a),_={"kol-textarea--disabled":Boolean(s),"kol-textarea--required":Boolean(r),"kol-textarea--touched":Boolean(a),"kol-textarea--readonly":Boolean(l),[`kol-textarea--${(null==n?void 0:n.type)||"error"}`]:b},f=Object.assign(Object.assign({class:(0,o.c)("kol-textarea",_,t),required:r,disabled:s,readonly:l},(0,u.d)({ariaDescribedBy:d,hideLabel:c,label:m})),v);return(0,i.h)("textarea",Object.assign({},f))},_=e=>{var{state:t}=e,n=(0,h._)(e,["state"]);return(0,i.h)(b,Object.assign({},function(e){const{ariaDescribedBy:t}=(0,u.g)(e);return{id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,rows:e._rows,readonly:e._readOnly,required:e._required,placeholder:e._placeholder,maxLength:e._maxLength,touched:e._touched,msg:(0,p.a)(e._msg)}}(t),n))};class f extends l.I{constructor(e,t,n){super(e,t,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=e}validateHasCounter(e){(0,s.v)(this.component,e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(e){(0,r.k)(this.component,"_maxLength",e,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(e){(0,r.i)(this.component,"_placeholder",e)}validateReadOnly(e){(0,r.b)(this.component,"_readOnly",e)}validateResize(e){(0,r.w)(this.component,"_resize",(e=>"string"==typeof e&&v.includes(e)),new Set(`String {${v.join(", ")}`),e,{defaultValue:"vertical"})}validateRequired(e){(0,r.b)(this.component,"_required",e)}validateRows(e){(0,d.v)(this.component,e)}validateSpellCheck(e){(0,c.v)(this.component,e)}validateValue(e){(0,r.i)(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateSpellCheck(this.component._spellCheck),this.validateValue(this.component._value)}}const g=e=>{e.style.overflow="hidden";const t=e.rows,n=e.clientHeight/t;e.rows=1;const i=Math.round(e.scrollHeight/n);return e.rows=t,i},y=class{getValue(){return m(this,null,(function*(){var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.value}))}kolFocus(){return m(this,null,(function*(){var e;null===(e=this.textareaRef)||void 0===e||e.focus()}))}getFormFieldProps(){return{state:this.state,class:(0,o.c)("kol-form-field-textarea",{"kol-form-field--has-value":this.state._hasValue,"kol-form-field--has-counter":!!this.state._hasCounter}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getTextAreaProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state,style:{resize:this.state._resize}},this.controller.onFacade),{onInput:this.onInput,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return(0,i.h)(u.K,Object.assign({key:"54807a3fa69016bfdc687a2ce7fcb95d87541257"},this.getFormFieldProps()),(0,i.h)(l.K,{key:"01f3d68c72c820b577b870bbf385db3cc382e14a",state:this.state},(0,i.h)(_,Object.assign({key:"cb701ff29fe33ca11d0d061754e2309db671c790"},this.getTextAreaProps()))))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{this.textareaRef=e},this.onInput=e=>{if(this.textareaRef instanceof HTMLTextAreaElement){const t=this.textareaRef.value;(0,r.s)(this,"_currentLength",t.length),this._value=t,this.state._adjustHeight&&(this._rows=g(this.textareaRef)),this.controller.onFacade.onInput(e)}},this._accessKey=void 0,this._adjustHeight=!1,this._disabled=!1,this._hasCounter=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._resize="vertical",this._required=!1,this._rows=void 0,this._shortKey=void 0,this._spellCheck=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_hideMsg:!1,_id:`id-${(0,a.n)()}`,_label:"",_resize:"vertical"},this.inputHasFocus=!1,this.controller=new f(this,"textarea",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSpellCheck(e){this.controller.validateSpellCheck(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentDidLoad(){setTimeout((()=>{var e;!0===this._adjustHeight&&this.textareaRef?this._rows=(null===(e=this.state)||void 0===e?void 0:e._rows)&&this.state._rows>g(this.textareaRef)?this.state._rows:g(this.textareaRef):this._rows||(this._rows=1)}),0)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_disabled:["validateDisabled"],_hasCounter:["validateHasCounter"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};y.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-textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  .kol-textarea:focus {\n    outline: none;\n  }\n}"}},9444:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(5800);const o=(e,t)=>{(0,i.k)(e,"_rows",t,{min:1})}},1799:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(5800);const o=(e,t)=>{(0,i.b)(e,"_spellCheck",t,{defaultValue:void 0})}}}]);

package/dist/9219.js

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

package/dist/9235.js

@@ -0,0 +1,2 @@
+/*! For license information please see 9235.js.LICENSE.txt */
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9235],{5285:(e,t,o)=>{o.d(t,{K:()=>h});var n=o(4600),i=o(1290),s=o(9060),a=o(3180),l=o(4957),r=o(4692);const c=({ariaLabel:e,icon:t})=>(0,i.h)(l.d,{class:"kol-alert__heading-icon",_label:e,_icons:t}),d=({type:e,label:t})=>{switch(e){case"error":return(0,i.h)(c,{ariaLabel:(0,a.t)("kol-error"),icon:"codicon codicon-error",label:t});case"info":return(0,i.h)(c,{ariaLabel:(0,a.t)("kol-info"),icon:"codicon codicon-info",label:t});case"warning":return(0,i.h)(c,{ariaLabel:(0,a.t)("kol-warning"),icon:"codicon codicon-warning",label:t});case"success":return(0,i.h)(c,{ariaLabel:(0,a.t)("kol-success"),icon:"codicon codicon-pass",label:t});default:return(0,i.h)(c,{ariaLabel:(0,a.t)("kol-message"),icon:"codicon codicon-comment",label:t})}},h=(e,t)=>{var o,c;const{class:h={},type:u="default",variant:p="msg",label:b,hasCloser:f,alert:m,onAlertTimeout:v,onCloserClick:g,level:y}=e,_=(0,n._)(e,["class","type","variant","label","hasCloser","alert","onAlertTimeout","onCloserClick","level"]);m&&((null===(o=navigator.userActivation)||void 0===o?void 0:o.hasBeenActive)&&(null===(c=null===navigator||void 0===navigator?void 0:navigator.vibrate)||void 0===c||c.call(navigator,[100,75,100,75,100])),setTimeout((()=>{null==v||v()}),1e4));const O=Object.assign({class:(0,s.c)("kol-alert",`kol-alert--${u}`,`kol-alert--${p}`,{"kol-alert--hasCloser":!!f},h),role:m?"alert":void 0},_);return(0,i.h)("div",Object.assign({},O),(0,i.h)("div",{class:"kol-alert__container"},(0,i.h)(d,{label:b,type:u}),(0,i.h)("div",{class:"kol-alert__container-content"},b?(0,i.h)(r.K,{class:"kol-alert__heading",level:y},b):null,"msg"===p&&(0,i.h)("div",{class:"kol-alert__content"},t)),f&&(0,i.h)(l.a,{class:"kol-alert__close-button close","data-testid":"alert-close-button",_ariaDescription:(null==b?void 0:b.trim())||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:(0,a.t)("kol-close-alert"),_on:{onClick:g},_tooltipAlign:"left"})),"card"===p&&(0,i.h)("div",{class:"kol-alert__content"},t))}},9732:(e,t,o)=>{o.d(t,{K:()=>u,a:()=>d,c:()=>h,v:()=>c});var n=o(5800),i=o(608),s=o(4600),a=o(9060),l=o(1290),r=o(5285);const c=(e,t)=>{(0,n.o)(t,(()=>{try{t=(0,n.p)(t)}catch(e){}(0,n.w)(e,"_msg",(e=>(0,i.b)(e)&&"string"==typeof(null==e?void 0:e._description)),new Set(["MsgPropType"]),t,{defaultValue:{_description:"",_type:"error"}})}))};function d(e){var t;if(e&&!function(e){return!e||"error"===e._type&&!e._description}(e))return t=e,Object.entries(t).reduce(((e,[t,o])=>{const n=t.startsWith("_")?t.slice(1):t;return Object.assign(Object.assign({},e),{[n]:o})}),{})}function h(e,t){return Boolean((null==e?void 0:e.description)&&(null==e?void 0:e.description.length)>0)&&(!0===t||"error"!==(null==e?void 0:e.type))}const u=e=>{var{alert:t,msg:o,hideMsg:n,id:i,class:c}=e,d=(0,s._)(e,["alert","msg","hideMsg","id","class"]);return(0,l.h)(r.K,Object.assign({id:`${i}-msg`,alert:t,type:"error",class:(0,a.c)("kol-form-field__msg",{"visually-hidden":!0===n},c)},o,d,{"aria-hidden":"true"}),(null==o?void 0:o.description)||void 0)}},4692:(e,t,o)=>{o.d(t,{K:()=>d});var n=o(4600),i=o(1290),s=o(9060);const a=1;function l(e){return function(e){return e>=a&&e<=6}(e)?`h${e}`:"strong"}const r=(e,t)=>{var{class:o,level:r=a,variant:c}=e,d=(0,n._)(e,["class","level","variant"]);const h=l(r),u=c||h;return(0,i.h)(h,Object.assign({class:(0,s.c)("kol-headline",`kol-headline--${u}`,o)},d),t)},c=(e,t)=>{var{class:o,level:r=a}=e,c=(0,n._)(e,["class","level"]);const d=function(e){return 1===e?"span":l(e)}(r+1);return(0,i.h)(d,Object.assign({class:(0,s.c)("kol-headline kol-headline--group kol-headline--secondary",o)},c),t)},d=(e,t)=>{var{secondaryHeadline:o,level:l=a,class:d,HeadingGroupProps:h={},SecondaryHeadlineProps:u={}}=e,p=(0,n._)(e,["secondaryHeadline","level","class","HeadingGroupProps","SecondaryHeadlineProps"]);const b=Object.assign({level:l},p);if(!o)return(0,i.h)(r,Object.assign({class:(0,s.c)(d,"kol-headline--single")},b),t);const{class:f}=h,m=(0,n._)(h,["class"]),v=Object.assign({class:(0,s.c)("kol-heading-group",f)},m);return(0,i.h)("hgroup",Object.assign({},v),(0,i.h)(r,Object.assign({class:(0,s.c)(d,"kol-headline--group","kol-headline--primary")},b),t),(0,i.h)(c,Object.assign({level:l},u),o))}},3426:(e,t,o)=>{o.d(t,{I:()=>g,i:()=>v});var n=o(1290);const i="object"==typeof o.g&&o.g&&o.g.Object===Object&&o.g;var s="object"==typeof self&&self&&self.Object===Object&&self;const a=(i||s||Function("return this")()).Symbol;var l=Object.prototype,r=l.hasOwnProperty,c=l.toString,d=a?a.toStringTag:void 0,h=Object.prototype.toString,u="[object Null]",p="[object Undefined]",b=a?a.toStringTag:void 0;const f=Array.isArray;var m="[object String]";function v(e){return"string"==typeof e||!f(e)&&function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?p:u:b&&b in Object(e)?function(e){var t=r.call(e,d),o=e[d];try{e[d]=void 0;var n=!0}catch(e){}var i=c.call(e);return n&&(t?e[d]=o:delete e[d]),i}(e):function(e){return h.call(e)}(e)}(e)==m}const g=({badgeText:e,label:t})=>{const o=e;let[i,...s]=t.split(o);return 0===s.length&&(e=o.toUpperCase(),[i,...s]=t.split(o)),0===s.length&&(e=o.toLowerCase(),[i,...s]=t.split(o)),(0,n.h)(n.F,null,i,s.length?(0,n.h)(n.F,null,(0,n.h)("u",null,e),s.join(o)):null)}},9543:(e,t,o)=>{o.d(t,{a:()=>r,b:()=>l,c:()=>a,v:()=>i});var n=o(5800);const i=(e,t)=>{(0,n.i)(e,"_accessKey",t)},s={hooks:{afterPatch:e=>{-1!==e&&0!==e&&(0,n.a)("Don't Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html")}}},a=(e,t)=>{(0,n.k)(e,"_tabIndex",t,s)},l=(e,t)=>{(0,n.i)(e,"_shortKey",t)},r=(e,t)=>{if(e&&t)throw new Error("AccessKey and ShortKey are used. Only one is allowed.")}},9246:(e,t,o)=>{o.d(t,{a:()=>i,v:()=>a});var n=o(5800);const i=(e,t,o)=>{(0,n.w)(e,t,(e=>"string"==typeof e&&s.includes(e)),new Set(s),o,{defaultValue:"top"})},s=["left","right","top","bottom"],a=(e,t)=>{i(e,"_align",t)}},6970:(e,t,o)=>{o.d(t,{A:()=>s});var n=o(1732),i=o(5800);class s{constructor(e,t,o){var s,a,l,r;if(this.experimentalMode=(0,n.a)(),this.setFormAssociatedValue=e=>{var t;const o=null===(t=this.formAssociated)||void 0===t?void 0:t.getAttribute("name");null!==o&&""!==o||(0,i.j)(` The form field (${this.type}) must have a name attribute to be form-associated. Please define the _name attribute.`);const n=this.tryToStringifyValue(e);this.syncValue(e,n,this.formAssociated),this.syncValue(e,n,this.syncToOwnInput)},this.component=e,this.host=this.findHostWithShadowRoot(o),this.type=t,this.experimentalMode&&("KOL-BUTTON"===(r=null===(s=this.host)||void 0===s?void 0:s.tagName)||"KOL-COMBOBOX"===r||"KOL-INPUT-CHECKBOX"===r||"KOL-INPUT-COLOR"===r||"KOL-INPUT-DATE"===r||"KOL-INPUT-EMAIL"===r||"KOL-INPUT-FILE"===r||"KOL-INPUT-NUMBER"===r||"KOL-INPUT-PASSWORD"===r||"KOL-INPUT-RADIO"===r||"KOL-INPUT-RANGE"===r||"KOL-INPUT-TEXT"===r||"KOL-SELECT"===r||"KOL-SINGLE-SELECT"===r||"KOL-TEXTAREA"===r)&&e._name){switch(null===(a=this.host)||void 0===a||a.querySelectorAll("input,select,textarea").forEach((e=>{var t;null===(t=this.host)||void 0===t||t.removeChild(e)})),this.type){case"button":case"color":case"date":case"email":case"file":case"number":case"password":case"radio":case"range":case"text":this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type",this.type);break;case"select":this.formAssociated=document.createElement("select"),this.formAssociated.setAttribute("multiple","");break;case"textarea":this.formAssociated=document.createElement("textarea");break;default:this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type","hidden")}this.formAssociated.setAttribute("data-form-associated",""),this.formAssociated.setAttribute("hidden",""),null===(l=this.host)||void 0===l||l.appendChild(this.formAssociated)}}findHostWithShadowRoot(e){for(;null===(null==e?void 0:e.shadowRoot)&&e!==document.body;)(e=null==e?void 0:e.parentNode).host&&(e=e.host);return e}setAttribute(e,t,o){if(this.experimentalMode)try{if("boolean"!=typeof(o="object"==typeof o&&null!==o?JSON.stringify(o):o)&&"number"!=typeof o&&"string"!=typeof o)throw new Error("Invalid value type: "+typeof o);null==t||t.setAttribute(e,`${o}`)}catch(o){null==t||t.removeAttribute(e)}}tryToStringifyValue(e){try{return"object"==typeof e&&null!==e?JSON.stringify(e).toString():null==e?null:e.toString()}catch(e){return(0,i.l)(`The form field raw value is not able to stringify! ${e}`),""}}syncValue(e,t,o){if(o)switch(this.type){case"file":o.files=e;break;case"select":o.querySelectorAll("option").forEach((e=>{o.removeChild(e)})),Array.isArray(e)&&e.forEach((e=>{const t=this.tryToStringifyValue(e);if("string"==typeof t){const e=document.createElement("option");e.setAttribute("value",t),e.setAttribute("selected",""),o.appendChild(e)}}));break;case"radio":"string"==typeof t&&(o.setAttribute("value",t),o.setAttribute("checked",""),o.value=t);break;default:"string"==typeof t?(o.setAttribute("value",t),o.value=t):(o.removeAttribute("value"),o.value="")}}validateName(e){((e,t,o)=>{(0,i.i)(e,"_name",t,o)})(this.component,e,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===e&&(0,i.j)("A name on input fields or switches is not strictly required, but it might be relevant for the autocomplete function and for the static submission of the input field.")}validateSyncValueBySelector(e){if(this.experimentalMode&&"string"==typeof e){const t=document.querySelector(e);t&&(this.syncToOwnInput=t)}}componentWillLoad(){this.validateName(this.component._name),this.validateSyncValueBySelector(this.component._syncValueBySelector)}}},9060:(e,t,o)=>{function n(e){var t,o,i="";if("string"==typeof e||"number"==typeof e)i+=e;else if("object"==typeof e)if(Array.isArray(e)){var s=e.length;for(t=0;t<s;t++)e[t]&&(o=n(e[t]))&&(i&&(i+=" "),i+=o)}else for(o in e)e[o]&&(i&&(i+=" "),i+=o);return i}function i(){for(var e,t,o=0,i="",s=arguments.length;o<s;o++)(e=arguments[o])&&(t=n(e))&&(i&&(i+=" "),i+=t);return i}o.d(t,{c:()=>i})},608:(e,t,o)=>{o.d(t,{S:()=>a,a:()=>s,b:()=>n,i:()=>i});const n=e=>"object"==typeof e&&null!==e,i=(e,t=0)=>"string"==typeof e&&e.length>=t,s=e=>{if("object"!=typeof e||null===e)return i(e,1);for(const t in e)if(!1===i(t,1))return!1;return!0},a=new Event("StateChange")},526:(e,t,o)=>{o.d(t,{i:()=>l,n:()=>c,r:()=>r});var n=o(1290),i=o(5687),s=o(1732);const a=()=>{let e=(0,s.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,s.d)(),"KoliBri",{value:e,writable:!1})),e},l=()=>{(()=>{const e=(0,s.g)().querySelector('meta[name="kolibri"]');if(e&&e.hasAttribute("content")){const t=e.getAttribute("content");"string"==typeof t&&((0,s.s)(t.includes("dev-mode=true")),(0,s.b)(t.includes("experimental-mode=true")),(0,s.c)(t.includes("color-contrast-analysis=true")))}})(),s.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${n.E.kolibriVersion}\n\t`,{forceLog:!0})},r=()=>{!0!==a().adviceShown&&(Object.defineProperty(a(),"adviceShown",{get:function(){return!0}}),s.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let c=()=>Math.floor(16777215*Math.random()).toString(16);"test"===i.p&&(c=()=>"nonce")},1416:(e,t,o)=>{o.d(t,{I:()=>T,K:()=>C,a:()=>k,b:()=>y,c:()=>_,d:()=>K,g:()=>P});var n=o(8231),i=o(6970),s=o(5800),a=o(9543),l=o(356),r=o(6985),c=o(9732),d=o(1074),h=o(4600),u=o(1290),p=o(9060),b=o(3180),f=o(4957),m=o(3426),v=o(5687);const g=({hasExpertSlot:e,accessKey:t,shortKey:o,label:n,showBadge:i=!0})=>{if(e)return(0,u.h)("slot",{name:"expert"});if(!n)return null;const s=(0,m.i)(t)||(0,m.i)(o);if(!i||!s)return(0,u.h)("span",null,n);const a=(0,v.b)(t,o);return(0,u.h)(u.F,null,(0,u.h)(m.I,{badgeText:a,label:n})," ",(0,u.h)("span",{class:"access-key-hint","aria-hidden":"true"},a))},y=e=>{var{component:t="label",id:o,baseClassName:n="kol-form-field",class:i,accessKey:s,shortKey:a,label:l,hideLabel:r,hasExpertSlot:c,showBadge:d}=e,b=(0,h._)(e,["component","id","baseClassName","class","accessKey","shortKey","label","hideLabel","hasExpertSlot","showBadge"]);const f=!c&&r;return(0,u.h)(t,Object.assign({},b,{class:(0,p.c)(`${n}__label`,i),id:f?void 0:`${o}-label`,hidden:f,htmlFor:o}),(0,u.h)("span",{class:(0,p.c)(`${n}__label-text`)},(0,u.h)(g,{hasExpertSlot:c,accessKey:s,shortKey:a,label:l,showBadge:d})))},_=e=>{var{id:t,class:o,hint:n,baseClassName:i="kol-form-field"}=e,s=(0,h._)(e,["id","class","hint","baseClassName"]);return n?(0,u.h)("span",Object.assign({class:(0,p.c)(`${i}__hint`,o),id:`${t}-hint`},s),n):null},O=e=>{var{currentLength:t,maxLength:o,class:n}=e,i=(0,h._)(e,["currentLength","maxLength","class"]);return(0,u.h)("span",Object.assign({class:(0,p.c)("kol-form-field__counter",n)},i,{"aria-atomic":"true","aria-live":"polite","data-testid":"input-counter"}),t,o&&(0,u.h)(u.F,null,(0,u.h)("span",{"aria-label":(0,b.t)("kol-of"),role:"img"},"/"),o)," ",(0,u.h)("span",null,(0,b.t)("kol-characters")))},k=({id:e,align:t,badgeText:o,hideLabel:n,label:i,class:s})=>(0,u.h)(f.g,{"aria-hidden":"true",class:(0,p.c)("kol-form-field__tooltip",s),_badgeText:o,_align:t,_id:n?`${e}-label`:void 0,_label:i});function L(e){return(null==e?void 0:e.type)&&{default:"msg-type-default",info:"msg-type-info",success:"msg-type-success",warning:"msg-type-warning",error:"msg-type-error"}[null==e?void 0:e.type]||""}const A=(e,t)=>{var{class:o}=e,n=(0,h._)(e,["class"]);return(0,u.h)("div",Object.assign({class:(0,p.c)("kol-form-field__input",o)},n),t)},j=(e,t)=>{const{component:o="div",renderNoLabel:n,renderNoTooltip:i,renderNoHint:s,anotherChildren:a,id:l,required:r,alert:d,disabled:b,class:f,msg:m,hideMsg:g,hideLabel:j,label:K,hint:S,accessKey:T,shortKey:C,tooltipAlign:P,counter:w,readOnly:E,touched:x,formFieldLabelProps:I,formFieldHintProps:B,formFieldTooltipProps:N,formFieldMsgProps:M,formFieldCounterProps:F,formFieldInputProps:H}=e,$=(0,h._)(e,["component","renderNoLabel","renderNoTooltip","renderNoHint","anotherChildren","id","required","alert","disabled","class","msg","hideMsg","hideLabel","label","hint","accessKey","shortKey","tooltipAlign","counter","readOnly","touched","formFieldLabelProps","formFieldHintProps","formFieldTooltipProps","formFieldMsgProps","formFieldCounterProps","formFieldInputProps"]),q=!n,U=!s,V=!i,D=(0,v.s)(K),R=(0,c.c)(m,x),W=(0,v.b)(T,C),G=V&&!D&&j;let X={"kol-form-field--disabled":Boolean(b),"kol-form-field--required":Boolean(r),"kol-form-field--touched":Boolean(x),"kol-form-field--hide-label":Boolean(j),"kol-form-field--read-only":Boolean(E),"kol-form-field--hidden-msg":Boolean(g)};return R&&(X=Object.assign(Object.assign({},X),{[`kol-form-field--${(null==m?void 0:m.type)||"error"}`]:!0,[`kol-form-field--${L(m)}`]:!0})),(0,u.h)(o,Object.assign({class:(0,p.c)("kol-form-field",X,f)},$),q&&(0,u.h)(y,Object.assign({},I||{},{id:l,hasExpertSlot:D,hideLabel:j,label:K,accessKey:T,shortKey:C})),(0,u.h)(A,Object.assign({},H),t,G&&(0,u.h)(k,Object.assign({},N||{},{id:l,label:K,hideLabel:j,align:P,badgeText:W}))),w?(0,u.h)(O,Object.assign({},F||{},w)):null,R&&(0,u.h)(c.K,Object.assign({},M||{},{id:l,alert:d,msg:m,hideMsg:g})),U&&(0,u.h)(_,Object.assign({},B||{},{id:l,hint:S})),a)};function K({ariaDescribedBy:e,hideLabel:t,label:o}){return{title:"",autoCapitalize:"off",autoCorrect:"off","aria-describedby":(null==e?void 0:e.length)?e.join(" "):void 0,"aria-label":t&&o?o:void 0}}class S extends i.A{constructor(e,t,o){super(e,t,o),this.component=e}validateTouched(e){((e,t)=>{(0,s.b)(e,"_touched",t)})(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateTouched(this.component._touched)}}class T extends S{constructor(e,t,o){super(e,t,o),this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this),onInput:this.onInput.bind(this)},this.component=e}validateAccessKey(e){(0,a.v)(this.component,e),(0,a.a)(e,this.component._shortKey)}validateAdjustHeight(e){((e,t)=>{(0,s.b)(e,"_adjustHeight",t)})(this.component,e)}validateDisabled(e){(0,s.b)(this.component,"_disabled",e),!0===e&&(0,s.c)()}validateTooltipAlign(e){(0,l.v)(this.component,e)}validateHideMsg(e){((e,t,o)=>{(0,s.b)(e,"_hideMsg",t,o)})(this.component,e,{hooks:{afterPatch:()=>{this.component.state._hideMsg&&(0,s.a)("Property _hideMsg for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(e){(0,r.v)(this.component,e,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&(0,s.a)("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(e){(0,s.i)(this.component,"_hint",e)}validateId(e){(0,s.i)(this.component,"_id",e,{minLength:1}),""!==e&&void 0!==e||(0,s.j)("A unique ID on the input fields is not strictly required, but it might be relevant for E2E tests.")}validateLabel(e){(0,d.a)(this.component,e,{required:!0})}validateMsg(e){(0,c.v)(this.component,e)}validateOn(e){"object"==typeof e&&(0,s.s)(this.component,"_on",e)}validateShortKey(e){(0,a.b)(this.component,e),(0,a.a)(this.component._accessKey,e)}validateSmartButton(e){(0,s.o)(e,(()=>{try{e=(0,s.p)(e)}catch(e){}(0,s.s)(this.component,"_smartButton",e)}))}validateTabIndex(e){(0,a.c)(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateMsg(this.component._msg),this.validateDisabled(this.component._disabled),this.validateHideMsg(this.component._hideMsg),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateId(this.component._id),this.validateLabel(this.component._label),this.validateShortKey(this.component._shortKey),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex),(0,a.a)(this.component._accessKey,this.component._shortKey)}emitEvent(e,t){this.host&&(0,n.d)(this.host,e,t)}onBlur(e){var t;this.component._touched=!0,this.emitEvent(n.K.blur),"function"==typeof(null===(t=this.component._on)||void 0===t?void 0:t.onBlur)&&this.component._on.onBlur(e)}onChange(e,t){var o;void 0===t&&(t=e.target.value),this.emitEvent(n.K.change,t),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(e,t),this.valueChangeListeners.forEach((e=>e(t)))}onInput(e,t=!0,o){var i;void 0===o&&(o=e.target.value),this.emitEvent(n.K.input,o),t&&this.setFormAssociatedValue(o),"function"==typeof(null===(i=this.component._on)||void 0===i?void 0:i.onInput)&&this.component._on.onInput(e,o)}onClick(e){var t;this.emitEvent(n.K.click),"function"==typeof(null===(t=this.component._on)||void 0===t?void 0:t.onClick)&&this.component._on.onClick(e)}onFocus(e){var t;this.emitEvent(n.K.focus),"function"==typeof(null===(t=this.component._on)||void 0===t?void 0:t.onFocus)&&this.component._on.onFocus(e)}addValueChangeListener(e){this.valueChangeListeners.push(e)}}const C=(e,t)=>{var{state:o}=e,n=(0,h._)(e,["state"]);return(0,u.h)(j,Object.assign({},function(e){const t={id:e._id,disabled:e._disabled,msg:(0,c.a)(e._msg),hint:e._hint,label:e._label,hideLabel:e._hideLabel,hideMsg:e._hideMsg,touched:e._touched,accessKey:e._accessKey,shortKey:e._shortKey};return"_required"in e&&(t.required=e._required),"_readOnly"in e&&(t.readOnly=e._readOnly),"_hasCounter"in e&&"_currentLength"in e&&(t.counter=e._hasCounter?{currentLength:e._currentLength}:void 0,t.counter&&"_maxLength"in e&&(t.counter.maxLength=e._maxLength)),t}(o),n),t)},P=e=>{var t,o,n;const i=Boolean((null===(t=null==e?void 0:e._msg)||void 0===t?void 0:t._description)&&(null===(o=e._msg._description)||void 0===o?void 0:o.length)>0),s="error"===(null===(n=e._msg)||void 0===n?void 0:n._type)&&i&&!0===e._touched,a="string"==typeof e._hint&&e._hint.length>0,l=[];return i&&l.push(`${e._id}-msg`),a&&l.push(`${e._id}-hint`),{hasError:s,hasHint:a,ariaDescribedBy:l}}},6985:(e,t,o)=>{o.d(t,{v:()=>i});var n=o(5800);const i=(e,t,o={})=>{(0,n.b)(e,"_hideLabel",t,o)}},3180:(e,t,o)=>{o.d(t,{t:()=>s});var n=o(4216),i=o(5687);let s=(e,t)=>{var o;return(null!==(o=(0,n.g)())&&void 0!==o?o:(0,n.i)("de")).translate(e,t)};"test"===i.p&&(s=e=>e)},1074:(e,t,o)=>{o.d(t,{a:()=>h,b:()=>l,c:()=>r,h:()=>i,v:()=>d});var n=o(5800);const i=[0,1,2,3,4,5,6],s=/[a-zA-Z0-9äöüÄÖÜß]/g,a=/^\d+$/;function l(e,t=1){return function(e){var t;return"string"==typeof e&&(null===(t=e.match(s))||void 0===t?void 0:t.length)||0}(e)>=t}function r(e){return a.test(e)}const c=new Set(["string"]),d=(e,t,o={})=>{(0,n.w)(e,"_label",(e=>"string"==typeof e),c,t,function(e){var t;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(t,o,i,s)=>{var a,c;"function"==typeof(null===(a=e.hooks)||void 0===a?void 0:a.afterPatch)&&(null===(c=e.hooks)||void 0===c||c.afterPatch(t,o,i,s)),"string"==typeof t&&!1===l(t,3)&&!1===r(t)&&(0,n.a)(`The heading or label ("${t}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof t&&t.length>80&&(0,n.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(t=e.hooks)||void 0===t?void 0:t.beforePatch}})}(o))},h=d},5687:(e,t,o)=>{o.d(t,{b:()=>a,h:()=>i,p:()=>n,s:()=>s});let n="development";try{n="production"}catch(e){n="production"}const i=(e,t,o)=>{if(e&&t&&"string"==typeof o){const n=e.querySelector(`[slot="${o}"]`);n&&t.appendChild(n)}},s=e=>""===e,a=(e,t)=>e||t||""},356:(e,t,o)=>{o.d(t,{v:()=>i});var n=o(9246);const i=(e,t)=>{(0,n.a)(e,"_tooltipAlign",t)}},4600:(e,t,o)=>{function n(e,t){var o={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(o[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++)t.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(o[n[i]]=e[n[i]])}return o}o.d(t,{_:()=>n}),"function"==typeof SuppressedError&&SuppressedError}}]);

package/dist/9423.js

@@ -1,2 +1,2 @@
 /*! For license information please see 9423.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9423],{9060:(n,t,e)=>{function o(n){var t,e,i="";if("string"==typeof n||"number"==typeof n)i+=n;else if("object"==typeof n)if(Array.isArray(n)){var a=n.length;for(t=0;t<a;t++)n[t]&&(e=o(n[t]))&&(i&&(i+=" "),i+=e)}else for(e in n)n[e]&&(i&&(i+=" "),i+=e);return i}function i(){for(var n,t,e=0,i="",a=arguments.length;e<a;e++)(n=arguments[e])&&(t=o(n))&&(i&&(i+=" "),i+=t);return i}e.d(t,{c:()=>i})},3584:(n,t,e)=>{e.d(t,{t:()=>a});var o=e(8461),i=e(5687);let a=(n,t)=>{var e;return(null!==(e=(0,o.g)())&&void 0!==e?e:(0,o.i)("de")).translate(n,t)};"test"===i.p&&(a=n=>n)},9423:(n,t,e)=>{e.r(t),e.d(t,{kol_split_button:()=>l});var o=e(6922),i=e(3584),a=e(7662),s=e(9060);const l=class{constructor(n){(0,o.r)(this,n),this.clickButtonHandler={onClick:n=>{var t,e;n.stopPropagation(),"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onClick)?null===(e=this._on)||void 0===e||e.onClick(n,this._value):this.toggleDropdown()}},this.clickToggleHandler={onClick:n=>{n.stopPropagation(),this.toggleDropdown()}},this.toggleDropdown=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!this.state._show})},this.handleOnClose=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!1})},this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_show:!1}}render(){const n="kol-split-button-dropdown-label";return(0,o.h)("div",{key:"adfeb36fc1c13115648cab2c692dcf28ede4f663",class:"kol-split-button"},(0,o.h)("div",{key:"6ddddfa00a901d7a1c02a242384ba6478955c13b",class:"kol-split-button__root"},(0,o.h)(a.a,{key:"8d5545244b2cff5ae573bdd2cb9ec9d7343df844",class:(0,s.c)("kol-split-button__button",{[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0}),_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),(0,o.h)("div",{key:"541dc194c17523c5cf68f484bfaee3efb534b879",class:"kol-split-button__horizontal-line"}),(0,o.h)(a.a,{key:"f3736a72068960bfe628f6b9734ce12c1fbaa3d2",class:"kol-split-button__secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?(0,i.t)(`${n}-close`):(0,i.t)(`${n}-open`),_on:this.clickToggleHandler})),(0,o.h)(a.k,{key:"596a0e240cd9bbd6707a314a21387c767fed614a",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},(0,o.h)("slot",{key:"7be4e75220049796535a7267791066a5bf923bc4"})))}closePopup(){return n=this,t=function*(){return this.handleOnClose(),Promise.resolve()},new Promise(((e,o)=>{var i=n=>{try{s(t.next(n))}catch(n){o(n)}},a=n=>{try{s(t.throw(n))}catch(n){o(n)}},s=n=>n.done?e(n.value):Promise.resolve(n.value).then(i,a);s((t=t.apply(n,null)).next())}));var n,t}static get delegatesFocus(){return!0}};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  .kol-popover {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: 0;\n    position: absolute;\n  }\n  .kol-popover__content {\n    background-color: #fff;\n    min-height: max-content;\n    min-width: max-content;\n    opacity: 0;\n    position: absolute;\n  }\n  .kol-popover__content--visible {\n    animation: 0.3s ease-in forwards fadeInOpacity;\n  }\n  .kol-popover__content--disappear {\n    animation: 0.3s ease-in backwards fadeInOpacity;\n  }\n  .kol-popover__arrow {\n    background-color: inherit;\n    height: var(--font-size);\n    position: absolute;\n    rotate: 0.125turn;\n    width: var(--font-size);\n    z-index: -1;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-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-split-button {\n    display: flex;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .kol-split-button__root {\n    display: flex;\n    position: relative;\n  }\n  .kol-split-button__button {\n    flex-grow: 1;\n    text-align: left;\n  }\n  .kol-split-button .kol-popover__content {\n    margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-popover__arrow {\n    display: none;\n  }\n}"}},5687:(n,t,e)=>{e.d(t,{b:()=>s,h:()=>i,p:()=>o,s:()=>a});let o="development";try{o="production"}catch(n){o="production"}const i=(n,t,e)=>{if(n&&t&&"string"==typeof e){const o=n.querySelector(`[slot="${e}"]`);o&&t.appendChild(o)}},a=n=>""===n,s=(n,t)=>n||t||""}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9423],{9060:(n,t,e)=>{function o(n){var t,e,i="";if("string"==typeof n||"number"==typeof n)i+=n;else if("object"==typeof n)if(Array.isArray(n)){var a=n.length;for(t=0;t<a;t++)n[t]&&(e=o(n[t]))&&(i&&(i+=" "),i+=e)}else for(e in n)n[e]&&(i&&(i+=" "),i+=e);return i}function i(){for(var n,t,e=0,i="",a=arguments.length;e<a;e++)(n=arguments[e])&&(t=o(n))&&(i&&(i+=" "),i+=t);return i}e.d(t,{c:()=>i})},3180:(n,t,e)=>{e.d(t,{t:()=>a});var o=e(4216),i=e(5687);let a=(n,t)=>{var e;return(null!==(e=(0,o.g)())&&void 0!==e?e:(0,o.i)("de")).translate(n,t)};"test"===i.p&&(a=n=>n)},9423:(n,t,e)=>{e.r(t),e.d(t,{kol_split_button:()=>l});var o=e(1290),i=e(3180),a=e(4957),s=e(9060);const l=class{constructor(n){(0,o.r)(this,n),this.clickButtonHandler={onClick:n=>{var t,e;n.stopPropagation(),"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onClick)?null===(e=this._on)||void 0===e||e.onClick(n,this._value):this.toggleDropdown()}},this.clickToggleHandler={onClick:n=>{n.stopPropagation(),this.toggleDropdown()}},this.toggleDropdown=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!this.state._show})},this.handleOnClose=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!1})},this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_show:!1}}render(){const n="kol-split-button-dropdown-label";return(0,o.h)("div",{key:"35035de4c6bdb52e9b746b8b5bb0c4627176d5c8",class:"kol-split-button"},(0,o.h)("div",{key:"199d2ae8ba145c0789ae476451ee4fa0db768bf4",class:"kol-split-button__root"},(0,o.h)(a.a,{key:"5b431b2b3c51d368816310bf7eb42423ff725329",class:(0,s.c)("kol-split-button__button",{[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0}),_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),(0,o.h)("div",{key:"ea2d938115a3e8a04c366b9144c3abd6771c6362",class:"kol-split-button__horizontal-line"}),(0,o.h)(a.a,{key:"8b8b03678976500ff2d2171ca6eeecfe62c6f0d6",class:"kol-split-button__secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?(0,i.t)(`${n}-close`):(0,i.t)(`${n}-open`),_on:this.clickToggleHandler})),(0,o.h)(a.k,{key:"de9323d1c63d2f7db0b94e0c68cfe89febec7f91",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},(0,o.h)("slot",{key:"2256468a2ced81971478629c51439966ff4787a6"})))}closePopup(){return n=this,t=function*(){return this.handleOnClose(),Promise.resolve()},new Promise(((e,o)=>{var i=n=>{try{s(t.next(n))}catch(n){o(n)}},a=n=>{try{s(t.throw(n))}catch(n){o(n)}},s=n=>n.done?e(n.value):Promise.resolve(n.value).then(i,a);s((t=t.apply(n,null)).next())}));var n,t}static get delegatesFocus(){return!0}};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  .kol-popover {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: 0;\n    position: absolute;\n  }\n  .kol-popover__content {\n    background-color: #fff;\n    min-height: max-content;\n    min-width: max-content;\n    opacity: 0;\n    position: absolute;\n  }\n  .kol-popover__content--visible {\n    animation: 0.3s ease-in forwards fadeInOpacity;\n  }\n  .kol-popover__content--disappear {\n    animation: 0.3s ease-in backwards fadeInOpacity;\n  }\n  .kol-popover__arrow {\n    background-color: inherit;\n    height: var(--font-size);\n    position: absolute;\n    rotate: 0.125turn;\n    width: var(--font-size);\n    z-index: -1;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-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-split-button {\n    display: flex;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .kol-split-button__root {\n    display: flex;\n    position: relative;\n  }\n  .kol-split-button__button {\n    flex-grow: 1;\n    text-align: left;\n  }\n  .kol-split-button .kol-popover__content {\n    margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-popover__arrow {\n    display: none;\n  }\n}"}},5687:(n,t,e)=>{e.d(t,{b:()=>s,h:()=>i,p:()=>o,s:()=>a});let o="development";try{o="production"}catch(n){o="production"}const i=(n,t,e)=>{if(n&&t&&"string"==typeof e){const o=n.querySelector(`[slot="${e}"]`);o&&t.appendChild(o)}},a=n=>""===n,s=(n,t)=>n||t||""}}]);

package/dist/9430.js

@@ -1,2 +1,2 @@
 /*! For license information please see 9430.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9430],{7754:(n,e,t)=>{t.d(e,{K:()=>h});var o=t(4600),i=t(6922),l=t(9060),r=t(3584),a=t(7662),s=t(6576);const c=({ariaLabel:n,icon:e})=>(0,i.h)(a.d,{class:"kol-alert__heading-icon",_label:n,_icons:e}),d=({type:n,label:e})=>{switch(n){case"error":return(0,i.h)(c,{ariaLabel:(0,r.t)("kol-error"),icon:"codicon codicon-error",label:e});case"info":return(0,i.h)(c,{ariaLabel:(0,r.t)("kol-info"),icon:"codicon codicon-info",label:e});case"warning":return(0,i.h)(c,{ariaLabel:(0,r.t)("kol-warning"),icon:"codicon codicon-warning",label:e});case"success":return(0,i.h)(c,{ariaLabel:(0,r.t)("kol-success"),icon:"codicon codicon-pass",label:e});default:return(0,i.h)(c,{ariaLabel:(0,r.t)("kol-message"),icon:"codicon codicon-comment",label:e})}},h=(n,e)=>{var t,c;const{class:h={},type:u="default",variant:p="msg",label:f,hasCloser:b,alert:m,onAlertTimeout:k,onCloserClick:v,level:y}=n,g=(0,o._)(n,["class","type","variant","label","hasCloser","alert","onAlertTimeout","onCloserClick","level"]);m&&((null===(t=navigator.userActivation)||void 0===t?void 0:t.hasBeenActive)&&(null===(c=null===navigator||void 0===navigator?void 0:navigator.vibrate)||void 0===c||c.call(navigator,[100,75,100,75,100])),setTimeout((()=>{null==k||k()}),1e4));const _=Object.assign({class:(0,l.c)("kol-alert",`kol-alert--${u}`,`kol-alert--${p}`,{"kol-alert--hasCloser":!!b},h),role:m?"alert":void 0},g);return(0,i.h)("div",Object.assign({},_),(0,i.h)("div",{class:"kol-alert__container"},(0,i.h)(d,{label:f,type:u}),(0,i.h)("div",{class:"kol-alert__container-content"},f?(0,i.h)(s.K,{class:"kol-alert__heading",level:y},f):null,"msg"===p&&(0,i.h)("div",{class:"kol-alert__content"},e)),b&&(0,i.h)(a.a,{class:"kol-alert__close-button close","data-testid":"alert-close-button",_ariaDescription:(null==f?void 0:f.trim())||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:(0,r.t)("kol-close-alert"),_on:{onClick:v},_tooltipAlign:"left"})),"card"===p&&(0,i.h)("div",{class:"kol-alert__content"},e))}},6576:(n,e,t)=>{t.d(e,{K:()=>d});var o=t(4600),i=t(6922),l=t(9060);const r=1;function a(n){return function(n){return n>=r&&n<=6}(n)?`h${n}`:"strong"}const s=(n,e)=>{var{class:t,level:s=r,variant:c}=n,d=(0,o._)(n,["class","level","variant"]);const h=a(s),u=c||h;return(0,i.h)(h,Object.assign({class:(0,l.c)("kol-headline",`kol-headline--${u}`,t)},d),e)},c=(n,e)=>{var{class:t,level:s=r}=n,c=(0,o._)(n,["class","level"]);const d=function(n){return 1===n?"span":a(n)}(s+1);return(0,i.h)(d,Object.assign({class:(0,l.c)("kol-headline kol-headline--group kol-headline--secondary",t)},c),e)},d=(n,e)=>{var{secondaryHeadline:t,level:a=r,class:d,HeadingGroupProps:h={},SecondaryHeadlineProps:u={}}=n,p=(0,o._)(n,["secondaryHeadline","level","class","HeadingGroupProps","SecondaryHeadlineProps"]);const f=Object.assign({level:a},p);if(!t)return(0,i.h)(s,Object.assign({class:(0,l.c)(d,"kol-headline--single")},f),e);const{class:b}=h,m=(0,o._)(h,["class"]),k=Object.assign({class:(0,l.c)("kol-heading-group",b)},m);return(0,i.h)("hgroup",Object.assign({},k),(0,i.h)(s,Object.assign({class:(0,l.c)(d,"kol-headline--group","kol-headline--primary")},f),e),(0,i.h)(c,Object.assign({level:a},u),t))}},9060:(n,e,t)=>{function o(n){var e,t,i="";if("string"==typeof n||"number"==typeof n)i+=n;else if("object"==typeof n)if(Array.isArray(n)){var l=n.length;for(e=0;e<l;e++)n[e]&&(t=o(n[e]))&&(i&&(i+=" "),i+=t)}else for(t in n)n[t]&&(i&&(i+=" "),i+=t);return i}function i(){for(var n,e,t=0,i="",l=arguments.length;t<l;t++)(n=arguments[t])&&(e=o(n))&&(i&&(i+=" "),i+=e);return i}t.d(e,{c:()=>i})},3584:(n,e,t)=>{t.d(e,{t:()=>l});var o=t(8461),i=t(5687);let l=(n,e)=>{var t;return(null!==(t=(0,o.g)())&&void 0!==t?t:(0,o.i)("de")).translate(n,e)};"test"===i.p&&(l=n=>n)},9430:(n,e,t)=>{t.r(e),t.d(e,{kol_form:()=>c});var o=t(6922),i=t(3584),l=t(7662),r=t(8231),a=t(7754),s=t(5800);const c=class{constructor(n){(0,o.r)(this,n),this.onSubmit=n=>{var e,t;n.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onSubmit)&&(null===(t=this.state._on)||void 0===t||t.onSubmit(n)),this.host&&(0,r.d)(this.host,r.K.submit)},this.onReset=n=>{var e,t;n.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onReset)&&(null===(t=this.state._on)||void 0===t||t.onReset(n)),this.host&&(0,r.d)(this.host,r.K.reset)},this.handleLinkClick=n=>{const e=document.querySelector(n);e&&"function"==typeof e.focus&&(e.scrollIntoView({behavior:"smooth"}),e.focus())},this.setBlockElement=n=>this.errorListBlock=n,this.setFirstLinkElement=n=>this.errorListFirstLink=n,this._on=void 0,this._requiredText=!0,this._errorList=void 0,this.state={}}renderErrorList(n){return(0,o.h)(a.K,{class:"kol-form__alert",ref:this.setBlockElement,type:"error",variant:"card",label:(0,i.t)("kol-error-list-message")},(0,o.h)("nav",{"aria-label":(0,i.t)("kol-error-list")},(0,o.h)("ul",null,null==n?void 0:n.map(((n,e)=>(0,o.h)("li",{key:e},(0,o.h)(l.f,{class:"kol-form__link",_href:"",_label:n.message,_on:{onClick:"string"==typeof n.selector?()=>this.handleLinkClick(String(n.selector)):n.selector},ref:0===e?this.setFirstLinkElement:void 0})))))))}renderFormElement(){return(0,o.h)("form",{class:"kol-form",method:"post",onSubmit:this.onSubmit,onReset:this.onReset,autoComplete:"off",noValidate:!0},!0===this.state._requiredText?(0,o.h)("p",null,(0,o.h)("div",{class:"kol-form__mandatory-fields-hint"},(0,i.t)("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?(0,o.h)("p",null,(0,o.h)("div",{class:"kol-form__mandatory-fields-hint"},this.state._requiredText)):null,(0,o.h)("slot",null))}render(){const n=Array.isArray(this._errorList)&&this._errorList.length>0;return(0,o.h)(o.H,{key:"c2a136366ecf4670db6d7a53e176738fdb472016"},n&&this.renderErrorList(this._errorList),this.renderFormElement())}scrollToErrorList(){var n;null===(n=this.errorListBlock)||void 0===n||n.scrollIntoView({behavior:"smooth",block:"start"}),setTimeout((()=>{var n,e;null===(e=null===(n=this.errorListFirstLink)||void 0===n?void 0:n.querySelector("a"))||void 0===e||e.focus()}),250)}focusErrorList(){return n=this,e=function*(){return this.scrollToErrorList(),Promise.resolve()},new Promise(((t,o)=>{var i=n=>{try{r(e.next(n))}catch(n){o(n)}},l=n=>{try{r(e.throw(n))}catch(n){o(n)}},r=n=>n.done?t(n.value):Promise.resolve(n.value).then(i,l);r((e=e.apply(n,null)).next())}));var n,e}validateOn(n){"object"==typeof n&&null!==n&&(this.state=Object.assign(Object.assign({},this.state),{_on:n}))}validateRequiredText(n){"boolean"==typeof n?(0,s.b)(this,"_requiredText",n):(0,s.i)(this,"_requiredText",n)}validateErrorList(n){((n,e)=>{(0,s.w)(n,"errorList",(n=>Array.isArray(n)&&void 0===n.find((n=>!("string"==typeof n||"function"==typeof n)))),new Set(["string","function"]),e)})(this,n)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}get host(){return(0,o.g)(this)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}};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  :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  :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  @layer kol-component {\n    :host {\n      display: inline-block;\n    }\n    .kol-link {\n      font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n      align-items: baseline;\n      display: inline-flex;\n      place-items: center;\n      text-align: left;\n      text-decoration-line: none;\n    }\n    .kol-link__text .kol-span__label {\n      text-decoration-line: underline;\n    }\n    .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n      text-decoration-thickness: 0.2em;\n    }\n    .kol-link__icon {\n      display: inline-flex;\n      margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n  @layer kol-component {\n    .kol-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  .kol-form {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}"}},5687:(n,e,t)=>{t.d(e,{b:()=>r,h:()=>i,p:()=>o,s:()=>l});let o="development";try{o="production"}catch(n){o="production"}const i=(n,e,t)=>{if(n&&e&&"string"==typeof t){const o=n.querySelector(`[slot="${t}"]`);o&&e.appendChild(o)}},l=n=>""===n,r=(n,e)=>n||e||""},4600:(n,e,t)=>{function o(n,e){var t={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&e.indexOf(o)<0&&(t[o]=n[o]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(n);i<o.length;i++)e.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(n,o[i])&&(t[o[i]]=n[o[i]])}return t}t.d(e,{_:()=>o}),"function"==typeof SuppressedError&&SuppressedError}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9430],{5285:(n,e,t)=>{t.d(e,{K:()=>h});var o=t(4600),i=t(1290),l=t(9060),r=t(3180),a=t(4957),s=t(4692);const c=({ariaLabel:n,icon:e})=>(0,i.h)(a.d,{class:"kol-alert__heading-icon",_label:n,_icons:e}),d=({type:n,label:e})=>{switch(n){case"error":return(0,i.h)(c,{ariaLabel:(0,r.t)("kol-error"),icon:"codicon codicon-error",label:e});case"info":return(0,i.h)(c,{ariaLabel:(0,r.t)("kol-info"),icon:"codicon codicon-info",label:e});case"warning":return(0,i.h)(c,{ariaLabel:(0,r.t)("kol-warning"),icon:"codicon codicon-warning",label:e});case"success":return(0,i.h)(c,{ariaLabel:(0,r.t)("kol-success"),icon:"codicon codicon-pass",label:e});default:return(0,i.h)(c,{ariaLabel:(0,r.t)("kol-message"),icon:"codicon codicon-comment",label:e})}},h=(n,e)=>{var t,c;const{class:h={},type:u="default",variant:p="msg",label:f,hasCloser:b,alert:m,onAlertTimeout:v,onCloserClick:k,level:y}=n,_=(0,o._)(n,["class","type","variant","label","hasCloser","alert","onAlertTimeout","onCloserClick","level"]);m&&((null===(t=navigator.userActivation)||void 0===t?void 0:t.hasBeenActive)&&(null===(c=null===navigator||void 0===navigator?void 0:navigator.vibrate)||void 0===c||c.call(navigator,[100,75,100,75,100])),setTimeout((()=>{null==v||v()}),1e4));const g=Object.assign({class:(0,l.c)("kol-alert",`kol-alert--${u}`,`kol-alert--${p}`,{"kol-alert--hasCloser":!!b},h),role:m?"alert":void 0},_);return(0,i.h)("div",Object.assign({},g),(0,i.h)("div",{class:"kol-alert__container"},(0,i.h)(d,{label:f,type:u}),(0,i.h)("div",{class:"kol-alert__container-content"},f?(0,i.h)(s.K,{class:"kol-alert__heading",level:y},f):null,"msg"===p&&(0,i.h)("div",{class:"kol-alert__content"},e)),b&&(0,i.h)(a.a,{class:"kol-alert__close-button close","data-testid":"alert-close-button",_ariaDescription:(null==f?void 0:f.trim())||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:(0,r.t)("kol-close-alert"),_on:{onClick:k},_tooltipAlign:"left"})),"card"===p&&(0,i.h)("div",{class:"kol-alert__content"},e))}},4692:(n,e,t)=>{t.d(e,{K:()=>d});var o=t(4600),i=t(1290),l=t(9060);const r=1;function a(n){return function(n){return n>=r&&n<=6}(n)?`h${n}`:"strong"}const s=(n,e)=>{var{class:t,level:s=r,variant:c}=n,d=(0,o._)(n,["class","level","variant"]);const h=a(s),u=c||h;return(0,i.h)(h,Object.assign({class:(0,l.c)("kol-headline",`kol-headline--${u}`,t)},d),e)},c=(n,e)=>{var{class:t,level:s=r}=n,c=(0,o._)(n,["class","level"]);const d=function(n){return 1===n?"span":a(n)}(s+1);return(0,i.h)(d,Object.assign({class:(0,l.c)("kol-headline kol-headline--group kol-headline--secondary",t)},c),e)},d=(n,e)=>{var{secondaryHeadline:t,level:a=r,class:d,HeadingGroupProps:h={},SecondaryHeadlineProps:u={}}=n,p=(0,o._)(n,["secondaryHeadline","level","class","HeadingGroupProps","SecondaryHeadlineProps"]);const f=Object.assign({level:a},p);if(!t)return(0,i.h)(s,Object.assign({class:(0,l.c)(d,"kol-headline--single")},f),e);const{class:b}=h,m=(0,o._)(h,["class"]),v=Object.assign({class:(0,l.c)("kol-heading-group",b)},m);return(0,i.h)("hgroup",Object.assign({},v),(0,i.h)(s,Object.assign({class:(0,l.c)(d,"kol-headline--group","kol-headline--primary")},f),e),(0,i.h)(c,Object.assign({level:a},u),t))}},9060:(n,e,t)=>{function o(n){var e,t,i="";if("string"==typeof n||"number"==typeof n)i+=n;else if("object"==typeof n)if(Array.isArray(n)){var l=n.length;for(e=0;e<l;e++)n[e]&&(t=o(n[e]))&&(i&&(i+=" "),i+=t)}else for(t in n)n[t]&&(i&&(i+=" "),i+=t);return i}function i(){for(var n,e,t=0,i="",l=arguments.length;t<l;t++)(n=arguments[t])&&(e=o(n))&&(i&&(i+=" "),i+=e);return i}t.d(e,{c:()=>i})},3180:(n,e,t)=>{t.d(e,{t:()=>l});var o=t(4216),i=t(5687);let l=(n,e)=>{var t;return(null!==(t=(0,o.g)())&&void 0!==t?t:(0,o.i)("de")).translate(n,e)};"test"===i.p&&(l=n=>n)},9430:(n,e,t)=>{t.r(e),t.d(e,{kol_form:()=>c});var o=t(1290),i=t(3180),l=t(4957),r=t(8231),a=t(5285),s=t(5800);const c=class{constructor(n){(0,o.r)(this,n),this.onSubmit=n=>{var e,t;n.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onSubmit)&&(null===(t=this.state._on)||void 0===t||t.onSubmit(n)),this.host&&(0,r.d)(this.host,r.K.submit)},this.onReset=n=>{var e,t;n.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onReset)&&(null===(t=this.state._on)||void 0===t||t.onReset(n)),this.host&&(0,r.d)(this.host,r.K.reset)},this.handleLinkClick=n=>{const e=document.querySelector(n);e&&"function"==typeof e.focus&&(e.scrollIntoView({behavior:"smooth"}),e.focus())},this.setBlockElement=n=>this.errorListBlock=n,this.setFirstLinkElement=n=>this.errorListFirstLink=n,this._on=void 0,this._requiredText=!0,this._errorList=void 0,this.state={}}renderErrorList(n){return(0,o.h)(a.K,{class:"kol-form__alert",ref:this.setBlockElement,type:"error",variant:"card",label:(0,i.t)("kol-error-list-message")},(0,o.h)("nav",{"aria-label":(0,i.t)("kol-error-list")},(0,o.h)("ul",null,null==n?void 0:n.map(((n,e)=>(0,o.h)("li",{key:e},(0,o.h)(l.f,{class:"kol-form__link",_href:"",_label:n.message,_on:{onClick:"string"==typeof n.selector?()=>this.handleLinkClick(String(n.selector)):n.selector},ref:0===e?this.setFirstLinkElement:void 0})))))))}renderFormElement(){return(0,o.h)("form",{class:"kol-form",method:"post",onSubmit:this.onSubmit,onReset:this.onReset,autoComplete:"off",noValidate:!0},!0===this.state._requiredText?(0,o.h)("p",null,(0,o.h)("div",{class:"kol-form__mandatory-fields-hint"},(0,i.t)("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?(0,o.h)("p",null,(0,o.h)("div",{class:"kol-form__mandatory-fields-hint"},this.state._requiredText)):null,(0,o.h)("slot",null))}render(){const n=Array.isArray(this._errorList)&&this._errorList.length>0;return(0,o.h)(o.H,{key:"3cfeeb7596783c154fadf43a4646dcd74070a920"},n&&this.renderErrorList(this._errorList),this.renderFormElement())}scrollToErrorList(){var n;null===(n=this.errorListBlock)||void 0===n||n.scrollIntoView({behavior:"smooth",block:"start"}),setTimeout((()=>{var n,e;null===(e=null===(n=this.errorListFirstLink)||void 0===n?void 0:n.querySelector("a"))||void 0===e||e.focus()}),250)}focusErrorList(){return n=this,e=function*(){return this.scrollToErrorList(),Promise.resolve()},new Promise(((t,o)=>{var i=n=>{try{r(e.next(n))}catch(n){o(n)}},l=n=>{try{r(e.throw(n))}catch(n){o(n)}},r=n=>n.done?t(n.value):Promise.resolve(n.value).then(i,l);r((e=e.apply(n,null)).next())}));var n,e}validateOn(n){"object"==typeof n&&null!==n&&(this.state=Object.assign(Object.assign({},this.state),{_on:n}))}validateRequiredText(n){"boolean"==typeof n?(0,s.b)(this,"_requiredText",n):(0,s.i)(this,"_requiredText",n)}validateErrorList(n){((n,e)=>{(0,s.w)(n,"errorList",(n=>Array.isArray(n)&&void 0===n.find((n=>!("string"==typeof n||"function"==typeof n)))),new Set(["string","function"]),e)})(this,n)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}get host(){return(0,o.g)(this)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}};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  :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  @layer kol-component {\n    :host {\n      display: inline-block;\n    }\n    .kol-link {\n      font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n      align-items: baseline;\n      display: inline-flex;\n      place-items: center;\n      text-align: left;\n      text-decoration-line: none;\n    }\n    .kol-link__text .kol-span__label {\n      text-decoration-line: underline;\n    }\n    .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n      text-decoration-thickness: 0.2em;\n    }\n    .kol-link__icon {\n      display: inline-flex;\n      margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n  @layer kol-component {\n    .kol-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  .kol-form {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}"}},5687:(n,e,t)=>{t.d(e,{b:()=>r,h:()=>i,p:()=>o,s:()=>l});let o="development";try{o="production"}catch(n){o="production"}const i=(n,e,t)=>{if(n&&e&&"string"==typeof t){const o=n.querySelector(`[slot="${t}"]`);o&&e.appendChild(o)}},l=n=>""===n,r=(n,e)=>n||e||""},4600:(n,e,t)=>{function o(n,e){var t={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&e.indexOf(o)<0&&(t[o]=n[o]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(n);i<o.length;i++)e.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(n,o[i])&&(t[o[i]]=n[o[i]])}return t}t.d(e,{_:()=>o}),"function"==typeof SuppressedError&&SuppressedError}}]);

package/dist/9802.js

@@ -0,0 +1,2 @@
+/*! For license information please see 9802.js.LICENSE.txt */
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9802],{6312:(n,e,t)=>{t.r(e),t.d(e,{kol_popover_button:()=>s});var o=t(1290),i=t(4957),a=t(3555),l=t(9246);const s=class{constructor(n){(0,o.r)(this,n),this.state={_label:"",_popoverAlign:"bottom"},this.justClosed=!1,this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._popoverAlign="bottom",this._role=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal"}handleBeforeToggle(n){"closed"===n.newState?(this.justClosed=!0,setTimeout((()=>{this.justClosed=!1}),10)):this.refPopover&&(this.refPopover.style.visibility="hidden")}handleToggle(n){"open"===n.newState&&this.refPopover&&this.refButton&&(0,a.a)({align:this.state._popoverAlign,floatingElement:this.refPopover,referenceElement:this.refButton})}handleButtonClick(){var n;this.justClosed||null===(n=this.refPopover)||void 0===n||n.togglePopover()}componentDidRender(){var n,e;null===(n=this.refPopover)||void 0===n||n.addEventListener("toggle",this.handleToggle.bind(this)),null===(e=this.refPopover)||void 0===e||e.addEventListener("beforetoggle",this.handleBeforeToggle.bind(this))}disconnectedCallback(){var n,e;null===(n=this.refPopover)||void 0===n||n.removeEventListener("toggle",this.handleToggle.bind(this)),null===(e=this.refPopover)||void 0===e||e.removeEventListener("beforetoggle",this.handleBeforeToggle.bind(this))}render(){return(0,o.h)("div",{key:"9c96f5cb542d97727d6f9d061e895f4f4184b72a",class:"kol-popover-button"},(0,o.h)(i.a,{key:"4f23e2d2d9db502b64d8811b3e371ddf78b1cbff",_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:this._role,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant,"data-testid":"popover-button",class:"kol-popover-button__button",ref:n=>this.refButton=n,onClick:this.handleButtonClick.bind(this)},(0,o.h)("slot",{key:"5e350fc6068d4f9ea2440711b2f40dbfa0853360",name:"expert",slot:"expert"})),(0,o.h)("div",{key:"ffbb07d6670ea1066e07e03ba308d9e8b543eccb",ref:n=>this.refPopover=n,"data-testid":"popover-content",popover:"auto",id:"popover",class:"kol-popover-button__popover"},(0,o.h)("slot",{key:"bd93a54d0871b7d0fb240a0862e7af4e603bf7a5"})))}validatePopoverAlign(n){((n,e)=>{(0,l.a)(n,"_popoverAlign",e)})(this,n)}componentWillLoad(){this.validatePopoverAlign(this._popoverAlign)}static get watchers(){return{_popoverAlign:["validatePopoverAlign"]}}};s.style={default:"@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    margin: auto;\n    width: 100%;\n  }\n}\n@layer kol-component {\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    border: 1px solid #000;\n    margin: 0;\n    padding: 0;\n  }\n}"}},5687:(n,e,t)=>{t.d(e,{b:()=>l,h:()=>i,p:()=>o,s:()=>a});let o="development";try{o="production"}catch(n){o="production"}const i=(n,e,t)=>{if(n&&e&&"string"==typeof t){const o=n.querySelector(`[slot="${t}"]`);o&&e.appendChild(o)}},a=n=>""===n,l=(n,e)=>n||e||""}}]);

package/dist/9802.js.LICENSE.txt

@@ -0,0 +1,3 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */