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

package/dist/3920.js

@@ -1,2 +1,2 @@
 /*! For license information please see 3920.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3920],{182:(e,t,n)=>{n.d(t,{I:()=>y,K:()=>_,a:()=>f});var i=n(6733),o=n(257),a=n(1111),s=n(8045),l=n(9867),r=n(1698),d=n(3885),c=n(376),h=n(1476),u=n(8057);const p=(e,t)=>{var{position:n="start",class:o}=e,l=(0,a._)(e,["position","class"]);const r="kol-input-container__adornment",d=`${r}--${n}`;return(0,i.h)("div",Object.assign({class:(0,s.c)(r,d,o)},l),t)};function m(e){return!!e&&(Array.isArray(e)?e.length>0:Boolean(e))}const v=(e,t)=>{var{class:n}=e,o=(0,a._)(e,["class"]);return(0,i.h)("div",Object.assign({class:(0,s.c)("kol-input-container__container",n)},o),t)},g=(e,t)=>{const{class:n,startAdornment:o,endAdornment:r,disabled:d,msg:c,touched:h,containerProps:u,startAdornmentProps:g,endAdornmentProps:b}=e,_=(0,a._)(e,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),f=(0,l.c)(c,h),y={"kol-input-container--disabled":d,[`kol-input-container--${(null==c?void 0:c.type)||"error"}`]:f},k=Object.assign({class:(0,s.c)("kol-input-container",y,n)},_);return m(o)||m(r)?(0,i.h)("div",Object.assign({},k),(0,i.h)(p,Object.assign({},g,{position:"start"}),o),(0,i.h)(v,Object.assign({},u),t),(0,i.h)(p,Object.assign({},b,{position:"end"}),r)):(0,i.h)("div",Object.assign({},k),(0,i.h)(v,Object.assign({},u),t))},b=e=>{const{label:t,icons:n,hideLabel:o,disabled:s,onClick:l}=e,d=(0,a._)(e,["label","icons","hideLabel","disabled","onClick"]);return(0,i.h)(r.a,Object.assign({_label:t,_disabled:s,_icons:n,_hideLabel:o,_on:{onClick:l}},d))},_=e=>{const{componentName:t="button",label:n,icon:o,onClick:s}=e,l=(0,a._)(e,["componentName","label","icon","onClick"]),r="button"===t?b:d.K;return(0,i.h)(r,Object.assign({label:n||"",hideLabel:!0,icons:`codicon codicon-${o}`,onClick:s},l))},f=({state:e,endAdornment:t},n)=>{const{icons:o,smartButton:a,disabled:s,msg:r,touched:d}=function(e){let t,n;return"_icons"in e&&(t=e._icons),"_smartButton"in e&&(n=e._smartButton),{icons:t,smartButton:n,disabled:e._disabled,msg:(0,l.a)(e._msg),touched:e._touched}}(e);let u=null==o?void 0:o.left;(0,c.i)(u)&&(u={icon:u});let p=null==o?void 0:o.right;(0,c.i)(p)&&(p={icon:p});const m=[],v=[];return t&&(Array.isArray(t)?v.push(...t):v.push(t)),u&&m.push((0,i.h)(_,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,h.i)(u)?u:{}))),(0,h.i)(a)&&v.push((0,i.h)(_,Object.assign({componentName:"button",class:"kol-input-container__smart-button"},a,{hideLabel:!0,disabled:s}))),p&&v.push((0,i.h)(_,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,h.i)(p)?p:{}))),(0,i.h)(g,{disabled:s,msg:r,touched:d,startAdornment:m,endAdornment:v},n)};class y extends l.I{constructor(e,t,n){super(e,t,n),this.numberStringRegex=/^\d+(\.\d+)?$/,this.parseToNumber=e=>"number"==typeof e?isNaN(e)?null:e:this.isNumberString(e)?parseFloat(e):null,this.validateNumber=(e,t)=>(0,o.w)(this.component,e,(e=>null==e||"number"==typeof e||"string"==typeof e&&this.numberStringRegex.test(e)),new Set(["number","NumberString"]),t,{hooks:{beforePatch:(t,n)=>{(null==n?void 0:n.has(e))&&(null==n||n.set(e,this.parseToNumber(t)))}}}),this.component=e}validateIcons(e){(0,u.v)(this.component,e)}isNumberString(e){return"string"==typeof e&&this.numberStringRegex.test(e)}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},1476:(e,t,n)=>{function i(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}n.d(t,{i:()=>i})},3885:(e,t,n)=>{n.d(t,{K:()=>a});var i=n(6733),o=n(1698);const a=e=>{const{class:t,style:n,icons:a,label:s,onClick:l}=e;return(0,i.h)(o.d,{class:t,style:n,onClick:l,_icons:a,_label:s})}},3920:(e,t,n)=>{n.r(t),n.d(t,{kol_input_date:()=>v});var i=n(6733),o=n(8045),a=n(257),s=n(2190),l=n(5151),r=n(9867),d=n(7162),c=n(182),h=n(7368),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),(e,t,n)=>new Promise(((i,o)=>{var a=e=>{try{l(n.next(e))}catch(e){o(e)}},s=e=>{try{l(n.throw(e))}catch(e){o(e)}},l=e=>e.done?i(e.value):Promise.resolve(e.value).then(a,s);l((n=n.apply(e,t)).next())})));const p=["date","datetime-local","month","time","week"];class m extends c.I{constructor(e,t,n){super(e,t,n),this.validateIso8601=(e,t,n)=>(0,a.w)(this.component,e,(e=>void 0===e||null==e||""===e||this.validateDateString(e)),new Set(["Date","string{ISO-8601}"]),m.tryParseToString(t,this.component._type,this.component._step),{hooks:{afterPatch:e=>{"string"==typeof e&&n&&n(e)}}}),this.component=e}validateAutoComplete(e){(0,a.w)(this.component,"_autoComplete",(e=>"string"==typeof e&&("on"===e||"off"===e)),new Set(["on | off"]),e)}validateSuggestions(e){(0,h.v)(this.component,e)}static tryParseToString(e,t,n){if("string"==typeof e||null===e)return e;if("object"==typeof e&&e instanceof Date){const i=e.getFullYear(),o=String(e.getMonth()+1).padStart(2,"0"),a=String(e.getDate()).padStart(2,"0"),s=String(e.getHours()).padStart(2,"0"),l=String(e.getMinutes()).padStart(2,"0"),r=String(e.getSeconds()).padStart(2,"0"),d=[i,o,a].join("-"),c=[s,l,r].join(":");switch(t){case"date":return d;case"datetime-local":return`${d}T${c}`;case"month":return`${i}-${o}`;case"time":return void 0===n||"60"===String(n)?`${s}:${l}`:c;case"week":return`${i}-W${this.getWeekNumberOfDate(e)}`}}}static getWeekNumberOfDate(e){const t=new Date(e),n=(t.getDay()+6)%7;t.setDate(t.getDate()-n+3);const i=t.valueOf();return t.setMonth(0,1),4!==t.getDay()&&t.setMonth(0,1+(4-t.getDay()+7)%7),(1+Math.ceil((i-t.valueOf())/6048e5)).toString().padStart(2,"0")}validateDateString(e){switch(this.component._type){case"date":return m.isoDateRegex.test(e);case"datetime-local":return m.isoLocalDateTimeRegex.test(e);case"month":return m.isoMonthRegex.test(e);case"time":return m.isoTimeRegex.test(e);case"week":return m.isoWeekRegex.test(e);default:return!1}}onBlur(e){super.onBlur(e),!!e.target.value!=!!this.component._value&&(this.component._value=e.target.value)}validateMax(e){const t=null!=e||"date"!==this.component._type&&"month"!==this.component._type&&"datetime-local"!==this.component._type?e:m.DEFAULT_MAX_DATE;this.validateIso8601("_max",t)}validateMin(e){this.validateIso8601("_min",e)}validateOn(e){(0,a.k)(this.component,"_on",Object.assign(Object.assign({},e),{onChange:(t,n)=>{!!n!=!!this.component._value&&(this.component._value=n),(null==e?void 0:e.onChange)&&e.onChange(t,n)}}))}validateReadOnly(e){((e,t)=>{(0,a.h)(e,"_readOnly",t)})(this.component,e)}validateRequired(e){(0,a.h)(this.component,"_required",e)}validateStep(e){this.validateNumber("_step",e)}validateType(e){(0,a.w)(this.component,"_type",(e=>"string"==typeof e&&p.includes(e)),new Set([`String {${p.join(", ")}`]),e)}validateValue(e){this.validateValueEx(e)}validateValueEx(e,t){this.validateIso8601("_value",e,t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateLabel(this.component._label),this.validateSuggestions(this.component._suggestions),this.validateOn(this.component._on),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateType(this.component._type),this.validateValue(this.component._value)}}m.isoDateRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])/,m.isoLocalDateTimeRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])[T ][0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,m.isoMonthRegex=/^\d{4}-([0]\d|1[0-2])/,m.isoTimeRegex=/^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,m.isoWeekRegex=/^\d{4}-W(?:[0-4]\d|5[0-3])$/,m.DEFAULT_MAX_DATE=new Date(9999,11,31,23,59,59);const v=class{getValue(){return u(this,null,(function*(){var e;return this.inputRef&&this.remapValue(null===(e=this.inputRef)||void 0===e?void 0:e.value)}))}kolFocus(){return u(this,null,(function*(){var e;null===(e=this.inputRef)||void 0===e||e.focus()}))}reset(){return u(this,null,(function*(){this.state=Object.assign(Object.assign({},this.state),{_value:null}),this.controller.setFormAssociatedValue(""),this.inputRef&&(this.inputRef.value="")}))}setInitialValueType(e){e instanceof Date?this._initialValueType="Date":this._initialValueType="string"==typeof e?"String":null}remapValue(e){return""===e?null:"Date"===this._initialValueType?new Date(e):e}getFormFieldProps(){return{state:this.state,class:(0,o.c)("kol-input-date",this.state._type,{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.inputRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getInputProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state},this.controller.onFacade),{onBlur:this.onBlur,onFocus:this.onFocus,onKeyDown:this.onKeyDown,onChange:this.onChange,onInput:this.onInput})}render(){return(0,i.h)(r.F,Object.assign({key:"ac7f8fd7609b8b4d6413bf6eca8312510b79bb2f"},this.getFormFieldProps()),(0,i.h)(c.a,{key:"591c94a645aed027dcbe71d36961cd5af27e1519",state:this.state},(0,i.h)(d.I,Object.assign({key:"9de3fc6749e333dc59202452773517b64f90e79c"},this.getInputProps()))))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{this.inputRef=e},this.onBlur=e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},this.onFocus=e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},this.onChange=e=>{const t=e.target.value,n=this.remapValue(t);this.controller.onFacade.onChange(e,n)},this.onInput=e=>{const t=e.target.value,n=this.remapValue(t);this._value=n,this.controller.onFacade.onInput(e,!0,n)},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||(0,l.p)({form:this.host,ref:this.inputRef})},this._initialValueType=null,this._accessKey=void 0,this._autoComplete=void 0,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._max=void 0,this._min=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._step=void 0,this._tooltipAlign="top",this._touched=!1,this._type="date",this._value=void 0,this.state={_autoComplete:"off",_hasValue:!1,_hideMsg:!1,_id:`id-${(0,s.n)()}`,_label:"",_suggestions:[],_type:"datetime-local"},this.inputHasFocus=!1,this.controller=new m(this,"date",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMax(e){this.controller.validateMax(e)}validateMin(e){this.controller.validateMin(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateStep(e){this.controller.validateStep(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateType(e){this.controller.validateType(e)}validateValue(e){e instanceof Date&&(0,a.H)("Date type will be removed in v3. Use `Iso8601` instead."),this.controller.validateValueEx(e),null!=e&&this.setInitialValueType(e)}componentWillLoad(){void 0!==this._value&&this.setInitialValueType(this._value),this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};v.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}"}},5151:(e,t,n)=>{n.d(t,{a:()=>s,p:()=>l});var i=n(257),o=n(1698);const a=e=>{for((0,i.F)()&&((0,i.D)("↓ Search form element start."),i.L.debug(e));e instanceof HTMLElement&&"FORM"!==e.tagName&&e.tagName!==o.g.toUpperCase();){try{e=e.parentElement instanceof HTMLElement?e.parentElement:e.parentNode instanceof ShadowRoot?e.parentNode.host:null}catch(e){}(0,i.F)()&&(i.L.debug(e),(0,i.D)("↑ Search form element finished."))}return e},s=(e={})=>{var t,n;const s=a(e.form);if(s instanceof HTMLElement){const e=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===s.tagName)(0,i.I)(e,s),s.dispatchEvent(e);else if(s.tagName===o.g.toUpperCase()){(0,i.I)(e,i.a.querySelector("form",s));const o=s;"function"==typeof(null===(t=o._on)||void 0===t?void 0:t.onReset)&&(null===(n=o._on)||void 0===n||n.onReset(e))}}},l=(e={})=>{const t=a(e.form);if(t instanceof HTMLElement){const e=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:t});if("FORM"===t.tagName)(0,i.F)()&&!1===t.noValidate&&(0,i.D)("If you have not focusable or hidden form fields in your form, you should enable noValidate for your form.",{force:!0}),setTimeout((()=>{"function"==typeof t.requestSubmit?t.requestSubmit():((0,i.I)(e,t),t.dispatchEvent(e))}));else if(t.tagName===o.g.toUpperCase()){(0,i.I)(e,i.a.querySelector("form",t));const n=t;setTimeout((()=>{var t,i;"function"==typeof(null===(t=n._on)||void 0===t?void 0:t.onSubmit)&&(null===(i=n._on)||void 0===i||i.onSubmit(e))}))}}}},7162:(e,t,n)=>{n.d(t,{I:()=>r,S:()=>l});var i=n(1111),o=n(6733),a=n(8176),s=(n(257),n(9867));const l=e=>{var{id:t,suggestions:n}=e,a=(0,i._)(e,["id","suggestions"]);return n?(0,o.h)("datalist",Object.assign({id:`${t}-list`},a),n.map((e=>(0,o.h)("option",{value:e})))):null},r=e=>{var{state:t,customSuggestions:n}=e,r=(0,i._)(e,["state","customSuggestions"]);return(0,o.h)(a.I,Object.assign({},function(e,t){const{ariaDescribedBy:n}=(0,s.g)(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:n};return"_type"in e&&(i.type=e._type),"_value"in e&&(i.value=e._value),"_required"in e&&(i.required=e._required),"_maxLength"in e&&(i.maxlength=e._maxLength),"_placeholder"in e&&(i.placeholder=e._placeholder),"_autoComplete"in e&&(i.autoComplete=e._autoComplete),"_spellCheck"in e&&(i.spellcheck=e._spellCheck),"_pattern"in e&&(i.pattern=e._pattern),"_readOnly"in e&&(i.readonly=e._readOnly),"_min"in e&&(i.min=e._min),"_max"in e&&(i.max=e._max),"_step"in e&&(i.step=e._step),"_multiple"in e&&(i.multiple=e._multiple),"_checked"in e&&(i.checked=e._checked),"_indeterminate"in e&&(i.indeterminate=e._indeterminate),"_touched"in e&&(i.touched=e._touched),"_msg"in e&&(i.msg=(0,s.a)(e._msg)),"_suggestions"in e&&!t&&Array.isArray(e._suggestions)&&e._suggestions.length>0&&(i.suggestions=(0,o.h)(l,{id:e._id,suggestions:e._suggestions})),i}(t,n),r))}},7368:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(257);const o=(e,t)=>{(0,i.y)(e,"_suggestions",(e=>"string"==typeof e||"number"==typeof e),t,void 0,{hooks:{afterPatch:e=>{Array.isArray(e)&&e.length&&(0,i.b)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}},8057:(e,t,n)=>{n.d(t,{v:()=>s});var i=n(257);const o=(e,t,n)=>{(0,i.v)(n)?e[t]=n:(0,i.q)(n,1)&&(e[t]={icon:n})},a=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,i.t)(e.style))&&(void 0===e.label||(0,i.q)(e.label))&&(0,i.q)(e.icon,1),s=(e,t,n={})=>{(0,i.o)(t,(()=>{var s;try{t=(0,i.j)(t)}catch(e){}(0,i.w)(e,"_icons",(e=>{const t="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||t||(0,i.q)(e,1)||"object"==typeof e&&null!==e&&((0,i.q)(e.left,1)||a(e.left)||(0,i.q)(e.right,1)||a(e.right)||(0,i.q)(e.top,1)||a(e.top)||(0,i.q)(e.bottom,1)||a(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(s=n.hooks)||void 0===s?void 0:s.afterPatch,beforePatch:(e,t,a,s)=>{var l,r;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(e,t,a,s)),(e=>{var t,n,a;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(n=e.nextState)||void 0===n?void 0:n.get("_icons");null===(a=e.nextState)||void 0===a||a.set("_icons",(e=>{let t={};return(0,i.q)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(o(t,"top",e.top),o(t,"right",e.right),o(t,"bottom",e.bottom),o(t,"left",e.left)),t})(t))}})(a)}}}))}))}},8176:(e,t,n)=>{n.d(t,{I:()=>l});var i=n(1111),o=n(6733),a=n(8045),s=(n(257),n(9867));const l=e=>{const{class:t,msg:n,required:l,disabled:r,touched:d,readonly:c,ariaDescribedBy:h,hideLabel:u,label:p,suggestions:m,value:v}=e,g=(0,i._)(e,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),b=(0,s.c)(n,d),_={"kol-input--disabled":Boolean(r),"kol-input--required":Boolean(l),"kol-input--touched":Boolean(d),"kol-input--readonly":Boolean(c),[`kol-input--${(null==n?void 0:n.type)||"error"}`]:b},f=Object.assign(Object.assign({class:(0,a.c)("kol-input",_,t),required:l,disabled:r,readonly:c,type:"text",list:m?`${g.id}-list`:void 0},(0,s.e)({ariaDescribedBy:h,hideLabel:u,label:p})),g);return(0,o.h)(o.F,null,(0,o.h)("input",Object.assign({},f,{value:v})),m)}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3920],{1335:(e,t,n)=>{n.d(t,{I:()=>r,S:()=>l});var i=n(1111),o=n(6123),a=n(6205),s=(n(257),n(4571));const l=e=>{var{id:t,suggestions:n}=e,a=(0,i._)(e,["id","suggestions"]);return n?(0,o.h)("datalist",Object.assign({id:`${t}-list`},a),n.map((e=>(0,o.h)("option",{value:e})))):null},r=e=>{var{state:t,customSuggestions:n}=e,r=(0,i._)(e,["state","customSuggestions"]);return(0,o.h)(a.I,Object.assign({},function(e,t){const{ariaDescribedBy:n}=(0,s.g)(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:n};return"_type"in e&&(i.type=e._type),"_value"in e&&(i.value=e._value),"_required"in e&&(i.required=e._required),"_maxLength"in e&&(i.maxlength=e._maxLength),"_placeholder"in e&&(i.placeholder=e._placeholder),"_autoComplete"in e&&(i.autoComplete=e._autoComplete),"_spellCheck"in e&&(i.spellcheck=e._spellCheck),"_pattern"in e&&(i.pattern=e._pattern),"_readOnly"in e&&(i.readonly=e._readOnly),"_min"in e&&(i.min=e._min),"_max"in e&&(i.max=e._max),"_step"in e&&(i.step=e._step),"_multiple"in e&&(i.multiple=e._multiple),"_checked"in e&&(i.checked=e._checked),"_indeterminate"in e&&(i.indeterminate=e._indeterminate),"_touched"in e&&(i.touched=e._touched),"_msg"in e&&(i.msg=(0,s.a)(e._msg)),"_suggestions"in e&&!t&&Array.isArray(e._suggestions)&&e._suggestions.length>0&&(i.suggestions=(0,o.h)(l,{id:e._id,suggestions:e._suggestions})),i}(t,n),r))}},1476:(e,t,n)=>{function i(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}n.d(t,{i:()=>i})},2074:(e,t,n)=>{n.d(t,{K:()=>a});var i=n(6123),o=n(1698);const a=e=>{const{class:t,style:n,icons:a,label:s,onClick:l}=e;return(0,i.h)(o.d,{class:t,style:n,onClick:l,_icons:a,_label:s})}},2420:(e,t,n)=>{n.d(t,{I:()=>y,K:()=>_,a:()=>f});var i=n(6123),o=n(257),a=n(1111),s=n(8045),l=n(4571),r=n(1698),d=n(2074),c=n(3806),h=n(1476),u=n(8057);const p=(e,t)=>{var{position:n="start",class:o}=e,l=(0,a._)(e,["position","class"]);const r="kol-input-container__adornment",d=`${r}--${n}`;return(0,i.h)("div",Object.assign({class:(0,s.c)(r,d,o)},l),t)};function m(e){return!!e&&(Array.isArray(e)?e.length>0:Boolean(e))}const v=(e,t)=>{var{class:n}=e,o=(0,a._)(e,["class"]);return(0,i.h)("div",Object.assign({class:(0,s.c)("kol-input-container__container",n)},o),t)},g=(e,t)=>{const{class:n,startAdornment:o,endAdornment:r,disabled:d,msg:c,touched:h,containerProps:u,startAdornmentProps:g,endAdornmentProps:b}=e,_=(0,a._)(e,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),f=(0,l.c)(c,h),y={"kol-input-container--disabled":d,[`kol-input-container--${(null==c?void 0:c.type)||"error"}`]:f},k=Object.assign({class:(0,s.c)("kol-input-container",y,n)},_);return m(o)||m(r)?(0,i.h)("div",Object.assign({},k),(0,i.h)(p,Object.assign({},g,{position:"start"}),o),(0,i.h)(v,Object.assign({},u),t),(0,i.h)(p,Object.assign({},b,{position:"end"}),r)):(0,i.h)("div",Object.assign({},k),(0,i.h)(v,Object.assign({},u),t))},b=e=>{const{label:t,icons:n,hideLabel:o,disabled:s,onClick:l}=e,d=(0,a._)(e,["label","icons","hideLabel","disabled","onClick"]);return(0,i.h)(r.a,Object.assign({_label:t,_disabled:s,_icons:n,_hideLabel:o,_on:{onClick:l}},d))},_=e=>{const{componentName:t="button",label:n,icon:o,onClick:s}=e,l=(0,a._)(e,["componentName","label","icon","onClick"]),r="button"===t?b:d.K;return(0,i.h)(r,Object.assign({label:n||"",hideLabel:!0,icons:`codicon codicon-${o}`,onClick:s},l))},f=({state:e,endAdornment:t},n)=>{const{icons:o,smartButton:a,disabled:s,msg:r,touched:d}=function(e){let t,n;return"_icons"in e&&(t=e._icons),"_smartButton"in e&&(n=e._smartButton),{icons:t,smartButton:n,disabled:e._disabled,msg:(0,l.a)(e._msg),touched:e._touched}}(e);let u=null==o?void 0:o.left;(0,c.i)(u)&&(u={icon:u});let p=null==o?void 0:o.right;(0,c.i)(p)&&(p={icon:p});const m=[],v=[];return t&&(Array.isArray(t)?v.push(...t):v.push(t)),u&&m.push((0,i.h)(_,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,h.i)(u)?u:{}))),(0,h.i)(a)&&v.push((0,i.h)(_,Object.assign({componentName:"button",class:"kol-input-container__smart-button"},a,{hideLabel:!0,disabled:s}))),p&&v.push((0,i.h)(_,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,h.i)(p)?p:{}))),(0,i.h)(g,{disabled:s,msg:r,touched:d,startAdornment:m,endAdornment:v},n)};class y extends l.I{constructor(e,t,n){super(e,t,n),this.numberStringRegex=/^\d+(\.\d+)?$/,this.parseToNumber=e=>"number"==typeof e?isNaN(e)?null:e:this.isNumberString(e)?parseFloat(e):null,this.validateNumber=(e,t)=>(0,o.w)(this.component,e,(e=>null==e||"number"==typeof e||"string"==typeof e&&this.numberStringRegex.test(e)),new Set(["number","NumberString"]),t,{hooks:{beforePatch:(t,n)=>{(null==n?void 0:n.has(e))&&(null==n||n.set(e,this.parseToNumber(t)))}}}),this.component=e}validateIcons(e){(0,u.v)(this.component,e)}isNumberString(e){return"string"==typeof e&&this.numberStringRegex.test(e)}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},3920:(e,t,n)=>{n.r(t),n.d(t,{kol_input_date:()=>v});var i=n(6123),o=n(8045),a=n(257),s=n(9167),l=n(5151),r=n(4571),d=n(1335),c=n(2420),h=n(7368),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),(e,t,n)=>new Promise(((i,o)=>{var a=e=>{try{l(n.next(e))}catch(e){o(e)}},s=e=>{try{l(n.throw(e))}catch(e){o(e)}},l=e=>e.done?i(e.value):Promise.resolve(e.value).then(a,s);l((n=n.apply(e,t)).next())})));const p=["date","datetime-local","month","time","week"];class m extends c.I{constructor(e,t,n){super(e,t,n),this.validateIso8601=(e,t,n)=>(0,a.w)(this.component,e,(e=>void 0===e||null==e||""===e||this.validateDateString(e)),new Set(["Date","string{ISO-8601}"]),m.tryParseToString(t,this.component._type,this.component._step),{hooks:{afterPatch:e=>{"string"==typeof e&&n&&n(e)}}}),this.component=e}validateAutoComplete(e){(0,a.w)(this.component,"_autoComplete",(e=>"string"==typeof e&&("on"===e||"off"===e)),new Set(["on | off"]),e)}validateSuggestions(e){(0,h.v)(this.component,e)}static tryParseToString(e,t,n){if("string"==typeof e||null===e)return e;if("object"==typeof e&&e instanceof Date){const i=e.getFullYear(),o=String(e.getMonth()+1).padStart(2,"0"),a=String(e.getDate()).padStart(2,"0"),s=String(e.getHours()).padStart(2,"0"),l=String(e.getMinutes()).padStart(2,"0"),r=String(e.getSeconds()).padStart(2,"0"),d=[i,o,a].join("-"),c=[s,l,r].join(":");switch(t){case"date":return d;case"datetime-local":return`${d}T${c}`;case"month":return`${i}-${o}`;case"time":return void 0===n||"60"===String(n)?`${s}:${l}`:c;case"week":return`${i}-W${this.getWeekNumberOfDate(e)}`}}}static getWeekNumberOfDate(e){const t=new Date(e),n=(t.getDay()+6)%7;t.setDate(t.getDate()-n+3);const i=t.valueOf();return t.setMonth(0,1),4!==t.getDay()&&t.setMonth(0,1+(4-t.getDay()+7)%7),(1+Math.ceil((i-t.valueOf())/6048e5)).toString().padStart(2,"0")}validateDateString(e){switch(this.component._type){case"date":return m.isoDateRegex.test(e);case"datetime-local":return m.isoLocalDateTimeRegex.test(e);case"month":return m.isoMonthRegex.test(e);case"time":return m.isoTimeRegex.test(e);case"week":return m.isoWeekRegex.test(e);default:return!1}}onBlur(e){super.onBlur(e),!!e.target.value!=!!this.component._value&&(this.component._value=e.target.value)}validateMax(e){const t=null!=e||"date"!==this.component._type&&"month"!==this.component._type&&"datetime-local"!==this.component._type?e:m.DEFAULT_MAX_DATE;this.validateIso8601("_max",t)}validateMin(e){this.validateIso8601("_min",e)}validateOn(e){(0,a.k)(this.component,"_on",Object.assign(Object.assign({},e),{onChange:(t,n)=>{!!n!=!!this.component._value&&(this.component._value=n),(null==e?void 0:e.onChange)&&e.onChange(t,n)}}))}validateReadOnly(e){((e,t)=>{(0,a.h)(e,"_readOnly",t)})(this.component,e)}validateRequired(e){(0,a.h)(this.component,"_required",e)}validateStep(e){this.validateNumber("_step",e)}validateType(e){(0,a.w)(this.component,"_type",(e=>"string"==typeof e&&p.includes(e)),new Set([`String {${p.join(", ")}`]),e)}validateValue(e){this.validateValueEx(e)}validateValueEx(e,t){this.validateIso8601("_value",e,t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateLabel(this.component._label),this.validateSuggestions(this.component._suggestions),this.validateOn(this.component._on),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateType(this.component._type),this.validateValue(this.component._value)}}m.isoDateRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])/,m.isoLocalDateTimeRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])[T ][0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,m.isoMonthRegex=/^\d{4}-([0]\d|1[0-2])/,m.isoTimeRegex=/^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,m.isoWeekRegex=/^\d{4}-W(?:[0-4]\d|5[0-3])$/,m.DEFAULT_MAX_DATE=new Date(9999,11,31,23,59,59);const v=class{getValue(){return u(this,null,(function*(){var e;return this.inputRef&&this.remapValue(null===(e=this.inputRef)||void 0===e?void 0:e.value)}))}kolFocus(){return u(this,null,(function*(){var e;null===(e=this.inputRef)||void 0===e||e.focus()}))}reset(){return u(this,null,(function*(){this.state=Object.assign(Object.assign({},this.state),{_value:null}),this.controller.setFormAssociatedValue(""),this.inputRef&&(this.inputRef.value="")}))}setInitialValueType(e){e instanceof Date?this._initialValueType="Date":this._initialValueType="string"==typeof e?"String":null}remapValue(e){return""===e?null:"Date"===this._initialValueType?new Date(e):e}getFormFieldProps(){return{state:this.state,class:(0,o.c)("kol-input-date",this.state._type,{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.inputRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getInputProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state},this.controller.onFacade),{onBlur:this.onBlur,onFocus:this.onFocus,onKeyDown:this.onKeyDown,onChange:this.onChange,onInput:this.onInput})}render(){return(0,i.h)(r.F,Object.assign({key:"ac7f8fd7609b8b4d6413bf6eca8312510b79bb2f"},this.getFormFieldProps()),(0,i.h)(c.a,{key:"591c94a645aed027dcbe71d36961cd5af27e1519",state:this.state},(0,i.h)(d.I,Object.assign({key:"9de3fc6749e333dc59202452773517b64f90e79c"},this.getInputProps()))))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{this.inputRef=e},this.onBlur=e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},this.onFocus=e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},this.onChange=e=>{const t=e.target.value,n=this.remapValue(t);this.controller.onFacade.onChange(e,n)},this.onInput=e=>{const t=e.target.value,n=this.remapValue(t);this._value=n,this.controller.onFacade.onInput(e,!0,n)},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||(0,l.p)({form:this.host,ref:this.inputRef})},this._initialValueType=null,this._accessKey=void 0,this._autoComplete=void 0,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._max=void 0,this._min=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._step=void 0,this._tooltipAlign="top",this._touched=!1,this._type="date",this._value=void 0,this.state={_autoComplete:"off",_hasValue:!1,_hideMsg:!1,_id:`id-${(0,s.n)()}`,_label:"",_suggestions:[],_type:"datetime-local"},this.inputHasFocus=!1,this.controller=new m(this,"date",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMax(e){this.controller.validateMax(e)}validateMin(e){this.controller.validateMin(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateStep(e){this.controller.validateStep(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateType(e){this.controller.validateType(e)}validateValue(e){e instanceof Date&&(0,a.H)("Date type will be removed in v3. Use `Iso8601` instead."),this.controller.validateValueEx(e),null!=e&&this.setInitialValueType(e)}componentWillLoad(){void 0!==this._value&&this.setInitialValueType(this._value),this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};v.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}"}},5151:(e,t,n)=>{n.d(t,{a:()=>s,p:()=>l});var i=n(257),o=n(1698);const a=e=>{for((0,i.F)()&&((0,i.D)("↓ Search form element start."),i.L.debug(e));e instanceof HTMLElement&&"FORM"!==e.tagName&&e.tagName!==o.g.toUpperCase();){try{e=e.parentElement instanceof HTMLElement?e.parentElement:e.parentNode instanceof ShadowRoot?e.parentNode.host:null}catch(e){}(0,i.F)()&&(i.L.debug(e),(0,i.D)("↑ Search form element finished."))}return e},s=(e={})=>{var t,n;const s=a(e.form);if(s instanceof HTMLElement){const e=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===s.tagName)(0,i.I)(e,s),s.dispatchEvent(e);else if(s.tagName===o.g.toUpperCase()){(0,i.I)(e,i.a.querySelector("form",s));const o=s;"function"==typeof(null===(t=o._on)||void 0===t?void 0:t.onReset)&&(null===(n=o._on)||void 0===n||n.onReset(e))}}},l=(e={})=>{const t=a(e.form);if(t instanceof HTMLElement){const e=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:t});if("FORM"===t.tagName)(0,i.F)()&&!1===t.noValidate&&(0,i.D)("If you have not focusable or hidden form fields in your form, you should enable noValidate for your form.",{force:!0}),setTimeout((()=>{"function"==typeof t.requestSubmit?t.requestSubmit():((0,i.I)(e,t),t.dispatchEvent(e))}));else if(t.tagName===o.g.toUpperCase()){(0,i.I)(e,i.a.querySelector("form",t));const n=t;setTimeout((()=>{var t,i;"function"==typeof(null===(t=n._on)||void 0===t?void 0:t.onSubmit)&&(null===(i=n._on)||void 0===i||i.onSubmit(e))}))}}}},6205:(e,t,n)=>{n.d(t,{I:()=>l});var i=n(1111),o=n(6123),a=n(8045),s=(n(257),n(4571));const l=e=>{const{class:t,msg:n,required:l,disabled:r,touched:d,readonly:c,ariaDescribedBy:h,hideLabel:u,label:p,suggestions:m,value:v}=e,g=(0,i._)(e,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),b=(0,s.c)(n,d),_={"kol-input--disabled":Boolean(r),"kol-input--required":Boolean(l),"kol-input--touched":Boolean(d),"kol-input--readonly":Boolean(c),[`kol-input--${(null==n?void 0:n.type)||"error"}`]:b},f=Object.assign(Object.assign({class:(0,a.c)("kol-input",_,t),required:l,disabled:r,readonly:c,type:"text",list:m?`${g.id}-list`:void 0},(0,s.e)({ariaDescribedBy:h,hideLabel:u,label:p})),g);return(0,o.h)(o.F,null,(0,o.h)("input",Object.assign({},f,{value:v})),m)}},7368:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(257);const o=(e,t)=>{(0,i.y)(e,"_suggestions",(e=>"string"==typeof e||"number"==typeof e),t,void 0,{hooks:{afterPatch:e=>{Array.isArray(e)&&e.length&&(0,i.b)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}},8057:(e,t,n)=>{n.d(t,{v:()=>s});var i=n(257);const o=(e,t,n)=>{(0,i.v)(n)?e[t]=n:(0,i.q)(n,1)&&(e[t]={icon:n})},a=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,i.t)(e.style))&&(void 0===e.label||(0,i.q)(e.label))&&(0,i.q)(e.icon,1),s=(e,t,n={})=>{(0,i.o)(t,(()=>{var s;try{t=(0,i.j)(t)}catch(e){}(0,i.w)(e,"_icons",(e=>{const t="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||t||(0,i.q)(e,1)||"object"==typeof e&&null!==e&&((0,i.q)(e.left,1)||a(e.left)||(0,i.q)(e.right,1)||a(e.right)||(0,i.q)(e.top,1)||a(e.top)||(0,i.q)(e.bottom,1)||a(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(s=n.hooks)||void 0===s?void 0:s.afterPatch,beforePatch:(e,t,a,s)=>{var l,r;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(e,t,a,s)),(e=>{var t,n,a;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(n=e.nextState)||void 0===n?void 0:n.get("_icons");null===(a=e.nextState)||void 0===a||a.set("_icons",(e=>{let t={};return(0,i.q)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(o(t,"top",e.top),o(t,"right",e.right),o(t,"bottom",e.bottom),o(t,"left",e.left)),t})(t))}})(a)}}}))}))}}}]);

package/dist/4030.js

@@ -1,2 +1,2 @@
 /*! For license information please see 4030.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4030],{3472:(n,e,t)=>{t.d(e,{a:()=>c,b:()=>r,c:()=>s,h:()=>o,v:()=>h});var i=t(257);const o=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function r(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(a))||void 0===e?void 0:e.length)||0}(n)>=e}function s(n){return l.test(n)}const d=new Set(["string"]),h=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),d,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,o,a)=>{var l,d;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(e,t,o,a)),"string"==typeof e&&!1===r(e,3)&&!1===s(e)&&(0,i.b)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},c=h},4030:(n,e,t)=>{t.r(e),t.d(e,{kol_drawer:()=>c});var i=t(6733),o=t(257),a=t(3694),l=t(8045),r=t(5154),s=t(3472),d=t(9691),h=(n,e,t)=>new Promise(((i,o)=>{var a=n=>{try{r(t.next(n))}catch(n){o(n)}},l=n=>{try{r(t.throw(n))}catch(n){o(n)}},r=n=>n.done?i(n.value):Promise.resolve(n.value).then(a,l);r((t=t.apply(n,e)).next())}));const c=class{constructor(n){(0,i.r)(this,n),this.getWrapperRef=n=>this.dialogWrapperElement=n,this.getRef=n=>{this.dialogElement=n,setTimeout((()=>{this.openOrCloseBasedOnState()}))},this._open=void 0,this._align=void 0,this._label=void 0,this._on=void 0,this.state={_label:"",_open:!1,_align:"left"}}open(){return h(this,null,(function*(){var n;this.state=Object.assign(Object.assign({},this.state),{_open:!0}),null===(n=this.dialogElement)||void 0===n||n.showModal()}))}close(){return h(this,null,(function*(){this.state=Object.assign(Object.assign({},this.state),{_open:!1});const n=this.dialogWrapperElement;n&&"none"===window.getComputedStyle(n).animationName&&this.handleCloseDialog()}))}renderDialogContent(){const n=this.state._align;return(0,i.h)("div",{ref:this.getWrapperRef,class:(0,l.c)("kol-drawer__wrapper",`kol-drawer__wrapper--${n}`,{"kol-drawer__wrapper--open":this.state._open,"kol-drawer__wrapper--is-closing":!1===this.state._open}),"aria-label":this.state._label},(0,i.h)("div",{class:"kol-drawer__content"},(0,i.h)("slot",null)))}render(){return(0,i.h)(i.H,{key:"4e33d8dec59c5c93cab94c35812db4fce6bf84c3",class:"kol-drawer"},(0,i.h)("dialog",{key:"8e5db5cc7ee900ffba6f5cd5dafafbee2dc7636c",class:"kol-drawer__dialog",ref:this.getRef},this.renderDialogContent()))}validateLabel(n){(0,s.v)(this,n,{required:!0})}validateAlign(n){(0,r.v)(this,n)}validateOpen(n){"boolean"==typeof n&&((0,d.v)(this,n),this.dialogElement&&this.openOrCloseBasedOnState())}openOrCloseBasedOnState(){return h(this,null,(function*(){this.state._open?yield this.open():yield this.close()}))}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"==typeof n.onClose&&(e.onClose=n.onClose),(0,o.k)(this,"_on",e)}}handleCloseDialog(){var n,e,t;null===(n=this.dialogElement)||void 0===n||n.close(),null===(t=null===(e=this._on)||void 0===e?void 0:e.onClose)||void 0===t||t.call(e),this.host&&(0,a.d)(this.host,a.K.close)}handleClose(){(()=>{h(this,null,(function*(){yield this.close(),this.handleCloseDialog()}))})()}handleAnimationEnd(n){n.animationName.includes("slideOut")&&this.handleCloseDialog()}componentDidLoad(){var n,e;null===(n=this.dialogElement)||void 0===n||n.addEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.addEventListener("close",this.handleClose.bind(this))}disconnectedCallback(){var n,e;null===(n=this.dialogElement)||void 0===n||n.removeEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.removeEventListener("close",this.handleClose.bind(this))}componentWillLoad(){this.validateLabel(this._label),this.validateOpen(this._open),this.validateAlign(this._align),this.validateOn(this._on)}get host(){return(0,i.g)(this)}static get watchers(){return{_label:["validateLabel"],_align:["validateAlign"],_open:["validateOpen"],_on:["validateOn"]}}};c.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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-drawer {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-drawer__dialog {\n    padding: 0;\n    border: none;\n  }\n  .kol-drawer__wrapper {\n    position: fixed;\n    width: auto;\n    overflow: auto;\n    background-color: white;\n  }\n  .kol-drawer__wrapper--left {\n    top: 0;\n    left: 0;\n    height: 100vh;\n    max-height: 100%;\n  }\n  .kol-drawer__wrapper--left .kol-drawer__content {\n    height: 100%;\n  }\n  .kol-drawer__wrapper--right {\n    top: 0;\n    right: 0;\n    height: 100vh;\n    max-height: 100%;\n  }\n  .kol-drawer__wrapper--right .kol-drawer__content {\n    height: 100%;\n  }\n  .kol-drawer__wrapper--top {\n    left: 0;\n    top: 0;\n    width: 100vw;\n    max-width: 100%;\n  }\n  .kol-drawer__wrapper--top .kol-drawer__content {\n    width: 100%;\n  }\n  .kol-drawer__wrapper--bottom {\n    left: 0;\n    bottom: 0;\n    width: 100vw;\n    max-width: 100%;\n  }\n  .kol-drawer__wrapper--bottom .kol-drawer__content {\n    width: 100%;\n  }\n  .kol-drawer__content {\n    position: relative;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}"}},5154:(n,e,t)=>{t.d(e,{a:()=>o,v:()=>l});var i=t(257);const o=(n,e,t)=>{(0,i.w)(n,e,(n=>"string"==typeof n&&a.includes(n)),new Set(a),t,{defaultValue:"top"})},a=["left","right","top","bottom"],l=(n,e)=>{o(n,"_align",e)}},8045:(n,e,t)=>{function i(n){var e,t,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var a=n.length;for(e=0;e<a;e++)n[e]&&(t=i(n[e]))&&(o&&(o+=" "),o+=t)}else for(t in n)n[t]&&(o&&(o+=" "),o+=t);return o}function o(){for(var n,e,t=0,o="",a=arguments.length;t<a;t++)(n=arguments[t])&&(e=i(n))&&(o&&(o+=" "),o+=e);return o}t.d(e,{c:()=>o})},9691:(n,e,t)=>{t.d(e,{v:()=>o});var i=t(257);const o=(n,e,t)=>{(0,i.h)(n,"_open",e,t)}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4030],{3472:(n,e,t)=>{t.d(e,{a:()=>c,b:()=>r,c:()=>s,h:()=>o,v:()=>h});var i=t(257);const o=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function r(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(a))||void 0===e?void 0:e.length)||0}(n)>=e}function s(n){return l.test(n)}const d=new Set(["string"]),h=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),d,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,o,a)=>{var l,d;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(e,t,o,a)),"string"==typeof e&&!1===r(e,3)&&!1===s(e)&&(0,i.b)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},c=h},4030:(n,e,t)=>{t.r(e),t.d(e,{kol_drawer:()=>c});var i=t(6123),o=t(257),a=t(3694),l=t(8045),r=t(5154),s=t(3472),d=t(9691),h=(n,e,t)=>new Promise(((i,o)=>{var a=n=>{try{r(t.next(n))}catch(n){o(n)}},l=n=>{try{r(t.throw(n))}catch(n){o(n)}},r=n=>n.done?i(n.value):Promise.resolve(n.value).then(a,l);r((t=t.apply(n,e)).next())}));const c=class{constructor(n){(0,i.r)(this,n),this.getWrapperRef=n=>this.dialogWrapperElement=n,this.getRef=n=>{this.dialogElement=n,setTimeout((()=>{this.openOrCloseBasedOnState()}))},this._open=void 0,this._align=void 0,this._label=void 0,this._on=void 0,this.state={_label:"",_open:!1,_align:"left"}}open(){return h(this,null,(function*(){var n;this.state=Object.assign(Object.assign({},this.state),{_open:!0}),null===(n=this.dialogElement)||void 0===n||n.showModal()}))}close(){return h(this,null,(function*(){this.state=Object.assign(Object.assign({},this.state),{_open:!1});const n=this.dialogWrapperElement;n&&"none"===window.getComputedStyle(n).animationName&&this.handleCloseDialog()}))}renderDialogContent(){const n=this.state._align;return(0,i.h)("div",{ref:this.getWrapperRef,class:(0,l.c)("kol-drawer__wrapper",`kol-drawer__wrapper--${n}`,{"kol-drawer__wrapper--open":this.state._open,"kol-drawer__wrapper--is-closing":!1===this.state._open}),"aria-label":this.state._label},(0,i.h)("div",{class:"kol-drawer__content"},(0,i.h)("slot",null)))}render(){return(0,i.h)(i.H,{key:"4e33d8dec59c5c93cab94c35812db4fce6bf84c3",class:"kol-drawer"},(0,i.h)("dialog",{key:"8e5db5cc7ee900ffba6f5cd5dafafbee2dc7636c",class:"kol-drawer__dialog",ref:this.getRef},this.renderDialogContent()))}validateLabel(n){(0,s.v)(this,n,{required:!0})}validateAlign(n){(0,r.v)(this,n)}validateOpen(n){"boolean"==typeof n&&((0,d.v)(this,n),this.dialogElement&&this.openOrCloseBasedOnState())}openOrCloseBasedOnState(){return h(this,null,(function*(){this.state._open?yield this.open():yield this.close()}))}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"==typeof n.onClose&&(e.onClose=n.onClose),(0,o.k)(this,"_on",e)}}handleCloseDialog(){var n,e,t;null===(n=this.dialogElement)||void 0===n||n.close(),null===(t=null===(e=this._on)||void 0===e?void 0:e.onClose)||void 0===t||t.call(e),this.host&&(0,a.d)(this.host,a.K.close)}handleClose(){(()=>{h(this,null,(function*(){yield this.close(),this.handleCloseDialog()}))})()}handleAnimationEnd(n){n.animationName.includes("slideOut")&&this.handleCloseDialog()}componentDidLoad(){var n,e;null===(n=this.dialogElement)||void 0===n||n.addEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.addEventListener("close",this.handleClose.bind(this))}disconnectedCallback(){var n,e;null===(n=this.dialogElement)||void 0===n||n.removeEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.removeEventListener("close",this.handleClose.bind(this))}componentWillLoad(){this.validateLabel(this._label),this.validateOpen(this._open),this.validateAlign(this._align),this.validateOn(this._on)}get host(){return(0,i.g)(this)}static get watchers(){return{_label:["validateLabel"],_align:["validateAlign"],_open:["validateOpen"],_on:["validateOn"]}}};c.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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-drawer {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-drawer__dialog {\n    padding: 0;\n    border: none;\n  }\n  .kol-drawer__wrapper {\n    position: fixed;\n    width: auto;\n    overflow: auto;\n    background-color: white;\n  }\n  .kol-drawer__wrapper--left {\n    top: 0;\n    left: 0;\n    height: 100vh;\n    max-height: 100%;\n  }\n  .kol-drawer__wrapper--left .kol-drawer__content {\n    height: 100%;\n  }\n  .kol-drawer__wrapper--right {\n    top: 0;\n    right: 0;\n    height: 100vh;\n    max-height: 100%;\n  }\n  .kol-drawer__wrapper--right .kol-drawer__content {\n    height: 100%;\n  }\n  .kol-drawer__wrapper--top {\n    left: 0;\n    top: 0;\n    width: 100vw;\n    max-width: 100%;\n  }\n  .kol-drawer__wrapper--top .kol-drawer__content {\n    width: 100%;\n  }\n  .kol-drawer__wrapper--bottom {\n    left: 0;\n    bottom: 0;\n    width: 100vw;\n    max-width: 100%;\n  }\n  .kol-drawer__wrapper--bottom .kol-drawer__content {\n    width: 100%;\n  }\n  .kol-drawer__content {\n    position: relative;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}"}},5154:(n,e,t)=>{t.d(e,{a:()=>o,v:()=>l});var i=t(257);const o=(n,e,t)=>{(0,i.w)(n,e,(n=>"string"==typeof n&&a.includes(n)),new Set(a),t,{defaultValue:"top"})},a=["left","right","top","bottom"],l=(n,e)=>{o(n,"_align",e)}},8045:(n,e,t)=>{function i(n){var e,t,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var a=n.length;for(e=0;e<a;e++)n[e]&&(t=i(n[e]))&&(o&&(o+=" "),o+=t)}else for(t in n)n[t]&&(o&&(o+=" "),o+=t);return o}function o(){for(var n,e,t=0,o="",a=arguments.length;t<a;t++)(n=arguments[t])&&(e=i(n))&&(o&&(o+=" "),o+=e);return o}t.d(e,{c:()=>o})},9691:(n,e,t)=>{t.d(e,{v:()=>o});var i=t(257);const o=(n,e,t)=>{(0,i.h)(n,"_open",e,t)}}}]);

package/dist/4048.js

@@ -1,2 +1,2 @@
 /*! For license information please see 4048.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4048],{182:(e,t,n)=>{n.d(t,{I:()=>y,K:()=>g,a:()=>f});var i=n(6733),o=n(257),s=n(1111),a=n(8045),l=n(9867),r=n(1698),d=n(3885),c=n(376),h=n(1476),u=n(8057);const p=(e,t)=>{var{position:n="start",class:o}=e,l=(0,s._)(e,["position","class"]);const r="kol-input-container__adornment",d=`${r}--${n}`;return(0,i.h)("div",Object.assign({class:(0,a.c)(r,d,o)},l),t)};function b(e){return!!e&&(Array.isArray(e)?e.length>0:Boolean(e))}const _=(e,t)=>{var{class:n}=e,o=(0,s._)(e,["class"]);return(0,i.h)("div",Object.assign({class:(0,a.c)("kol-input-container__container",n)},o),t)},v=(e,t)=>{const{class:n,startAdornment:o,endAdornment:r,disabled:d,msg:c,touched:h,containerProps:u,startAdornmentProps:v,endAdornmentProps:m}=e,g=(0,s._)(e,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),f=(0,l.c)(c,h),y={"kol-input-container--disabled":d,[`kol-input-container--${(null==c?void 0:c.type)||"error"}`]:f},k=Object.assign({class:(0,a.c)("kol-input-container",y,n)},g);return b(o)||b(r)?(0,i.h)("div",Object.assign({},k),(0,i.h)(p,Object.assign({},v,{position:"start"}),o),(0,i.h)(_,Object.assign({},u),t),(0,i.h)(p,Object.assign({},m,{position:"end"}),r)):(0,i.h)("div",Object.assign({},k),(0,i.h)(_,Object.assign({},u),t))},m=e=>{const{label:t,icons:n,hideLabel:o,disabled:a,onClick:l}=e,d=(0,s._)(e,["label","icons","hideLabel","disabled","onClick"]);return(0,i.h)(r.a,Object.assign({_label:t,_disabled:a,_icons:n,_hideLabel:o,_on:{onClick:l}},d))},g=e=>{const{componentName:t="button",label:n,icon:o,onClick:a}=e,l=(0,s._)(e,["componentName","label","icon","onClick"]),r="button"===t?m:d.K;return(0,i.h)(r,Object.assign({label:n||"",hideLabel:!0,icons:`codicon codicon-${o}`,onClick:a},l))},f=({state:e,endAdornment:t},n)=>{const{icons:o,smartButton:s,disabled:a,msg:r,touched:d}=function(e){let t,n;return"_icons"in e&&(t=e._icons),"_smartButton"in e&&(n=e._smartButton),{icons:t,smartButton:n,disabled:e._disabled,msg:(0,l.a)(e._msg),touched:e._touched}}(e);let u=null==o?void 0:o.left;(0,c.i)(u)&&(u={icon:u});let p=null==o?void 0:o.right;(0,c.i)(p)&&(p={icon:p});const b=[],_=[];return t&&(Array.isArray(t)?_.push(...t):_.push(t)),u&&b.push((0,i.h)(g,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,h.i)(u)?u:{}))),(0,h.i)(s)&&_.push((0,i.h)(g,Object.assign({componentName:"button",class:"kol-input-container__smart-button"},s,{hideLabel:!0,disabled:a}))),p&&_.push((0,i.h)(g,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,h.i)(p)?p:{}))),(0,i.h)(v,{disabled:a,msg:r,touched:d,startAdornment:b,endAdornment:_},n)};class y extends l.I{constructor(e,t,n){super(e,t,n),this.numberStringRegex=/^\d+(\.\d+)?$/,this.parseToNumber=e=>"number"==typeof e?isNaN(e)?null:e:this.isNumberString(e)?parseFloat(e):null,this.validateNumber=(e,t)=>(0,o.w)(this.component,e,(e=>null==e||"number"==typeof e||"string"==typeof e&&this.numberStringRegex.test(e)),new Set(["number","NumberString"]),t,{hooks:{beforePatch:(t,n)=>{(null==n?void 0:n.has(e))&&(null==n||n.set(e,this.parseToNumber(t)))}}}),this.component=e}validateIcons(e){(0,u.v)(this.component,e)}isNumberString(e){return"string"==typeof e&&this.numberStringRegex.test(e)}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},895:(e,t,n)=>{n.d(t,{C:()=>r,a:()=>c,b:()=>d,g:()=>l});var i=n(6733),o=n(1698),s=n(9272),a=n(8045);const l=e=>{var t;const n="error"===(null===(t=e._msg)||void 0===t?void 0:t._type)&&!0===e._touched,i="string"==typeof e._hint&&e._hint.length>0,o=[];return!0===n&&o.push(`${e._id}-error`),!0===i&&o.push(`${e._id}-hint`),{hasMsg:n,hasHint:i,ariaDescribedBy:o}},r=({onClick:e,disabled:t})=>(0,i.h)("button",{tabindex:"-1",class:"kol-custom-suggestions-toggle",onClick:e,disabled:t},(0,i.h)(o.d,{_icons:"codicon codicon-triangle-down",_label:(0,s.t)("kol-dropdown")})),d=({index:e,ref:t,selected:n,onClick:o,onMouseOver:s,onFocus:a,onKeyDown:l,option:r})=>(0,i.h)("li",{id:`option-${e}`,key:`-${e}`,ref:t,"data-index":e,tabIndex:-1,role:"option","aria-selected":n?"true":void 0,onClick:o,onMouseOver:s,onFocus:a,class:"kol-custom-suggestions-option",onKeyDown:l},r),c=({blockSuggestionMouseOver:e,onKeyDown:t,style:n},o)=>(0,i.h)("ul",{role:"listbox",style:n,class:(0,a.c)("kol-custom-suggestions-options-group",{"kol-custom-suggestions-options-group--cursor-hidden":e}),onKeyDown:t},o)},1476:(e,t,n)=>{function i(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}n.d(t,{i:()=>i})},2429:(e,t,n)=>{n.d(t,{I:()=>h,a:()=>u,b:()=>l,f:()=>c,v:()=>r});var i=n(257),o=n(9867),s=n(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,s.b)(e.label,3)&&!1===(0,s.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},l=(e,t,n={})=>{(0,i.y)(e,"_options",(e=>"object"==typeof e&&null!==e&&"string"==typeof e.label&&e.label.length>0),t,void 0,n)},r=(e,t,n={})=>{(0,i.y)(e,"_options",a,t,void 0,n)},d=["horizontal","vertical"],c=(e,t,n="")=>{t.forEach(((t,i)=>{const o=`${n}-${i}`;"object"==typeof t&&null!==t&&"string"==typeof t.label&&t.label.length>0&&(Array.isArray(t.options)?c(e,t.options,o):e.set(o,t))}))};class h extends o.I{constructor(e,t,n){super(e,t,n),this.component=e}validateRequired(e){((e,t)=>{(0,i.h)(e,"_required",t)})(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateRequired(this.component._required)}}class u extends h{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;Array.isArray(n)&&n.length>0&&(this.keyOptionMap.clear(),c(this.keyOptionMap,n))},this.component=e}validateOrientation(e){(0,i.w)(this.component,"_orientation",(e=>"string"==typeof e&&d.includes(e)),new Set([`Orientation {${d.join(", ")}`]),e,{defaultValue:"vertical"})}validateOptions(e){l(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateValue(e){e=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,t,n)=>{n.d(t,{K:()=>s});var i=n(6733),o=n(1698);const s=e=>{const{class:t,style:n,icons:s,label:a,onClick:l}=e;return(0,i.h)(o.d,{class:t,style:n,onClick:l,_icons:s,_label:a})}},4048:(e,t,n)=>{n.r(t),n.d(t,{kol_single_select:()=>v});var i=n(6733),o=n(8045),s=n(1698),a=n(9867),l=n(182),r=n(7162),d=n(895),c=n(9272),h=n(2190),u=n(257),p=n(2429),b=(n(3694),n(1042),n(8296),n(4269),n(3710),n(5561),n(5154),n(753),n(3472),n(1111),n(9709),n(6660),n(3185),n(2425),n(376),n(5538),n(3885),n(1476),n(8057),n(8176),(e,t,n)=>new Promise(((i,o)=>{var s=e=>{try{l(n.next(e))}catch(e){o(e)}},a=e=>{try{l(n.throw(e))}catch(e){o(e)}},l=e=>e.done?i(e.value):Promise.resolve(e.value).then(s,a);l((n=n.apply(e,t)).next())})));class _ extends l.I{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;Array.isArray(n)&&n.length>0&&(this.keyOptionMap.clear(),(0,p.f)(this.keyOptionMap,n))},this.component=e}validateOptions(e){(0,p.b)(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){(0,u.h)(this.component,"_required",e)}validateValue(e){(0,u.w)(this.component,"_value",(e=>void 0!==e),new Set(["StencilUnknown"]),e)}validatePlaceholder(e){(0,u.A)(this.component,"_placeholder",e)}validateHideClearButton(e){(0,u.h)(this.component,"_hideClearButton",e)}validateRows(e){(0,u.E)(this.component,"_rows",e)}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder),this.validateHideClearButton(this.component._hideClearButton),this.validateRows(this.component._rows)}}const v=class{getValue(){return b(this,null,(function*(){return this._value}))}kolFocus(){return b(this,null,(function*(){var e;null===(e=this.refInput)||void 0===e||e.focus()}))}onBlur(){var e;Array.isArray(this.state._options)&&this.state._options.length>0&&!this.state._options.some((e=>e.label===this._inputValue))&&(this._inputValue=null===(e=this.state._options.find((e=>e.value===this._value)))||void 0===e?void 0:e.label,this._filteredOptions=[...this.state._options]),this._isOpen=!1,this._hasOpened=!1}clearSelection(){if(!this.state._disabled){const e=null;this._focusedOptionIndex=-1,this._value=e,this._inputValue="",this._filteredOptions=[...this.state._options],this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:{name:this.state._name,value:e}}),!0,e),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:{name:this.state._name,value:e}}),e)}}selectOption(e){this._value=e.value,this._inputValue=e.label,this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:{name:this.state._name,value:e.value}}),!1,e.value),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:{name:this.state._name,value:e.value}}),e.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this._value)}onInput(e){const t=e.target;this._inputValue=t.value,this._isOpen=!0,this.setFilteredOptionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(e.preventDefault(),this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredOptionsByQuery(e){""===(null==e?void 0:e.trim())?this._filteredOptions=[...this.state._options]:Array.isArray(this.state._options)&&this.state._options.length>0&&e.length>0&&(this._filteredOptions=this.state._options.filter((t=>{var n,i;return null===(i=null===(n=t.label)||void 0===n?void 0:n.toLowerCase())||void 0===i?void 0:i.includes(null==e?void 0:e.toLowerCase())})))}moveFocus(e){if(!this._filteredOptions)return;let t=this._focusedOptionIndex+e;t>=this._filteredOptions.length&&(t=0),t<0&&(t=this._filteredOptions.length-1),this._focusedOptionIndex=t,this.focusOption(this._focusedOptionIndex)}focusOption(e){if(this.refOptions){const t=this.refOptions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),n=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex((e=>e.label.toLowerCase().startsWith(t)));"number"==typeof n&&(this._focusedOptionIndex=n,this.focusOption(n))}getFormFieldProps(){return{state:this.state,class:"kol-single-select",tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.refInput)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getInputProps(){const{ariaDescribedBy:e}=(0,d.g)(this.state);return Object.assign(Object.assign({"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,"aria-autocomplete":"both","aria-controls":"listbox","aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,accessKey:this.state._accessKey,autocapitalize:"off",autocorrect:"off",class:"kol-single-select__input",disabled:this.state._disabled,name:this.state._name,placeholder:this.state._placeholder,ref:this.catchRef,required:this.state._required,state:this.state,type:"text",value:this._inputValue},this.controller.onFacade),{onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onInput:this.onInput.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){var e;return(0,i.h)(a.F,Object.assign({key:"3be581bedba65017d37af23aa15b99adff79ec0f"},this.getFormFieldProps()),(0,i.h)(l.a,{key:"0937db03f4b6c2fc3b91a87e3bcca079014a93a6",state:this.state},(0,i.h)("div",{key:"3ad19c192be283728807ac6bd34d90643baeff51",class:"kol-single-select__group"},(0,i.h)(r.I,Object.assign({key:"52672442da47bf366871b9c5922e54023d5ed984"},this.getInputProps())),this._inputValue&&!this.state._hideClearButton&&(0,i.h)(s.d,{key:"275fe6ab7720074988ea09ca7173c805e41137a7",_icons:"codicon codicon-close","data-testid":"single-select-delete",_label:(0,c.t)("kol-delete-selection"),onClick:()=>{var e;this.clearSelection(),null===(e=this.refInput)||void 0===e||e.focus()},class:(0,o.c)("kol-single-select__delete",{"kol-single-select__delete--disabled":this.state._disabled})}),(0,i.h)(d.C,{key:"68ac00c8eed96090dabfad30bf19914127f4320c",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled})),this._isOpen&&!(!0===this.state._disabled)&&(0,i.h)(d.a,{key:"e4278a4999682a51ffa6d2c188e8f5ce432e3317",blockSuggestionMouseOver:this.blockSuggestionMouseOver,onKeyDown:this.handleKeyDownDropdown.bind(this),style:{"--visible-options":`${null!==(e=this._rows)&&void 0!==e?e:5}`}},Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0?this._filteredOptions.map(((e,t)=>(0,i.h)(d.b,{index:t,option:e.label,ref:e=>{e&&(this.refOptions[t]=e)},selected:this._value===e.value,onClick:t=>{var n;this.selectOption(e),null===(n=this.refInput)||void 0===n||n.focus(),this.toggleListbox(t),this._isOpen=!1,this._hasOpened=!1},onMouseOver:()=>{this.blockSuggestionMouseOver||(this._focusedOptionIndex=t,this.focusOption(t))},onFocus:()=>{this._focusedOptionIndex=t,this.focusOption(t)},onKeyDown:t=>{var n;"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(e),null===(n=this.refInput)||void 0===n||n.focus(),this.toggleListbox(t),t.preventDefault())}}))):(0,i.h)("li",{class:"kol-single-select__no-results-message"},(0,c.t)("kol-no-results-message")," "))))}handleFocusOut(){setTimeout((()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()}),0)}handleWindowBlur(){this.onBlur()}handleKeyDown(e){var t,n;const i=(t,n)=>{var i;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(-1)));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":this._hasOpened=!1,this._isOpen=!1,i(!1);break;case" ":this._isOpen?Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&(this.selectOption(this._filteredOptions[this._focusedOptionIndex]),null===(n=this.refInput)||void 0===n||n.focus(),i(!1)):this.toggleListbox(e);break;case"NumpadEnter":case"Enter":this.toggleListbox(e),this._hasOpened=!1,this._isOpen=!1;break;case"Home":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=0,this.focusOption(this._focusedOptionIndex))}));break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=this._filteredOptions?this._filteredOptions.length-1:0,this.focusOption(this._focusedOptionIndex))}));break;case"PageUp":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(-10)));break;case"PageDown":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(10)))}}constructor(e){(0,i.r)(this,e),this.refOptions=[],this.catchRef=e=>{this.refInput=e},this.toggleListbox=e=>{var t;if(null==e||e.preventDefault(),!this.state._disabled&&!this._hasOpened){this._isOpen=!0,this._hasOpened=!0,null===(t=this.refInput)||void 0===t||t.focus();const e=Array.isArray(this._filteredOptions)?this._filteredOptions.findIndex((e=>e.label===this._inputValue)):-1;this._focusedOptionIndex=e>=0?e:-1,this.focusOption(this._focusedOptionIndex)}},this._focusedOptionIndex=-1,this._isOpen=!1,this._filteredOptions=[],this._inputValue="",this.blockSuggestionMouseOver=!1,this._hasOpened=!1,this._accessKey=void 0,this._placeholder=void 0,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=null,this._hideClearButton=!1,this._rows=void 0,this.state={_hideMsg:!1,_id:`id-${(0,h.n)()}`,_label:"",_options:[],_hideClearButton:!1},this.inputHasFocus=!1,this.controller=new _(this,"single-select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e),this._filteredOptions=e,this.updateInputValue(this._value)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.oldValue=e,this.updateInputValue(e)}validateHideClearButton(e){this.controller.validateHideClearButton(e)}validateRows(e){this.controller.validateRows(e)}handleMouseEvent(){this.blockSuggestionMouseOver=!1}updateInputValue(e){if(Array.isArray(this._options)){const t=this._options.find((t=>t.value===e));this._inputValue=t?String(t.label):""}}componentWillLoad(){this.refOptions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this.state._options,this.updateInputValue(this._value)}onChange(e){var t,n;this.oldValue!==(null===(t=this.refInput)||void 0===t?void 0:t.value)&&(this.oldValue=null===(n=this.refInput)||void 0===n?void 0:n.value),this._isOpen||this.controller.onFacade.onChange(e,this._value)}onClick(e){this.toggleListbox(e),this.controller.onFacade.onClick(e)}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"],"_hideClearButton ":["validateHideClearButton"],_rows:["validateRows"]}}};v.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-custom-suggestions-option {\n    cursor: pointer;\n    white-space: normal;\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n    line-height: 1.5;\n    box-sizing: border-box;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-options-group {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-toggle {\n    align-items: center;\n    display: flex;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-custom-suggestions-toggle:not(:disabled) {\n    cursor: pointer;\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}\n@layer kol-component {\n  .kol-single-select__delete {\n    cursor: pointer;\n  }\n  .kol-single-select__delete--disabled {\n    cursor: not-allowed;\n  }\n  .kol-single-select__no-results-message {\n    cursor: default;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-single-select .kol-custom-suggestions-options-group {\n    max-height: calc((40rem / var(--kolibri-root-font-size, 16)) * var(--visible-options, 5) + (2rem / var(--kolibri-root-font-size, 16))) !important;\n  }\n}"}},7162:(e,t,n)=>{n.d(t,{I:()=>r,S:()=>l});var i=n(1111),o=n(6733),s=n(8176),a=(n(257),n(9867));const l=e=>{var{id:t,suggestions:n}=e,s=(0,i._)(e,["id","suggestions"]);return n?(0,o.h)("datalist",Object.assign({id:`${t}-list`},s),n.map((e=>(0,o.h)("option",{value:e})))):null},r=e=>{var{state:t,customSuggestions:n}=e,r=(0,i._)(e,["state","customSuggestions"]);return(0,o.h)(s.I,Object.assign({},function(e,t){const{ariaDescribedBy:n}=(0,a.g)(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:n};return"_type"in e&&(i.type=e._type),"_value"in e&&(i.value=e._value),"_required"in e&&(i.required=e._required),"_maxLength"in e&&(i.maxlength=e._maxLength),"_placeholder"in e&&(i.placeholder=e._placeholder),"_autoComplete"in e&&(i.autoComplete=e._autoComplete),"_spellCheck"in e&&(i.spellcheck=e._spellCheck),"_pattern"in e&&(i.pattern=e._pattern),"_readOnly"in e&&(i.readonly=e._readOnly),"_min"in e&&(i.min=e._min),"_max"in e&&(i.max=e._max),"_step"in e&&(i.step=e._step),"_multiple"in e&&(i.multiple=e._multiple),"_checked"in e&&(i.checked=e._checked),"_indeterminate"in e&&(i.indeterminate=e._indeterminate),"_touched"in e&&(i.touched=e._touched),"_msg"in e&&(i.msg=(0,a.a)(e._msg)),"_suggestions"in e&&!t&&Array.isArray(e._suggestions)&&e._suggestions.length>0&&(i.suggestions=(0,o.h)(l,{id:e._id,suggestions:e._suggestions})),i}(t,n),r))}},8057:(e,t,n)=>{n.d(t,{v:()=>a});var i=n(257);const o=(e,t,n)=>{(0,i.v)(n)?e[t]=n:(0,i.q)(n,1)&&(e[t]={icon:n})},s=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,i.t)(e.style))&&(void 0===e.label||(0,i.q)(e.label))&&(0,i.q)(e.icon,1),a=(e,t,n={})=>{(0,i.o)(t,(()=>{var a;try{t=(0,i.j)(t)}catch(e){}(0,i.w)(e,"_icons",(e=>{const t="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||t||(0,i.q)(e,1)||"object"==typeof e&&null!==e&&((0,i.q)(e.left,1)||s(e.left)||(0,i.q)(e.right,1)||s(e.right)||(0,i.q)(e.top,1)||s(e.top)||(0,i.q)(e.bottom,1)||s(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(a=n.hooks)||void 0===a?void 0:a.afterPatch,beforePatch:(e,t,s,a)=>{var l,r;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(e,t,s,a)),(e=>{var t,n,s;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(n=e.nextState)||void 0===n?void 0:n.get("_icons");null===(s=e.nextState)||void 0===s||s.set("_icons",(e=>{let t={};return(0,i.q)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(o(t,"top",e.top),o(t,"right",e.right),o(t,"bottom",e.bottom),o(t,"left",e.left)),t})(t))}})(s)}}}))}))}},8176:(e,t,n)=>{n.d(t,{I:()=>l});var i=n(1111),o=n(6733),s=n(8045),a=(n(257),n(9867));const l=e=>{const{class:t,msg:n,required:l,disabled:r,touched:d,readonly:c,ariaDescribedBy:h,hideLabel:u,label:p,suggestions:b,value:_}=e,v=(0,i._)(e,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),m=(0,a.c)(n,d),g={"kol-input--disabled":Boolean(r),"kol-input--required":Boolean(l),"kol-input--touched":Boolean(d),"kol-input--readonly":Boolean(c),[`kol-input--${(null==n?void 0:n.type)||"error"}`]:m},f=Object.assign(Object.assign({class:(0,s.c)("kol-input",g,t),required:l,disabled:r,readonly:c,type:"text",list:b?`${v.id}-list`:void 0},(0,a.e)({ariaDescribedBy:h,hideLabel:u,label:p})),v);return(0,o.h)(o.F,null,(0,o.h)("input",Object.assign({},f,{value:_})),b)}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4048],{1335:(e,t,n)=>{n.d(t,{I:()=>r,S:()=>l});var i=n(1111),o=n(6123),s=n(6205),a=(n(257),n(4571));const l=e=>{var{id:t,suggestions:n}=e,s=(0,i._)(e,["id","suggestions"]);return n?(0,o.h)("datalist",Object.assign({id:`${t}-list`},s),n.map((e=>(0,o.h)("option",{value:e})))):null},r=e=>{var{state:t,customSuggestions:n}=e,r=(0,i._)(e,["state","customSuggestions"]);return(0,o.h)(s.I,Object.assign({},function(e,t){const{ariaDescribedBy:n}=(0,a.g)(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:n};return"_type"in e&&(i.type=e._type),"_value"in e&&(i.value=e._value),"_required"in e&&(i.required=e._required),"_maxLength"in e&&(i.maxlength=e._maxLength),"_placeholder"in e&&(i.placeholder=e._placeholder),"_autoComplete"in e&&(i.autoComplete=e._autoComplete),"_spellCheck"in e&&(i.spellcheck=e._spellCheck),"_pattern"in e&&(i.pattern=e._pattern),"_readOnly"in e&&(i.readonly=e._readOnly),"_min"in e&&(i.min=e._min),"_max"in e&&(i.max=e._max),"_step"in e&&(i.step=e._step),"_multiple"in e&&(i.multiple=e._multiple),"_checked"in e&&(i.checked=e._checked),"_indeterminate"in e&&(i.indeterminate=e._indeterminate),"_touched"in e&&(i.touched=e._touched),"_msg"in e&&(i.msg=(0,a.a)(e._msg)),"_suggestions"in e&&!t&&Array.isArray(e._suggestions)&&e._suggestions.length>0&&(i.suggestions=(0,o.h)(l,{id:e._id,suggestions:e._suggestions})),i}(t,n),r))}},1476:(e,t,n)=>{function i(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}n.d(t,{i:()=>i})},2074:(e,t,n)=>{n.d(t,{K:()=>s});var i=n(6123),o=n(1698);const s=e=>{const{class:t,style:n,icons:s,label:a,onClick:l}=e;return(0,i.h)(o.d,{class:t,style:n,onClick:l,_icons:s,_label:a})}},2420:(e,t,n)=>{n.d(t,{I:()=>y,K:()=>g,a:()=>f});var i=n(6123),o=n(257),s=n(1111),a=n(8045),l=n(4571),r=n(1698),d=n(2074),c=n(3806),h=n(1476),u=n(8057);const p=(e,t)=>{var{position:n="start",class:o}=e,l=(0,s._)(e,["position","class"]);const r="kol-input-container__adornment",d=`${r}--${n}`;return(0,i.h)("div",Object.assign({class:(0,a.c)(r,d,o)},l),t)};function b(e){return!!e&&(Array.isArray(e)?e.length>0:Boolean(e))}const _=(e,t)=>{var{class:n}=e,o=(0,s._)(e,["class"]);return(0,i.h)("div",Object.assign({class:(0,a.c)("kol-input-container__container",n)},o),t)},v=(e,t)=>{const{class:n,startAdornment:o,endAdornment:r,disabled:d,msg:c,touched:h,containerProps:u,startAdornmentProps:v,endAdornmentProps:m}=e,g=(0,s._)(e,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),f=(0,l.c)(c,h),y={"kol-input-container--disabled":d,[`kol-input-container--${(null==c?void 0:c.type)||"error"}`]:f},k=Object.assign({class:(0,a.c)("kol-input-container",y,n)},g);return b(o)||b(r)?(0,i.h)("div",Object.assign({},k),(0,i.h)(p,Object.assign({},v,{position:"start"}),o),(0,i.h)(_,Object.assign({},u),t),(0,i.h)(p,Object.assign({},m,{position:"end"}),r)):(0,i.h)("div",Object.assign({},k),(0,i.h)(_,Object.assign({},u),t))},m=e=>{const{label:t,icons:n,hideLabel:o,disabled:a,onClick:l}=e,d=(0,s._)(e,["label","icons","hideLabel","disabled","onClick"]);return(0,i.h)(r.a,Object.assign({_label:t,_disabled:a,_icons:n,_hideLabel:o,_on:{onClick:l}},d))},g=e=>{const{componentName:t="button",label:n,icon:o,onClick:a}=e,l=(0,s._)(e,["componentName","label","icon","onClick"]),r="button"===t?m:d.K;return(0,i.h)(r,Object.assign({label:n||"",hideLabel:!0,icons:`codicon codicon-${o}`,onClick:a},l))},f=({state:e,endAdornment:t},n)=>{const{icons:o,smartButton:s,disabled:a,msg:r,touched:d}=function(e){let t,n;return"_icons"in e&&(t=e._icons),"_smartButton"in e&&(n=e._smartButton),{icons:t,smartButton:n,disabled:e._disabled,msg:(0,l.a)(e._msg),touched:e._touched}}(e);let u=null==o?void 0:o.left;(0,c.i)(u)&&(u={icon:u});let p=null==o?void 0:o.right;(0,c.i)(p)&&(p={icon:p});const b=[],_=[];return t&&(Array.isArray(t)?_.push(...t):_.push(t)),u&&b.push((0,i.h)(g,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,h.i)(u)?u:{}))),(0,h.i)(s)&&_.push((0,i.h)(g,Object.assign({componentName:"button",class:"kol-input-container__smart-button"},s,{hideLabel:!0,disabled:a}))),p&&_.push((0,i.h)(g,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,h.i)(p)?p:{}))),(0,i.h)(v,{disabled:a,msg:r,touched:d,startAdornment:b,endAdornment:_},n)};class y extends l.I{constructor(e,t,n){super(e,t,n),this.numberStringRegex=/^\d+(\.\d+)?$/,this.parseToNumber=e=>"number"==typeof e?isNaN(e)?null:e:this.isNumberString(e)?parseFloat(e):null,this.validateNumber=(e,t)=>(0,o.w)(this.component,e,(e=>null==e||"number"==typeof e||"string"==typeof e&&this.numberStringRegex.test(e)),new Set(["number","NumberString"]),t,{hooks:{beforePatch:(t,n)=>{(null==n?void 0:n.has(e))&&(null==n||n.set(e,this.parseToNumber(t)))}}}),this.component=e}validateIcons(e){(0,u.v)(this.component,e)}isNumberString(e){return"string"==typeof e&&this.numberStringRegex.test(e)}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},4048:(e,t,n)=>{n.r(t),n.d(t,{kol_single_select:()=>v});var i=n(6123),o=n(8045),s=n(1698),a=n(4571),l=n(2420),r=n(1335),d=n(8546),c=n(9272),h=n(9167),u=n(257),p=n(8533),b=(n(3694),n(1042),n(8296),n(4269),n(3710),n(5561),n(5154),n(753),n(3472),n(1111),n(2803),n(6660),n(3185),n(5150),n(3806),n(5538),n(2074),n(1476),n(8057),n(6205),(e,t,n)=>new Promise(((i,o)=>{var s=e=>{try{l(n.next(e))}catch(e){o(e)}},a=e=>{try{l(n.throw(e))}catch(e){o(e)}},l=e=>e.done?i(e.value):Promise.resolve(e.value).then(s,a);l((n=n.apply(e,t)).next())})));class _ extends l.I{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;Array.isArray(n)&&n.length>0&&(this.keyOptionMap.clear(),(0,p.f)(this.keyOptionMap,n))},this.component=e}validateOptions(e){(0,p.b)(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){(0,u.h)(this.component,"_required",e)}validateValue(e){(0,u.w)(this.component,"_value",(e=>void 0!==e),new Set(["StencilUnknown"]),e)}validatePlaceholder(e){(0,u.A)(this.component,"_placeholder",e)}validateHideClearButton(e){(0,u.h)(this.component,"_hideClearButton",e)}validateRows(e){(0,u.E)(this.component,"_rows",e)}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder),this.validateHideClearButton(this.component._hideClearButton),this.validateRows(this.component._rows)}}const v=class{getValue(){return b(this,null,(function*(){return this._value}))}kolFocus(){return b(this,null,(function*(){var e;null===(e=this.refInput)||void 0===e||e.focus()}))}onBlur(){var e;Array.isArray(this.state._options)&&this.state._options.length>0&&!this.state._options.some((e=>e.label===this._inputValue))&&(this._inputValue=null===(e=this.state._options.find((e=>e.value===this._value)))||void 0===e?void 0:e.label,this._filteredOptions=[...this.state._options]),this._isOpen=!1,this._hasOpened=!1}clearSelection(){if(!this.state._disabled){const e=null;this._focusedOptionIndex=-1,this._value=e,this._inputValue="",this._filteredOptions=[...this.state._options],this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:{name:this.state._name,value:e}}),!0,e),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:{name:this.state._name,value:e}}),e)}}selectOption(e){this._value=e.value,this._inputValue=e.label,this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:{name:this.state._name,value:e.value}}),!1,e.value),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:{name:this.state._name,value:e.value}}),e.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this._value)}onInput(e){const t=e.target;this._inputValue=t.value,this._isOpen=!0,this.setFilteredOptionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(e.preventDefault(),this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredOptionsByQuery(e){""===(null==e?void 0:e.trim())?this._filteredOptions=[...this.state._options]:Array.isArray(this.state._options)&&this.state._options.length>0&&e.length>0&&(this._filteredOptions=this.state._options.filter((t=>{var n,i;return null===(i=null===(n=t.label)||void 0===n?void 0:n.toLowerCase())||void 0===i?void 0:i.includes(null==e?void 0:e.toLowerCase())})))}moveFocus(e){if(!this._filteredOptions)return;let t=this._focusedOptionIndex+e;t>=this._filteredOptions.length&&(t=0),t<0&&(t=this._filteredOptions.length-1),this._focusedOptionIndex=t,this.focusOption(this._focusedOptionIndex)}focusOption(e){if(this.refOptions){const t=this.refOptions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),n=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex((e=>e.label.toLowerCase().startsWith(t)));"number"==typeof n&&(this._focusedOptionIndex=n,this.focusOption(n))}getFormFieldProps(){return{state:this.state,class:"kol-single-select",tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.refInput)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getInputProps(){const{ariaDescribedBy:e}=(0,d.g)(this.state);return Object.assign(Object.assign({"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,"aria-autocomplete":"both","aria-controls":"listbox","aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,accessKey:this.state._accessKey,autocapitalize:"off",autocorrect:"off",class:"kol-single-select__input",disabled:this.state._disabled,name:this.state._name,placeholder:this.state._placeholder,ref:this.catchRef,required:this.state._required,state:this.state,type:"text",value:this._inputValue},this.controller.onFacade),{onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onInput:this.onInput.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){var e;return(0,i.h)(a.F,Object.assign({key:"3be581bedba65017d37af23aa15b99adff79ec0f"},this.getFormFieldProps()),(0,i.h)(l.a,{key:"0937db03f4b6c2fc3b91a87e3bcca079014a93a6",state:this.state},(0,i.h)("div",{key:"3ad19c192be283728807ac6bd34d90643baeff51",class:"kol-single-select__group"},(0,i.h)(r.I,Object.assign({key:"52672442da47bf366871b9c5922e54023d5ed984"},this.getInputProps())),this._inputValue&&!this.state._hideClearButton&&(0,i.h)(s.d,{key:"275fe6ab7720074988ea09ca7173c805e41137a7",_icons:"codicon codicon-close","data-testid":"single-select-delete",_label:(0,c.t)("kol-delete-selection"),onClick:()=>{var e;this.clearSelection(),null===(e=this.refInput)||void 0===e||e.focus()},class:(0,o.c)("kol-single-select__delete",{"kol-single-select__delete--disabled":this.state._disabled})}),(0,i.h)(d.C,{key:"68ac00c8eed96090dabfad30bf19914127f4320c",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled})),this._isOpen&&!(!0===this.state._disabled)&&(0,i.h)(d.a,{key:"e4278a4999682a51ffa6d2c188e8f5ce432e3317",blockSuggestionMouseOver:this.blockSuggestionMouseOver,onKeyDown:this.handleKeyDownDropdown.bind(this),style:{"--visible-options":`${null!==(e=this._rows)&&void 0!==e?e:5}`}},Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0?this._filteredOptions.map(((e,t)=>(0,i.h)(d.b,{index:t,option:e.label,ref:e=>{e&&(this.refOptions[t]=e)},selected:this._value===e.value,onClick:t=>{var n;this.selectOption(e),null===(n=this.refInput)||void 0===n||n.focus(),this.toggleListbox(t),this._isOpen=!1,this._hasOpened=!1},onMouseOver:()=>{this.blockSuggestionMouseOver||(this._focusedOptionIndex=t,this.focusOption(t))},onFocus:()=>{this._focusedOptionIndex=t,this.focusOption(t)},onKeyDown:t=>{var n;"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(e),null===(n=this.refInput)||void 0===n||n.focus(),this.toggleListbox(t),t.preventDefault())}}))):(0,i.h)("li",{class:"kol-single-select__no-results-message"},(0,c.t)("kol-no-results-message")," "))))}handleFocusOut(){setTimeout((()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()}),0)}handleWindowBlur(){this.onBlur()}handleKeyDown(e){var t,n;const i=(t,n)=>{var i;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(-1)));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":this._hasOpened=!1,this._isOpen=!1,i(!1);break;case" ":this._isOpen?Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&(this.selectOption(this._filteredOptions[this._focusedOptionIndex]),null===(n=this.refInput)||void 0===n||n.focus(),i(!1)):this.toggleListbox(e);break;case"NumpadEnter":case"Enter":this.toggleListbox(e),this._hasOpened=!1,this._isOpen=!1;break;case"Home":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=0,this.focusOption(this._focusedOptionIndex))}));break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=this._filteredOptions?this._filteredOptions.length-1:0,this.focusOption(this._focusedOptionIndex))}));break;case"PageUp":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(-10)));break;case"PageDown":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(10)))}}constructor(e){(0,i.r)(this,e),this.refOptions=[],this.catchRef=e=>{this.refInput=e},this.toggleListbox=e=>{var t;if(null==e||e.preventDefault(),!this.state._disabled&&!this._hasOpened){this._isOpen=!0,this._hasOpened=!0,null===(t=this.refInput)||void 0===t||t.focus();const e=Array.isArray(this._filteredOptions)?this._filteredOptions.findIndex((e=>e.label===this._inputValue)):-1;this._focusedOptionIndex=e>=0?e:-1,this.focusOption(this._focusedOptionIndex)}},this._focusedOptionIndex=-1,this._isOpen=!1,this._filteredOptions=[],this._inputValue="",this.blockSuggestionMouseOver=!1,this._hasOpened=!1,this._accessKey=void 0,this._placeholder=void 0,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=null,this._hideClearButton=!1,this._rows=void 0,this.state={_hideMsg:!1,_id:`id-${(0,h.n)()}`,_label:"",_options:[],_hideClearButton:!1},this.inputHasFocus=!1,this.controller=new _(this,"single-select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e),this._filteredOptions=e,this.updateInputValue(this._value)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.oldValue=e,this.updateInputValue(e)}validateHideClearButton(e){this.controller.validateHideClearButton(e)}validateRows(e){this.controller.validateRows(e)}handleMouseEvent(){this.blockSuggestionMouseOver=!1}updateInputValue(e){if(Array.isArray(this._options)){const t=this._options.find((t=>t.value===e));this._inputValue=t?String(t.label):""}}componentWillLoad(){this.refOptions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this.state._options,this.updateInputValue(this._value)}onChange(e){var t,n;this.oldValue!==(null===(t=this.refInput)||void 0===t?void 0:t.value)&&(this.oldValue=null===(n=this.refInput)||void 0===n?void 0:n.value),this._isOpen||this.controller.onFacade.onChange(e,this._value)}onClick(e){this.toggleListbox(e),this.controller.onFacade.onClick(e)}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"],"_hideClearButton ":["validateHideClearButton"],_rows:["validateRows"]}}};v.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-custom-suggestions-option {\n    cursor: pointer;\n    white-space: normal;\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n    line-height: 1.5;\n    box-sizing: border-box;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-options-group {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-toggle {\n    align-items: center;\n    display: flex;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-custom-suggestions-toggle:not(:disabled) {\n    cursor: pointer;\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}\n@layer kol-component {\n  .kol-single-select__delete {\n    cursor: pointer;\n  }\n  .kol-single-select__delete--disabled {\n    cursor: not-allowed;\n  }\n  .kol-single-select__no-results-message {\n    cursor: default;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-single-select .kol-custom-suggestions-options-group {\n    max-height: calc((40rem / var(--kolibri-root-font-size, 16)) * var(--visible-options, 5) + (2rem / var(--kolibri-root-font-size, 16))) !important;\n  }\n}"}},6205:(e,t,n)=>{n.d(t,{I:()=>l});var i=n(1111),o=n(6123),s=n(8045),a=(n(257),n(4571));const l=e=>{const{class:t,msg:n,required:l,disabled:r,touched:d,readonly:c,ariaDescribedBy:h,hideLabel:u,label:p,suggestions:b,value:_}=e,v=(0,i._)(e,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),m=(0,a.c)(n,d),g={"kol-input--disabled":Boolean(r),"kol-input--required":Boolean(l),"kol-input--touched":Boolean(d),"kol-input--readonly":Boolean(c),[`kol-input--${(null==n?void 0:n.type)||"error"}`]:m},f=Object.assign(Object.assign({class:(0,s.c)("kol-input",g,t),required:l,disabled:r,readonly:c,type:"text",list:b?`${v.id}-list`:void 0},(0,a.e)({ariaDescribedBy:h,hideLabel:u,label:p})),v);return(0,o.h)(o.F,null,(0,o.h)("input",Object.assign({},f,{value:_})),b)}},8057:(e,t,n)=>{n.d(t,{v:()=>a});var i=n(257);const o=(e,t,n)=>{(0,i.v)(n)?e[t]=n:(0,i.q)(n,1)&&(e[t]={icon:n})},s=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,i.t)(e.style))&&(void 0===e.label||(0,i.q)(e.label))&&(0,i.q)(e.icon,1),a=(e,t,n={})=>{(0,i.o)(t,(()=>{var a;try{t=(0,i.j)(t)}catch(e){}(0,i.w)(e,"_icons",(e=>{const t="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||t||(0,i.q)(e,1)||"object"==typeof e&&null!==e&&((0,i.q)(e.left,1)||s(e.left)||(0,i.q)(e.right,1)||s(e.right)||(0,i.q)(e.top,1)||s(e.top)||(0,i.q)(e.bottom,1)||s(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(a=n.hooks)||void 0===a?void 0:a.afterPatch,beforePatch:(e,t,s,a)=>{var l,r;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(e,t,s,a)),(e=>{var t,n,s;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(n=e.nextState)||void 0===n?void 0:n.get("_icons");null===(s=e.nextState)||void 0===s||s.set("_icons",(e=>{let t={};return(0,i.q)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(o(t,"top",e.top),o(t,"right",e.right),o(t,"bottom",e.bottom),o(t,"left",e.left)),t})(t))}})(s)}}}))}))}},8533:(e,t,n)=>{n.d(t,{I:()=>h,a:()=>u,b:()=>l,f:()=>c,v:()=>r});var i=n(257),o=n(4571),s=n(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,s.b)(e.label,3)&&!1===(0,s.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},l=(e,t,n={})=>{(0,i.y)(e,"_options",(e=>"object"==typeof e&&null!==e&&"string"==typeof e.label&&e.label.length>0),t,void 0,n)},r=(e,t,n={})=>{(0,i.y)(e,"_options",a,t,void 0,n)},d=["horizontal","vertical"],c=(e,t,n="")=>{t.forEach(((t,i)=>{const o=`${n}-${i}`;"object"==typeof t&&null!==t&&"string"==typeof t.label&&t.label.length>0&&(Array.isArray(t.options)?c(e,t.options,o):e.set(o,t))}))};class h extends o.I{constructor(e,t,n){super(e,t,n),this.component=e}validateRequired(e){((e,t)=>{(0,i.h)(e,"_required",t)})(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateRequired(this.component._required)}}class u extends h{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;Array.isArray(n)&&n.length>0&&(this.keyOptionMap.clear(),c(this.keyOptionMap,n))},this.component=e}validateOrientation(e){(0,i.w)(this.component,"_orientation",(e=>"string"==typeof e&&d.includes(e)),new Set([`Orientation {${d.join(", ")}`]),e,{defaultValue:"vertical"})}validateOptions(e){l(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateValue(e){e=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)}}},8546:(e,t,n)=>{n.d(t,{C:()=>r,a:()=>c,b:()=>d,g:()=>l});var i=n(6123),o=n(1698),s=n(9272),a=n(8045);const l=e=>{var t;const n="error"===(null===(t=e._msg)||void 0===t?void 0:t._type)&&!0===e._touched,i="string"==typeof e._hint&&e._hint.length>0,o=[];return!0===n&&o.push(`${e._id}-error`),!0===i&&o.push(`${e._id}-hint`),{hasMsg:n,hasHint:i,ariaDescribedBy:o}},r=({onClick:e,disabled:t})=>(0,i.h)("button",{tabindex:"-1",class:"kol-custom-suggestions-toggle",onClick:e,disabled:t},(0,i.h)(o.d,{_icons:"codicon codicon-triangle-down",_label:(0,s.t)("kol-dropdown")})),d=({index:e,ref:t,selected:n,onClick:o,onMouseOver:s,onFocus:a,onKeyDown:l,option:r})=>(0,i.h)("li",{id:`option-${e}`,key:`-${e}`,ref:t,"data-index":e,tabIndex:-1,role:"option","aria-selected":n?"true":void 0,onClick:o,onMouseOver:s,onFocus:a,class:"kol-custom-suggestions-option",onKeyDown:l},r),c=({blockSuggestionMouseOver:e,onKeyDown:t,style:n},o)=>(0,i.h)("ul",{role:"listbox",style:n,class:(0,a.c)("kol-custom-suggestions-options-group",{"kol-custom-suggestions-options-group--cursor-hidden":e}),onKeyDown:t},o)}}]);

package/dist/4201.js

@@ -1,2 +1,2 @@
 /*! For license information please see 4201.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4201],{970:(n,e,t)=>{t.d(e,{w:()=>a});var o=t(257),i=t(3472);const a=(n,e)=>{(0,o.w)(n,"_level",(n=>"number"==typeof n&&i.h.includes(n)),new Set([`Number {${i.h.join(", ")}`]),e,{defaultValue:1,required:!0})}},2425:(n,e,t)=>{t.d(e,{K:()=>c});var o=t(1111),i=t(6733),a=t(8045);const l=1;function s(n){return function(n){return n>=l&&n<=6}(n)?`h${n}`:"strong"}const r=(n,e)=>{var{class:t,level:r=l,variant:d}=n,c=(0,o._)(n,["class","level","variant"]);const h=s(r),b=d||h;return(0,i.h)(h,Object.assign({class:(0,a.c)("kol-headline",`kol-headline--${b}`,t)},c),e)},d=(n,e)=>{var{class:t,level:r=l}=n,d=(0,o._)(n,["class","level"]);const c=function(n){return 1===n?"span":s(n)}(r+1);return(0,i.h)(c,Object.assign({class:(0,a.c)("kol-headline kol-headline--group kol-headline--secondary",t)},d),e)},c=(n,e)=>{var{secondaryHeadline:t,level:s=l,class:c,HeadingGroupProps:h={},SecondaryHeadlineProps:b={}}=n,u=(0,o._)(n,["secondaryHeadline","level","class","HeadingGroupProps","SecondaryHeadlineProps"]);const f=Object.assign({level:s},u);if(!t)return(0,i.h)(r,Object.assign({class:(0,a.c)(c,"kol-headline--single")},f),e);const{class:p}=h,v=(0,o._)(h,["class"]),m=Object.assign({class:(0,a.c)("kol-heading-group",p)},v);return(0,i.h)("hgroup",Object.assign({},m),(0,i.h)(r,Object.assign({class:(0,a.c)(c,"kol-headline--group","kol-headline--primary")},f),e),(0,i.h)(d,Object.assign({level:s},b),t))}},3472:(n,e,t)=>{t.d(e,{a:()=>h,b:()=>s,c:()=>r,h:()=>i,v:()=>c});var o=t(257);const i=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(a))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const d=new Set(["string"]),c=(n,e,t={})=>{(0,o.w)(n,"_label",(n=>"string"==typeof n),d,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,i,a)=>{var l,d;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(e,t,i,a)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,o.b)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,o.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},h=c},4201:(n,e,t)=>{t.r(e),t.d(e,{kol_card:()=>b});var o=t(6733),i=t(257),a=t(9272),l=t(970),s=t(1698),r=(t(6660),t(2425)),d=(t(6363),t(3694)),c=t(7263),h=t(3472);t(4269),t(3185),t(1111),t(8045);const b=class{constructor(n){(0,o.r)(this,n),this.close=()=>{var n;void 0!==(null===(n=this._on)||void 0===n?void 0:n.onClose)&&this._on.onClose(new Event("Close")),this.host&&(0,d.d)(this.host,d.K.close)},this.on={onClick:this.close},this.validateOnValue=n=>"object"==typeof n&&null!==n&&"function"==typeof n.onClose,this._on=void 0,this._hasCloser=!1,this._label=void 0,this._level=0,this.state={_label:""}}render(){return(0,o.h)("div",{key:"9b3f3c20c9f8873638f5b814a0bb975d35c6755f",class:"kol-card"},(0,o.h)("div",{key:"c27dd41fa36b132eb59a6f04079ea6f4449ccfa3",class:"kol-card__header"},(0,o.h)(r.K,{key:"2b20ac61c90422eed8000a20fd280e420a3a5baf",class:"kol-card__headline",level:this.state._level},this.state._label)),(0,o.h)("div",{key:"1603a72a02901b29effa7169aa8e50eb2c99ee05",class:"kol-card__content"},(0,o.h)("slot",{key:"97db416900df4d84d0d5060d9c0a0bf926c02dd3"})),this.state._hasCloser&&(0,o.h)(s.a,{key:"b3fd968a5063de19f354be783e37c2674ede03ef",class:"kol-card__close-button","data-testid":"card-close-button",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:(0,a.t)("kol-close"),_on:this.on,_tooltipAlign:"left"}))}validateOn(n){this.validateOnValue(n)&&(0,i.k)(this,"_on",{onClose:n.onClose})}validateHasCloser(n){(0,c.v)(this,n)}validateLabel(n){(0,h.v)(this,n,{required:!0})}validateLevel(n){(0,l.w)(this,n)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on)}get host(){return(0,o.g)(this)}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"]}}};b.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-card {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: 100%;\n    position: relative;\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-card__close-button {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n}"}},7263:(n,e,t)=>{t.d(e,{v:()=>i});var o=t(257);const i=(n,e)=>{(0,o.h)(n,"_hasCloser",e)}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4201],{970:(n,e,t)=>{t.d(e,{w:()=>a});var o=t(257),i=t(3472);const a=(n,e)=>{(0,o.w)(n,"_level",(n=>"number"==typeof n&&i.h.includes(n)),new Set([`Number {${i.h.join(", ")}`]),e,{defaultValue:1,required:!0})}},3472:(n,e,t)=>{t.d(e,{a:()=>h,b:()=>s,c:()=>r,h:()=>i,v:()=>c});var o=t(257);const i=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(a))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const d=new Set(["string"]),c=(n,e,t={})=>{(0,o.w)(n,"_label",(n=>"string"==typeof n),d,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,i,a)=>{var l,d;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(e,t,i,a)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,o.b)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,o.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},h=c},4201:(n,e,t)=>{t.r(e),t.d(e,{kol_card:()=>b});var o=t(6123),i=t(257),a=t(9272),l=t(970),s=t(1698),r=(t(6660),t(5150)),d=(t(6363),t(3694)),c=t(7263),h=t(3472);t(4269),t(3185),t(1111),t(8045);const b=class{constructor(n){(0,o.r)(this,n),this.close=()=>{var n;void 0!==(null===(n=this._on)||void 0===n?void 0:n.onClose)&&this._on.onClose(new Event("Close")),this.host&&(0,d.d)(this.host,d.K.close)},this.on={onClick:this.close},this.validateOnValue=n=>"object"==typeof n&&null!==n&&"function"==typeof n.onClose,this._on=void 0,this._hasCloser=!1,this._label=void 0,this._level=0,this.state={_label:""}}render(){return(0,o.h)("div",{key:"9b3f3c20c9f8873638f5b814a0bb975d35c6755f",class:"kol-card"},(0,o.h)("div",{key:"c27dd41fa36b132eb59a6f04079ea6f4449ccfa3",class:"kol-card__header"},(0,o.h)(r.K,{key:"2b20ac61c90422eed8000a20fd280e420a3a5baf",class:"kol-card__headline",level:this.state._level},this.state._label)),(0,o.h)("div",{key:"1603a72a02901b29effa7169aa8e50eb2c99ee05",class:"kol-card__content"},(0,o.h)("slot",{key:"97db416900df4d84d0d5060d9c0a0bf926c02dd3"})),this.state._hasCloser&&(0,o.h)(s.a,{key:"b3fd968a5063de19f354be783e37c2674ede03ef",class:"kol-card__close-button","data-testid":"card-close-button",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:(0,a.t)("kol-close"),_on:this.on,_tooltipAlign:"left"}))}validateOn(n){this.validateOnValue(n)&&(0,i.k)(this,"_on",{onClose:n.onClose})}validateHasCloser(n){(0,c.v)(this,n)}validateLabel(n){(0,h.v)(this,n,{required:!0})}validateLevel(n){(0,l.w)(this,n)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on)}get host(){return(0,o.g)(this)}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"]}}};b.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-card {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: 100%;\n    position: relative;\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-card__close-button {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n}"}},5150:(n,e,t)=>{t.d(e,{K:()=>c});var o=t(1111),i=t(6123),a=t(8045);const l=1;function s(n){return function(n){return n>=l&&n<=6}(n)?`h${n}`:"strong"}const r=(n,e)=>{var{class:t,level:r=l,variant:d}=n,c=(0,o._)(n,["class","level","variant"]);const h=s(r),b=d||h;return(0,i.h)(h,Object.assign({class:(0,a.c)("kol-headline",`kol-headline--${b}`,t)},c),e)},d=(n,e)=>{var{class:t,level:r=l}=n,d=(0,o._)(n,["class","level"]);const c=function(n){return 1===n?"span":s(n)}(r+1);return(0,i.h)(c,Object.assign({class:(0,a.c)("kol-headline kol-headline--group kol-headline--secondary",t)},d),e)},c=(n,e)=>{var{secondaryHeadline:t,level:s=l,class:c,HeadingGroupProps:h={},SecondaryHeadlineProps:b={}}=n,u=(0,o._)(n,["secondaryHeadline","level","class","HeadingGroupProps","SecondaryHeadlineProps"]);const f=Object.assign({level:s},u);if(!t)return(0,i.h)(r,Object.assign({class:(0,a.c)(c,"kol-headline--single")},f),e);const{class:p}=h,v=(0,o._)(h,["class"]),m=Object.assign({class:(0,a.c)("kol-heading-group",p)},v);return(0,i.h)("hgroup",Object.assign({},m),(0,i.h)(r,Object.assign({class:(0,a.c)(c,"kol-headline--group","kol-headline--primary")},f),e),(0,i.h)(d,Object.assign({level:s},b),t))}},7263:(n,e,t)=>{t.d(e,{v:()=>i});var o=t(257);const i=(n,e)=>{(0,o.h)(n,"_hasCloser",e)}}}]);

package/dist/4389.js

@@ -1,2 +1,2 @@
 /*! For license information please see 4389.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4389],{4389:(e,t,s)=>{s.r(t),s.d(t,{kol_popover_wc:()=>c});var i=s(6733),o=s(257),r=s(4702),n=s(8045),l=s(3694),h=s(5154),a=s(9461);const c=class{constructor(e){(0,i.r)(this,e),this.hidePopoverByEscape=e=>{"Escape"===e.key&&this.hidePopover(e)},this.hidePopoverByClickOutside=e=>{this.host&&!this.host.contains(e.target)&&this.hidePopover(e)},this.catchHostAndTriggerElement=e=>{e&&(this.host=e,this.triggerElement=e.previousElementSibling)},this.catchPopoverElement=e=>{this.popoverElement=e},this.catchArrowElement=e=>{this.arrowElement=e},this._align="top",this._on=void 0,this._show=!1,this.state={_align:"top",_on:{},_show:!1,_visible:!1}}showPopover(){return e=this,t=function*(){this.addListenersToBody(),this.triggerElement&&this.popoverElement&&(yield(0,r.a)({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.state=Object.assign(Object.assign({},this.state),{_visible:!0}))},new Promise(((s,i)=>{var o=e=>{try{n(t.next(e))}catch(e){i(e)}},r=e=>{try{n(t.throw(e))}catch(e){i(e)}},n=e=>e.done?s(e.value):Promise.resolve(e.value).then(o,r);n((t=t.apply(e,null)).next())}));var e,t}hidePopover(e){var t,s,i;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody(),null===(i=null===(s=this.state._on)||void 0===s?void 0:s.onClose)||void 0===i||i.call(s,e),this.host&&(0,l.d)(this.host,l.K.close)}addListenersToBody(){var e;const t=(0,o.g)().body;t.addEventListener("keyup",this.hidePopoverByEscape),t.addEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var e;const t=(0,o.g)().body;t.removeEventListener("keyup",this.hidePopoverByEscape),t.removeEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return(0,i.h)(i.H,{key:"23e4ea8f366f0263df0099ee1f804412ccd05892",ref:this.catchHostAndTriggerElement,class:"kol-popover"},(0,i.h)("div",{key:"f0b966725406619aecf64015f1cdebe11c24b047",class:(0,n.c)("kol-popover__content",{"kol-popover__content--visible":this.state._visible}),ref:this.catchPopoverElement,hidden:!this.state._show},(0,i.h)("div",{key:"629b53f52ff434ef87738dfccb8c346a15f39c40",class:(0,n.c)("kol-popover__arrow",`kol-popover__arrow--${this.state._align}`),ref:this.catchArrowElement}),(0,i.h)("slot",{key:"afa7350520898288c61b7f65b07978c9a81c7289"})))}validateAlign(e){(0,h.v)(this,e)}validateOn(e){((e,t)=>{(0,o.w)(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)})(this,e)}validateShow(e){(0,a.v)(this,e),e&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_on:["validateOn"],_show:["validateShow"]}}}},8045:(e,t,s)=>{function i(e){var t,s,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e)){var r=e.length;for(t=0;t<r;t++)e[t]&&(s=i(e[t]))&&(o&&(o+=" "),o+=s)}else for(s in e)e[s]&&(o&&(o+=" "),o+=s);return o}function o(){for(var e,t,s=0,o="",r=arguments.length;s<r;s++)(e=arguments[s])&&(t=i(e))&&(o&&(o+=" "),o+=t);return o}s.d(t,{c:()=>o})},9461:(e,t,s)=>{s.d(t,{v:()=>o});var i=s(257);const o=(e,t,s)=>{(0,i.h)(e,"_show",t,s)}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4389],{4389:(e,t,s)=>{s.r(t),s.d(t,{kol_popover_wc:()=>c});var i=s(6123),o=s(257),r=s(4702),n=s(8045),l=s(3694),h=s(5154),a=s(9461);const c=class{constructor(e){(0,i.r)(this,e),this.hidePopoverByEscape=e=>{"Escape"===e.key&&this.hidePopover(e)},this.hidePopoverByClickOutside=e=>{this.host&&!this.host.contains(e.target)&&this.hidePopover(e)},this.catchHostAndTriggerElement=e=>{e&&(this.host=e,this.triggerElement=e.previousElementSibling)},this.catchPopoverElement=e=>{this.popoverElement=e},this.catchArrowElement=e=>{this.arrowElement=e},this._align="top",this._on=void 0,this._show=!1,this.state={_align:"top",_on:{},_show:!1,_visible:!1}}showPopover(){return e=this,t=function*(){this.addListenersToBody(),this.triggerElement&&this.popoverElement&&(yield(0,r.a)({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.state=Object.assign(Object.assign({},this.state),{_visible:!0}))},new Promise(((s,i)=>{var o=e=>{try{n(t.next(e))}catch(e){i(e)}},r=e=>{try{n(t.throw(e))}catch(e){i(e)}},n=e=>e.done?s(e.value):Promise.resolve(e.value).then(o,r);n((t=t.apply(e,null)).next())}));var e,t}hidePopover(e){var t,s,i;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody(),null===(i=null===(s=this.state._on)||void 0===s?void 0:s.onClose)||void 0===i||i.call(s,e),this.host&&(0,l.d)(this.host,l.K.close)}addListenersToBody(){var e;const t=(0,o.g)().body;t.addEventListener("keyup",this.hidePopoverByEscape),t.addEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var e;const t=(0,o.g)().body;t.removeEventListener("keyup",this.hidePopoverByEscape),t.removeEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return(0,i.h)(i.H,{key:"23e4ea8f366f0263df0099ee1f804412ccd05892",ref:this.catchHostAndTriggerElement,class:"kol-popover"},(0,i.h)("div",{key:"f0b966725406619aecf64015f1cdebe11c24b047",class:(0,n.c)("kol-popover__content",{"kol-popover__content--visible":this.state._visible}),ref:this.catchPopoverElement,hidden:!this.state._show},(0,i.h)("div",{key:"629b53f52ff434ef87738dfccb8c346a15f39c40",class:(0,n.c)("kol-popover__arrow",`kol-popover__arrow--${this.state._align}`),ref:this.catchArrowElement}),(0,i.h)("slot",{key:"afa7350520898288c61b7f65b07978c9a81c7289"})))}validateAlign(e){(0,h.v)(this,e)}validateOn(e){((e,t)=>{(0,o.w)(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)})(this,e)}validateShow(e){(0,a.v)(this,e),e&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_on:["validateOn"],_show:["validateShow"]}}}},8045:(e,t,s)=>{function i(e){var t,s,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e)){var r=e.length;for(t=0;t<r;t++)e[t]&&(s=i(e[t]))&&(o&&(o+=" "),o+=s)}else for(s in e)e[s]&&(o&&(o+=" "),o+=s);return o}function o(){for(var e,t,s=0,o="",r=arguments.length;s<r;s++)(e=arguments[s])&&(t=i(e))&&(o&&(o+=" "),o+=t);return o}s.d(t,{c:()=>o})},9461:(e,t,s)=>{s.d(t,{v:()=>o});var i=s(257);const o=(e,t,s)=>{(0,i.h)(e,"_show",t,s)}}}]);

package/dist/4587.js

@@ -1,2 +1,2 @@
 /*! For license information please see 4587.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4587],{4587:(n,e,t)=>{t.r(e),t.d(e,{kol_link:()=>a});var i=t(6733),o=t(1698);const a=class{constructor(n){(0,i.r)(this,n),this.catchRef=n=>{this.linkWcRef=n},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._target=void 0,this._tooltipAlign="right"}kolFocus(){return n=this,e=function*(){var n;yield null===(n=this.linkWcRef)||void 0===n?void 0:n.kolFocus()},new Promise(((t,i)=>{var o=n=>{try{l(e.next(n))}catch(n){i(n)}},a=n=>{try{l(e.throw(n))}catch(n){i(n)}},l=n=>n.done?t(n.value):Promise.resolve(n.value).then(o,a);l((e=e.apply(n,null)).next())}));var n,e}render(){return(0,i.h)(o.e,{key:"965a19f20c69923d4a0891604fba8aa15f9a1973",ref:this.catchRef,_accessKey:this._accessKey,_ariaCurrentValue:this._ariaCurrentValue,_ariaDescription:this._ariaDescription,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icons:this._icons,_label:this._label,_on:this._on,_role:this._role,_shortKey:this._shortKey,_target:this._target,_tooltipAlign:this._tooltipAlign},(0,i.h)("slot",{key:"86e618b375530f5c25757599f3ba713392a3a1f3",name:"expert",slot:"expert"}))}static get delegatesFocus(){return!0}};a.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    align-items: baseline;\n    display: inline-flex;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n}"}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4587],{4587:(n,e,t)=>{t.r(e),t.d(e,{kol_link:()=>a});var i=t(6123),o=t(1698);const a=class{constructor(n){(0,i.r)(this,n),this.catchRef=n=>{this.linkWcRef=n},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._target=void 0,this._tooltipAlign="right"}kolFocus(){return n=this,e=function*(){var n;yield null===(n=this.linkWcRef)||void 0===n?void 0:n.kolFocus()},new Promise(((t,i)=>{var o=n=>{try{l(e.next(n))}catch(n){i(n)}},a=n=>{try{l(e.throw(n))}catch(n){i(n)}},l=n=>n.done?t(n.value):Promise.resolve(n.value).then(o,a);l((e=e.apply(n,null)).next())}));var n,e}render(){return(0,i.h)(o.e,{key:"965a19f20c69923d4a0891604fba8aa15f9a1973",ref:this.catchRef,_accessKey:this._accessKey,_ariaCurrentValue:this._ariaCurrentValue,_ariaDescription:this._ariaDescription,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icons:this._icons,_label:this._label,_on:this._on,_role:this._role,_shortKey:this._shortKey,_target:this._target,_tooltipAlign:this._tooltipAlign},(0,i.h)("slot",{key:"86e618b375530f5c25757599f3ba713392a3a1f3",name:"expert",slot:"expert"}))}static get delegatesFocus(){return!0}};a.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    align-items: baseline;\n    display: inline-flex;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n}"}}}]);

package/dist/4611.js

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