@public-ui/sample-react 3.0.0 → 3.0.1-rc.0

package/dist/9581.js

@@ -1,2 +1,2 @@
 /*! For license information please see 9581.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9581],{2429:(e,n,t)=>{t.d(n,{I:()=>h,a:()=>u,b:()=>s,f:()=>d,v:()=>r});var i=t(257),o=t(9867),l=t(3472);const a=e=>{if("object"==typeof e&&null!==e){if("string"==typeof e.label&&e.label.length>0)return e.disabled=!0===e.disabled,e.label=`${e.label}`.trim(),!1===(0,l.b)(e.label,3)&&!1===(0,l.c)(e.label)&&(0,i.b)(`A differing Aria-Label (${e.label}) is not accessible. A differing Aria-Label should consist of at least three readable characters.`),!Array.isArray(e.options)||void 0===e.options.find((e=>!1===a(e)));if("number"==typeof e.label)return!0}return!1},s=(e,n,t={})=>{(0,i.y)(e,"_options",(e=>"object"==typeof e&&null!==e&&"string"==typeof e.label&&e.label.length>0),n,void 0,t)},r=(e,n,t={})=>{(0,i.y)(e,"_options",a,n,void 0,t)},c=["horizontal","vertical"],d=(e,n,t="")=>{n.forEach(((n,i)=>{const o=`${t}-${i}`;"object"==typeof n&&null!==n&&"string"==typeof n.label&&n.label.length>0&&(Array.isArray(n.options)?d(e,n.options,o):e.set(o,n))}))};class h extends o.I{constructor(e,n,t){super(e,n,t),this.component=e}validateRequired(e){((e,n)=>{(0,i.h)(e,"_required",n)})(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateRequired(this.component._required)}}class u extends h{constructor(e,n,t){super(e,n,t),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.afterPatchOptions=(e,n,t,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,n)=>{const t=n.has("_options")?n.get("_options"):this.component.state._options;Array.isArray(t)&&t.length>0&&(this.keyOptionMap.clear(),d(this.keyOptionMap,t))},this.component=e}validateOrientation(e){(0,i.w)(this.component,"_orientation",(e=>"string"==typeof e&&c.includes(e)),new Set([`Orientation {${c.join(", ")}`]),e,{defaultValue:"vertical"})}validateOptions(e){s(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateValue(e){e=Array.isArray(e)?e[0]:e,(0,i.k)(this.component,"_value",e,{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions})}componentWillLoad(){super.componentWillLoad(),this.validateOrientation(this.component._orientation),this.validateOptions(this.component._options),this.validateValue(this.component._value)}}},3885:(e,n,t)=>{t.d(n,{K:()=>l});var i=t(6733),o=t(1698);const l=e=>{const{class:n,style:t,icons:l,label:a,onClick:s}=e;return(0,i.h)(o.d,{class:n,style:t,onClick:s,_icons:l,_label:a})}},4138:(e,n,t)=>{t.d(n,{F:()=>d});var i=t(1111),o=t(6733),l=t(8045),a=t(257),s=t(9867);const r=(e,n)=>{var{class:t}=e,a=(0,i._)(e,["class"]);return(0,o.h)("div",Object.assign({class:(0,l.c)("kol-field-control__input",t)},a),n)},c=(e,n)=>{const{class:t,id:c,disabled:d,label:h,hideLabel:u,labelAlign:b,renderNoTooltip:p,hint:k,renderNoHint:f,tooltipAlign:m,accessKey:v,shortKey:_,msg:g,touched:y,required:x,readonly:w,fieldControlInputProps:A,fieldControlLabelProps:O,fieldControlTooltipProps:z,fieldControlHintProps:L}=e,j=(0,i._)(e,["class","id","disabled","label","hideLabel","labelAlign","renderNoTooltip","hint","renderNoHint","tooltipAlign","accessKey","shortKey","msg","touched","required","readonly","fieldControlInputProps","fieldControlLabelProps","fieldControlTooltipProps","fieldControlHintProps"]),B=!f,V=!p,q=(0,s.c)(g,y),C=(0,a.l)(h),P=V&&!C&&u,I=(0,a.B)(v,_),F=[(0,o.h)(o.F,null,(0,o.h)(r,Object.assign({},A),n),P&&(0,o.h)(s.b,Object.assign({},z||{},{id:c,label:h,hideLabel:u,align:m,badgeText:I}))),(0,o.h)(s.K,Object.assign({},O||{},{id:c,baseClassName:"kol-field-control",class:(0,l.c)(null==O?void 0:O.class,{"kol-field-control__label--visually-hidden":Boolean(u)}),hasExpertSlot:C,label:h,accessKey:v,shortKey:_}))];"left"===b&&F.reverse();const K={"kol-field-control--disabled":Boolean(d),"kol-field-control--required":Boolean(x),"kol-field-control--touched":Boolean(y),"kol-field-control--hide-label":Boolean(u),"kol-field-control--read-only":Boolean(w),[`kol-field-control--${(null==g?void 0:g.type)||"error"}`]:Boolean(q),[`kol-field-control--label-align-${b}`]:Boolean(b)};return(0,o.h)("div",Object.assign({class:(0,l.c)("kol-field-control",K,t)},j),F,B&&(0,o.h)(s.d,Object.assign({},L||{},{baseClassName:"kol-field-control",id:c,hint:k})))},d=(e,n)=>{var{state:t}=e,l=(0,i._)(e,["state"]);return(0,o.h)(c,Object.assign({},function(e){const n={accessKey:e._accessKey,shortKey:e._shortKey,id:e._id,disabled:e._disabled,msg:(0,s.a)(e._msg),hint:e._hint,label:e._label,hideLabel:e._hideLabel,touched:e._touched};return"_required"in e&&(n.required=e._required),"_readOnly"in e&&(n.readonly=e._readOnly),"_labelAlign"in e&&(n.labelAlign=e._labelAlign),n}(t),l),n)}},8176:(e,n,t)=>{t.d(n,{I:()=>s});var i=t(1111),o=t(6733),l=t(8045),a=(t(257),t(9867));const s=e=>{const{class:n,msg:t,required:s,disabled:r,touched:c,readonly:d,ariaDescribedBy:h,hideLabel:u,label:b,suggestions:p,value:k}=e,f=(0,i._)(e,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),m=(0,a.c)(t,c),v={"kol-input--disabled":Boolean(r),"kol-input--required":Boolean(s),"kol-input--touched":Boolean(c),"kol-input--readonly":Boolean(d),[`kol-input--${(null==t?void 0:t.type)||"error"}`]:m},_=Object.assign(Object.assign({class:(0,l.c)("kol-input",v,n),required:s,disabled:r,readonly:d,type:"text",list:p?`${f.id}-list`:void 0},(0,a.e)({ariaDescribedBy:h,hideLabel:u,label:b})),f);return(0,o.h)(o.F,null,(0,o.h)("input",Object.assign({},_,{value:k})),p)}},9581:(e,n,t)=>{t.r(n),t.d(n,{kol_input_checkbox:()=>x});var i=t(6733),o=t(8045),l=t(2190),a=t(257),s=t(2429),r=t(9867),c=t(4138),d=t(1111),h=t(3885),u=t(8176),b=(t(3472),t(3694),t(1042),t(8296),t(1698),t(4269),t(3710),t(5561),t(5154),t(753),t(9709),t(9272),t(6660),t(3185),t(2425),t(376),t(5538),(e,n,t)=>new Promise(((i,o)=>{var l=e=>{try{s(t.next(e))}catch(e){o(e)}},a=e=>{try{s(t.throw(e))}catch(e){o(e)}},s=e=>e.done?i(e.value):Promise.resolve(e.value).then(l,a);s((t=t.apply(e,n)).next())})));const p=["button","default","switch"],k=["left","right"];class f extends s.I{constructor(e,n,t){super(e,n,t),this.setFormAssociatedCheckboxValue=e=>{this.component._checked?this.setFormAssociatedValue(e):this.setFormAssociatedValue(null)},this.component=e}validateChecked(e){((e,n)=>{(0,a.h)(e,"_checked",n)})(this.component,e),this.setFormAssociatedCheckboxValue(this.component.state._value)}validateIcons(e){(0,a.w)(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&((0,a.q)(e.checked,1)||(0,a.q)(e.indeterminate,1)||(0,a.q)(e.unchecked,1))),new Set(["InputCheckboxIcons"]),e,{hooks:{beforePatch:(e,n,t)=>{n.set("_icons",Object.assign(Object.assign({},t.state._icons),e))}}})}validateIndeterminate(e){((e,n)=>{(0,a.h)(e,"_indeterminate",n)})(this.component,e)}validateLabelAlign(e){((e,n)=>{(0,a.w)(e,"_labelAlign",(e=>"string"==typeof e&&k.includes(e)),new Set([`KoliBriLabelAlign {${k.join(", ")}`]),n)})(this.component,e)}validateValue(e){(0,a.k)(this.component,"_value",e),this.setFormAssociatedCheckboxValue(this.component.state._value)}validateVariant(e){(0,a.w)(this.component,"_variant",(e=>"string"==typeof e&&p.includes(e)),new Set([`String {${p.join(", ")}`]),e)}componentWillLoad(){super.componentWillLoad(),this.validateChecked(this.component._checked),this.validateIcons(this.component._icons),this.validateIndeterminate(this.component._indeterminate),this.validateValue(this.component._value),this.validateVariant(this.component._variant),this.validateLabelAlign(this.component._labelAlign)}}const m=e=>{var{class:n}=e,t=(0,d._)(e,["class"]);return(0,i.h)(h.K,Object.assign({class:(0,o.c)("kol-checkbox__icon",n)},t))},v=e=>{var{class:n}=e,t=(0,d._)(e,["class"]);return(0,i.h)(u.I,Object.assign({class:(0,o.c)("kol-checkbox__input",n)},t,{type:"checkbox"}))},_=e=>{var n,{class:t,variant:l="default",icon:a,inputProps:s}=e,c=(0,d._)(e,["class","variant","icon","inputProps"]);const h=(0,r.c)(null==s?void 0:s.msg,null==s?void 0:s.touched),u={[`kol-checkbox--variant-${l}`]:!0,"kol-checkbox--checked":null==s?void 0:s.checked,"kol-checkbox--indeterminate":null==s?void 0:s.indeterminate,"kol-checkbox--disabled":Boolean(null==s?void 0:s.disabled),"kol-checkbox--required":Boolean(null==s?void 0:s.required),"kol-checkbox--touched":Boolean(null==s?void 0:s.touched),[`kol-checkbox--${(null===(n=null==s?void 0:s.msg)||void 0===n?void 0:n.type)||"error"}`]:Boolean(h)};return(0,i.h)("label",Object.assign({class:(0,o.c)("kol-checkbox",u,t)},c),(0,i.h)(m,{label:"",icons:a}),(0,i.h)(v,Object.assign({},s)))};function g(e,n={}){const{ariaDescribedBy:t}=(0,r.g)(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t};return"_required"in e&&(i.required=e._required),"_checked"in e&&(i.checked=e._checked),"_indeterminate"in e&&(i.indeterminate=e._indeterminate),"_touched"in e&&(i.touched=e._touched),"_msg"in e&&(i.msg=(0,r.a)(e._msg)),Object.assign(Object.assign({},i),n)}const y=e=>{var{state:n,inputProps:t}=e,o=(0,d._)(e,["state","inputProps"]);const l=(null==n?void 0:n._variant)||"default";return(0,i.h)(_,Object.assign({variant:l,inputProps:g(n,t)},o))},x=class{getModelValue(){return this._checked?this.state._value:null}getValue(){return b(this,null,(function*(){return this.getModelValue()}))}kolFocus(){return b(this,null,(function*(){var e;null===(e=this.inputRef)||void 0===e||e.focus()}))}getFormFieldProps(){return{state:this.state,class:(0,o.c)("kol-input-checkbox",{"kol-input-checkbox--checked":this.state._checked,"kol-input-checkbox--indeterminate":this.state._indeterminate,[`kol-input-checkbox--variant-${this.state._variant||"default"}`]:!0,[`kol-input-checkbox--label-align-${this.state._labelAlign||"right"}`]:!0}),tooltipAlign:this._tooltipAlign,"data-role":"button"===this.state._variant?"button":void 0,alert:this.showAsAlert(),renderNoTooltip:!0}}getFieldControlProps(){return{class:(0,o.c)("kol-input-checkbox__field-control",{"kol-input-checkbox__field-control--checked":this.state._checked,"kol-input-checkbox__field-control--indeterminate":this.state._indeterminate,[`kol-input-checkbox__field-control--variant-${this.state._variant||"default"}`]:!0}),state:this.state}}getInputProps(){return{state:this.state,icon:this.getIcon(),inputProps:Object.assign(Object.assign({class:(0,o.c)({"visually-hidden":"button"===this.state._variant}),ref:this.catchRef},this.controller.onFacade),{onInput:this.onInput,onChange:this.onChange,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},onClick:void 0})}}getIcon(){return this.state._indeterminate?this.state._icons.indeterminate:this.state._checked?this.state._icons.checked:this.state._icons.unchecked}render(){return(0,i.h)(r.F,Object.assign({key:"7fb2ecb21c81667431909cd393b331609c83be4e"},this.getFormFieldProps(),{renderNoLabel:!0}),(0,i.h)(c.F,Object.assign({key:"b7211c6548c3cab0a5a7f9d71efe6c7bfd56f90b"},this.getFieldControlProps(),{renderNoHint:!0}),(0,i.h)(y,Object.assign({key:"9a6294d54e1ea9d51942eb13b27c1de2a036c431"},this.getInputProps()))))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{this.inputRef=e},this.onInput=e=>{this._checked=!this._checked,this._indeterminate=!1;const n=this.getModelValue();this.controller.onFacade.onInput(e,!1,n),this.controller.setFormAssociatedCheckboxValue(n)},this.onChange=e=>{this.controller.onFacade.onChange(e,this.getModelValue())},this._accessKey=void 0,this._checked=!1,this._hideMsg=!1,this._disabled=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._indeterminate=void 0,this._label=void 0,this._labelAlign="right",this._msg=void 0,this._name=void 0,this._on=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=!0,this._variant="default",this.state={_checked:!1,_hideMsg:!1,_icons:{checked:"codicon codicon-check",indeterminate:"codicon codicon-remove",unchecked:"codicon codicon-close"},_id:`id-${(0,l.n)()}`,_indeterminate:!1,_label:"",_value:!0,_variant:"default",_labelAlign:"right"},this.inputHasFocus=!1,this.controller=new f(this,"checkbox",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateChecked(e){this.controller.validateChecked(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateIndeterminate(e){this.controller.validateIndeterminate(e)}validateLabel(e){this.controller.validateLabel(e)}validateLabelAlign(e){this.controller.validateLabelAlign(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}validateVariant(e){this.controller.validateVariant(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_checked:["validateChecked"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_indeterminate:["validateIndeterminate"],_label:["validateLabel"],_labelAlign:["validateLabelAlign"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"],_variant:["validateVariant"]}}};x.style={default:'/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don\'t want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-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-field-control {\n    min-height: var(--a11y-min-size);\n    display: grid;\n    grid-template-columns: auto 1fr;\n    grid-template-areas: "input label";\n    grid-template-rows: auto;\n    align-items: center;\n    justify-content: left;\n  }\n  .kol-field-control:has(.kol-field-control__hint) {\n    grid-template-columns: auto 1fr;\n    grid-template-areas: "input label" "hint hint";\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {\n    grid-template-columns: 1fr auto;\n    grid-template-areas: "label input";\n    grid-template-rows: auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {\n    grid-template-columns: 1fr auto;\n    grid-template-areas: "label input" "hint hint";\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control__input {\n    grid-area: input;\n    display: flex;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n  }\n  .kol-field-control__label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    flex-grow: 1;\n    grid-area: label;\n    min-height: var(--a11y-min-size);\n  }\n  .kol-field-control__label--visually-hidden {\n    height: 0;\n    margin: 0;\n    padding: 0;\n    visibility: hidden;\n  }\n  .kol-field-control__label-text::after {\n    content: "";\n  }\n  .kol-field-control__tooltip .span-label::after {\n    content: "";\n  }\n  .kol-field-control__hint {\n    grid-area: hint;\n  }\n  .kol-field-control--disabled .kol-field-control__label {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n  .kol-field-control--required .kol-field-control__label-text::after {\n    content: "*";\n  }\n  .kol-field-control--required .kol-field-control__tooltip .span-label::after {\n    content: "*";\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-checkbox {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    position: relative;\n  }\n  .kol-checkbox--disabled {\n    cursor: not-allowed;\n  }\n  .kol-checkbox .kol-input {\n    appearance: none;\n    background-color: #fff;\n    border-style: solid;\n    border-width: 2px;\n    cursor: inherit;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    transition: 0.5s;\n  }\n  .kol-checkbox .kol-input:before {\n    content: "";\n  }\n  /**\n   * Variant: Checkbox\n   */\n  .kol-checkbox--variant-default {\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-checkbox--variant-default .kol-icon {\n    display: flex;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n    pointer-events: none;\n  }\n  .kol-checkbox--variant-default .kol-icon::part(icon) {\n    display: none;\n  }\n  .kol-checkbox--variant-default .kol-input {\n    width: calc(22rem / var(--kolibri-root-font-size, 16));\n    height: calc(22rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox--variant-default.kol-checkbox--checked .kol-icon::part(icon), .kol-checkbox--variant-default.kol-checkbox--indeterminate .kol-icon::part(icon) {\n    display: block;\n  }\n  /**\n   * Variant: Switch\n   */\n  .kol-checkbox--variant-switch {\n    position: relative;\n  }\n  .kol-checkbox--variant-switch .kol-input {\n    display: inline-block;\n    height: 1.7em;\n    min-width: 3.2em;\n    position: relative;\n    width: 3.2em;\n  }\n  .kol-checkbox--variant-switch .kol-input::before {\n    background-color: #000;\n    height: 1.2em;\n    left: calc(0.25em - (2rem / var(--kolibri-root-font-size, 16)));\n    top: calc(0.25em - (2rem / var(--kolibri-root-font-size, 16)));\n    position: absolute;\n    transition: 0.5s;\n    width: 1.2em;\n  }\n  .kol-checkbox--variant-switch .kol-input:checked::before {\n    transform: translateX(1.5em);\n  }\n  .kol-checkbox--variant-switch .kol-input:indeterminate::before {\n    transform: translateX(0.75em);\n  }\n  .kol-checkbox--variant-switch .kol-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.2em;\n    height: 1.2em;\n    position: absolute;\n    z-index: 1;\n    top: 50%;\n    left: calc(4rem / var(--kolibri-root-font-size, 16));\n    transform: translate(0, -50%);\n    transition: 0.5s;\n    color: #000;\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n    transform: translate(1.5em, -50%);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--indeterminate .kol-icon {\n    transform: translate(0.75em, -50%);\n  }\n  /**\n   * Variant: Button\n   */\n  .kol-checkbox--variant-button {\n    width: var(--a11y-min-size);\n  }\n  .kol-checkbox--variant-button .kol-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n  }\n}'}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9581],{2074:(e,n,t)=>{t.d(n,{K:()=>l});var i=t(6123),o=t(1698);const l=e=>{const{class:n,style:t,icons:l,label:a,onClick:s}=e;return(0,i.h)(o.d,{class:n,style:t,onClick:s,_icons:l,_label:a})}},3682:(e,n,t)=>{t.d(n,{F:()=>d});var i=t(1111),o=t(6123),l=t(8045),a=t(257),s=t(4571);const r=(e,n)=>{var{class:t}=e,a=(0,i._)(e,["class"]);return(0,o.h)("div",Object.assign({class:(0,l.c)("kol-field-control__input",t)},a),n)},c=(e,n)=>{const{class:t,id:c,disabled:d,label:h,hideLabel:u,labelAlign:b,renderNoTooltip:p,hint:k,renderNoHint:f,tooltipAlign:m,accessKey:v,shortKey:_,msg:g,touched:y,required:x,readonly:w,fieldControlInputProps:A,fieldControlLabelProps:O,fieldControlTooltipProps:z,fieldControlHintProps:L}=e,j=(0,i._)(e,["class","id","disabled","label","hideLabel","labelAlign","renderNoTooltip","hint","renderNoHint","tooltipAlign","accessKey","shortKey","msg","touched","required","readonly","fieldControlInputProps","fieldControlLabelProps","fieldControlTooltipProps","fieldControlHintProps"]),B=!f,V=!p,q=(0,s.c)(g,y),C=(0,a.l)(h),P=V&&!C&&u,I=(0,a.B)(v,_),F=[(0,o.h)(o.F,null,(0,o.h)(r,Object.assign({},A),n),P&&(0,o.h)(s.b,Object.assign({},z||{},{id:c,label:h,hideLabel:u,align:m,badgeText:I}))),(0,o.h)(s.K,Object.assign({},O||{},{id:c,baseClassName:"kol-field-control",class:(0,l.c)(null==O?void 0:O.class,{"kol-field-control__label--visually-hidden":Boolean(u)}),hasExpertSlot:C,label:h,accessKey:v,shortKey:_}))];"left"===b&&F.reverse();const K={"kol-field-control--disabled":Boolean(d),"kol-field-control--required":Boolean(x),"kol-field-control--touched":Boolean(y),"kol-field-control--hide-label":Boolean(u),"kol-field-control--read-only":Boolean(w),[`kol-field-control--${(null==g?void 0:g.type)||"error"}`]:Boolean(q),[`kol-field-control--label-align-${b}`]:Boolean(b)};return(0,o.h)("div",Object.assign({class:(0,l.c)("kol-field-control",K,t)},j),F,B&&(0,o.h)(s.d,Object.assign({},L||{},{baseClassName:"kol-field-control",id:c,hint:k})))},d=(e,n)=>{var{state:t}=e,l=(0,i._)(e,["state"]);return(0,o.h)(c,Object.assign({},function(e){const n={accessKey:e._accessKey,shortKey:e._shortKey,id:e._id,disabled:e._disabled,msg:(0,s.a)(e._msg),hint:e._hint,label:e._label,hideLabel:e._hideLabel,touched:e._touched};return"_required"in e&&(n.required=e._required),"_readOnly"in e&&(n.readonly=e._readOnly),"_labelAlign"in e&&(n.labelAlign=e._labelAlign),n}(t),l),n)}},6205:(e,n,t)=>{t.d(n,{I:()=>s});var i=t(1111),o=t(6123),l=t(8045),a=(t(257),t(4571));const s=e=>{const{class:n,msg:t,required:s,disabled:r,touched:c,readonly:d,ariaDescribedBy:h,hideLabel:u,label:b,suggestions:p,value:k}=e,f=(0,i._)(e,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),m=(0,a.c)(t,c),v={"kol-input--disabled":Boolean(r),"kol-input--required":Boolean(s),"kol-input--touched":Boolean(c),"kol-input--readonly":Boolean(d),[`kol-input--${(null==t?void 0:t.type)||"error"}`]:m},_=Object.assign(Object.assign({class:(0,l.c)("kol-input",v,n),required:s,disabled:r,readonly:d,type:"text",list:p?`${f.id}-list`:void 0},(0,a.e)({ariaDescribedBy:h,hideLabel:u,label:b})),f);return(0,o.h)(o.F,null,(0,o.h)("input",Object.assign({},_,{value:k})),p)}},8533:(e,n,t)=>{t.d(n,{I:()=>h,a:()=>u,b:()=>s,f:()=>d,v:()=>r});var i=t(257),o=t(4571),l=t(3472);const a=e=>{if("object"==typeof e&&null!==e){if("string"==typeof e.label&&e.label.length>0)return e.disabled=!0===e.disabled,e.label=`${e.label}`.trim(),!1===(0,l.b)(e.label,3)&&!1===(0,l.c)(e.label)&&(0,i.b)(`A differing Aria-Label (${e.label}) is not accessible. A differing Aria-Label should consist of at least three readable characters.`),!Array.isArray(e.options)||void 0===e.options.find((e=>!1===a(e)));if("number"==typeof e.label)return!0}return!1},s=(e,n,t={})=>{(0,i.y)(e,"_options",(e=>"object"==typeof e&&null!==e&&"string"==typeof e.label&&e.label.length>0),n,void 0,t)},r=(e,n,t={})=>{(0,i.y)(e,"_options",a,n,void 0,t)},c=["horizontal","vertical"],d=(e,n,t="")=>{n.forEach(((n,i)=>{const o=`${t}-${i}`;"object"==typeof n&&null!==n&&"string"==typeof n.label&&n.label.length>0&&(Array.isArray(n.options)?d(e,n.options,o):e.set(o,n))}))};class h extends o.I{constructor(e,n,t){super(e,n,t),this.component=e}validateRequired(e){((e,n)=>{(0,i.h)(e,"_required",n)})(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateRequired(this.component._required)}}class u extends h{constructor(e,n,t){super(e,n,t),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.afterPatchOptions=(e,n,t,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,n)=>{const t=n.has("_options")?n.get("_options"):this.component.state._options;Array.isArray(t)&&t.length>0&&(this.keyOptionMap.clear(),d(this.keyOptionMap,t))},this.component=e}validateOrientation(e){(0,i.w)(this.component,"_orientation",(e=>"string"==typeof e&&c.includes(e)),new Set([`Orientation {${c.join(", ")}`]),e,{defaultValue:"vertical"})}validateOptions(e){s(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateValue(e){e=Array.isArray(e)?e[0]:e,(0,i.k)(this.component,"_value",e,{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions})}componentWillLoad(){super.componentWillLoad(),this.validateOrientation(this.component._orientation),this.validateOptions(this.component._options),this.validateValue(this.component._value)}}},9581:(e,n,t)=>{t.r(n),t.d(n,{kol_input_checkbox:()=>x});var i=t(6123),o=t(8045),l=t(9167),a=t(257),s=t(8533),r=t(4571),c=t(3682),d=t(1111),h=t(2074),u=t(6205),b=(t(3472),t(3694),t(1042),t(8296),t(1698),t(4269),t(3710),t(5561),t(5154),t(753),t(2803),t(9272),t(6660),t(3185),t(5150),t(3806),t(5538),(e,n,t)=>new Promise(((i,o)=>{var l=e=>{try{s(t.next(e))}catch(e){o(e)}},a=e=>{try{s(t.throw(e))}catch(e){o(e)}},s=e=>e.done?i(e.value):Promise.resolve(e.value).then(l,a);s((t=t.apply(e,n)).next())})));const p=["button","default","switch"],k=["left","right"];class f extends s.I{constructor(e,n,t){super(e,n,t),this.setFormAssociatedCheckboxValue=e=>{this.component._checked?this.setFormAssociatedValue(e):this.setFormAssociatedValue(null)},this.component=e}validateChecked(e){((e,n)=>{(0,a.h)(e,"_checked",n)})(this.component,e),this.setFormAssociatedCheckboxValue(this.component.state._value)}validateIcons(e){(0,a.w)(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&((0,a.q)(e.checked,1)||(0,a.q)(e.indeterminate,1)||(0,a.q)(e.unchecked,1))),new Set(["InputCheckboxIcons"]),e,{hooks:{beforePatch:(e,n,t)=>{n.set("_icons",Object.assign(Object.assign({},t.state._icons),e))}}})}validateIndeterminate(e){((e,n)=>{(0,a.h)(e,"_indeterminate",n)})(this.component,e)}validateLabelAlign(e){((e,n)=>{(0,a.w)(e,"_labelAlign",(e=>"string"==typeof e&&k.includes(e)),new Set([`KoliBriLabelAlign {${k.join(", ")}`]),n)})(this.component,e)}validateValue(e){(0,a.k)(this.component,"_value",e),this.setFormAssociatedCheckboxValue(this.component.state._value)}validateVariant(e){(0,a.w)(this.component,"_variant",(e=>"string"==typeof e&&p.includes(e)),new Set([`String {${p.join(", ")}`]),e)}componentWillLoad(){super.componentWillLoad(),this.validateChecked(this.component._checked),this.validateIcons(this.component._icons),this.validateIndeterminate(this.component._indeterminate),this.validateValue(this.component._value),this.validateVariant(this.component._variant),this.validateLabelAlign(this.component._labelAlign)}}const m=e=>{var{class:n}=e,t=(0,d._)(e,["class"]);return(0,i.h)(h.K,Object.assign({class:(0,o.c)("kol-checkbox__icon",n)},t))},v=e=>{var{class:n}=e,t=(0,d._)(e,["class"]);return(0,i.h)(u.I,Object.assign({class:(0,o.c)("kol-checkbox__input",n)},t,{type:"checkbox"}))},_=e=>{var n,{class:t,variant:l="default",icon:a,inputProps:s}=e,c=(0,d._)(e,["class","variant","icon","inputProps"]);const h=(0,r.c)(null==s?void 0:s.msg,null==s?void 0:s.touched),u={[`kol-checkbox--variant-${l}`]:!0,"kol-checkbox--checked":null==s?void 0:s.checked,"kol-checkbox--indeterminate":null==s?void 0:s.indeterminate,"kol-checkbox--disabled":Boolean(null==s?void 0:s.disabled),"kol-checkbox--required":Boolean(null==s?void 0:s.required),"kol-checkbox--touched":Boolean(null==s?void 0:s.touched),[`kol-checkbox--${(null===(n=null==s?void 0:s.msg)||void 0===n?void 0:n.type)||"error"}`]:Boolean(h)};return(0,i.h)("label",Object.assign({class:(0,o.c)("kol-checkbox",u,t)},c),(0,i.h)(m,{label:"",icons:a}),(0,i.h)(v,Object.assign({},s)))};function g(e,n={}){const{ariaDescribedBy:t}=(0,r.g)(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t};return"_required"in e&&(i.required=e._required),"_checked"in e&&(i.checked=e._checked),"_indeterminate"in e&&(i.indeterminate=e._indeterminate),"_touched"in e&&(i.touched=e._touched),"_msg"in e&&(i.msg=(0,r.a)(e._msg)),Object.assign(Object.assign({},i),n)}const y=e=>{var{state:n,inputProps:t}=e,o=(0,d._)(e,["state","inputProps"]);const l=(null==n?void 0:n._variant)||"default";return(0,i.h)(_,Object.assign({variant:l,inputProps:g(n,t)},o))},x=class{getModelValue(){return this._checked?this.state._value:null}getValue(){return b(this,null,(function*(){return this.getModelValue()}))}kolFocus(){return b(this,null,(function*(){var e;null===(e=this.inputRef)||void 0===e||e.focus()}))}getFormFieldProps(){return{state:this.state,class:(0,o.c)("kol-input-checkbox",{"kol-input-checkbox--checked":this.state._checked,"kol-input-checkbox--indeterminate":this.state._indeterminate,[`kol-input-checkbox--variant-${this.state._variant||"default"}`]:!0,[`kol-input-checkbox--label-align-${this.state._labelAlign||"right"}`]:!0}),tooltipAlign:this._tooltipAlign,"data-role":"button"===this.state._variant?"button":void 0,alert:this.showAsAlert(),renderNoTooltip:!0}}getFieldControlProps(){return{class:(0,o.c)("kol-input-checkbox__field-control",{"kol-input-checkbox__field-control--checked":this.state._checked,"kol-input-checkbox__field-control--indeterminate":this.state._indeterminate,[`kol-input-checkbox__field-control--variant-${this.state._variant||"default"}`]:!0}),state:this.state}}getInputProps(){return{state:this.state,icon:this.getIcon(),inputProps:Object.assign(Object.assign({class:(0,o.c)({"visually-hidden":"button"===this.state._variant}),ref:this.catchRef},this.controller.onFacade),{onInput:this.onInput,onChange:this.onChange,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},onClick:void 0})}}getIcon(){return this.state._indeterminate?this.state._icons.indeterminate:this.state._checked?this.state._icons.checked:this.state._icons.unchecked}render(){return(0,i.h)(r.F,Object.assign({key:"7fb2ecb21c81667431909cd393b331609c83be4e"},this.getFormFieldProps(),{renderNoLabel:!0}),(0,i.h)(c.F,Object.assign({key:"b7211c6548c3cab0a5a7f9d71efe6c7bfd56f90b"},this.getFieldControlProps(),{renderNoHint:!0}),(0,i.h)(y,Object.assign({key:"9a6294d54e1ea9d51942eb13b27c1de2a036c431"},this.getInputProps()))))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{this.inputRef=e},this.onInput=e=>{this._checked=!this._checked,this._indeterminate=!1;const n=this.getModelValue();this.controller.onFacade.onInput(e,!1,n),this.controller.setFormAssociatedCheckboxValue(n)},this.onChange=e=>{this.controller.onFacade.onChange(e,this.getModelValue())},this._accessKey=void 0,this._checked=!1,this._hideMsg=!1,this._disabled=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._indeterminate=void 0,this._label=void 0,this._labelAlign="right",this._msg=void 0,this._name=void 0,this._on=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=!0,this._variant="default",this.state={_checked:!1,_hideMsg:!1,_icons:{checked:"codicon codicon-check",indeterminate:"codicon codicon-remove",unchecked:"codicon codicon-close"},_id:`id-${(0,l.n)()}`,_indeterminate:!1,_label:"",_value:!0,_variant:"default",_labelAlign:"right"},this.inputHasFocus=!1,this.controller=new f(this,"checkbox",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateChecked(e){this.controller.validateChecked(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateIndeterminate(e){this.controller.validateIndeterminate(e)}validateLabel(e){this.controller.validateLabel(e)}validateLabelAlign(e){this.controller.validateLabelAlign(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}validateVariant(e){this.controller.validateVariant(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_checked:["validateChecked"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_indeterminate:["validateIndeterminate"],_label:["validateLabel"],_labelAlign:["validateLabelAlign"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"],_variant:["validateVariant"]}}};x.style={default:'/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don\'t want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-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-field-control {\n    min-height: var(--a11y-min-size);\n    display: grid;\n    grid-template-columns: auto 1fr;\n    grid-template-areas: "input label";\n    grid-template-rows: auto;\n    align-items: center;\n    justify-content: left;\n  }\n  .kol-field-control:has(.kol-field-control__hint) {\n    grid-template-columns: auto 1fr;\n    grid-template-areas: "input label" "hint hint";\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {\n    grid-template-columns: 1fr auto;\n    grid-template-areas: "label input";\n    grid-template-rows: auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {\n    grid-template-columns: 1fr auto;\n    grid-template-areas: "label input" "hint hint";\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control__input {\n    grid-area: input;\n    display: flex;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n  }\n  .kol-field-control__label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    flex-grow: 1;\n    grid-area: label;\n    min-height: var(--a11y-min-size);\n  }\n  .kol-field-control__label--visually-hidden {\n    height: 0;\n    margin: 0;\n    padding: 0;\n    visibility: hidden;\n  }\n  .kol-field-control__label-text::after {\n    content: "";\n  }\n  .kol-field-control__tooltip .span-label::after {\n    content: "";\n  }\n  .kol-field-control__hint {\n    grid-area: hint;\n  }\n  .kol-field-control--disabled .kol-field-control__label {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n  .kol-field-control--required .kol-field-control__label-text::after {\n    content: "*";\n  }\n  .kol-field-control--required .kol-field-control__tooltip .span-label::after {\n    content: "*";\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-checkbox {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    position: relative;\n  }\n  .kol-checkbox--disabled {\n    cursor: not-allowed;\n  }\n  .kol-checkbox .kol-input {\n    appearance: none;\n    background-color: #fff;\n    border-style: solid;\n    border-width: 2px;\n    cursor: inherit;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    transition: 0.5s;\n  }\n  .kol-checkbox .kol-input:before {\n    content: "";\n  }\n  /**\n   * Variant: Checkbox\n   */\n  .kol-checkbox--variant-default {\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-checkbox--variant-default .kol-icon {\n    display: flex;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n    pointer-events: none;\n  }\n  .kol-checkbox--variant-default .kol-icon::part(icon) {\n    display: none;\n  }\n  .kol-checkbox--variant-default .kol-input {\n    width: calc(22rem / var(--kolibri-root-font-size, 16));\n    height: calc(22rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox--variant-default.kol-checkbox--checked .kol-icon::part(icon), .kol-checkbox--variant-default.kol-checkbox--indeterminate .kol-icon::part(icon) {\n    display: block;\n  }\n  /**\n   * Variant: Switch\n   */\n  .kol-checkbox--variant-switch {\n    position: relative;\n  }\n  .kol-checkbox--variant-switch .kol-input {\n    display: inline-block;\n    height: 1.7em;\n    min-width: 3.2em;\n    position: relative;\n    width: 3.2em;\n  }\n  .kol-checkbox--variant-switch .kol-input::before {\n    background-color: #000;\n    height: 1.2em;\n    left: calc(0.25em - (2rem / var(--kolibri-root-font-size, 16)));\n    top: calc(0.25em - (2rem / var(--kolibri-root-font-size, 16)));\n    position: absolute;\n    transition: 0.5s;\n    width: 1.2em;\n  }\n  .kol-checkbox--variant-switch .kol-input:checked::before {\n    transform: translateX(1.5em);\n  }\n  .kol-checkbox--variant-switch .kol-input:indeterminate::before {\n    transform: translateX(0.75em);\n  }\n  .kol-checkbox--variant-switch .kol-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.2em;\n    height: 1.2em;\n    position: absolute;\n    z-index: 1;\n    top: 50%;\n    left: calc(4rem / var(--kolibri-root-font-size, 16));\n    transform: translate(0, -50%);\n    transition: 0.5s;\n    color: #000;\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n    transform: translate(1.5em, -50%);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--indeterminate .kol-icon {\n    transform: translate(0.75em, -50%);\n  }\n  /**\n   * Variant: Button\n   */\n  .kol-checkbox--variant-button {\n    width: var(--a11y-min-size);\n  }\n  .kol-checkbox--variant-button .kol-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n  }\n}'}}}]);

package/dist/9719.js

@@ -1,2 +1,2 @@
 /*! For license information please see 9719.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9719],{9719:(n,e,t)=>{t.r(e),t.d(e,{kol_tree:()=>a});var i=t(6733),o=t(1698);const a=class{constructor(n){(0,i.r)(this,n),this._label=void 0}render(){return(0,i.h)(o.o,{key:"d9f26f840ce0ccdb32731859e6075cd0fd737dd5",_label:this._label},(0,i.h)("slot",{key:"8f020e01d6f839e2739e5cf0256afdd01eb5c0e5"}))}};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%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tree {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tree__treeview-navigation {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}"}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9719],{9719:(n,e,t)=>{t.r(e),t.d(e,{kol_tree:()=>a});var i=t(6123),o=t(1698);const a=class{constructor(n){(0,i.r)(this,n),this._label=void 0}render(){return(0,i.h)(o.o,{key:"d9f26f840ce0ccdb32731859e6075cd0fd737dd5",_label:this._label},(0,i.h)("slot",{key:"8f020e01d6f839e2739e5cf0256afdd01eb5c0e5"}))}};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%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tree {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tree__treeview-navigation {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}"}}}]);

package/dist/9731.js

@@ -1,2 +1,2 @@
 /*! For license information please see 9731.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9731],{9731:(t,e,n)=>{n.r(e),n.d(e,{kol_input_text:()=>p});var i=n(6733),o=n(8045),a=n(257),l=n(2190),s=n(5151),r=n(9867),d=n(7162),h=n(182),c=n(5951),u=(n(1698),n(3694),n(1042),n(8296),n(4269),n(3710),n(5561),n(5154),n(753),n(3472),n(1111),n(9709),n(9272),n(6660),n(3185),n(2425),n(376),n(5538),n(8176),n(3885),n(1476),n(8057),n(1040),n(3359),n(8399),n(7368),(t,e,n)=>new Promise(((i,o)=>{var a=t=>{try{s(n.next(t))}catch(t){o(t)}},l=t=>{try{s(n.throw(t))}catch(t){o(t)}},s=t=>t.done?i(t.value):Promise.resolve(t.value).then(a,l);s((n=n.apply(t,e)).next())})));const p=class{getValue(){return u(this,null,(function*(){var t;return null===(t=this.inputRef)||void 0===t?void 0:t.value}))}kolFocus(){return u(this,null,(function*(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}))}getFormFieldProps(){return{state:this.state,class:(0,o.c)("kol-input-text",this.state._type,{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var t;return null===(t=this.inputRef)||void 0===t?void 0:t.focus()},alert:this.showAsAlert()}}getInputProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state},this.controller.onFacade),{onBlur:this.onBlur,onChange:this.onChange,onFocus:this.onFocus,onInput:this.onInput,onKeyDown:this.onKeyDown})}render(){return(0,i.h)(r.F,Object.assign({key:"03b91cd888725258ffc7d51f35cedd847147babf"},this.getFormFieldProps()),(0,i.h)(h.a,{key:"8a9378fb5d82ab7427c4869899da6326e0b6030d",state:this.state},(0,i.h)(d.I,Object.assign({key:"d78f3ae5645e24c5967922faa3c2b7b0908481e8"},this.getInputProps()))))}constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.inputRef=t},this.onBlur=t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1},this.onChange=t=>{var e;const n=null===(e=this.inputRef)||void 0===e?void 0:e.value;this.oldValue!==n&&(this.oldValue=n),this.controller.onFacade.onChange(t)},this.onFocus=t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},this.onInput=t=>{var e,n;const i=null!==(n=null===(e=this.inputRef)||void 0===e?void 0:e.value)&&void 0!==n?n:"";(0,a.k)(this,"_currentLength",i.length),this._value=i,this.controller.onFacade.onInput(t)},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||(0,s.p)({form:this.host,ref:this.inputRef})},this._accessKey=void 0,this._autoComplete=void 0,this._disabled=!1,this._hasCounter=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._spellCheck=void 0,this._suggestions=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._type="text",this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideMsg:!1,_id:`id-${(0,l.n)()}`,_label:"",_suggestions:[],_type:"text"},this.inputHasFocus=!1,this.controller=new c.a(this,"text",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideMsg(t){this.controller.validateHideMsg(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSpellCheck(t){this.controller.validateSpellCheck(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t),this.oldValue=t}componentWillLoad(){this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hasCounter:["validateHasCounter"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};p.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}"}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9731],{9731:(t,e,n)=>{n.r(e),n.d(e,{kol_input_text:()=>p});var i=n(6123),o=n(8045),a=n(257),l=n(9167),s=n(5151),r=n(4571),d=n(1335),h=n(2420),c=n(1265),u=(n(1698),n(3694),n(1042),n(8296),n(4269),n(3710),n(5561),n(5154),n(753),n(3472),n(1111),n(2803),n(9272),n(6660),n(3185),n(5150),n(3806),n(5538),n(6205),n(2074),n(1476),n(8057),n(2631),n(3359),n(8399),n(7368),(t,e,n)=>new Promise(((i,o)=>{var a=t=>{try{s(n.next(t))}catch(t){o(t)}},l=t=>{try{s(n.throw(t))}catch(t){o(t)}},s=t=>t.done?i(t.value):Promise.resolve(t.value).then(a,l);s((n=n.apply(t,e)).next())})));const p=class{getValue(){return u(this,null,(function*(){var t;return null===(t=this.inputRef)||void 0===t?void 0:t.value}))}kolFocus(){return u(this,null,(function*(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}))}getFormFieldProps(){return{state:this.state,class:(0,o.c)("kol-input-text",this.state._type,{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var t;return null===(t=this.inputRef)||void 0===t?void 0:t.focus()},alert:this.showAsAlert()}}getInputProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state},this.controller.onFacade),{onBlur:this.onBlur,onChange:this.onChange,onFocus:this.onFocus,onInput:this.onInput,onKeyDown:this.onKeyDown})}render(){return(0,i.h)(r.F,Object.assign({key:"03b91cd888725258ffc7d51f35cedd847147babf"},this.getFormFieldProps()),(0,i.h)(h.a,{key:"8a9378fb5d82ab7427c4869899da6326e0b6030d",state:this.state},(0,i.h)(d.I,Object.assign({key:"d78f3ae5645e24c5967922faa3c2b7b0908481e8"},this.getInputProps()))))}constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.inputRef=t},this.onBlur=t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1},this.onChange=t=>{var e;const n=null===(e=this.inputRef)||void 0===e?void 0:e.value;this.oldValue!==n&&(this.oldValue=n),this.controller.onFacade.onChange(t)},this.onFocus=t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},this.onInput=t=>{var e,n;const i=null!==(n=null===(e=this.inputRef)||void 0===e?void 0:e.value)&&void 0!==n?n:"";(0,a.k)(this,"_currentLength",i.length),this._value=i,this.controller.onFacade.onInput(t)},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||(0,s.p)({form:this.host,ref:this.inputRef})},this._accessKey=void 0,this._autoComplete=void 0,this._disabled=!1,this._hasCounter=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._spellCheck=void 0,this._suggestions=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._type="text",this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideMsg:!1,_id:`id-${(0,l.n)()}`,_label:"",_suggestions:[],_type:"text"},this.inputHasFocus=!1,this.controller=new c.a(this,"text",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideMsg(t){this.controller.validateHideMsg(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSpellCheck(t){this.controller.validateSpellCheck(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t),this.oldValue=t}componentWillLoad(){this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hasCounter:["validateHasCounter"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};p.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}"}}}]);

package/dist/9930.js

@@ -1,2 +1,2 @@
 /*! For license information please see 9930.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9930],{2190:(n,e,t)=>{t.d(e,{i:()=>s,n:()=>r,r:()=>l});var o=t(257),a=t(6733);const i=()=>{let n=(0,o.e)().KoliBri;return void 0===n&&(n={},Object.defineProperty((0,o.e)(),"KoliBri",{value:n,writable:!1})),n},s=()=>{(()=>{const n=(0,o.g)().querySelector('meta[name="kolibri"]');if(n&&n.hasAttribute("content")){const e=n.getAttribute("content");"string"==typeof e&&((0,o.s)(e.includes("dev-mode=true")),(0,o.c)(e.includes("experimental-mode=true")),(0,o.d)(e.includes("color-contrast-analysis=true")))}})(),o.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${a.E.kolibriVersion}\n\t`,{forceLog:!0})},l=()=>{!0!==i().adviceShown&&(Object.defineProperty(i(),"adviceShown",{get:function(){return!0}}),o.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 r=()=>Math.floor(16777215*Math.random()).toString(16);"test"===o.p&&(r=()=>"nonce")},2425:(n,e,t)=>{t.d(e,{K:()=>d});var o=t(1111),a=t(6733),i=t(8045);const s=1;function l(n){return function(n){return n>=s&&n<=6}(n)?`h${n}`:"strong"}const r=(n,e)=>{var{class:t,level:r=s,variant:c}=n,d=(0,o._)(n,["class","level","variant"]);const h=l(r),u=c||h;return(0,a.h)(h,Object.assign({class:(0,i.c)("kol-headline",`kol-headline--${u}`,t)},d),e)},c=(n,e)=>{var{class:t,level:r=s}=n,c=(0,o._)(n,["class","level"]);const d=function(n){return 1===n?"span":l(n)}(r+1);return(0,a.h)(d,Object.assign({class:(0,i.c)("kol-headline kol-headline--group kol-headline--secondary",t)},c),e)},d=(n,e)=>{var{secondaryHeadline:t,level:l=s,class:d,HeadingGroupProps:h={},SecondaryHeadlineProps:u={}}=n,b=(0,o._)(n,["secondaryHeadline","level","class","HeadingGroupProps","SecondaryHeadlineProps"]);const p=Object.assign({level:l},b);if(!t)return(0,a.h)(r,Object.assign({class:(0,i.c)(d,"kol-headline--single")},p),e);const{class:m}=h,f=(0,o._)(h,["class"]),g=Object.assign({class:(0,i.c)("kol-heading-group",m)},f);return(0,a.h)("hgroup",Object.assign({},g),(0,a.h)(r,Object.assign({class:(0,i.c)(d,"kol-headline--group","kol-headline--primary")},p),e),(0,a.h)(c,Object.assign({level:l},u),t))}},9709:(n,e,t)=>{t.d(e,{K:()=>u});var o=t(1111),a=t(6733),i=t(8045),s=t(1698),l=t(9272),r=t(6660),c=t(2425);const d=({ariaLabel:n,icon:e})=>(0,a.h)(a.F,null,(0,a.h)("span",{class:"visually-hidden"},n),(0,a.h)(s.d,{class:r.a,_label:"",_icons:e})),h=({type:n,label:e})=>{switch(n){case"error":return(0,a.h)(d,{ariaLabel:(0,l.t)("kol-error"),icon:"codicon codicon-error",label:e});case"info":return(0,a.h)(d,{ariaLabel:(0,l.t)("kol-info"),icon:"codicon codicon-info",label:e});case"warning":return(0,a.h)(d,{ariaLabel:(0,l.t)("kol-warning"),icon:"codicon codicon-warning",label:e});case"success":return(0,a.h)(d,{ariaLabel:(0,l.t)("kol-success"),icon:"codicon codicon-pass",label:e});default:return(0,a.h)(d,{ariaLabel:(0,l.t)("kol-message"),icon:"codicon codicon-comment",label:e})}},u=(n,e)=>{var t,d;const{class:u={},alert:b=!1,hasCloser:p=!1,label:m,level:f=0,type:g="default",variant:v="msg",onAlertTimeout:k,onCloserClick:y}=n,_=(0,o._)(n,["class","alert","hasCloser","label","level","type","variant","onAlertTimeout","onCloserClick"]);b&&((null===(t=navigator.userActivation)||void 0===t?void 0:t.hasBeenActive)&&(null===(d=null===navigator||void 0===navigator?void 0:navigator.vibrate)||void 0===d||d.call(navigator,[100,75,100,75,100])),setTimeout((()=>{null==k||k()}),1e4));const w=(0,r.b)("kol-alert",{hasCloser:!!p,[`type-${g}`]:!0,[`variant-${v}`]:!0}),x=(0,r.b)("kol-alert","heading",{[`h${f}`]:!0}),j=Object.assign({class:(0,i.c)(u,w),role:b?"error"===g?"alert":"status":void 0},_);return(0,a.h)("div",Object.assign({},j),(0,a.h)("div",{class:"kol-alert__container"},(0,a.h)(h,{label:m,type:g}),(0,a.h)("div",{class:"kol-alert__container-content"},m&&(0,a.h)(c.K,{class:x,level:f,id:"heading"},m),"msg"===v&&(0,a.h)("span",{class:r.c,"aria-describedby":m?"heading":void 0},e)),p&&(0,a.h)(s.a,{class:r.d,"data-testid":"alert-close-button",_ariaDescription:(null==m?void 0:m.trim())||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:(0,l.t)("kol-close-alert"),_on:{onClick:y},_tooltipAlign:"left"})),"card"===v&&(0,a.h)("div",{class:r.c,"aria-describedby":m?"heading":void 0},e))}},9930:(n,e,t)=>{t.r(e),t.d(e,{kol_toast_container:()=>u});var o=t(6733),a=t(9272),i=t(2190),s=t(1698),l=(t(6660),t(257),t(6363),t(1111)),r=t(9709),c=t(8045),d=(t(4269),t(3185),t(2425),(n,e,t)=>new Promise(((o,a)=>{var i=n=>{try{l(t.next(n))}catch(n){a(n)}},s=n=>{try{l(t.throw(n))}catch(n){a(n)}},l=n=>n.done?o(n.value):Promise.resolve(n.value).then(i,s);l((t=t.apply(n,e)).next())})));const h=n=>{var{status:e,toast:t,onClose:a}=n,i=(0,l._)(n,["status","toast","onClose"]);const{type:s,label:d,description:h,variant:u}=t;return(0,o.h)("div",{class:(0,c.c)("kol-toast-item",`kol-toast-item--${e}`)},(0,o.h)(r.K,{class:"kol-toast-item__alert",alert:!0,label:d,level:0,hasCloser:!0,type:s,variant:u||"card",onCloserClick:a},(0,o.h)("div",Object.assign({},i),h)))},u=class{constructor(n){(0,o.r)(this,n),this.knownRenderFunctions=new Set,this.state={_toastStates:[]}}enqueue(n){return d(this,null,(function*(){const e={toast:n,status:"adding",id:`toast-${(0,i.n)()}`};return this.state=Object.assign(Object.assign({},this.state),{_toastStates:[e,...this.state._toastStates]}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((n=>n.id===e.id&&"removing"!==n.status?Object.assign(Object.assign({},n),{status:"settled"}):n))})}),300),()=>{this.handleClose(e)}}))}handleClose(n){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((e=>(e.id===n.id&&(e.status="removing"),e)))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((e=>e.id!==n.id))})}),300)}closeAll(n=!1){return d(this,null,(function*(){if(n)this.state=Object.assign(Object.assign({},this.state),{_toastStates:[]});else{const n=[...this.state._toastStates];this.state=Object.assign(Object.assign({},this.state),{_toastStates:n.map((n=>Object.assign(Object.assign({},n),{status:"removing"})))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((e=>n.every((n=>n.id!==e.id))))})}),300)}}))}handleToastRef(n,e){e&&"function"==typeof n.toast.render&&!this.knownRenderFunctions.has(n.toast.render)&&(this.knownRenderFunctions.add(n.toast.render),n.toast.render(e,{close:()=>this.handleClose(n)}))}render(){return(0,o.h)(o.H,{key:"43cab139328015afcc3105680b99a8880ad8c525",class:"kol-toast-container"},this.state._toastStates.length>1&&(0,o.h)(s.n,{key:"1c8af42ea396c97e400db71cb7aeb4522fa12d4e",_label:(0,a.t)("kol-toast-close-all"),class:"kol-toast-container__button-close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map((n=>(0,o.h)(h,{key:n.id,onClose:()=>this.handleClose(n),ref:e=>this.handleToastRef(n,e),toast:n.toast,status:n.status}))))}};u.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: flex;\n    flex-direction: column;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: fixed;\n    z-index: 200;\n  }\n  .kol-toast-container__close-all {\n    align-self: flex-end;\n  }\n}"}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9930],{2803:(n,e,t)=>{t.d(e,{K:()=>u});var o=t(1111),a=t(6123),i=t(8045),s=t(1698),l=t(9272),r=t(6660),c=t(5150);const d=({ariaLabel:n,icon:e})=>(0,a.h)(a.F,null,(0,a.h)("span",{class:"visually-hidden"},n),(0,a.h)(s.d,{class:r.a,_label:"",_icons:e})),h=({type:n,label:e})=>{switch(n){case"error":return(0,a.h)(d,{ariaLabel:(0,l.t)("kol-error"),icon:"codicon codicon-error",label:e});case"info":return(0,a.h)(d,{ariaLabel:(0,l.t)("kol-info"),icon:"codicon codicon-info",label:e});case"warning":return(0,a.h)(d,{ariaLabel:(0,l.t)("kol-warning"),icon:"codicon codicon-warning",label:e});case"success":return(0,a.h)(d,{ariaLabel:(0,l.t)("kol-success"),icon:"codicon codicon-pass",label:e});default:return(0,a.h)(d,{ariaLabel:(0,l.t)("kol-message"),icon:"codicon codicon-comment",label:e})}},u=(n,e)=>{var t,d;const{class:u={},alert:b=!1,hasCloser:p=!1,label:m,level:f=0,type:g="default",variant:v="msg",onAlertTimeout:k,onCloserClick:y}=n,_=(0,o._)(n,["class","alert","hasCloser","label","level","type","variant","onAlertTimeout","onCloserClick"]);b&&((null===(t=navigator.userActivation)||void 0===t?void 0:t.hasBeenActive)&&(null===(d=null===navigator||void 0===navigator?void 0:navigator.vibrate)||void 0===d||d.call(navigator,[100,75,100,75,100])),setTimeout((()=>{null==k||k()}),1e4));const w=(0,r.b)("kol-alert",{hasCloser:!!p,[`type-${g}`]:!0,[`variant-${v}`]:!0}),x=(0,r.b)("kol-alert","heading",{[`h${f}`]:!0}),j=Object.assign({class:(0,i.c)(u,w),role:b?"error"===g?"alert":"status":void 0},_);return(0,a.h)("div",Object.assign({},j),(0,a.h)("div",{class:"kol-alert__container"},(0,a.h)(h,{label:m,type:g}),(0,a.h)("div",{class:"kol-alert__container-content"},m&&(0,a.h)(c.K,{class:x,level:f,id:"heading"},m),"msg"===v&&(0,a.h)("span",{class:r.c,"aria-describedby":m?"heading":void 0},e)),p&&(0,a.h)(s.a,{class:r.d,"data-testid":"alert-close-button",_ariaDescription:(null==m?void 0:m.trim())||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:(0,l.t)("kol-close-alert"),_on:{onClick:y},_tooltipAlign:"left"})),"card"===v&&(0,a.h)("div",{class:r.c,"aria-describedby":m?"heading":void 0},e))}},5150:(n,e,t)=>{t.d(e,{K:()=>d});var o=t(1111),a=t(6123),i=t(8045);const s=1;function l(n){return function(n){return n>=s&&n<=6}(n)?`h${n}`:"strong"}const r=(n,e)=>{var{class:t,level:r=s,variant:c}=n,d=(0,o._)(n,["class","level","variant"]);const h=l(r),u=c||h;return(0,a.h)(h,Object.assign({class:(0,i.c)("kol-headline",`kol-headline--${u}`,t)},d),e)},c=(n,e)=>{var{class:t,level:r=s}=n,c=(0,o._)(n,["class","level"]);const d=function(n){return 1===n?"span":l(n)}(r+1);return(0,a.h)(d,Object.assign({class:(0,i.c)("kol-headline kol-headline--group kol-headline--secondary",t)},c),e)},d=(n,e)=>{var{secondaryHeadline:t,level:l=s,class:d,HeadingGroupProps:h={},SecondaryHeadlineProps:u={}}=n,b=(0,o._)(n,["secondaryHeadline","level","class","HeadingGroupProps","SecondaryHeadlineProps"]);const p=Object.assign({level:l},b);if(!t)return(0,a.h)(r,Object.assign({class:(0,i.c)(d,"kol-headline--single")},p),e);const{class:m}=h,f=(0,o._)(h,["class"]),g=Object.assign({class:(0,i.c)("kol-heading-group",m)},f);return(0,a.h)("hgroup",Object.assign({},g),(0,a.h)(r,Object.assign({class:(0,i.c)(d,"kol-headline--group","kol-headline--primary")},p),e),(0,a.h)(c,Object.assign({level:l},u),t))}},9167:(n,e,t)=>{t.d(e,{i:()=>s,n:()=>r,r:()=>l});var o=t(257),a=t(6123);const i=()=>{let n=(0,o.e)().KoliBri;return void 0===n&&(n={},Object.defineProperty((0,o.e)(),"KoliBri",{value:n,writable:!1})),n},s=()=>{(()=>{const n=(0,o.g)().querySelector('meta[name="kolibri"]');if(n&&n.hasAttribute("content")){const e=n.getAttribute("content");"string"==typeof e&&((0,o.s)(e.includes("dev-mode=true")),(0,o.c)(e.includes("experimental-mode=true")),(0,o.d)(e.includes("color-contrast-analysis=true")))}})(),o.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${a.E.kolibriVersion}\n\t`,{forceLog:!0})},l=()=>{!0!==i().adviceShown&&(Object.defineProperty(i(),"adviceShown",{get:function(){return!0}}),o.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 r=()=>Math.floor(16777215*Math.random()).toString(16);"test"===o.p&&(r=()=>"nonce")},9930:(n,e,t)=>{t.r(e),t.d(e,{kol_toast_container:()=>u});var o=t(6123),a=t(9272),i=t(9167),s=t(1698),l=(t(6660),t(257),t(6363),t(1111)),r=t(2803),c=t(8045),d=(t(4269),t(3185),t(5150),(n,e,t)=>new Promise(((o,a)=>{var i=n=>{try{l(t.next(n))}catch(n){a(n)}},s=n=>{try{l(t.throw(n))}catch(n){a(n)}},l=n=>n.done?o(n.value):Promise.resolve(n.value).then(i,s);l((t=t.apply(n,e)).next())})));const h=n=>{var{status:e,toast:t,onClose:a}=n,i=(0,l._)(n,["status","toast","onClose"]);const{type:s,label:d,description:h,variant:u}=t;return(0,o.h)("div",{class:(0,c.c)("kol-toast-item",`kol-toast-item--${e}`)},(0,o.h)(r.K,{class:"kol-toast-item__alert",alert:!0,label:d,level:0,hasCloser:!0,type:s,variant:u||"card",onCloserClick:a},(0,o.h)("div",Object.assign({},i),h)))},u=class{constructor(n){(0,o.r)(this,n),this.knownRenderFunctions=new Set,this.state={_toastStates:[]}}enqueue(n){return d(this,null,(function*(){const e={toast:n,status:"adding",id:`toast-${(0,i.n)()}`};return this.state=Object.assign(Object.assign({},this.state),{_toastStates:[e,...this.state._toastStates]}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((n=>n.id===e.id&&"removing"!==n.status?Object.assign(Object.assign({},n),{status:"settled"}):n))})}),300),()=>{this.handleClose(e)}}))}handleClose(n){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((e=>(e.id===n.id&&(e.status="removing"),e)))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((e=>e.id!==n.id))})}),300)}closeAll(n=!1){return d(this,null,(function*(){if(n)this.state=Object.assign(Object.assign({},this.state),{_toastStates:[]});else{const n=[...this.state._toastStates];this.state=Object.assign(Object.assign({},this.state),{_toastStates:n.map((n=>Object.assign(Object.assign({},n),{status:"removing"})))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((e=>n.every((n=>n.id!==e.id))))})}),300)}}))}handleToastRef(n,e){e&&"function"==typeof n.toast.render&&!this.knownRenderFunctions.has(n.toast.render)&&(this.knownRenderFunctions.add(n.toast.render),n.toast.render(e,{close:()=>this.handleClose(n)}))}render(){return(0,o.h)(o.H,{key:"43cab139328015afcc3105680b99a8880ad8c525",class:"kol-toast-container"},this.state._toastStates.length>1&&(0,o.h)(s.n,{key:"1c8af42ea396c97e400db71cb7aeb4522fa12d4e",_label:(0,a.t)("kol-toast-close-all"),class:"kol-toast-container__button-close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map((n=>(0,o.h)(h,{key:n.id,onClose:()=>this.handleClose(n),ref:e=>this.handleToastRef(n,e),toast:n.toast,status:n.status}))))}};u.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: flex;\n    flex-direction: column;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: fixed;\n    z-index: 200;\n  }\n  .kol-toast-container__close-all {\n    align-self: flex-end;\n  }\n}"}}}]);

package/dist/9938.js

@@ -1,2 +1,2 @@
 /*! For license information please see 9938.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9938],{2190:(e,t,i)=>{i.d(t,{i:()=>s,n:()=>r,r:()=>o});var n=i(257),l=i(6733);const a=()=>{let e=(0,n.e)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,n.e)(),"KoliBri",{value:e,writable:!1})),e},s=()=>{(()=>{const e=(0,n.g)().querySelector('meta[name="kolibri"]');if(e&&e.hasAttribute("content")){const t=e.getAttribute("content");"string"==typeof t&&((0,n.s)(t.includes("dev-mode=true")),(0,n.c)(t.includes("experimental-mode=true")),(0,n.d)(t.includes("color-contrast-analysis=true")))}})(),n.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${l.E.kolibriVersion}\n\t`,{forceLog:!0})},o=()=>{!0!==a().adviceShown&&(Object.defineProperty(a(),"adviceShown",{get:function(){return!0}}),n.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 r=()=>Math.floor(16777215*Math.random()).toString(16);"test"===n.p&&(r=()=>"nonce")},3472:(e,t,i)=>{i.d(t,{a:()=>d,b:()=>o,c:()=>r,h:()=>l,v:()=>h});var n=i(257);const l=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,s=/^\d+$/;function o(e,t=1){return function(e){var t;return"string"==typeof e&&(null===(t=e.match(a))||void 0===t?void 0:t.length)||0}(e)>=t}function r(e){return s.test(e)}const c=new Set(["string"]),h=(e,t,i={})=>{(0,n.w)(e,"_label",(e=>"string"==typeof e),c,t,function(e){var t;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(t,i,l,a)=>{var s,c;"function"==typeof(null===(s=e.hooks)||void 0===s?void 0:s.afterPatch)&&(null===(c=e.hooks)||void 0===c||c.afterPatch(t,i,l,a)),"string"==typeof t&&!1===o(t,3)&&!1===r(t)&&(0,n.b)(`The heading or label ("${t}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof t&&t.length>80&&(0,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}})}(i))},d=h},6376:(e,t,i)=>{i.d(t,{v:()=>l});var n=i(257);const l=(e,t,i={})=>{(0,n.A)(e,"_href",t,i)}},8045:(e,t,i)=>{function n(e){var t,i,l="";if("string"==typeof e||"number"==typeof e)l+=e;else if("object"==typeof e)if(Array.isArray(e)){var a=e.length;for(t=0;t<a;t++)e[t]&&(i=n(e[t]))&&(l&&(l+=" "),l+=i)}else for(i in e)e[i]&&(l&&(l+=" "),l+=i);return l}function l(){for(var e,t,i=0,l="",a=arguments.length;i<a;i++)(e=arguments[i])&&(t=n(e))&&(l&&(l+=" "),l+=t);return l}i.d(t,{c:()=>l})},9691:(e,t,i)=>{i.d(t,{v:()=>l});var n=i(257);const l=(e,t,i)=>{(0,n.h)(e,"_open",t,i)}},9938:(e,t,i)=>{i.r(t),i.d(t,{kol_tree_item_wc:()=>u});var n=i(6733),l=i(257),a=i(1698),s=i(2190),o=i(8045),r=i(3472),c=i(9691),h=i(6376),d=(e,t,i)=>new Promise(((n,l)=>{var a=e=>{try{o(i.next(e))}catch(e){l(e)}},s=e=>{try{o(i.throw(e))}catch(e){l(e)}},o=e=>e.done?n(e.value):Promise.resolve(e.value).then(a,s);o((i=i.apply(e,t)).next())}));const u=class{constructor(e){(0,n.r)(this,e),this.groupId=`tree-group-${(0,s.n)()}`,this.level=void 0,this.state={_active:!1,_hasChildren:!1,_href:"",_label:"",_open:!1},this._active=void 0,this._label=void 0,this._open=void 0,this._href=void 0}render(){const{_href:e,_active:t,_hasChildren:i,_open:l,_label:s}=this.state;return(0,n.h)(n.H,{key:"1358f3b8f8c7ae14535f30e3c2ff1ef8ab6904b1",onSlotchange:this.handleSlotchange.bind(this)},(0,n.h)("li",{key:"d6271238a133cac44eb78bf8ed0b94a951135432",class:"kol-tree-item",style:{"--level":`${this.level}`}},(0,n.h)(a.e,{key:"329b9adc28bacf6742544123bc02fe82f2ceb9b5",class:(0,o.c)("kol-tree-item__link",{"kol-tree-item__link--first-level":0===this.level,"kol-tree-item__link--active":t}),_href:e,_label:"",_role:"treeitem",_tabIndex:t?0:-1,_ariaExpanded:i?l:void 0,_ariaOwns:i?this.groupId:void 0,ref:e=>this.linkElement=e},(0,n.h)("span",{key:"0292f071a8abfe0f9332ef4a8561149d38f804e2",class:"kol-tree-item__link-inner",slot:"expert"},i?(0,n.h)("span",{class:"kol-tree-item__toggle-button",onClick:e=>l?void this.handleCollapseClick(e):void this.handleExpandClick(e)},(0,n.h)(a.d,{class:"kol-tree-item__toggle-button-icon",_icons:"codicon codicon-"+(l?"chevron-down":"chevron-right"),_label:""})):(0,n.h)("span",{class:"kol-tree-item__toggle-button-placeholder"}),(0,n.h)("span",{key:"ed810a798a4e2ba38f848ce0c6fdfc3893c3c86d",class:"kol-tree-item__text"},s))),(0,n.h)("ul",{key:"0e8ea268f1c26f79e55d45bfeda91d230bc4789d",class:"kol-tree-item__children",hidden:!i||!l,role:"group",id:this.groupId},(0,n.h)("slot",{key:"a6509011c3fa851be4c6cace3aadf2b6d6bbfc7b"}))))}validateActive(e){((e,t)=>{(0,l.h)(e,"_active",t,void 0)})(this,e||!1)}validateLabel(e){(0,r.v)(this,e)}validateOpen(e){(0,c.v)(this,e)}validateHref(e){(0,h.v)(this,e)}componentWillLoad(){this.validateActive(this._active),this.validateLabel(this._label),this.validateOpen(this._open),this.validateHref(this._href),this.checkForChildren(),this.determineTreeItemDepth()}determineTreeItemDepth(){let e=0,t=this.host.parentNode.host.parentNode;for(;null!==t&&t.tagName.toLowerCase()!==a.w&&t!==document.body;)t=t.parentElement,e+=1;this.level=e}handleSlotchange(){this.checkForChildren()}checkForChildren(){var e,t;this.state=Object.assign(Object.assign({},this.state),{_hasChildren:Boolean(null===(t=null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedElements)||void 0===t?void 0:t.call(e).length)})}focusLink(){return d(this,null,(function*(){yield this.linkElement.kolFocus()}))}handleExpandClick(e){return d(this,null,(function*(){e.preventDefault(),yield this.linkElement.kolFocus(),yield this.expand()}))}expand(){return d(this,null,(function*(){this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!0}))}))}handleCollapseClick(e){return d(this,null,(function*(){e.preventDefault(),this.linkElement.focus(),yield this.collapse()}))}collapse(){return d(this,null,(function*(){this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!1}))}))}isOpen(){return d(this,null,(function*(){var e;return null!==(e=this.state._open)&&void 0!==e&&e}))}get host(){return(0,n.g)(this)}static get watchers(){return{_active:["validateActive"],_label:["validateLabel"],_open:["validateOpen"],_href:["validateHref"]}}}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9938],{3472:(e,t,i)=>{i.d(t,{a:()=>d,b:()=>o,c:()=>r,h:()=>l,v:()=>h});var n=i(257);const l=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,s=/^\d+$/;function o(e,t=1){return function(e){var t;return"string"==typeof e&&(null===(t=e.match(a))||void 0===t?void 0:t.length)||0}(e)>=t}function r(e){return s.test(e)}const c=new Set(["string"]),h=(e,t,i={})=>{(0,n.w)(e,"_label",(e=>"string"==typeof e),c,t,function(e){var t;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(t,i,l,a)=>{var s,c;"function"==typeof(null===(s=e.hooks)||void 0===s?void 0:s.afterPatch)&&(null===(c=e.hooks)||void 0===c||c.afterPatch(t,i,l,a)),"string"==typeof t&&!1===o(t,3)&&!1===r(t)&&(0,n.b)(`The heading or label ("${t}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof t&&t.length>80&&(0,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}})}(i))},d=h},6376:(e,t,i)=>{i.d(t,{v:()=>l});var n=i(257);const l=(e,t,i={})=>{(0,n.A)(e,"_href",t,i)}},8045:(e,t,i)=>{function n(e){var t,i,l="";if("string"==typeof e||"number"==typeof e)l+=e;else if("object"==typeof e)if(Array.isArray(e)){var a=e.length;for(t=0;t<a;t++)e[t]&&(i=n(e[t]))&&(l&&(l+=" "),l+=i)}else for(i in e)e[i]&&(l&&(l+=" "),l+=i);return l}function l(){for(var e,t,i=0,l="",a=arguments.length;i<a;i++)(e=arguments[i])&&(t=n(e))&&(l&&(l+=" "),l+=t);return l}i.d(t,{c:()=>l})},9167:(e,t,i)=>{i.d(t,{i:()=>s,n:()=>r,r:()=>o});var n=i(257),l=i(6123);const a=()=>{let e=(0,n.e)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,n.e)(),"KoliBri",{value:e,writable:!1})),e},s=()=>{(()=>{const e=(0,n.g)().querySelector('meta[name="kolibri"]');if(e&&e.hasAttribute("content")){const t=e.getAttribute("content");"string"==typeof t&&((0,n.s)(t.includes("dev-mode=true")),(0,n.c)(t.includes("experimental-mode=true")),(0,n.d)(t.includes("color-contrast-analysis=true")))}})(),n.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${l.E.kolibriVersion}\n\t`,{forceLog:!0})},o=()=>{!0!==a().adviceShown&&(Object.defineProperty(a(),"adviceShown",{get:function(){return!0}}),n.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 r=()=>Math.floor(16777215*Math.random()).toString(16);"test"===n.p&&(r=()=>"nonce")},9691:(e,t,i)=>{i.d(t,{v:()=>l});var n=i(257);const l=(e,t,i)=>{(0,n.h)(e,"_open",t,i)}},9938:(e,t,i)=>{i.r(t),i.d(t,{kol_tree_item_wc:()=>u});var n=i(6123),l=i(257),a=i(1698),s=i(9167),o=i(8045),r=i(3472),c=i(9691),h=i(6376),d=(e,t,i)=>new Promise(((n,l)=>{var a=e=>{try{o(i.next(e))}catch(e){l(e)}},s=e=>{try{o(i.throw(e))}catch(e){l(e)}},o=e=>e.done?n(e.value):Promise.resolve(e.value).then(a,s);o((i=i.apply(e,t)).next())}));const u=class{constructor(e){(0,n.r)(this,e),this.groupId=`tree-group-${(0,s.n)()}`,this.level=void 0,this.state={_active:!1,_hasChildren:!1,_href:"",_label:"",_open:!1},this._active=void 0,this._label=void 0,this._open=void 0,this._href=void 0}render(){const{_href:e,_active:t,_hasChildren:i,_open:l,_label:s}=this.state;return(0,n.h)(n.H,{key:"1358f3b8f8c7ae14535f30e3c2ff1ef8ab6904b1",onSlotchange:this.handleSlotchange.bind(this)},(0,n.h)("li",{key:"d6271238a133cac44eb78bf8ed0b94a951135432",class:"kol-tree-item",style:{"--level":`${this.level}`}},(0,n.h)(a.e,{key:"329b9adc28bacf6742544123bc02fe82f2ceb9b5",class:(0,o.c)("kol-tree-item__link",{"kol-tree-item__link--first-level":0===this.level,"kol-tree-item__link--active":t}),_href:e,_label:"",_role:"treeitem",_tabIndex:t?0:-1,_ariaExpanded:i?l:void 0,_ariaOwns:i?this.groupId:void 0,ref:e=>this.linkElement=e},(0,n.h)("span",{key:"0292f071a8abfe0f9332ef4a8561149d38f804e2",class:"kol-tree-item__link-inner",slot:"expert"},i?(0,n.h)("span",{class:"kol-tree-item__toggle-button",onClick:e=>l?void this.handleCollapseClick(e):void this.handleExpandClick(e)},(0,n.h)(a.d,{class:"kol-tree-item__toggle-button-icon",_icons:"codicon codicon-"+(l?"chevron-down":"chevron-right"),_label:""})):(0,n.h)("span",{class:"kol-tree-item__toggle-button-placeholder"}),(0,n.h)("span",{key:"ed810a798a4e2ba38f848ce0c6fdfc3893c3c86d",class:"kol-tree-item__text"},s))),(0,n.h)("ul",{key:"0e8ea268f1c26f79e55d45bfeda91d230bc4789d",class:"kol-tree-item__children",hidden:!i||!l,role:"group",id:this.groupId},(0,n.h)("slot",{key:"a6509011c3fa851be4c6cace3aadf2b6d6bbfc7b"}))))}validateActive(e){((e,t)=>{(0,l.h)(e,"_active",t,void 0)})(this,e||!1)}validateLabel(e){(0,r.v)(this,e)}validateOpen(e){(0,c.v)(this,e)}validateHref(e){(0,h.v)(this,e)}componentWillLoad(){this.validateActive(this._active),this.validateLabel(this._label),this.validateOpen(this._open),this.validateHref(this._href),this.checkForChildren(),this.determineTreeItemDepth()}determineTreeItemDepth(){let e=0,t=this.host.parentNode.host.parentNode;for(;null!==t&&t.tagName.toLowerCase()!==a.w&&t!==document.body;)t=t.parentElement,e+=1;this.level=e}handleSlotchange(){this.checkForChildren()}checkForChildren(){var e,t;this.state=Object.assign(Object.assign({},this.state),{_hasChildren:Boolean(null===(t=null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedElements)||void 0===t?void 0:t.call(e).length)})}focusLink(){return d(this,null,(function*(){yield this.linkElement.kolFocus()}))}handleExpandClick(e){return d(this,null,(function*(){e.preventDefault(),yield this.linkElement.kolFocus(),yield this.expand()}))}expand(){return d(this,null,(function*(){this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!0}))}))}handleCollapseClick(e){return d(this,null,(function*(){e.preventDefault(),this.linkElement.focus(),yield this.collapse()}))}collapse(){return d(this,null,(function*(){this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!1}))}))}isOpen(){return d(this,null,(function*(){var e;return null!==(e=this.state._open)&&void 0!==e&&e}))}get host(){return(0,n.g)(this)}static get watchers(){return{_active:["validateActive"],_label:["validateLabel"],_open:["validateOpen"],_href:["validateHref"]}}}}}]);