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

package/dist/4383.js

@@ -0,0 +1,2 @@
+/*! For license information please see 4383.js.LICENSE.txt */
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4383],{3019:(t,n,e)=>{e.d(n,{a:()=>s,b:()=>r,c:()=>a,d:()=>h,e:()=>o,v:()=>l});var i=e(1263);const o=(t,n)=>{(0,i.w)(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["TableCallbacksPropType {Events.onSort, Events.onSelectionChange}"]),n)},a=(t,n)=>{(0,i.w)(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["TableStatefulCallbacksPropType {Events.onSelectionChange}"]),n)},l=(t,n,e)=>{(0,i.M)(n,(()=>{(0,i.o)(n,(()=>{void 0===n&&(n=[]);try{n=(0,i.k)(n)}catch(t){}Array.isArray(n)&&n.every((t=>"object"==typeof t&&null!==t))&&(0,i.l)(t,"_data",n,e)}))}))},s=(t,n,e)=>{(0,i.M)(n,(()=>{(0,i.o)(n,(()=>{void 0===n&&(n=[]);try{n=(0,i.k)(n)}catch(t){}Array.isArray(n)&&n.every((t=>"object"==typeof t&&null!==t))&&(0,i.l)(t,"_dataFoot",n,e)}))}))},r=(t,n)=>{var e;(e="string"==typeof n?(()=>{try{return(0,i.k)(n)}catch(t){return}})():n)&&(0,i.x)(e)&&"function"==typeof e.label&&(!e.selectedKeys||Array.isArray(e.selectedKeys))&&(0,i.l)(t,"_selection",n)},h=(t,n)=>{(0,i.w)(t,"_tableSettings",(t=>"object"==typeof t&&null!==t),new Set(["TableSettings"]),n)}},4383:(t,n,e)=>{e.r(n),e.d(n,{kol_table_stateful:()=>u});var i=e(8290),o=e(9477),a=e(9626),l=e(1263),s=e(6010),r=e(1627),h=e(3019),c=e(9828);e(4608);const d=["top","bottom","both"],p=[10,20,50,100],g=t=>!0===t||""===t||"object"==typeof t&&null!==t,u=class{constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.tableWcRef=t},this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.handlePagination={onClick:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,n),(0,l.l)(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePage:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,n),(0,l.l)(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePageSize:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,n),(0,l.l)(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),(0,l.l)(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=()=>{if(this.disableSort)return void(0,l.l)(this,"_sortedData",this.state._data);const t=[...this.state._data];this.sortData.length>0&&t.sort(((t,n)=>{for(let e=0;e<this.sortData.length;e++){const i=this.sortData[e],o=i.compareFn(t,n);if(0!==o)return"ASC"===i.direction?o:-o}return 0})),(0,l.l)(this,"_sortedData",t)},this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0,this._tableSettings=void 0,this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){(0,l.w)(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){(0,h.v)(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){(0,h.a)(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){((t,n)=>{(0,l.w)(t,"_paginationPosition",(t=>"string"==typeof t&&d.includes(t)),new Set([`PaginationPositionPropType {${d.join(", ")}`]),n,{defaultValue:"bottom"})})(this,t)}changeCellSort(t){var n;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key==(null===(n=this.sortData[0])||void 0===n?void 0:n.key)||(this.sortData=[]);const e=this.sortData.findIndex((n=>n.key===t.key));if(e>=0){const t=this.sortData[e];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(e,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData()}}validateHeaders(t){(0,l.M)(t,(()=>{(0,l.o)(t,(()=>{try{t=(0,l.k)(t)}catch(t){}(0,l.w)(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,e,i,o;const a=t=>{let n=!1;t.forEach((t=>{const e=t.key;if(!e)return;const i=t.sortDirection;"ASC"!==i&&"DESC"!==i||"function"==typeof t.compareFn&&((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:e,compareFn:t.compareFn,direction:i}),n=!0)})),n&&setTimeout((()=>this.updateSortedData()))},s=t;null===(n=s.horizontal)||void 0===n||n.forEach(a),null===(e=s.vertical)||void 0===e||e.forEach(a),s.horizontal&&s.vertical&&(null===(i=s.horizontal)||void 0===i?void 0:i.length)>0&&(null===(o=s.vertical)||void 0===o?void 0:o.length)>0&&(this.disableSort=!0,(0,l.D)("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})}))}))}validateLabel(t){(0,c.v)(this,t,{required:!0})}validateMinWidth(t){(0,l.B)(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){(0,h.b)(this,t)}validateOn(t){(0,h.c)(this,t)}validateTableSettings(t){(0,h.d)(this,t)}validatePagination(t){try{t=(0,l.k)(t)}catch(t){}this.showPagination=g(t),(0,l.w)(this,"_pagination",g,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener(r.K.selectionChange,this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener(r.K.selectionChange,this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateTableSettings(this._tableSettings)}selectDisplayedData(t,n,e){return"number"==typeof n&&n>0&&"number"==typeof e&&e>0?(this.pageStartSlice=n*(e-1),this.pageEndSlice=n*e>t.length?t.length:n*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(t){const n=(0,a.t)("kol-table-pagination-label",{placeholders:{label:`${this.state._label} (${(0,a.t)(`kol-pagination-position-${t}`)})`}});return(0,i.h)("div",{class:`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`},(0,i.h)("span",null,(0,a.t)("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),(0,i.h)("div",{class:"kol-table-stateful__pagination-wrapper"},(0,i.h)(o.l,{class:"test",_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||p,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:n})))}getHeaderCellSortState(t){if(!this.disableSort&&"function"==typeof t.compareFn){if(t.key){const n=this.sortData.find((n=>n.key===t.key));if(null==n?void 0:n.direction)return n.direction}return"NOS"}}handleSort({key:t}){const n=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((n=>n.key===t));n&&this.changeCellSort(n)}getSelectedData(t){var n;const e=this.state._selection;if(e){const i=null!==(n=e.keyPropertyName)&&void 0!==n?n:"id",o=this.state._sortedData.filter((n=>t.includes(n[i])));if(!1===(null==e?void 0:e.multiple))return o[0];if(i)return o}return null}handleSelectionChange(t,n){var e;const i=this.state._selection;i&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},i),{selectedKeys:"object"==typeof n?n:[n]})}));const o=this.getSelectedData(n);"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e[s.C.onSelectionChange])&&this.state._on[s.C.onSelectionChange](t,o),this.host&&(0,r.d)(this.host,r.K.selectionChange,o)}getSelection(){return t=this,n=function*(){var t;const n=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(n)},new Promise(((e,i)=>{var o=t=>{try{l(n.next(t))}catch(t){i(t)}},a=t=>{try{l(n.throw(t))}catch(t){i(t)}},l=t=>t.done?e(t.value):Promise.resolve(t.value).then(o,a);l((n=n.apply(t,null)).next())}));var t,n}render(){var t,n,e,a,l,s;const r=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(n=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==n?n:10:this.state._sortedData.length,this.state._pagination._page||1),h="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("top"):null,c="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("bottom"):null,d={horizontal:null!==(a=null===(e=this.state._headers.horizontal)||void 0===e?void 0:e.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))))&&void 0!==a?a:[],vertical:null!==(s=null===(l=this.state._headers.vertical)||void 0===l?void 0:l.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))))&&void 0!==s?s:[]};return(0,i.h)(i.H,{key:"28ef6723c730e6f9a52694c65b984b27b97bbe43",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&h,(0,i.h)(o.m,{key:"78fcf96661bd3e57bc41fbc3523096e7de513eeb",ref:this.catchRef,_data:r,_headerCells:d,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection,_tableSettings:this.state._tableSettings}),this.pageEndSlice>0&&this.showPagination&&c)}get host(){return(0,i.g)(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_tableSettings:["validateTableSettings"],_pagination:["validatePagination"]}}};u.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    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: 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}\n@layer kol-component {\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: 1;\n  }\n  .kol-table-settings__columns-container {\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(200rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    align-items: center;\n    display: grid;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content 1fr calc(100rem / var(--kolibri-root-font-size, 16)) auto auto;\n    overflow: hidden;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n    position: relative;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__focus-element:focus {\n    outline: 0 !important;\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n    display: grid;\n    place-items: center;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  @media (min-width: 1024px) {\n    .kol-pagination {\n      display: flex;\n    }\n  }\n  @media (max-width: 1024px) {\n    .kol-pagination {\n      flex-direction: column;\n    }\n  }\n}"}},6010:(t,n,e)=>{var i,o,a,l;e.d(n,{C:()=>i,K:()=>a}),(o=i||(i={})).onBlur="onBlur",o.onChange="onChange",o.onChangePage="onChangePage",o.onClick="onClick",o.onClose="onClose",o.onDblClick="onDblClick",o.onFocus="onFocus",o.onInput="onInput",o.onKeyDown="onKeyDown",o.onKeyPress="onKeyPress",o.onKeyUp="onKeyUp",o.onMouseDown="onMouseDown",o.onMouseMove="onMouseMove",o.onMouseOut="onMouseOut",o.onMouseOver="onMouseOver",o.onMouseUp="onMouseUp",o.onReset="onReset",o.onSelect="onSelect",o.onSelectionChange="onSelectionChange",o.onChangePageSize="onChangePageSize",o.onSort="onSort",o.onSubmit="onSubmit",o.onToggle="onToggle",(l=a||(a={})).ArrowDown="ArrowDown",l.ArrowLeft="ArrowLeft",l.ArrowRight="ArrowRight",l.ArrowUp="ArrowUp",l.Enter="Enter",l.Space=" "},9626:(t,n,e)=>{e.d(n,{t:()=>a});var i=e(4608),o=e(1263);let a=(t,n)=>{var e;return(null!==(e=(0,i.g)())&&void 0!==e?e:(0,i.i)("de")).translate(t,n)};"test"===o.p&&(a=t=>t)},9828:(t,n,e)=>{e.d(n,{a:()=>d,b:()=>s,c:()=>r,h:()=>o,v:()=>c});var i=e(1263);const o=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(t,n=1){return function(t){var n;return"string"==typeof t&&(null===(n=t.match(a))||void 0===n?void 0:n.length)||0}(t)>=n}function r(t){return l.test(t)}const h=new Set(["string"]),c=(t,n,e={})=>{(0,i.w)(t,"_label",(t=>"string"==typeof t),h,n,function(t){var n;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(n,e,o,a)=>{var l,h;"function"==typeof(null===(l=t.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(h=t.hooks)||void 0===h||h.afterPatch(n,e,o,a)),"string"==typeof n&&!1===s(n,3)&&!1===r(n)&&(0,i.c)(`The heading or label ("${n}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof n&&n.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(n=t.hooks)||void 0===n?void 0:n.beforePatch}})}(e))},d=c}}]);

package/dist/{6066.js → 4595.js}

@@ -1,2 +1,2 @@
-/*! For license information please see 6066.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6066],{3257:(n,e,t)=>{t.d(e,{v:()=>a});var i=t(257);const a=(n,e,t)=>{(0,i.A)(n,"_src",e,t)}},6066:(n,e,t)=>{t.r(e),t.d(e,{kol_image:()=>l});var i=t(6733),a=t(257),s=t(3257);const o=["eager","lazy"],l=class{constructor(n){(0,i.r)(this,n),this._alt=void 0,this._loading="lazy",this._sizes=void 0,this._src=void 0,this._srcset=void 0,this.state={_alt:"",_loading:"lazy",_src:""}}validateAlt(n){(0,a.A)(this,"_alt",n,{required:!0})}validateLoading(n){!function(n,e){(0,a.w)(n,"_loading",(n=>"string"==typeof n&&o.includes(n)),new Set(o),e)}(this,n)}validateSizes(n){(0,a.A)(this,"_sizes",n)}validateSrc(n){(0,s.v)(this,n,{required:!0})}validateSrcset(n){(0,a.A)(this,"_srcset",n)}componentWillLoad(){this.validateAlt(this._alt),this.validateLoading(this._loading),this.validateSizes(this._sizes),this.validateSrc(this._src),this.validateSrcset(this._srcset)}render(){return(0,i.h)("img",{key:"4e7a343118526969cd9823e2900daaa9de531f44",class:"kol-image",alt:this.state._alt,loading:this.state._loading,sizes:this.state._sizes,src:this.state._src,srcset:this.state._srcset})}static get watchers(){return{_alt:["validateAlt"],_loading:["validateLoading"],_sizes:["validateSizes"],_src:["validateSrc"],_srcset:["validateSrcset"]}}};l.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-image {\n    display: inline-block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-height: 100%;\n    max-width: 100%;\n  }\n}"}}}]);
+/*! For license information please see 4595.js.LICENSE.txt */
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4595],{111:(n,e,t)=>{t.d(e,{v:()=>a});var i=t(1263);const a=(n,e,t)=>{(0,i.B)(n,"_src",e,t)}},4595:(n,e,t)=>{t.r(e),t.d(e,{kol_image:()=>l});var i=t(8290),a=t(1263),s=t(111);const o=["eager","lazy"],l=class{constructor(n){(0,i.r)(this,n),this._alt=void 0,this._loading="lazy",this._sizes=void 0,this._src=void 0,this._srcset=void 0,this.state={_alt:"",_loading:"lazy",_src:""}}validateAlt(n){(0,a.B)(this,"_alt",n,{required:!0})}validateLoading(n){!function(n,e){(0,a.w)(n,"_loading",(n=>"string"==typeof n&&o.includes(n)),new Set(o),e)}(this,n)}validateSizes(n){(0,a.B)(this,"_sizes",n)}validateSrc(n){(0,s.v)(this,n,{required:!0})}validateSrcset(n){(0,a.B)(this,"_srcset",n)}componentWillLoad(){this.validateAlt(this._alt),this.validateLoading(this._loading),this.validateSizes(this._sizes),this.validateSrc(this._src),this.validateSrcset(this._srcset)}render(){return(0,i.h)("img",{key:"4e7a343118526969cd9823e2900daaa9de531f44",class:"kol-image",alt:this.state._alt,loading:this.state._loading,sizes:this.state._sizes,src:this.state._src,srcset:this.state._srcset})}static get watchers(){return{_alt:["validateAlt"],_loading:["validateLoading"],_sizes:["validateSizes"],_src:["validateSrc"],_srcset:["validateSrcset"]}}};l.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-image {\n    display: inline-block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-height: 100%;\n    max-width: 100%;\n  }\n}"}}}]);

package/dist/4678.js

@@ -0,0 +1,2 @@
+/*! For license information please see 4678.js.LICENSE.txt */
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4678],{876:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(1263);const o=(e,t,n)=>{(0,i.i)(e,"_hasCounter",t,n)}},2048:(e,t,n)=>{n.d(t,{I:()=>y,K:()=>f,a:()=>g});var i=n(8290),o=n(1263),a=n(1380),l=n(8984),s=n(5198),r=n(9477),d=n(2329),c=n(3703),h=n(7877),u=n(6497);const p=(e,t)=>{var{position:n="start",class:o}=e,s=(0,a._)(e,["position","class"]);const r="kol-input-container__adornment",d=`${r}--${n}`;return(0,i.h)("div",Object.assign({class:(0,l.c)(r,d,o)},s),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,l.c)("kol-input-container__container",n)},o),t)},b=(e,t)=>{const{class:n,startAdornment:o,endAdornment:r,disabled:d,msg:c,touched:h,containerProps:u,startAdornmentProps:b,endAdornmentProps:_}=e,f=(0,a._)(e,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),g=(0,s.c)(c,h),y={"kol-input-container--disabled":d,[`kol-input-container--${(null==c?void 0:c.type)||"error"}`]:g},k=Object.assign({class:(0,l.c)("kol-input-container",y,n)},f);return m(o)||m(r)?(0,i.h)("div",Object.assign({},k),(0,i.h)(p,Object.assign({},b,{position:"start"}),o),(0,i.h)(v,Object.assign({},u),t),(0,i.h)(p,Object.assign({},_,{position:"end"}),r)):(0,i.h)("div",Object.assign({},k),(0,i.h)(v,Object.assign({},u),t))},_=e=>{const{label:t,icons:n,hideLabel:o,disabled:l,onClick:s}=e,d=(0,a._)(e,["label","icons","hideLabel","disabled","onClick"]);return(0,i.h)(r.a,Object.assign({_label:t,_disabled:l,_icons:n,_hideLabel:o,_on:{onClick:s}},d))},f=e=>{const{componentName:t="button",label:n,icon:o,onClick:l}=e,s=(0,a._)(e,["componentName","label","icon","onClick"]),r="button"===t?_:d.K;return(0,i.h)(r,Object.assign({label:n||"",hideLabel:!0,icons:`codicon codicon-${o}`,onClick:l},s))},g=({state:e,endAdornment:t},n)=>{const{icons:o,smartButton:a,disabled:l,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,s.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)(f,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,h.i)(u)?u:{}))),(0,h.i)(a)&&v.push((0,i.h)(f,Object.assign({componentName:"button",class:"kol-input-container__smart-button"},a,{hideLabel:!0,disabled:l}))),p&&v.push((0,i.h)(f,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,h.i)(p)?p:{}))),(0,i.h)(b,{disabled:l,msg:r,touched:d,startAdornment:m,endAdornment:v},n)};class y extends s.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)}}},2329:(e,t,n)=>{n.d(t,{K:()=>a});var i=n(8290),o=n(9477);const a=e=>{const{class:t,style:n,icons:a,label:l,onClick:s}=e;return(0,i.h)(o.d,{class:t,style:n,onClick:s,_icons:a,_label:l})}},2383:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(1263);const o=(e,t)=>{(0,i.E)(e,"_rows",t,{min:1})}},4678:(e,t,n)=>{n.r(t),n.d(t,{kol_textarea:()=>g});var i=n(8290),o=n(8984),a=n(1263),l=n(4657),s=n(5198),r=n(1380),d=n(2048),c=n(876),h=n(2383),u=n(7775),p=(n(1627),n(9613),n(8458),n(9477),n(4608),n(1062),n(2439),n(2731),n(3353),n(9828),n(8809),n(9626),n(5855),n(9298),n(1823),n(3703),n(7793),n(2329),n(7877),n(6497),(e,t,n)=>new Promise(((i,o)=>{var a=e=>{try{s(n.next(e))}catch(e){o(e)}},l=e=>{try{s(n.throw(e))}catch(e){o(e)}},s=e=>e.done?i(e.value):Promise.resolve(e.value).then(a,l);s((n=n.apply(e,t)).next())})));const m=["vertical","none"],v=e=>{const{class:t,msg:n,touched:a,readonly:l,disabled:d,required:c,ariaDescribedBy:h,hideLabel:u,label:p}=e,m=(0,r._)(e,["class","msg","touched","readonly","disabled","required","ariaDescribedBy","hideLabel","label"]),v=(0,s.c)(n,a),b={"kol-textarea--disabled":Boolean(d),"kol-textarea--required":Boolean(c),"kol-textarea--touched":Boolean(a),"kol-textarea--readonly":Boolean(l),[`kol-textarea--${(null==n?void 0:n.type)||"error"}`]:v},_=Object.assign(Object.assign({class:(0,o.c)("kol-textarea",b,t),required:c,disabled:d,readonly:l},(0,s.e)({ariaDescribedBy:h,hideLabel:u,label:p})),m);return(0,i.h)("textarea",Object.assign({},_))},b=e=>{var{state:t}=e,n=(0,r._)(e,["state"]);return(0,i.h)(v,Object.assign({},function(e){const{ariaDescribedBy:t}=(0,s.g)(e);return{id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,rows:e._rows,readonly:e._readOnly,required:e._required,placeholder:e._placeholder,maxLength:e._maxLength,touched:e._touched,msg:(0,s.a)(e._msg)}}(t),n))};class _ extends d.I{constructor(e,t,n){super(e,t,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=e}validateHasCounter(e){(0,c.v)(this.component,e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(e){(0,a.E)(this.component,"_maxLength",e,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(e){(0,a.B)(this.component,"_placeholder",e)}validateReadOnly(e){(0,a.i)(this.component,"_readOnly",e)}validateResize(e){(0,a.w)(this.component,"_resize",(e=>"string"==typeof e&&m.includes(e)),new Set(`String {${m.join(", ")}`),e,{defaultValue:"vertical"})}validateRequired(e){(0,a.i)(this.component,"_required",e)}validateRows(e){(0,h.v)(this.component,e)}validateSpellCheck(e){(0,u.v)(this.component,e)}validateValue(e){(0,a.B)(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateSpellCheck(this.component._spellCheck),this.validateValue(this.component._value)}}const f=e=>{e.style.overflow="hidden";const t=e.rows,n=e.clientHeight/t;e.rows=1;const i=Math.round(e.scrollHeight/n);return e.rows=t,i},g=class{getValue(){return p(this,null,(function*(){var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.value}))}kolFocus(){return p(this,null,(function*(){var e;null===(e=this.textareaRef)||void 0===e||e.focus()}))}getFormFieldProps(){return{state:this.state,class:(0,o.c)("kol-form-field-textarea",{"kol-form-field--has-value":this.state._hasValue,"kol-form-field--has-counter":!!this.state._hasCounter}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getTextAreaProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state,style:{resize:this.state._resize}},this.controller.onFacade),{onInput:this.onInput,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return(0,i.h)(s.F,Object.assign({key:"754dea74a89ae00f840540e45092d145055a30cd"},this.getFormFieldProps()),(0,i.h)(d.a,{key:"c6823b12d2ee282a62dabd16e2c42509abe62862",state:this.state},(0,i.h)(b,Object.assign({key:"aa8ab23c18521e393e14a9ad716de8928d40a2ae"},this.getTextAreaProps()))))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{this.textareaRef=e},this.onInput=e=>{if(this.textareaRef instanceof HTMLTextAreaElement){const t=this.textareaRef.value;(0,a.l)(this,"_currentLength",t.length),this._value=t,this.state._adjustHeight&&(this._rows=f(this.textareaRef)),this.controller.onFacade.onInput(e)}},this._accessKey=void 0,this._adjustHeight=!1,this._disabled=!1,this._hasCounter=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._resize="vertical",this._required=!1,this._rows=void 0,this._shortKey=void 0,this._spellCheck=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_hideMsg:!1,_id:`id-${(0,l.n)()}`,_label:"",_resize:"vertical"},this.inputHasFocus=!1,this.controller=new _(this,"textarea",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSpellCheck(e){this.controller.validateSpellCheck(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentDidLoad(){setTimeout((()=>{var e;!0===this._adjustHeight&&this.textareaRef?this._rows=(null===(e=this.state)||void 0===e?void 0:e._rows)&&this.state._rows>f(this.textareaRef)?this.state._rows:f(this.textareaRef):this._rows||(this._rows=1)}),0)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_disabled:["validateDisabled"],_hasCounter:["validateHasCounter"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};g.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-textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  .kol-textarea:focus {\n    outline: none;\n  }\n}"}},6497:(e,t,n)=>{n.d(t,{v:()=>l});var i=n(1263);const o=(e,t,n)=>{(0,i.x)(n)?e[t]=n:(0,i.t)(n,1)&&(e[t]={icon:n})},a=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,i.v)(e.style))&&(void 0===e.label||(0,i.t)(e.label))&&(0,i.t)(e.icon,1),l=(e,t,n={})=>{(0,i.o)(t,(()=>{var l;try{t=(0,i.k)(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.t)(e,1)||"object"==typeof e&&null!==e&&((0,i.t)(e.left,1)||a(e.left)||(0,i.t)(e.right,1)||a(e.right)||(0,i.t)(e.top,1)||a(e.top)||(0,i.t)(e.bottom,1)||a(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(l=n.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(e,t,a,l)=>{var s,r;"function"==typeof(null===(s=n.hooks)||void 0===s?void 0:s.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(e,t,a,l)),(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.t)(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)}}}))}))}},7775:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(1263);const o=(e,t)=>{(0,i.i)(e,"_spellCheck",t,{defaultValue:void 0})}},7877:(e,t,n)=>{function i(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}n.d(t,{i:()=>i})}}]);

package/dist/473.js

@@ -0,0 +1,2 @@
+/*! For license information please see 473.js.LICENSE.txt */
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[473],{473:(n,e,t)=>{t.r(e),t.d(e,{kol_drawer:()=>c});var i=t(8290),o=t(1263),a=t(1627),l=t(8984),r=t(2731),s=t(9828),d=t(1105),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.l)(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}"}},1105:(n,e,t)=>{t.d(e,{v:()=>o});var i=t(1263);const o=(n,e,t)=>{(0,i.i)(n,"_open",e,t)}},2731:(n,e,t)=>{t.d(e,{a:()=>o,v:()=>l});var i=t(1263);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)}},8984:(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})},9828:(n,e,t)=>{t.d(e,{a:()=>c,b:()=>r,c:()=>s,h:()=>o,v:()=>h});var i=t(1263);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.c)(`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}}]);

package/dist/4812.js

@@ -0,0 +1,2 @@
+/*! For license information please see 4812.js.LICENSE.txt */
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4812],{2439:(t,e,n)=>{n.d(e,{v:()=>a});var i=n(2731);n(1263);const a=(t,e)=>{(0,i.a)(t,"_tooltipAlign",e)}},2731:(t,e,n)=>{n.d(e,{a:()=>a,v:()=>s});var i=n(1263);const a=(t,e,n)=>{(0,i.w)(t,e,(t=>"string"==typeof t&&o.includes(t)),new Set(o),n,{defaultValue:"top"})},o=["left","right","top","bottom"],s=(t,e)=>{a(t,"_align",e)}},3060:(t,e,n)=>{n.d(e,{v:()=>a});var i=n(1263);const a=(t,e)=>{(0,i.B)(t,"_customClass",e,{defaultValue:void 0})}},4657:(t,e,n)=>{n.d(e,{i:()=>s,n:()=>r,r:()=>l});var i=n(1263),a=n(8290);const o=()=>{let t=(0,i.h)().KoliBri;return void 0===t&&(t={},Object.defineProperty((0,i.h)(),"KoliBri",{value:t,writable:!1})),t},s=()=>{(()=>{const t=(0,i.g)().querySelector('meta[name="kolibri"]');if(t&&t.hasAttribute("content")){const e=t.getAttribute("content");"string"==typeof e&&((0,i.s)(e.includes("dev-mode=true")),(0,i.d)(e.includes("experimental-mode=true")),(0,i.e)(e.includes("color-contrast-analysis=true")))}})(),i.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${a.E.kolibriVersion}\n\t`,{forceLog:!0})},l=()=>{!0!==o().adviceShown&&(Object.defineProperty(o(),"adviceShown",{get:function(){return!0}}),i.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let r=()=>Math.floor(16777215*Math.random()).toString(16);"test"===i.p&&(r=()=>"nonce")},4812:(t,e,n)=>{n.r(e),n.d(e,{kol_pagination:()=>v});var i=n(8290),a=n(1263),o=n(9626),s=n(4657),l=n(8433),r=n(9477),h=n(1627),c=n(3060),d=n(9828),p=n(2439);n(4608),n(2731);const u={left:"codicon codicon-debug-reverse-continue"},g={left:"codicon codicon-chevron-left"},_={right:"codicon codicon-chevron-right"},b={right:"codicon codicon-debug-continue"},f=function(){const t=navigator.language||"de-DE";return t.includes("-")?t:`${t}-${t.toUpperCase()}`}(),m=new Intl.NumberFormat(f,{style:"decimal",minimumFractionDigits:0,maximumFractionDigits:0}),v=class{constructor(t){(0,i.r)(this,t),this.nonce=(0,s.n)(),this.calcCount=(t,e=1)=>Math.ceil(t/e),this.getCount=()=>this.calcCount(this.state._max,this.state._pageSize),this.onClick=(t,e)=>{"function"==typeof this.state._on.onClick&&this.state._on.onClick(t,e),this.host&&(0,h.d)(this.host,h.K.click,e),this.onChangePage(t,e)},this.onChangePage=(t,e)=>{const n=setTimeout((()=>{clearTimeout(n),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,e),this.host&&(0,h.d)(this.host,h.K.changePage,e)}))},this.onChangePageSize=(t,e)=>{if("number"==typeof(e=parseInt(e[0]))&&e>0&&this._pageSize!==e){this._pageSize=e;const n=setTimeout((()=>{clearTimeout(n),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize),this.host&&(0,h.d)(this.host,h.K.changePageSize,this._pageSize)}))}},this.onGoToFirst={onClick:t=>{this.onClick(t,1)}},this.onGoToEnd={onClick:t=>{this.onClick(t,this.getCount())}},this.onGoBackward={onClick:t=>{this.onClick(t,this.state._page-1)}},this.onGoForward={onClick:t=>{this.onClick(t,this.state._page+1)}},this.beforePageSize=(t,e)=>{let n=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;const i=e.has("_pageSizeOptions")?e.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(i)&&i.length>0){const t=i.find((t=>t.value===n));n=void 0===t?i[0].value:t.value,e.set("_pageSize",n)}const a=e.has("_page")?e.get("_page"):this.state._page,o=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,a,e.get("_pageSize"),o)},this.syncPage=(t,e,n,i)=>{if(i>0){const o=this.calcCount(i,n);o>0&&(e>o?(t.set("_page",o),this.onChangePage(a.S,o)):e<1&&(t.set("_page",1),this.onChangePage(a.S,1)))}},this.beforePageSizeOptions=(t,e)=>{const n=[];if(Array.isArray(t))for(const e of t)"number"==typeof e&&n.push({label:(0,o.t)("kol-page-per-site",{placeholders:{entries:`${e}`}}),value:e});e.set("_pageSizeOptions",n),this.beforePageSize(n,e)},this._boundaryCount=1,this._customClass=void 0,this._label=void 0,this._hasButtons=!0,this._page=void 0,this._pageSize=1,this._pageSizeOptions=[],this._on=void 0,this._siblingCount=1,this._tooltipAlign="top",this._max=void 0,this.state={_boundaryCount:1,_label:(0,o.t)("kol-pagination"),_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_max:0}}render(){var t;let e=!1;const n=this.getCount(),a=Array.from(Array(n).keys()).map((t=>t+1)).map((t=>t<=this.state._boundaryCount||t>n-this.state._boundaryCount||t>=this.state._page-this.state._siblingCount&&t<=this.state._page+this.state._siblingCount?(e=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===e?(e=!1,(0,i.h)("li",{key:(0,s.n)()},(0,i.h)("span",{class:"kol-pagination__separator","aria-hidden":"true"}))):null));return(0,i.h)(i.H,{class:"kol-pagination"},(0,i.h)("nav",{class:"kol-pagination__navigation","aria-label":this.state._label},(0,i.h)("ul",{class:"kol-pagination__navigation-list"},this.state._hasButtons.first&&(0,i.h)("li",null,(0,i.h)(r.a,{class:"kol-pagination__button kol-pagination__button--first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:u,_hideLabel:!0,_label:(0,o.t)("kol-page-first"),_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&(0,i.h)("li",null,(0,i.h)(r.a,{class:"kol-pagination__button kol-pagination__button--previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:g,_hideLabel:!0,_label:(0,o.t)("kol-page-back"),_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),a,this.state._hasButtons.next&&(0,i.h)("li",null,(0,i.h)(r.a,{class:"kol-pagination__button kol-pagination__button--next",exportparts:"icon",_customClass:this.state._customClass,_disabled:n<=this.state._page,_icons:_,_hideLabel:!0,_label:(0,o.t)("kol-page-next"),_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&(0,i.h)("li",null,(0,i.h)(r.a,{class:"kol-pagination__button kol-pagination__button--last",exportparts:"icon",_customClass:this.state._customClass,_disabled:n<=this.state._page,_icons:b,_hideLabel:!0,_label:(0,o.t)("kol-page-last"),_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&(0,i.h)(r.h,{class:"kol-pagination__page-size-select",_hideLabel:!0,_id:`pagination-size-${this.nonce}`,_label:(0,o.t)("kol-entries-per-site"),_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:[this.state._pageSize]}))}getUnselectedPageButton(t){return(0,i.h)("li",{key:(0,s.n)()},(0,i.h)(r.a,{exportparts:"icon",_customClass:this.state._customClass,_label:"",_on:{onClick:e=>{this.onClick(e,t)}}},(0,i.h)("span",{slot:"expert"},(0,i.h)("span",{class:"visually-hidden"},(0,o.t)("kol-page"))," ",m.format(t))))}getSelectedPageButton(t){return(0,i.h)("li",{key:(0,s.n)()},(0,i.h)(r.a,{class:"kol-pagination__button kol-pagination__button--selected",_customClass:this.state._customClass,_disabled:!0,_label:""},(0,i.h)("span",{slot:"expert"},(0,i.h)("span",{class:"visually-hidden"},(0,o.t)("kol-page"))," ",m.format(t))))}validateBoundaryCount(t){(0,a.E)(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){(0,c.v)(this,t)}validateLabel(t,e,n=!1){n||(0,l.r)(this.state._label),(0,d.v)(this,t),(0,l.a)(this.state._label)}validateHasButtons(t){(0,a.w)(this,"_hasButtons",(t=>"boolean"==typeof t||"string"==typeof t||"object"==typeof t&&null!==t),new Set(["Boolean","PaginationHasButton"]),t,{hooks:{beforePatch:(t,e)=>{if("boolean"==typeof t)e.set("_hasButtons",{first:t,last:t,next:t,previous:t});else{if("string"==typeof t)try{t=(0,a.k)(t)}catch(t){e.delete("_hasButtons")}"object"==typeof t&&null!==t&&e.set("_hasButtons",Object.assign(Object.assign({},this.state._hasButtons),{first:"boolean"==typeof t.first?!0===t.first:this.state._hasButtons.first,last:"boolean"==typeof t.last?!0===t.last:this.state._hasButtons.last,next:"boolean"==typeof t.next?!0===t.next:this.state._hasButtons.next,previous:"boolean"==typeof t.previous?!0===t.previous:this.state._hasButtons.previous}))}}}})}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validatePage(t){(0,a.E)(this,"_page",t,{hooks:{beforePatch:(t,e)=>{const n=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize,i=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,t,n,i)}}})}validatePageSize(t){(0,a.E)(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){(0,a.z)(this,"_pageSizeOptions",(t=>"number"==typeof t),t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){(0,a.E)(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){((t,e,n)=>{(0,a.E)(t,"_max",e,n)})(this,t,{hooks:{beforePatch:(t,e)=>{const n=e.has("_page")?e.get("_page"):this.state._page,i=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;this.syncPage(e,n,i,t)}}})}validateTooltipAlign(t){(0,p.v)(this,t)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount),this.validateCustomClass(this._customClass),this.validateHasButtons(this._hasButtons),this.validateLabel(this._label,void 0,!0),this.validateOn(this._on),this.validatePage(this._page),this.validatePageSize(this._pageSize),this.validatePageSizeOptions(this._pageSizeOptions),this.validateSiblingCount(this._siblingCount),this.validateTooltipAlign(this._tooltipAlign),this.validateMax(this._max),this.validatePage(this._page)}disconnectedCallback(){(0,l.r)(this.state._label)}get host(){return(0,i.g)(this)}static get watchers(){return{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}}};v.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  /* TODO. Once #7126 is completed, move :host block into .kol-pagination  */\n  :host {\n    align-items: center;\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n  }\n  .kol-pagination__navigation-list {\n    align-items: center;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: 0.5em;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-pagination__separator:before {\n    content: \"•••\";\n  }\n}"}},8433:(t,e,n)=>{n.d(e,{a:()=>o,r:()=>s});var i=n(1263);const a=new Set;function o(t){a.has(t)?i.L.warn(`There already is a nav element with the label "${t}"`):a.add(t)}function s(t){a.delete(t)}},9626:(t,e,n)=>{n.d(e,{t:()=>o});var i=n(4608),a=n(1263);let o=(t,e)=>{var n;return(null!==(n=(0,i.g)())&&void 0!==n?n:(0,i.i)("de")).translate(t,e)};"test"===a.p&&(o=t=>t)},9828:(t,e,n)=>{n.d(e,{a:()=>d,b:()=>l,c:()=>r,h:()=>a,v:()=>c});var i=n(1263);const a=[0,1,2,3,4,5,6],o=/[a-zA-Z0-9äöüÄÖÜß]/g,s=/^\d+$/;function l(t,e=1){return function(t){var e;return"string"==typeof t&&(null===(e=t.match(o))||void 0===e?void 0:e.length)||0}(t)>=e}function r(t){return s.test(t)}const h=new Set(["string"]),c=(t,e,n={})=>{(0,i.w)(t,"_label",(t=>"string"==typeof t),h,e,function(t){var e;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(e,n,a,o)=>{var s,h;"function"==typeof(null===(s=t.hooks)||void 0===s?void 0:s.afterPatch)&&(null===(h=t.hooks)||void 0===h||h.afterPatch(e,n,a,o)),"string"==typeof e&&!1===l(e,3)&&!1===r(e)&&(0,i.c)(`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=t.hooks)||void 0===e?void 0:e.beforePatch}})}(n))},d=c}}]);

package/dist/4843.js

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

package/dist/4879.js

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

package/dist/4992.js

@@ -0,0 +1,2 @@
+/*! For license information please see 4992.js.LICENSE.txt */
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4992],{667:(t,n,e)=>{e.d(n,{I:()=>l});var o=e(1380),i=e(8290),a=e(8984),s=(e(1263),e(5198));const l=t=>{const{class:n,msg:e,required:l,disabled:r,touched:c,readonly:d,ariaDescribedBy:u,hideLabel:h,label:p,suggestions:m,value:b}=t,g=(0,o._)(t,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),_=(0,s.c)(e,c),v={"kol-input--disabled":Boolean(r),"kol-input--required":Boolean(l),"kol-input--touched":Boolean(c),"kol-input--readonly":Boolean(d),[`kol-input--${(null==e?void 0:e.type)||"error"}`]:_},f=Object.assign(Object.assign({class:(0,a.c)("kol-input",v,n),required:l,disabled:r,readonly:d,type:"text",list:m?`${g.id}-list`:void 0},(0,s.e)({ariaDescribedBy:u,hideLabel:h,label:p})),g);return(0,i.h)(i.F,null,(0,i.h)("input",Object.assign({},f,{value:b})),m)}},2048:(t,n,e)=>{e.d(n,{I:()=>y,K:()=>v,a:()=>f});var o=e(8290),i=e(1263),a=e(1380),s=e(8984),l=e(5198),r=e(9477),c=e(2329),d=e(3703),u=e(7877),h=e(6497);const p=(t,n)=>{var{position:e="start",class:i}=t,l=(0,a._)(t,["position","class"]);const r="kol-input-container__adornment",c=`${r}--${e}`;return(0,o.h)("div",Object.assign({class:(0,s.c)(r,c,i)},l),n)};function m(t){return!!t&&(Array.isArray(t)?t.length>0:Boolean(t))}const b=(t,n)=>{var{class:e}=t,i=(0,a._)(t,["class"]);return(0,o.h)("div",Object.assign({class:(0,s.c)("kol-input-container__container",e)},i),n)},g=(t,n)=>{const{class:e,startAdornment:i,endAdornment:r,disabled:c,msg:d,touched:u,containerProps:h,startAdornmentProps:g,endAdornmentProps:_}=t,v=(0,a._)(t,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),f=(0,l.c)(d,u),y={"kol-input-container--disabled":c,[`kol-input-container--${(null==d?void 0:d.type)||"error"}`]:f},k=Object.assign({class:(0,s.c)("kol-input-container",y,e)},v);return m(i)||m(r)?(0,o.h)("div",Object.assign({},k),(0,o.h)(p,Object.assign({},g,{position:"start"}),i),(0,o.h)(b,Object.assign({},h),n),(0,o.h)(p,Object.assign({},_,{position:"end"}),r)):(0,o.h)("div",Object.assign({},k),(0,o.h)(b,Object.assign({},h),n))},_=t=>{const{label:n,icons:e,hideLabel:i,disabled:s,onClick:l}=t,c=(0,a._)(t,["label","icons","hideLabel","disabled","onClick"]);return(0,o.h)(r.a,Object.assign({_label:n,_disabled:s,_icons:e,_hideLabel:i,_on:{onClick:l}},c))},v=t=>{const{componentName:n="button",label:e,icon:i,onClick:s}=t,l=(0,a._)(t,["componentName","label","icon","onClick"]),r="button"===n?_:c.K;return(0,o.h)(r,Object.assign({label:e||"",hideLabel:!0,icons:`codicon codicon-${i}`,onClick:s},l))},f=({state:t,endAdornment:n},e)=>{const{icons:i,smartButton:a,disabled:s,msg:r,touched:c}=function(t){let n,e;return"_icons"in t&&(n=t._icons),"_smartButton"in t&&(e=t._smartButton),{icons:n,smartButton:e,disabled:t._disabled,msg:(0,l.a)(t._msg),touched:t._touched}}(t);let h=null==i?void 0:i.left;(0,d.i)(h)&&(h={icon:h});let p=null==i?void 0:i.right;(0,d.i)(p)&&(p={icon:p});const m=[],b=[];return n&&(Array.isArray(n)?b.push(...n):b.push(n)),h&&m.push((0,o.h)(v,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,u.i)(h)?h:{}))),(0,u.i)(a)&&b.push((0,o.h)(v,Object.assign({componentName:"button",class:"kol-input-container__smart-button"},a,{hideLabel:!0,disabled:s}))),p&&b.push((0,o.h)(v,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,u.i)(p)?p:{}))),(0,o.h)(g,{disabled:s,msg:r,touched:c,startAdornment:m,endAdornment:b},e)};class y extends l.I{constructor(t,n,e){super(t,n,e),this.numberStringRegex=/^\d+(\.\d+)?$/,this.parseToNumber=t=>"number"==typeof t?isNaN(t)?null:t:this.isNumberString(t)?parseFloat(t):null,this.validateNumber=(t,n)=>(0,i.w)(this.component,t,(t=>null==t||"number"==typeof t||"string"==typeof t&&this.numberStringRegex.test(t)),new Set(["number","NumberString"]),n,{hooks:{beforePatch:(n,e)=>{(null==e?void 0:e.has(t))&&(null==e||e.set(t,this.parseToNumber(n)))}}}),this.component=t}validateIcons(t){(0,h.v)(this.component,t)}isNumberString(t){return"string"==typeof t&&this.numberStringRegex.test(t)}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},2329:(t,n,e)=>{e.d(n,{K:()=>a});var o=e(8290),i=e(9477);const a=t=>{const{class:n,style:e,icons:a,label:s,onClick:l}=t;return(0,o.h)(i.d,{class:n,style:e,onClick:l,_icons:a,_label:s})}},4992:(t,n,e)=>{e.r(n),e.d(n,{kol_input_color:()=>m});var o=e(8290),i=e(1380),a=e(4657),s=e(5198),l=e(5375),r=e(2048),c=e(1263),d=e(9960),u=(e(1627),e(9613),e(8458),e(9477),e(4608),e(1062),e(2439),e(2731),e(3353),e(9828),e(8984),e(8809),e(9626),e(5855),e(9298),e(1823),e(3703),e(7793),e(667),e(2329),e(7877),e(6497),(t,n,e)=>new Promise(((o,i)=>{var a=t=>{try{l(e.next(t))}catch(t){i(t)}},s=t=>{try{l(e.throw(t))}catch(t){i(t)}},l=t=>t.done?o(t.value):Promise.resolve(t.value).then(a,s);l((e=e.apply(t,n)).next())})));const h=["on","off"];class p extends r.I{constructor(t,n,e){super(t,n,e),this.component=t}validateAutoComplete(t){(0,c.w)(this.component,"_autoComplete",(t=>"string"==typeof t&&h.includes(t)),new Set(h),t)}validateSuggestions(t){(0,d.v)(this.component,t)}validateValue(t){(0,c.B)(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const m=class{getValue(){return u(this,null,(function*(){var t;return null===(t=this.refInputText)||void 0===t?void 0:t.value}))}kolFocus(){return u(this,null,(function*(){var t;null===(t=this.refInputText)||void 0===t||t.focus()}))}get hasSuggestions(){return Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0}getFormFieldProps(){return{state:this.state,class:"kol-input-color",tooltipAlign:this._tooltipAlign,onClick:()=>{var t;return null===(t=this.refInputText)||void 0===t?void 0:t.focus()},alert:this.showAsAlert()}}getInputColorProps(){return Object.assign(Object.assign({},this.getGenericInputProps()),{ref:this.catchColorRef,type:"color",name:this.state._name?`${this.state._name}-color`:void 0,list:this.hasSuggestions?`${this.state._id}-list`:void 0,id:void 0,"aria-hidden":"true",tabIndex:-1,onInput:this.onColorInput})}getInputTextProps(){return Object.assign(Object.assign({},this.getGenericInputProps()),{ref:this.catchRef,type:"text",name:this.state._name?`${this.state._name}-text`:void 0,list:this.hasSuggestions?`${this.state._id}-list`:void 0,onInput:this.onTextInput})}getGenericInputProps(){const t=this.state,n=(0,i._)(t,["_suggestions"]);return Object.assign(Object.assign({state:Object.assign(Object.assign({},n),{_suggestions:[]})},this.controller.onFacade),{onBlur:this.onBlur,onFocus:this.onFocus})}render(){return(0,o.h)(s.F,Object.assign({key:"4618fa8ab667bdc8d8418ddb9a5612298c70a52f"},this.getFormFieldProps()),(0,o.h)(r.a,{key:"fe5ab536ae149d533ca24d048722def43b9414c8",state:this.state,class:"kol-input-color__inputs-wrapper"},(0,o.h)("div",{key:"5152e937fb33845d08374862d90487b507132edf",class:"kol-input-color__inputs-wrapper"},(0,o.h)(l.I,Object.assign({key:"4f256a72a9b3f45c4153a63a6c865ff5e5d50bfb",class:"kol-input-color__input kol-input-color__input--color"},this.getInputColorProps())),(0,o.h)(l.I,Object.assign({key:"bb9edc748af69658ba7082624c75ff0c05527415",class:"kol-input-color__input kol-input-color__input--text"},this.getInputTextProps())))))}constructor(t){(0,o.r)(this,t),this.catchRef=t=>{this.refInputText=t},this.catchColorRef=t=>{this.refInputColor=t},this.onBlur=t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1},this.onFocus=t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},this.onColorInput=t=>{const n=t.target.value;this.state._value=n,this.refInputText&&(this.refInputText.value=n),this.controller.onFacade.onInput(t)},this.onTextInput=t=>{let n=t.target.value;n.startsWith("#")||(n=`#${n}`),this._value=n,this.refInputColor&&(this.refInputColor.value=n),this.controller.onFacade.onInput(t)},this._accessKey=void 0,this._autoComplete=void 0,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._shortKey=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hideMsg:!1,_id:`id-${(0,a.n)()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new p(this,"color",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateHideMsg(t){this.controller.validateHideMsg(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentDidLoad(){!this._value&&this.refInputColor&&(this._value=this.refInputColor.value)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return(0,o.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};m.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}\n.kol-input-color__input--color {\n  flex-grow: 1;\n}\n.kol-input-color__input--text {\n  width: calc(112rem / var(--kolibri-root-font-size, 16));\n}\n.kol-input-color__inputs-wrapper {\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: calc(6rem / var(--kolibri-root-font-size, 16)) !important;\n}\n\n.kol-input {\n  cursor: pointer;\n}\n.kol-input:disabled {\n  cursor: not-allowed;\n}"}},5375:(t,n,e)=>{e.d(n,{I:()=>r,S:()=>l});var o=e(1380),i=e(8290),a=e(667),s=(e(1263),e(5198));const l=t=>{var{id:n,suggestions:e}=t,a=(0,o._)(t,["id","suggestions"]);return e?(0,i.h)("datalist",Object.assign({id:`${n}-list`},a),e.map((t=>(0,i.h)("option",{value:t})))):null},r=t=>{var{state:n,customSuggestions:e}=t,r=(0,o._)(t,["state","customSuggestions"]);return(0,i.h)(a.I,Object.assign({},function(t,n){const{ariaDescribedBy:e}=(0,s.g)(t),o={id:t._id,hideLabel:t._hideLabel,label:t._label,disabled:t._disabled,name:t._name,ariaDescribedBy:e};return"_accessKey"in t&&(o.accessKey=t._accessKey),"_type"in t&&(o.type=t._type),"_value"in t&&(o.value=t._value),"_required"in t&&(o.required=t._required),"_maxLength"in t&&(o.maxlength=t._maxLength),"_placeholder"in t&&(o.placeholder=t._placeholder),"_autoComplete"in t&&(o.autoComplete=t._autoComplete),"_spellCheck"in t&&(o.spellcheck=t._spellCheck),"_pattern"in t&&(o.pattern=t._pattern),"_readOnly"in t&&(o.readonly=t._readOnly),"_min"in t&&(o.min=t._min),"_max"in t&&(o.max=t._max),"_step"in t&&(o.step=t._step),"_multiple"in t&&(o.multiple=t._multiple),"_checked"in t&&(o.checked=t._checked),"_indeterminate"in t&&(o.indeterminate=t._indeterminate),"_touched"in t&&(o.touched=t._touched),"_msg"in t&&(o.msg=(0,s.a)(t._msg)),"_suggestions"in t&&!n&&Array.isArray(t._suggestions)&&t._suggestions.length>0&&(o.suggestions=(0,i.h)(l,{id:t._id,suggestions:t._suggestions})),o}(n,e),r))}},6497:(t,n,e)=>{e.d(n,{v:()=>s});var o=e(1263);const i=(t,n,e)=>{(0,o.x)(e)?t[n]=e:(0,o.t)(e,1)&&(t[n]={icon:e})},a=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,o.v)(t.style))&&(void 0===t.label||(0,o.t)(t.label))&&(0,o.t)(t.icon,1),s=(t,n,e={})=>{(0,o.o)(n,(()=>{var s;try{n=(0,o.k)(n)}catch(t){}(0,o.w)(t,"_icons",(t=>{const n="object"==typeof t&&null!==t&&0===Object.keys(t).length;return null===t||n||(0,o.t)(t,1)||"object"==typeof t&&null!==t&&((0,o.t)(t.left,1)||a(t.left)||(0,o.t)(t.right,1)||a(t.right)||(0,o.t)(t.top,1)||a(t.top)||(0,o.t)(t.bottom,1)||a(t.bottom))}),new Set(["KoliBriIcon"]),n,Object.assign(Object.assign({},e),{defaultValue:{},hooks:{afterPatch:null===(s=e.hooks)||void 0===s?void 0:s.afterPatch,beforePatch:(t,n,a,s)=>{var l,r;"function"==typeof(null===(l=e.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(r=e.hooks)||void 0===r||r.beforePatch(t,n,a,s)),(t=>{var n,e,a;if(null===(n=t.nextState)||void 0===n?void 0:n.has("_icons")){const n=null===(e=t.nextState)||void 0===e?void 0:e.get("_icons");null===(a=t.nextState)||void 0===a||a.set("_icons",(t=>{let n={};return(0,o.t)(t,1)?n={left:{icon:t}}:"object"==typeof t&&null!==t&&(i(n,"top",t.top),i(n,"right",t.right),i(n,"bottom",t.bottom),i(n,"left",t.left)),n})(n))}})(a)}}}))}))}},7877:(t,n,e)=>{function o(t){var n=typeof t;return null!=t&&("object"==n||"function"==n)}e.d(n,{i:()=>o})},9960:(t,n,e)=>{e.d(n,{v:()=>i});var o=e(1263);const i=(t,n)=>{(0,o.z)(t,"_suggestions",(t=>"string"==typeof t||"number"==typeof t),n,void 0,{hooks:{afterPatch:t=>{Array.isArray(t)&&t.length&&(0,o.c)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);

package/dist/5011.js

@@ -0,0 +1,2 @@
+/*! For license information please see 5011.js.LICENSE.txt */
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5011],{5011:(n,e,t)=>{t.r(e),t.d(e,{kol_skip_nav:()=>r});var i=t(8290),a=(t(1263),t(8433)),o=t(9496),l=t(9477),s=t(9828);const r=class{constructor(n){(0,i.r)(this,n),this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return(0,i.h)("nav",{key:"6696f974f96add5529fce40c73c96429d6d46c14",class:"kol-skip-nav","aria-label":this.state._label},(0,i.h)("ul",{key:"44472c7c253cb6bdffd89d999d9b5f11a39bad22",class:"kol-skip-nav__list"},this.state._links.map(((n,e)=>(0,i.h)("li",{class:"kol-skip-nav__list-item",key:e},(0,i.h)(l.e,Object.assign({},n)))))))}validateLabel(n,e,t=!1){t||(0,a.r)(this.state._label),(0,s.v)(this,n,{required:!0}),(0,a.a)(this.state._label)}validateLinks(n){(0,o.w)("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){(0,a.r)(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};r.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-skip-nav {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-skip-nav__list {\n    display: grid;\n    list-style: none;\n    place-items: center;\n  }\n  .kol-skip-nav__list-item {\n    height: 0;\n  }\n  .kol-skip-nav .kol-link {\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .kol-skip-nav .kol-link:focus {\n    background-color: #fff;\n    left: unset;\n    position: unset;\n  }\n}"}},8433:(n,e,t)=>{t.d(e,{a:()=>o,r:()=>l});var i=t(1263);const a=new Set;function o(n){a.has(n)?i.L.warn(`There already is a nav element with the label "${n}"`):a.add(n)}function l(n){a.delete(n)}},9496:(n,e,t)=>{t.d(e,{w:()=>a});var i=t(1263);const a=(n,e,t)=>{(0,i.z)(e,"_links",(n=>"object"==typeof n&&("string"==typeof n._href||"string"==typeof n._label)),t),(0,i.A)(n,e.state._links.length)}},9828:(n,e,t)=>{t.d(e,{a:()=>c,b:()=>s,c:()=>r,h:()=>a,v:()=>h});var i=t(1263);const a=[0,1,2,3,4,5,6],o=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(o))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const d=new Set(["string"]),h=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),d,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,a,o)=>{var l,d;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(e,t,a,o)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,i.c)(`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}}]);

package/dist/{4201.js → 5389.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)}}}]);
+/*! For license information please see 5389.js.LICENSE.txt */
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5389],{5389:(n,e,t)=>{t.r(e),t.d(e,{kol_breadcrumb:()=>c});var i=t(8290),o=t(1263),a=t(8433),l=t(9496),s=t(9477),r=t(9828);const c=class{constructor(n){(0,i.r)(this,n),this.renderLink=(n,e)=>{const t=this.state._links.length-1;return(0,i.h)("li",{class:"kol-breadcrumb__list-element",key:e},0!==e&&(0,i.h)(s.d,{class:"kol-breadcrumb__icon",_label:"",_icons:"codicon codicon-chevron-right"}),e===t?(0,i.h)("span",{class:"kol-breadcrumb__list-element-span"},n._hideLabel?(0,i.h)(s.d,{class:"kol-breadcrumb__icon",_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):(0,i.h)(i.F,null,n._label)):(0,i.h)(s.e,Object.assign({class:"kol-breadcrumb__link"},n)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return(0,i.h)("nav",{key:"ec5c76bf09d3c9feaaf2e54dea8849f3df35f8cf",class:"kol-breadcrumb","aria-label":this.state._label},(0,i.h)("ul",{key:"58258d0d211e35b1c10ea81d57ce664b5b365da1",class:"kol-breadcrumb__list"},0===this.state._links.length&&(0,i.h)("li",{key:"380473fa2c97a40a8f36042a7859edc30a13dcea"},(0,i.h)(s.d,{key:"6f9289fa4d708da3b9bfbb7da105db05807dce39",class:"kol-breadcrumb_icon",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink)))}validateLabel(n,e,t=!1){t||(0,a.r)(this.state._label),(0,r.v)(this,n,{required:!0}),(0,o.y)(n),(0,a.a)(this.state._label)}validateLinks(n){(0,l.w)("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){(0,a.r)(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};c.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    align-items: baseline;\n    display: inline-flex;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-breadcrumb {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-breadcrumb__list, .kol-breadcrumb__list-element {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    place-items: center;\n  }\n  .kol-breadcrumb__icon::part(separator) {\n    font-weight: 900;\n    font-size: 0.7em;\n  }\n  .kol-breadcrumb__icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}"}},8433:(n,e,t)=>{t.d(e,{a:()=>a,r:()=>l});var i=t(1263);const o=new Set;function a(n){o.has(n)?i.L.warn(`There already is a nav element with the label "${n}"`):o.add(n)}function l(n){o.delete(n)}},9496:(n,e,t)=>{t.d(e,{w:()=>o});var i=t(1263);const o=(n,e,t)=>{(0,i.z)(e,"_links",(n=>"object"==typeof n&&("string"==typeof n._href||"string"==typeof n._label)),t),(0,i.A)(n,e.state._links.length)}},9828:(n,e,t)=>{t.d(e,{a:()=>h,b:()=>s,c:()=>r,h:()=>o,v:()=>d});var i=t(1263);const o=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(a))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const c=new Set(["string"]),d=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),c,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,o,a)=>{var l,c;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(c=n.hooks)||void 0===c||c.afterPatch(e,t,o,a)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,i.c)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},h=d}}]);

package/dist/5395.js

@@ -0,0 +1,2 @@
+/*! For license information please see 5395.js.LICENSE.txt */
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5395],{5395:(e,t,l)=>{l.r(t),l.d(t,{kol_tree_wc:()=>o});var i=l(8290),n=(l(1263),l(9477)),r=l(9828),s=(e,t,l)=>new Promise(((i,n)=>{var r=e=>{try{o(l.next(e))}catch(e){n(e)}},s=e=>{try{o(l.throw(e))}catch(e){n(e)}},o=e=>e.done?i(e.value):Promise.resolve(e.value).then(r,s);o((l=l.apply(e,t)).next())}));const o=class{constructor(e){(0,i.r)(this,e),this.state={_label:""},this._label=void 0}validateLabel(e){(0,r.v)(this,e)}render(){return(0,i.h)(i.H,{key:"05d1fdf7fc5589847e2fdce7b3d307860721ccd2",onSlotchange:this.handleSlotchange.bind(this)},(0,i.h)("nav",{key:"b03ad56f3ce550d09d22efa04e23273588093034",class:"kol-tree","aria-label":this.state._label},(0,i.h)("ul",{key:"7b7e4fc2e98037621beb67e6dcdd00f7072d3878",class:"kol-tree__treeview-navigation",role:"tree","aria-label":this.state._label},(0,i.h)("slot",{key:"c6bd99309dd93b1eb88031533f17f25c0e9952c7"}))))}static isTreeItem(e){return(null==e?void 0:e.tagName)===n.x.toUpperCase()}componentWillLoad(){this.validateLabel(this._label),this.handleTreeChange(),this.observeChildListMutations()}disconnectedCallback(){var e;null===(e=this.observer)||void 0===e||e.disconnect()}observeChildListMutations(){this.observer=new MutationObserver(this.handleTreeChange.bind(this)),this.observeTopLevelItems()}handleSlotchange(){this.observeTopLevelItems(),this.handleTreeChange()}observeTopLevelItems(){var e;null===(e=this.getTopLevelTreeItems())||void 0===e||e.forEach((e=>{var t;null===(t=this.observer)||void 0===t||t.observe(e,{childList:!0,subtree:!0})}))}getTopLevelTreeItems(){var e,t,l;return null===(l=null===(t=null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedNodes)||void 0===t?void 0:t.call(e))||void 0===l?void 0:l.filter(o.isTreeItem)}handleTreeChange(){this.treeItemElements=this.getTreeItemElements(),this.ensureActiveItemVisibility()}getTreeItemElements(){var e;return null===(e=this.getTopLevelTreeItems())||void 0===e?void 0:e.reduce(((e,t)=>{const l=t.querySelectorAll(n.x);return[...e,t,...l]}),[])}getOpenTreeItemElements(){return s(this,null,(function*(){if(!this.treeItemElements)return;const e=t=>s(this,null,(function*(){return!o.isTreeItem(t.parentElement)||(yield t.parentElement.isOpen())&&(yield e(t.parentElement))}));return(yield Promise.all(this.treeItemElements.map((t=>s(this,null,(function*(){return{value:t,include:yield e(t)}})))))).filter((e=>e.include)).map((e=>e.value))}))}handleKeyDown(e){return s(this,null,(function*(){var t,l,i,r,s,o,a,d,c;const u=yield this.getOpenTreeItemElements(),v=null===(t=document.activeElement)||void 0===t?void 0:t.closest(n.x),h=e.metaKey||e.altKey||e.ctrlKey||e.shiftKey;if(!u||!v)return;const f=null==u?void 0:u.findIndex((e=>e===v));switch(e.key){case"ArrowDown":yield null===(l=u[f+1])||void 0===l?void 0:l.focusLink(),e.preventDefault();break;case"ArrowUp":yield null===(i=u[f-1])||void 0===i?void 0:i.focusLink(),e.preventDefault();break;case"Right":case"ArrowRight":e.preventDefault(),(yield v.isOpen())?yield null===(r=u[f+1])||void 0===r?void 0:r.focusLink():yield v.expand();break;case"Left":case"ArrowLeft":if(e.preventDefault(),yield v.isOpen())yield v.collapse();else{const e=u.findIndex((e=>e===v.parentElement));-1!==e&&(yield null===(s=u[e])||void 0===s?void 0:s.focusLink())}break;case"Home":yield null===(o=u[0])||void 0===o?void 0:o.focusLink(),e.preventDefault();break;case"End":yield null===(a=u[u.length-1])||void 0===a?void 0:a.focusLink(),e.preventDefault();break;case null===(d=e.key.match(/^[a-zA-Z0-9]$/))||void 0===d?void 0:d.input:if(!h){const t=e.key.toLowerCase(),l=u.indexOf(v)+1,i=u.concat(u),n=i.slice(l,l+u.length).findIndex((e=>{var l;return null===(l=e.getAttribute("_label"))||void 0===l?void 0:l.trim().toLowerCase().startsWith(t)}));-1!==n&&(yield i[l+n].focusLink(),e.preventDefault())}break;case"*":{const e=null===(c=v.parentElement)||void 0===c?void 0:c.querySelectorAll(n.x);null==e||e.forEach((e=>{e.expand()}));break}}}))}handleFocusOut(e){return s(this,null,(function*(){e.relatedTarget&&!e.relatedTarget.closest(n.w)&&(yield this.ensureActiveItemVisibility())}))}ensureActiveItemVisibility(){return s(this,null,(function*(){const e=t=>{o.isTreeItem(t.parentElement)&&(t.parentElement.expand(),e(t.parentElement))},t=(()=>{var e,t,l,i;const r=null!==(i=null===(l=null===(t=null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedNodes)||void 0===t?void 0:t.call(e))||void 0===l?void 0:l.filter(o.isTreeItem))&&void 0!==i?i:[];for(const e of r){if(e._active)return e;const t=e.querySelector(`${n.x}[_active="true"]`);if(t&&t._active)return t}})();t&&e(t)}))}get host(){return(0,i.g)(this)}static get watchers(){return{_label:["validateLabel"]}}}},9828:(e,t,l)=>{l.d(t,{a:()=>u,b:()=>o,c:()=>a,h:()=>n,v:()=>c});var i=l(1263);const n=[0,1,2,3,4,5,6],r=/[a-zA-Z0-9äöüÄÖÜß]/g,s=/^\d+$/;function o(e,t=1){return function(e){var t;return"string"==typeof e&&(null===(t=e.match(r))||void 0===t?void 0:t.length)||0}(e)>=t}function a(e){return s.test(e)}const d=new Set(["string"]),c=(e,t,l={})=>{(0,i.w)(e,"_label",(e=>"string"==typeof e),d,t,function(e){var t;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(t,l,n,r)=>{var s,d;"function"==typeof(null===(s=e.hooks)||void 0===s?void 0:s.afterPatch)&&(null===(d=e.hooks)||void 0===d||d.afterPatch(t,l,n,r)),"string"==typeof t&&!1===o(t,3)&&!1===a(t)&&(0,i.c)(`The heading or label ("${t}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof t&&t.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(t=e.hooks)||void 0===t?void 0:t.beforePatch}})}(l))},u=c}}]);

package/dist/5663.js

@@ -0,0 +1,2 @@
+/*! For license information please see 5663.js.LICENSE.txt */
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5663],{667:(e,t,n)=>{n.d(t,{I:()=>l});var i=n(1380),o=n(8290),s=n(8984),a=(n(1263),n(5198));const l=e=>{const{class:t,msg:n,required:l,disabled:r,touched:d,readonly:c,ariaDescribedBy:h,hideLabel:u,label:p,suggestions:g,value:b}=e,_=(0,i._)(e,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),m=(0,a.c)(n,d),v={"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",v,t),required:l,disabled:r,readonly:c,type:"text",list:g?`${_.id}-list`:void 0},(0,a.e)({ariaDescribedBy:h,hideLabel:u,label:p})),_);return(0,o.h)(o.F,null,(0,o.h)("input",Object.assign({},f,{value:b})),g)}},2048:(e,t,n)=>{n.d(t,{I:()=>y,K:()=>v,a:()=>f});var i=n(8290),o=n(1263),s=n(1380),a=n(8984),l=n(5198),r=n(9477),d=n(2329),c=n(3703),h=n(7877),u=n(6497);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 g(e){return!!e&&(Array.isArray(e)?e.length>0:Boolean(e))}const b=(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)},_=(e,t)=>{const{class:n,startAdornment:o,endAdornment:r,disabled:d,msg:c,touched:h,containerProps:u,startAdornmentProps:_,endAdornmentProps:m}=e,v=(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)},v);return g(o)||g(r)?(0,i.h)("div",Object.assign({},k),(0,i.h)(p,Object.assign({},_,{position:"start"}),o),(0,i.h)(b,Object.assign({},u),t),(0,i.h)(p,Object.assign({},m,{position:"end"}),r)):(0,i.h)("div",Object.assign({},k),(0,i.h)(b,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))},v=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 g=[],b=[];return t&&(Array.isArray(t)?b.push(...t):b.push(t)),u&&g.push((0,i.h)(v,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,h.i)(u)?u:{}))),(0,h.i)(s)&&b.push((0,i.h)(v,Object.assign({componentName:"button",class:"kol-input-container__smart-button"},s,{hideLabel:!0,disabled:a}))),p&&b.push((0,i.h)(v,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,h.i)(p)?p:{}))),(0,i.h)(_,{disabled:a,msg:r,touched:d,startAdornment:g,endAdornment:b},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)}}},2329:(e,t,n)=>{n.d(t,{K:()=>s});var i=n(8290),o=n(9477);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})}},5375:(e,t,n)=>{n.d(t,{I:()=>r,S:()=>l});var i=n(1380),o=n(8290),s=n(667),a=(n(1263),n(5198));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,disabled:e._disabled,name:e._name,ariaDescribedBy:n};return"_accessKey"in e&&(i.accessKey=e._accessKey),"_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))}},5663:(e,t,n)=>{n.r(t),n.d(t,{kol_combobox:()=>g});var i=n(8290),o=n(8984),s=n(4657),a=n(5198),l=n(1263),r=n(2048),d=n(9960),c=n(8461),h=n(5375),u=(n(1627),n(9613),n(8458),n(9477),n(4608),n(1062),n(2439),n(2731),n(3353),n(9828),n(1380),n(8809),n(9626),n(5855),n(9298),n(1823),n(3703),n(7793),n(2329),n(7877),n(6497),n(667),(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 p extends r.I{constructor(e,t,n){super(e,t,n),this.component=e}validatePlaceholder(e){(0,l.B)(this.component,"_placeholder",e)}validateRequired(e){(0,l.i)(this.component,"_required",e)}validateSuggestions(e){(0,d.v)(this.component,e)}validateValue(e){(0,l.B)(this.component,"_value",e)}componentWillLoad(){super.componentWillLoad(),this.validatePlaceholder(this.component._placeholder),this.validateRequired(this.component._required),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const g=class{getValue(){return u(this,null,(function*(){return this.state._value}))}kolFocus(){return u(this,null,(function*(){var e;null===(e=this.refInput)||void 0===e||e.focus()}))}selectOption(e){var t;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),this.controller.setFormAssociatedValue(e),this.state._value=e,null===(t=this.refInput)||void 0===t||t.focus()}onInput(e){const t=e.target;this.state._value=t.value,this._value=t.value,this.controller.onFacade.onInput(e),this.setFilteredSuggestionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredSuggestionsByQuery(e){""===e.trim()?this._filteredSuggestions=[...this._suggestions]:(this._filteredSuggestions=Array.isArray(this._suggestions)?this._suggestions.filter((t=>t.toLowerCase().includes(e.toLowerCase()))):this._filteredSuggestions,this._isOpen=!!(this._filteredSuggestions&&this._filteredSuggestions.length>0))}moveFocus(e){if(!this._filteredSuggestions)return;let t=this._focusedOptionIndex+e;t>=this._filteredSuggestions.length&&(t=0),t<0&&(t=this._filteredSuggestions.length-1),this.focusOption(t)}focusOption(e){if(this._focusedOptionIndex=e,this.refSuggestions){const t=this.refSuggestions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),n=Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.findIndex((e=>e.toLowerCase().startsWith(t)));"number"==typeof n&&this.focusOption(n)}getFormFieldProps(){return{state:this.state,class:(0,o.c)("kol-combobox",{"has-value":this.state._hasValue}),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,c.g)(this.state);return Object.assign(Object.assign({ref:this.catchRef,state:this.state,class:"kol-combobox__input",type:"text",role:"combobox","aria-autocomplete":"both","aria-expanded":this._isOpen?"true":"false","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,"aria-labelledby":this.state._id,"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,value:this.state._value,accessKey:this.state._accessKey,autocapitalize:"off",autocorrect:"off",disabled:this.state._disabled,customSuggestions:!0,id:this.state._id,name:this.state._name,required:this.state._required},this.controller.onFacade),{onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},onChange:this.onChange.bind(this),onInput:this.onInput.bind(this),placeholder:this.state._placeholder})}render(){return(0,i.h)(a.F,Object.assign({key:"7518c6b1ba75658aa9b3101ebfb371ed8ad3409e"},this.getFormFieldProps()),(0,i.h)(r.a,{key:"b8cf517f39abdac1f97a497e7dab07beb6b146c7",state:this.state},(0,i.h)("div",{key:"3ec383f5f9c883b6bb555811ec8901ff98709a05",class:"kol-combobox__group"},(0,i.h)(h.I,Object.assign({key:"58838796460e841e2ae6d2a322c9c2409f18653e"},this.getInputProps())),(0,i.h)(c.C,{key:"b585a1dcb6a8a23b31e2a639f6dfaa8f3286be73",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled})),this._isOpen&&!(!0===this.state._disabled)&&(0,i.h)(c.a,{key:"e2e27ed383625650c0349b091d7e766829e3cd4b",blockSuggestionMouseOver:this.blockSuggestionMouseOver,onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.map(((e,t)=>(0,i.h)(c.b,{index:t,option:e,ref:e=>{e&&(this.refSuggestions[t]=e)},selected:this.state._value===e,onClick:()=>{this.selectOption(e),this.toggleListbox(),this._isOpen=!1,this._hasOpened=!1},onMouseOver:()=>{this.blockSuggestionMouseOver||this.focusOption(t)},onFocus:()=>{this.focusOption(t)},onKeyDown:t=>{"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(e),this.toggleListbox(),t.preventDefault())}}))))))}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=!1,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":this._hasOpened=!1,this._isOpen=!1,e.preventDefault(),null===(n=this.refInput)||void 0===n||n.focus();break;case"NumpadEnter":case"Enter":this._isOpen&&this._focusedOptionIndex>=0?(this._filteredSuggestions&&this.selectOption(this._filteredSuggestions[this._focusedOptionIndex]),this._isOpen=!1,this._hasOpened=!1):this.toggleListbox(),e.preventDefault();break;case"Home":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&this.focusOption(0)}));break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&this.focusOption(this._filteredSuggestions?this._filteredSuggestions.length-1:0)}));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)))}}handleWindowClick(e){null==this.host||this.host.contains(e.target)||(this._isOpen=!1)}constructor(e){(0,i.r)(this,e),this.refSuggestions=[],this._focusedOptionIndex=-1,this.toggleListbox=()=>{var e;if(!0===this.state._disabled)this._isOpen=!1;else if(null===(e=this.refInput)||void 0===e||e.focus(),!this._hasOpened&&Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0){this._isOpen=!0,this._hasOpened=!0;const e=this._filteredSuggestions.findIndex((e=>e===this.state._value));this._focusedOptionIndex=e>=0?e:-1,this.focusOption(this._focusedOptionIndex)}},this.catchRef=e=>{this.refInput=e},this.blockSuggestionMouseOver=!1,this._isOpen=!1,this._filteredSuggestions=void 0,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._suggestions=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideMsg:!1,_id:`id-${(0,s.n)()}`,_label:"",_suggestions:[],_value:""},this.inputHasFocus=!1,this.controller=new p(this,"combobox",this.host),this.onInput=this.onInput.bind(this)}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)}validateShortKey(e){this.controller.validateShortKey(e)}validateSuggestions(e){this.controller.validateSuggestions(e),this._filteredSuggestions=e}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.controller.setFormAssociatedValue(e)}componentWillLoad(){this.refSuggestions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e)),this._filteredSuggestions=this.state._suggestions}handleMouseEvent(){this.blockSuggestionMouseOver=!1}handleFocusOut(){setTimeout((()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()}),0)}handleWindowBlur(){this.onBlur()}onBlur(){var e;this._hasOpened=!1,this._isOpen&&(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus())}onChange(e){this.controller.onFacade.onChange(e),this.controller.setFormAssociatedValue(this.state._value)}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"],_shortKey:["validateShortKey"],_suggestions:["validateSuggestions"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};g.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}"}},6497:(e,t,n)=>{n.d(t,{v:()=>a});var i=n(1263);const o=(e,t,n)=>{(0,i.x)(n)?e[t]=n:(0,i.t)(n,1)&&(e[t]={icon:n})},s=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,i.v)(e.style))&&(void 0===e.label||(0,i.t)(e.label))&&(0,i.t)(e.icon,1),a=(e,t,n={})=>{(0,i.o)(t,(()=>{var a;try{t=(0,i.k)(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.t)(e,1)||"object"==typeof e&&null!==e&&((0,i.t)(e.left,1)||s(e.left)||(0,i.t)(e.right,1)||s(e.right)||(0,i.t)(e.top,1)||s(e.top)||(0,i.t)(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.t)(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)}}}))}))}},7877:(e,t,n)=>{function i(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}n.d(t,{i:()=>i})},8461:(e,t,n)=>{n.d(t,{C:()=>r,a:()=>c,b:()=>d,g:()=>l});var i=n(8290),o=n(9477),s=n(9626),a=n(8984);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)},9960:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(1263);const o=(e,t)=>{(0,i.z)(e,"_suggestions",(e=>"string"==typeof e||"number"==typeof e),t,void 0,{hooks:{afterPatch:e=>{Array.isArray(e)&&e.length&&(0,i.c)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);