@public-ui/sample-react 2.2.0 → 2.2.1-daf78eefb286eb2b5af07293e65a52004723eadc.0

package/dist/5034.js

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

package/dist/5056.js

@@ -1,2 +1,2 @@
 /*! For license information please see 5056.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5056],{1100:(t,a,e)=>{e.d(a,{t:()=>l});var s=e(8457),r=e(1523);let l=(t,a)=>{var e;return(null!==(e=(0,s.g)())&&void 0!==e?e:(0,s.i)("de")).translate(t,a)};"test"===r.p&&(l=t=>t)},3045:(t,a,e)=>{e.d(a,{v:()=>r});var s=e(3101);const r=(t,a,e)=>{(0,s.i)(t,"_src",a,e)}},5056:(t,a,e)=>{e.r(a),e.d(a,{kol_avatar_wc:()=>n});var s=e(0),r=e(1100),l=e(3045),i=e(1116);const c=t=>0===t.length?"":t[0].toUpperCase(),n=class{constructor(t){(0,s.r)(this,t),this._src=void 0,this._label=void 0,this.state={_src:"",_label:""}}render(){return(0,s.h)(s.H,{key:"86f7131aa138416061a7f01ba50ec3981e57af17",class:"kol-avatar-wc"},(0,s.h)("div",{key:"7beb1f7fa76c09e7bad2282d374d6085420c308c","aria-label":(0,r.t)("kol-avatar-alt",{placeholders:{name:this.state._label}}),class:"container",role:"img"},this.state._src?(0,s.h)("img",{alt:"","aria-hidden":"true",class:"image",src:this.state._src}):(0,s.h)("span",{"aria-hidden":"true",class:"initials"},(t=>{const a=t.split(/\s+/),e=a.at(0),s=a.at(-1);return a.length>=2&&e&&s?`${c(e)}${c(s)}`:c(t)})(this.state._label.trim()))))}validateSrc(t){(0,l.v)(this,t)}validateLabel(t){(0,i.v)(this,t,{required:!0})}componentWillLoad(){this.validateSrc(this._src),this.validateLabel(this._label)}static get watchers(){return{_src:["validateSrc"],_label:["validateLabel"]}}}},1116:(t,a,e)=>{e.d(a,{a:()=>d,b:()=>c,c:()=>n,h:()=>r,v:()=>h});var s=e(3101);const r=[0,1,2,3,4,5,6],l=/[a-zA-Z0-9äöüÄÖÜß]/g,i=/^\d+$/;function c(t,a=1){return function(t){var a;return"string"==typeof t&&(null===(a=t.match(l))||void 0===a?void 0:a.length)||0}(t)>=a}function n(t){return i.test(t)}const o=new Set(["string"]),h=(t,a,e={})=>{(0,s.w)(t,"_label",(t=>"string"==typeof t),o,a,function(t){var a;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(a,e,r,l)=>{var i,o;"function"==typeof(null===(i=t.hooks)||void 0===i?void 0:i.afterPatch)&&(null===(o=t.hooks)||void 0===o||o.afterPatch(a,e,r,l)),"string"==typeof a&&!1===c(a,3)&&!1===n(a)&&(0,s.a)(`The heading or label ("${a}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof a&&a.length>80&&(0,s.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(a=t.hooks)||void 0===a?void 0:a.beforePatch}})}(e))},d=h},1523:(t,a,e)=>{e.d(a,{b:()=>i,h:()=>r,p:()=>s,s:()=>l});let s="development";try{s="production"}catch(t){s="production"}const r=(t,a,e)=>{if(t&&a&&"string"==typeof e){const s=t.querySelector(`[slot="${e}"]`);s&&a.appendChild(s)}},l=t=>""===t,i=(t,a)=>t||a||""}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5056],{1100:(t,a,e)=>{e.d(a,{t:()=>l});var s=e(8457),r=e(1523);let l=(t,a)=>{var e;return(null!==(e=(0,s.g)())&&void 0!==e?e:(0,s.i)("de")).translate(t,a)};"test"===r.p&&(l=t=>t)},8509:(t,a,e)=>{e.d(a,{v:()=>r});var s=e(5396);const r=(t,a,e)=>{(0,s.i)(t,"_src",a,e)}},5056:(t,a,e)=>{e.r(a),e.d(a,{kol_avatar_wc:()=>n});var s=e(1316),r=e(1100),l=e(8509),i=e(2235);const c=t=>0===t.length?"":t[0].toUpperCase(),n=class{constructor(t){(0,s.r)(this,t),this._src=void 0,this._label=void 0,this.state={_src:"",_label:""}}render(){return(0,s.h)(s.H,{key:"86f7131aa138416061a7f01ba50ec3981e57af17",class:"kol-avatar-wc"},(0,s.h)("div",{key:"7beb1f7fa76c09e7bad2282d374d6085420c308c","aria-label":(0,r.t)("kol-avatar-alt",{placeholders:{name:this.state._label}}),class:"container",role:"img"},this.state._src?(0,s.h)("img",{alt:"","aria-hidden":"true",class:"image",src:this.state._src}):(0,s.h)("span",{"aria-hidden":"true",class:"initials"},(t=>{const a=t.split(/\s+/),e=a.at(0),s=a.at(-1);return a.length>=2&&e&&s?`${c(e)}${c(s)}`:c(t)})(this.state._label.trim()))))}validateSrc(t){(0,l.v)(this,t)}validateLabel(t){(0,i.v)(this,t,{required:!0})}componentWillLoad(){this.validateSrc(this._src),this.validateLabel(this._label)}static get watchers(){return{_src:["validateSrc"],_label:["validateLabel"]}}}},2235:(t,a,e)=>{e.d(a,{a:()=>d,b:()=>c,c:()=>n,h:()=>r,v:()=>h});var s=e(5396);const r=[0,1,2,3,4,5,6],l=/[a-zA-Z0-9äöüÄÖÜß]/g,i=/^\d+$/;function c(t,a=1){return function(t){var a;return"string"==typeof t&&(null===(a=t.match(l))||void 0===a?void 0:a.length)||0}(t)>=a}function n(t){return i.test(t)}const o=new Set(["string"]),h=(t,a,e={})=>{(0,s.w)(t,"_label",(t=>"string"==typeof t),o,a,function(t){var a;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(a,e,r,l)=>{var i,o;"function"==typeof(null===(i=t.hooks)||void 0===i?void 0:i.afterPatch)&&(null===(o=t.hooks)||void 0===o||o.afterPatch(a,e,r,l)),"string"==typeof a&&!1===c(a,3)&&!1===n(a)&&(0,s.a)(`The heading or label ("${a}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof a&&a.length>80&&(0,s.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(a=t.hooks)||void 0===a?void 0:a.beforePatch}})}(e))},d=h},1523:(t,a,e)=>{e.d(a,{b:()=>i,h:()=>r,p:()=>s,s:()=>l});let s="development";try{s="production"}catch(t){s="production"}const r=(t,a,e)=>{if(t&&a&&"string"==typeof e){const s=t.querySelector(`[slot="${e}"]`);s&&a.appendChild(s)}},l=t=>""===t,i=(t,a)=>t||a||""}}]);

package/dist/5138.js

@@ -1,2 +1,2 @@
 /*! For license information please see 5138.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5138],{5138:(e,t,s)=>{s.r(t),s.d(t,{kol_popover_wc:()=>a});var i=s(0),o=s(4618),r=s(3101),n=s(6448),h=s(5001),l=s(5508);const a=class{constructor(e){(0,i.r)(this,e),this.hidePopoverByEscape=e=>{"Escape"===e.key&&this.hidePopover(e)},this.hidePopoverByClickOutside=e=>{this.host&&!this.host.contains(e.target)&&this.hidePopover(e)},this.catchHostAndTriggerElement=e=>{e&&(this.host=e,this.triggerElement=e.previousElementSibling)},this.catchPopoverElement=e=>{this.popoverElement=e},this.catchArrowElement=e=>{this.arrowElement=e},this._align="top",this._on=void 0,this._show=!1,this.state={_align:"top",_on:{},_show:!1,_visible:!1}}showPopover(){return e=this,t=function*(){this.addListenersToBody(),this.triggerElement&&this.popoverElement&&(yield(0,o.a)({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.state=Object.assign(Object.assign({},this.state),{_visible:!0}))},new Promise(((s,i)=>{var o=e=>{try{n(t.next(e))}catch(e){i(e)}},r=e=>{try{n(t.throw(e))}catch(e){i(e)}},n=e=>e.done?s(e.value):Promise.resolve(e.value).then(o,r);n((t=t.apply(e,null)).next())}));var e,t}hidePopover(e){var t,s,i;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody(),null===(i=null===(s=this.state._on)||void 0===s?void 0:s.onClose)||void 0===i||i.call(s,e)}addListenersToBody(){var e;const t=(0,n.g)().body;t.addEventListener("keyup",this.hidePopoverByEscape),t.addEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var e;const t=(0,n.g)().body;t.removeEventListener("keyup",this.hidePopoverByEscape),t.removeEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return(0,i.h)(i.H,{key:"c9c429d2ab88094fdd44fc60e98e584620ab5f69",ref:this.catchHostAndTriggerElement,class:"kol-popover"},(0,i.h)("div",{key:"3273b90d3470f426f9fda0d822d0ac53e7271e75",class:{popover:!0,show:this.state._visible},ref:this.catchPopoverElement,hidden:!this.state._show},(0,i.h)("div",{key:"823fa670c74d381037ec0cccd348bc70b0b8cada",class:`arrow ${this.state._align}`,ref:this.catchArrowElement}),(0,i.h)("slot",{key:"941723ef75a9631c9314c4f8d18f63910e1ed392"})))}validateAlign(e){(0,h.a)(this,e)}validateOn(e){((e,t)=>{(0,r.w)(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)})(this,e)}validateShow(e){(0,l.v)(this,e),e&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_on:["validateOn"],_show:["validateShow"]}}}},5508:(e,t,s)=>{s.d(t,{v:()=>o});var i=s(3101);const o=(e,t,s)=>{(0,i.b)(e,"_show",t,s)}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5138],{5138:(e,t,s)=>{s.r(t),s.d(t,{kol_popover_wc:()=>a});var i=s(1316),o=s(4618),r=s(5396),n=s(6448),h=s(3404),l=s(8766);const a=class{constructor(e){(0,i.r)(this,e),this.hidePopoverByEscape=e=>{"Escape"===e.key&&this.hidePopover(e)},this.hidePopoverByClickOutside=e=>{this.host&&!this.host.contains(e.target)&&this.hidePopover(e)},this.catchHostAndTriggerElement=e=>{e&&(this.host=e,this.triggerElement=e.previousElementSibling)},this.catchPopoverElement=e=>{this.popoverElement=e},this.catchArrowElement=e=>{this.arrowElement=e},this._align="top",this._on=void 0,this._show=!1,this.state={_align:"top",_on:{},_show:!1,_visible:!1}}showPopover(){return e=this,t=function*(){this.addListenersToBody(),this.triggerElement&&this.popoverElement&&(yield(0,o.a)({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.state=Object.assign(Object.assign({},this.state),{_visible:!0}))},new Promise(((s,i)=>{var o=e=>{try{n(t.next(e))}catch(e){i(e)}},r=e=>{try{n(t.throw(e))}catch(e){i(e)}},n=e=>e.done?s(e.value):Promise.resolve(e.value).then(o,r);n((t=t.apply(e,null)).next())}));var e,t}hidePopover(e){var t,s,i;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody(),null===(i=null===(s=this.state._on)||void 0===s?void 0:s.onClose)||void 0===i||i.call(s,e)}addListenersToBody(){var e;const t=(0,n.g)().body;t.addEventListener("keyup",this.hidePopoverByEscape),t.addEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var e;const t=(0,n.g)().body;t.removeEventListener("keyup",this.hidePopoverByEscape),t.removeEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return(0,i.h)(i.H,{key:"c9c429d2ab88094fdd44fc60e98e584620ab5f69",ref:this.catchHostAndTriggerElement,class:"kol-popover"},(0,i.h)("div",{key:"3273b90d3470f426f9fda0d822d0ac53e7271e75",class:{popover:!0,show:this.state._visible},ref:this.catchPopoverElement,hidden:!this.state._show},(0,i.h)("div",{key:"823fa670c74d381037ec0cccd348bc70b0b8cada",class:`arrow ${this.state._align}`,ref:this.catchArrowElement}),(0,i.h)("slot",{key:"941723ef75a9631c9314c4f8d18f63910e1ed392"})))}validateAlign(e){(0,h.a)(this,e)}validateOn(e){((e,t)=>{(0,r.w)(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)})(this,e)}validateShow(e){(0,l.v)(this,e),e&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_on:["validateOn"],_show:["validateShow"]}}}},8766:(e,t,s)=>{s.d(t,{v:()=>o});var i=s(5396);const o=(e,t,s)=>{(0,i.b)(e,"_show",t,s)}}}]);

package/dist/5296.js

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

package/dist/5356.js

@@ -1,2 +1,2 @@
 /*! For license information please see 5356.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5356],{5746:(n,e,t)=>{t.d(e,{K:()=>s});var i=t(3133),o=t(0),a=t(4600),l=t(1491);const s=(n,e)=>{const{id:t,class:s,label:r,level:c=1,disabled:d,open:h,onClick:p,HeadingProps:u={},HeadingButtonProps:b={},ContentProps:f={}}=n,v=(0,i._)(n,["id","class","label","level","disabled","open","onClick","HeadingProps","HeadingButtonProps","ContentProps"]),m=h?"remove":"add";return(0,o.h)("div",Object.assign({id:t,class:(0,a.c)("collapsible",{disabled:!0===d,open:!0===h},s)},v),(0,o.h)(l.b,{ref:null==u?void 0:u.ref,_label:"",_level:c,class:(0,a.c)("collapsible__heading",null==u?void 0:u.class)},(0,o.h)(l.c,{class:(0,a.c)("collapsible__heading-button",null==b?void 0:b.class),ref:null==b?void 0:b.ref,slot:"expert",_ariaControls:`${t}-control`,_ariaExpanded:h,_disabled:d,_icons:(null==b?void 0:b._icons)||`codicon codicon-${m}`,_label:r,_on:{onClick:p}})),(0,o.h)("div",{class:(0,a.c)("collapsible__wrapper",null==f?void 0:f.wrapperClass)},(0,o.h)("div",{class:(0,a.c)("collapsible__wrapper-animation",null==f?void 0:f.animationClass)},(0,o.h)("div",{"aria-hidden":!1===h?"true":void 0,class:(0,a.c)("collapsible__content",null==f?void 0:f.class),id:`${t}-control`},e))))}},4600:(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})},2896:(n,e,t)=>{t.d(e,{i:()=>s,n:()=>c,r:()=>r});var i=t(0),o=t(1523),a=t(6448);const l=()=>{let n=(0,a.d)().KoliBri;return void 0===n&&(n={},Object.defineProperty((0,a.d)(),"KoliBri",{value:n,writable:!1})),n},s=()=>{(()=>{const n=(0,a.g)().querySelector('meta[name="kolibri"]');if(n&&n.hasAttribute("content")){const e=n.getAttribute("content");"string"==typeof e&&((0,a.s)(e.includes("dev-mode=true")),(0,a.b)(e.includes("experimental-mode=true")),(0,a.c)(e.includes("color-contrast-analysis=true")))}})(),a.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${i.E.kolibriVersion}\n\t`,{forceLog:!0})},r=()=>{!0!==l().adviceShown&&(Object.defineProperty(l(),"adviceShown",{get:function(){return!0}}),a.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let c=()=>Math.floor(16777215*Math.random()).toString(16);"test"===o.p&&(c=()=>"nonce")},9588:(n,e,t)=>{t.d(e,{v:()=>o});var i=t(3101);const o=(n,e)=>{(0,i.b)(n,"_disabled",e,{hooks:{afterPatch:n=>{!0===n&&(0,i.c)()}}})}},5356:(n,e,t)=>{t.r(e),t.d(e,{kol_accordion:()=>p});var i=t(0),o=t(2896),a=t(6447),l=t(3101),s=t(5746),r=t(9588),c=t(3924),d=t(1116),h=(n,e,t)=>new Promise(((i,o)=>{var a=n=>{try{s(t.next(n))}catch(n){o(n)}},l=n=>{try{s(t.throw(n))}catch(n){o(n)}},s=n=>n.done?i(n.value):Promise.resolve(n.value).then(a,l);s((t=t.apply(n,e)).next())}));(0,l.f)("[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend"),(0,l.f)("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const p=class{constructor(n){(0,i.r)(this,n),this.nonce=(0,o.n)(),this.catchRef=n=>{this.buttonWcRef=n},this.handleOnClick=n=>{this._open=!this._open,setTimeout((()=>{var e,t;null===(t=null===(e=this.state._on)||void 0===e?void 0:e.onClick)||void 0===t||t.call(e,n,!0===this._open)}))},this._disabled=!1,this._label=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_label:"",_level:1,_on:{}}}focus(){return h(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return h(this,null,(function*(){var n;yield null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus()}))}render(){const{_open:n,_label:e,_disabled:t,_level:o}=this.state,a="accordion",l={id:this.nonce,label:e,open:n,disabled:t,level:o,onClick:this.handleOnClick,class:a,HeadingProps:{class:`${a}__heading`},HeadingButtonProps:{ref:this.catchRef,class:`${a}__heading-button`},ContentProps:{class:`${a}__content`,wrapperClass:`${a}__wrapper`,animationClass:`${a}__wrapper-animation`}};return(0,i.h)(i.H,{key:"0c90ac4971377eafa18b4d3503512c08f640fe4d",class:"kol-accordion"},(0,i.h)(s.K,Object.assign({key:"a78d600359191321145fff75647e93c277041eaa"},l),(0,i.h)("slot",{key:"7c898afbcafceecda7651eccf152e44b7434d823"})))}validateDisabled(n){(0,r.v)(this,n)}validateLabel(n){(0,d.v)(this,n,{required:!0})}validateLevel(n){(0,a.w)(this,n)}validateOn(n){var e;e=n,(0,l.w)(this,"_on",(n=>"object"==typeof n&&null!==n),new Set(["AccordionCallbacksPropType {Events.onClick}"]),e)}validateOpen(n){(0,c.v)(this,n)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};p.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n  .collapsible {\n    /* @see https://github.com/public-ui/kolibri/issues/5952 */\n    /*\n          * Inside a button, the caption text is always centered.\n          * So we have to align the text to the left.\n          */\n  }\n  .collapsible__wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    overflow: hidden;\n    transition: grid-template-rows 0.3s;\n  }\n  .collapsible__wrapper-animation {\n    min-height: 0;\n    transition: visibility 0.3s;\n    /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n    visibility: hidden;\n  }\n  .open .collapsible__wrapper {\n    grid-template-rows: 1fr;\n  }\n  .open .collapsible__wrapper-animation {\n    visibility: visible;\n  }\n  @media (prefers-reduced-motion) {\n    .collapsible__wrapper-animation, .collapsible__wrapper {\n      transition-duration: 0s;\n    }\n  }\n  @media print {\n    :not(.open) .collapsible__wrapper-animation {\n      display: none;\n    }\n  }\n  .collapsible__heading-button button .kol-span-wc {\n    justify-items: start;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}"}},1116:(n,e,t)=>{t.d(e,{a:()=>h,b:()=>s,c:()=>r,h:()=>o,v:()=>d});var i=t(3101);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.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},h=d},3924:(n,e,t)=>{t.d(e,{v:()=>o});var i=t(3101);const o=(n,e,t)=>{(0,i.b)(n,"_open",e,t)}},1523:(n,e,t)=>{t.d(e,{b:()=>l,h:()=>o,p:()=>i,s:()=>a});let i="development";try{i="production"}catch(n){i="production"}const o=(n,e,t)=>{if(n&&e&&"string"==typeof t){const i=n.querySelector(`[slot="${t}"]`);i&&e.appendChild(i)}},a=n=>""===n,l=(n,e)=>n||e||""},3133:(n,e,t)=>{function i(n,e){var t={};for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&e.indexOf(i)<0&&(t[i]=n[i]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(n);o<i.length;o++)e.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(n,i[o])&&(t[i[o]]=n[i[o]])}return t}t.d(e,{_:()=>i}),"function"==typeof SuppressedError&&SuppressedError},6447:(n,e,t)=>{t.d(e,{w:()=>a});var i=t(1116),o=t(3101);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})}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5356],{9328:(n,e,t)=>{t.d(e,{K:()=>s});var i=t(3133),o=t(1316),a=t(4600),l=t(1491);const s=(n,e)=>{const{id:t,class:s,label:r,level:c=1,disabled:d,open:h,onClick:p,HeadingProps:u={},HeadingButtonProps:b={},ContentProps:f={}}=n,v=(0,i._)(n,["id","class","label","level","disabled","open","onClick","HeadingProps","HeadingButtonProps","ContentProps"]),m=h?"remove":"add";return(0,o.h)("div",Object.assign({id:t,class:(0,a.c)("collapsible",{disabled:!0===d,open:!0===h},s)},v),(0,o.h)(l.b,{ref:null==u?void 0:u.ref,_label:"",_level:c,class:(0,a.c)("collapsible__heading",null==u?void 0:u.class)},(0,o.h)(l.c,{class:(0,a.c)("collapsible__heading-button",null==b?void 0:b.class),ref:null==b?void 0:b.ref,slot:"expert",_ariaControls:`${t}-control`,_ariaExpanded:h,_disabled:d,_icons:(null==b?void 0:b._icons)||`codicon codicon-${m}`,_label:r,_on:{onClick:p}})),(0,o.h)("div",{class:(0,a.c)("collapsible__wrapper",null==f?void 0:f.wrapperClass)},(0,o.h)("div",{class:(0,a.c)("collapsible__wrapper-animation",null==f?void 0:f.animationClass)},(0,o.h)("div",{"aria-hidden":!1===h?"true":void 0,class:(0,a.c)("collapsible__content",null==f?void 0:f.class),id:`${t}-control`},e))))}},4600:(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})},8738:(n,e,t)=>{t.d(e,{i:()=>s,n:()=>c,r:()=>r});var i=t(1316),o=t(1523),a=t(6448);const l=()=>{let n=(0,a.d)().KoliBri;return void 0===n&&(n={},Object.defineProperty((0,a.d)(),"KoliBri",{value:n,writable:!1})),n},s=()=>{(()=>{const n=(0,a.g)().querySelector('meta[name="kolibri"]');if(n&&n.hasAttribute("content")){const e=n.getAttribute("content");"string"==typeof e&&((0,a.s)(e.includes("dev-mode=true")),(0,a.b)(e.includes("experimental-mode=true")),(0,a.c)(e.includes("color-contrast-analysis=true")))}})(),a.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${i.E.kolibriVersion}\n\t`,{forceLog:!0})},r=()=>{!0!==l().adviceShown&&(Object.defineProperty(l(),"adviceShown",{get:function(){return!0}}),a.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let c=()=>Math.floor(16777215*Math.random()).toString(16);"test"===o.p&&(c=()=>"nonce")},51:(n,e,t)=>{t.d(e,{v:()=>o});var i=t(5396);const o=(n,e)=>{(0,i.b)(n,"_disabled",e,{hooks:{afterPatch:n=>{!0===n&&(0,i.c)()}}})}},5356:(n,e,t)=>{t.r(e),t.d(e,{kol_accordion:()=>p});var i=t(1316),o=t(8738),a=t(7546),l=t(5396),s=t(9328),r=t(51),c=t(600),d=t(2235),h=(n,e,t)=>new Promise(((i,o)=>{var a=n=>{try{s(t.next(n))}catch(n){o(n)}},l=n=>{try{s(t.throw(n))}catch(n){o(n)}},s=n=>n.done?i(n.value):Promise.resolve(n.value).then(a,l);s((t=t.apply(n,e)).next())}));(0,l.f)("[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend"),(0,l.f)("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const p=class{constructor(n){(0,i.r)(this,n),this.nonce=(0,o.n)(),this.catchRef=n=>{this.buttonWcRef=n},this.handleOnClick=n=>{this._open=!this._open,setTimeout((()=>{var e,t;null===(t=null===(e=this.state._on)||void 0===e?void 0:e.onClick)||void 0===t||t.call(e,n,!0===this._open)}))},this._disabled=!1,this._label=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_label:"",_level:1,_on:{}}}focus(){return h(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return h(this,null,(function*(){var n;yield null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus()}))}render(){const{_open:n,_label:e,_disabled:t,_level:o}=this.state,a="accordion",l={id:this.nonce,label:e,open:n,disabled:t,level:o,onClick:this.handleOnClick,class:a,HeadingProps:{class:`${a}__heading`},HeadingButtonProps:{ref:this.catchRef,class:`${a}__heading-button`},ContentProps:{class:`${a}__content`,wrapperClass:`${a}__wrapper`,animationClass:`${a}__wrapper-animation`}};return(0,i.h)(i.H,{key:"0c90ac4971377eafa18b4d3503512c08f640fe4d",class:"kol-accordion"},(0,i.h)(s.K,Object.assign({key:"a78d600359191321145fff75647e93c277041eaa"},l),(0,i.h)("slot",{key:"7c898afbcafceecda7651eccf152e44b7434d823"})))}validateDisabled(n){(0,r.v)(this,n)}validateLabel(n){(0,d.v)(this,n,{required:!0})}validateLevel(n){(0,a.w)(this,n)}validateOn(n){var e;e=n,(0,l.w)(this,"_on",(n=>"object"==typeof n&&null!==n),new Set(["AccordionCallbacksPropType {Events.onClick}"]),e)}validateOpen(n){(0,c.v)(this,n)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};p.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n  .collapsible {\n    /* @see https://github.com/public-ui/kolibri/issues/5952 */\n    /*\n          * Inside a button, the caption text is always centered.\n          * So we have to align the text to the left.\n          */\n  }\n  .collapsible__wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    overflow: hidden;\n    transition: grid-template-rows 0.3s;\n  }\n  .collapsible__wrapper-animation {\n    min-height: 0;\n    transition: visibility 0.3s;\n    /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n    visibility: hidden;\n  }\n  .open .collapsible__wrapper {\n    grid-template-rows: 1fr;\n  }\n  .open .collapsible__wrapper-animation {\n    visibility: visible;\n  }\n  @media (prefers-reduced-motion) {\n    .collapsible__wrapper-animation, .collapsible__wrapper {\n      transition-duration: 0s;\n    }\n  }\n  @media print {\n    :not(.open) .collapsible__wrapper-animation {\n      display: none;\n    }\n  }\n  .collapsible__heading-button button .kol-span-wc {\n    justify-items: start;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}"}},2235:(n,e,t)=>{t.d(e,{a:()=>h,b:()=>s,c:()=>r,h:()=>o,v:()=>d});var i=t(5396);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.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},h=d},600:(n,e,t)=>{t.d(e,{v:()=>o});var i=t(5396);const o=(n,e,t)=>{(0,i.b)(n,"_open",e,t)}},1523:(n,e,t)=>{t.d(e,{b:()=>l,h:()=>o,p:()=>i,s:()=>a});let i="development";try{i="production"}catch(n){i="production"}const o=(n,e,t)=>{if(n&&e&&"string"==typeof t){const i=n.querySelector(`[slot="${t}"]`);i&&e.appendChild(i)}},a=n=>""===n,l=(n,e)=>n||e||""},3133:(n,e,t)=>{function i(n,e){var t={};for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&e.indexOf(i)<0&&(t[i]=n[i]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(n);o<i.length;o++)e.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(n,i[o])&&(t[i[o]]=n[i[o]])}return t}t.d(e,{_:()=>i}),"function"==typeof SuppressedError&&SuppressedError},7546:(n,e,t)=>{t.d(e,{w:()=>a});var i=t(2235),o=t(5396);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})}}}]);

package/dist/{3101.js → 5396.js}

@@ -1,2 +1,2 @@
-/*! For license information please see 3101.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3101],{3101:(e,t,o)=>{o.d(t,{A:()=>ne,B:()=>ce,C:()=>ue,D:()=>X,K:()=>de,a:()=>l,b:()=>K,c:()=>b,d:()=>A,e:()=>m,f:()=>h,g:()=>W,h:()=>v,i:()=>F,j:()=>u,k:()=>U,l:()=>d,m:()=>Q,n:()=>s,o:()=>R,p:()=>ee,q:()=>I,r:()=>H,s:()=>D,t:()=>J,u:()=>p,v:()=>re,w:()=>z,x:()=>te,y:()=>oe,z:()=>se});var r=o(6292),n=o(6448);const a=new Set,l=(e,t)=>{(!1===a.has(e)||(null==t?void 0:t.force))&&(a.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"✋ a11y",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #09f"}))},i=new Set,s=(e,t)=>{(!1===i.has(e)||(null==t?void 0:t.force))&&(i.add(e),n.L.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"🔥 deprecated",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f00"}))},c=new Set,u=(e,t)=>{(!1===c.has(e)||(null==t?void 0:t.force))&&(c.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"💻 dev",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f09"}))},d=(e,t)=>{(!1===c.has(e)||(null==t?void 0:t.force))&&(c.add(e),n.L.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"⚠️ dev",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f09"}))},f=new Set,h=(e,t=!1,o)=>{(!1===f.has(e)||(null==o?void 0:o.force))&&(f.add(e),e+=!0===t?" ✅":"",n.L.debug([e].concat((null==o?void 0:o.details)||[]),{classifier:"🌟 feature",forceLog:!!(null==o?void 0:o.force),overwriteStyle:"; background-color: #309"}))};u("We appreciate any feedback, comments, screenshots, or demo links of an application based on KoliBri (kolibri@itzbund.de). Thank you!");const g=new Set,p=(e,t)=>{(!1===g.has(e)||(null==t?void 0:t.force))&&(g.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"📑 ui/ux",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #060;"}))},b=()=>{l('"Disabled" limits accessibility and visibility. From an accessibility perspective, we recommend using the readonly attribute instead of disabled.\n- https://uxdesign.cc/is-it-ok-to-grey-out-disabled-buttons-8afa74a0fae')},m=e=>{"string"==typeof e&&""!==e||l("Some structural elements, such as the nav tag, can be used multiple times on a webpage. To distinguish between similarly named structural elements, it is necessary to set an ARIA label.\n- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role#accessibility_concerns")},v=(e,t=8)=>{t>7&&p(`[${e}] Within navigation structures, it is recommended to use no more than 7 menu items.\n\nLink:\n- https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two`)};var y=.2126,w=.7152,S=.0722,k=1/12.92;function x(e){return Math.pow((e+.055)/1.055,2.4)}function N(e){var t=e[0]/255,o=e[1]/255,r=e[2]/255,n=t<=.03928?t*k:x(t),a=o<=.03928?o*k:x(o),l=r<=.03928?r*k:x(r);return n*y+a*w+l*S}function L(e){var t=255;8===(e=e.replace(/^#/,"")).length&&(t=parseInt(e.slice(6,8),16),e=e.substring(0,6)),4===e.length&&(t=parseInt(e.slice(3,4).repeat(2),16),e=e.substring(0,3)),3===e.length&&(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]);var o=parseInt(e,16);return[o>>16,o>>8&255,255&o,t]}function A(e,t){return function(e,t){return function(e,t){return(Math.max(e,t)+.05)/(Math.min(e,t)+.05)}(N(e),N(t))}(L(e),L(t))}var M={exports:{}};function O(e){var t=T(e);return 3==t.length?t.concat(255):(t[3]=Math.round(t[3]),t)}function T(e){return"string"==typeof e?("red"==(t=e=e.toLowerCase())?[255,0,0]:"green"==t?[0,255,0]:"blue"==t?[0,0,255]:"black"==t?[0,0,0]:"white"==t?[255,255,255]:"cyan"==t?[0,255,255]:"gray"==t||"grey"==t?[128,128,128]:"magenta"==t||"pink"==t?[255,0,255]:"yellow"==t?[255,255,0]:void 0)||function(e){var t=e.replace(/^#/,""),o=t.length;if(3==o||4==o){var r=E(t[0]),n=E(t[1]),a=E(t[2]),l=3==o?255:E(t[3]);if(isNaN(r)||isNaN(n)||isNaN(a)||isNaN(l))return;return[r,n,a,l]}}(e)||function(e){var t=e.replace(/^#/,""),o=t.length;if(6==o||8==o){var r=E(t.slice(0,2)),n=E(t.slice(2,4)),a=E(t.slice(4,6)),l=6==o?255:E(t.slice(6,8));if(isNaN(r)||isNaN(n)||isNaN(a)||isNaN(l))return;return[r,n,a,l]}}(e)||function(e){if("rgb("==e.substr(0,4)){var t=(e=e.match(/^rgb\(([^)]+)\)/)[1]).split(/ *, */).map(Number),o=_(t[0],!0),r=_(t[1],!0),n=_(t[2],!0);if(-1!=o&&-1!=r&&-1!=n)return[o,r,n,255]}}(e)||function(e){if("rgba("==e.substr(0,5)){var t=(e=e.match(/^rgba\(([^)]+)\)/)[1]).split(/ *, */).map(Number),o=_(t[0],!0),r=_(t[1],!0),n=_(t[2],!0),a=_(255*t[3]);if(-1!=o&&-1!=r&&-1!=n&&-1!=a)return[o,r,n,a]}}(e)||[0,0,0,255]:function(e){if("[object Object]"===Object.prototype.toString.call(e)&&Object.getPrototypeOf(e)===Object.getPrototypeOf({})){var t=_(null!=e.r?e.r:null!=e.red?e.red:0,!0),o=_(null!=e.g?e.g:null!=e.green?e.green:0,!0),r=_(null!=e.b?e.b:null!=e.blue?e.blue:0,!0),n=_(null!=e.a?e.a:null!=e.alpha?e.alpha:255,!0);if(-1!=t&&-1!=o&&-1!=r&&-1!=n)return[t,o,r,n]}}(e)||function(e){if(Array.isArray(e)&&(3==e.length||4==e.length)){var t=_(e[0],!0),o=_(e[1],!0),r=_(e[2],!0),n=_(null!=e[3]?e[3]:255,!0);if(-1!=t&&-1!=o&&-1!=r&&-1!=n)return[t,o,r,n]}}(e)||function(e){if("number"==typeof e&&Math.floor(e)==e&&e<=4294967295&&e>=0)return[e>>16&255,e>>8&255,255&e,e>>24&255]}(e)||[0,0,0,255];var t}function C(e){var t=e.toString(16);return 1==t.length?"0"+t:t}function E(e){return 1==e.length?parseInt(e+e,16):parseInt(e,16)}function _(e,t){return"number"!=typeof e||!0===t&&Math.floor(e)!==e?-1:e>=0&&e<=255?e:-1}M.exports=O,M.exports.arr=O,M.exports.obj=function(e){var t=T(e);return{r:t[0],g:t[1],b:t[2],a:3==t.length?255:Math.round(t[3])}},M.exports.css=function(e){var t=T(e);return 3==t.length&&t.push(255),255==t[3]?"rgb("+t[0]+", "+t[1]+", "+t[2]+")":0==t[3]?"rgba("+t[0]+", "+t[1]+", "+t[2]+", 0)":"rgba("+t[0]+", "+t[1]+", "+t[2]+", "+String(t[3]/255).substr(1)+")"},M.exports.hex=function(e){3==(a=T(e)).length&&a.push(255);var t=255==a[3],o=C(a[0]),r=C(a[1]),n=C(a[2]),a=C(Math.round(a[3])),l=function(e,t,o,r){var n=["ff","00","11","22","33","44","55","66","77","88","99","aa","bb","cc","dd","ee"];return-1!=n.indexOf(e)&&-1!=n.indexOf(t)&&-1!=n.indexOf(o)&&-1!=n.indexOf(r)}(o,r,n,a);return t?l?"#"+o.charAt(0)+r.charAt(0)+n.charAt(0):"#"+o+r+n:l?"#"+o.charAt(0)+r.charAt(0)+n.charAt(0)+a.charAt(0):"#"+o+r+n+a},M.exports.num=function(e){var t=T(e);return 3==t.length?t.push(255):t[3]=Math.round(t[3]),(t[3]<<24>>>0|t[0]<<16|t[1]<<8|t[2])>>>0};const H=M.exports,j=(e,t)=>{t.forEach((t=>{!1===e.has(t)&&e.add(t)}))},q=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){const o=new Set;j(o,t.querySelectorAll(e));const r=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<r.length;t++){const n=r[t].shadowRoot;j(o,q(e,"object"==typeof n&&null!==n?n:r[t]))}return Array.from(o)}throw new Error("The parameter document for the method querySelectorAll is not type of Document, HTMLElement or ShadowRoot.")},$=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){let o=t.querySelector(e);if(null===o){const r=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<r.length;t++){const n=r[t].shadowRoot;if(o=$(e,"object"==typeof n&&null!==n?n:r[t]),null!==o)break}}return o}throw new Error("The parameter document for the method querySelector is not type of Document, HTMLElement or ShadowRoot.")},P=/\[object Object\]/,R=(e,t)=>{"string"==typeof e&&P.test(e)||t()},J=(e,t)=>{"string"==typeof e&&""===e||t()},I=(e,t)=>{(0,n.a)()&&(n.L.debug([e,t]),n.L.debug("↑ We propagate the (submit) event to this target.")),Object.defineProperty(e,"target",{value:t,writable:!1})},D=(e,t,o,r={})=>{var n,a;void 0===e.nextHooks&&(e.nextHooks=new Map),void 0===e.nextState&&(e.nextState=new Map),e.nextHooks.get(t)instanceof Map==0&&e.nextHooks.set(t,new Map),"function"==typeof r.afterPatch&&(null===(n=e.nextHooks.get(t))||void 0===n||n.set("afterPatch",r.afterPatch)),"function"==typeof r.beforePatch&&(null===(a=e.nextHooks.get(t))||void 0===a||a.set("beforePatch",r.beforePatch)),e.nextState.set(t,o),(e=>{var t,o,r;null===(t=e.nextHooks)||void 0===t||t.forEach(((t,o)=>{var r;const n=t.get("beforePatch");"function"==typeof n&&n(null===(r=e.nextState)||void 0===r?void 0:r.get(o),e.nextState,e,o)})),(null===(o=e.nextState)||void 0===o?void 0:o.size)>0&&(e.state=Object.assign(Object.assign({},e.state),Object.fromEntries(e.nextState)),delete e.nextState,null===(r=e.nextHooks)||void 0===r||r.forEach(((t,o)=>{const r=t.get("afterPatch");"function"==typeof r&&r(e.state[o],e.state,e,o)}))),delete e.nextHooks})(e)},B=(e,t,o,r)=>{u(`[${e.constructor.name}] The property value: (${o}) for '${t}' is not valid. Allowed values are: ${Array.from(r).join(", ")}`)};function z(e,t,o,r,n,a={}){o(n)?D(e,t,n,a.hooks):void 0===n&&!0!==a.required&&o(a.defaultValue)?D(e,t,a.defaultValue,a.hooks):(a.required||r.add(null),B(e,t,n,r))}const K=(e,t,o,r)=>{z(e,t,(e=>"boolean"==typeof e),new Set(["Boolean {true, false}"]),o,r)},F=(e,t,o,r={})=>{const n="number"==typeof r.minLength?null==r?void 0:r.minLength:0;z(e,t,(e=>"string"==typeof e&&e.length>=n&&(void 0===(null==r?void 0:r.maxLength)||e.length<=r.maxLength)),new Set(["String"]),o,r)},U=(e,t,o,r)=>{z(e,t,(e=>"number"==typeof e&&(void 0===(null==r?void 0:r.min)||"number"==typeof(null==r?void 0:r.min)&&e>=r.min)&&(void 0===(null==r?void 0:r.max)||"number"==typeof(null==r?void 0:r.max)&&e<=r.max)),new Set(["Number"]),o,r)},W=(e,t,o,r,a=e=>e==e,l={})=>{J(r,(()=>{R(r,(()=>{void 0===r&&(r=[]);try{try{r=ee(r)}catch(e){}if(Array.isArray(r)){const i=r.find((e=>!o(e)));void 0===i&&a(r)?D(e,t,r,l.hooks):R(i,(()=>{throw n.L.debug(i),new Error("↑ The schema for the property (_options) is not valid. The value will not be changed.")}))}else R(r,(()=>{throw n.L.debug(r),new Error("↑ The schema for the property (_options) is not valid. The value will not be changed.")}))}catch(e){n.L.debug(e)}}))}))},V=/^(true|false)$/,Y=/^-?(0|[1-9]\d*)$/,G=/^-?(0.|[1-9]\d*.)\d*[1-9]$/,Q=e=>{const t=typeof e,o=`${e}`;if("string"==typeof e)if(V.test(e))e="true"===e;else if(Y.test(e))e=parseInt(e);else if(G.test(e))e=parseFloat(e);else if(Z.test(e))try{e=ee(e)}catch(e){}return t!==typeof e&&u(`You have used a stringified property value (${o} to ${JSON.stringify(e)}) which type switched from ${t} to ${typeof e}!`),e},X=e=>{try{return JSON.stringify(e).replace(/"/g,"'")}catch(t){throw n.L.warn(["stringifyJson",e]),n.L.error("↑ The JSON could not be converted to a string. A stringifiable JSON is expected."),new Error}},Z=/^[{[]/,ee=e=>{if("string"==typeof e)try{return JSON.parse(e)}catch(t){if(Z.test(e))try{return JSON.parse(e.replace(/'/g,'"'))}catch(t){n.L.warn(["parseJson",e]),n.L.error("↑ The JSON string could not be parsed. Make sure that single quotes in the text are escaped (&#8216;).")}}throw new Error},te=e=>"boolean"==typeof e?!0===e?"true":"false":void 0,oe=e=>"string"==typeof e?e:te(e),re=(e,t)=>$(e,t||(0,n.g)()),ne=(e,t)=>q(e,t||(0,n.g)());let ae=null;const le=()=>(ae=ae||{backgroundColor:"#00000000",color:"#00000000",domNode:(0,n.g)().body,level:"Fail",score:1},ae),ie=/(\d+, ){3}0\)/,se=(e,t=le())=>{const o=getComputedStyle(e),r=ie.test(o.backgroundColor)?t.backgroundColor:H.hex(o.backgroundColor),a=ie.test(o.color)?t.color:H.hex(o.color),l=A(r,a),i={backgroundColor:r,color:a,domNode:e,level:(s=l,s>=7?"AAA":s>=4.5?"AA":s>=3?"AA Large":"Fail"),score:l};var s;return l<4.5&&n.L.error(["Color-Contrast-Error",{backgroundColor:i.backgroundColor,color:i.color,level:i.level,score:i.score},i.domNode]),i},ce=(e,t=le())=>{t.domNode instanceof HTMLElement&&(t=se(t.domNode,t));const o=t.domNode.querySelector(e);if(null===o){const o=t.domNode.querySelectorAll('[class="hydrated"]');for(let r=0;r<o.length&&(t.domNode=o[r],null===(t=ce(e,t)).domNode);r++);return t}return se(o,t)};class ue{static queryHtmlElementColors(e,t,o=!1,r=!0){let a=null;if(!0===o||!1===ue.executionLock)if(!1===o&&(ue.cache.clear(),ue.cache.set(t.domNode,t),ue.executionLock=!0,!0===r&&n.L.debug("[KoliBriUtils] Color contrast analysis started...")),e===t.domNode)a=t;else{const o=new Set;if(t.domNode.shadowRoot){const e=t.domNode.shadowRoot.children;for(let t=0;t<e.length;t++)o.add(e[t])}const r=t.domNode;if("function"==typeof r.assignedNodes){const e=r.assignedNodes();for(let t=0;t<e.length;t++)e[t]instanceof HTMLElement&&o.add(e[t])}const n=t.domNode.children;for(let e=0;e<n.length;e++)o.add(n[e]);const l=Array.from(o);for(let o=0;o<l.length;o++){let r=ue.cache.get(l[o]);void 0===r&&(r=se(l[o],t)),ue.cache.set(l[o],r);const n=ue.queryHtmlElementColors(e,r,!0,!1);if(null!==n){a=n;break}}}else n.L.debug("[KoliBriUtils] Call aborted because a color contrast analysis is currently being executed.");return!1===o&&(!0===r&&n.L.debug(`[KoliBriUtils] Color contrast analysis finished (${ue.cache.size} DOM elements are analysed).`),ue.executionLock=!1,ue.cache.clear()),a}}ue.executionLock=!1,ue.cache=new Map;class de{}de.getCssStyle=r.y,de.patchTheme=r.P,de.patchThemeTag=r.k,de.querySelector=re,de.querySelectorAll=ne,de.stringifyJson=X}}]);
+/*! For license information please see 5396.js.LICENSE.txt */
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5396],{5396:(e,t,o)=>{o.d(t,{A:()=>ne,B:()=>ce,C:()=>ue,D:()=>X,K:()=>de,a:()=>l,b:()=>K,c:()=>b,d:()=>A,e:()=>m,f:()=>h,g:()=>W,h:()=>v,i:()=>F,j:()=>u,k:()=>U,l:()=>d,m:()=>Q,n:()=>s,o:()=>R,p:()=>ee,q:()=>D,r:()=>H,s:()=>I,t:()=>J,u:()=>p,v:()=>re,w:()=>z,x:()=>te,y:()=>oe,z:()=>se});var r=o(6823),n=o(6448);const a=new Set,l=(e,t)=>{(!1===a.has(e)||(null==t?void 0:t.force))&&(a.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"✋ a11y",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #09f"}))},i=new Set,s=(e,t)=>{(!1===i.has(e)||(null==t?void 0:t.force))&&(i.add(e),n.L.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"🔥 deprecated",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f00"}))},c=new Set,u=(e,t)=>{(!1===c.has(e)||(null==t?void 0:t.force))&&(c.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"💻 dev",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f09"}))},d=(e,t)=>{(!1===c.has(e)||(null==t?void 0:t.force))&&(c.add(e),n.L.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"⚠️ dev",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f09"}))},f=new Set,h=(e,t=!1,o)=>{(!1===f.has(e)||(null==o?void 0:o.force))&&(f.add(e),e+=!0===t?" ✅":"",n.L.debug([e].concat((null==o?void 0:o.details)||[]),{classifier:"🌟 feature",forceLog:!!(null==o?void 0:o.force),overwriteStyle:"; background-color: #309"}))};u("We appreciate any feedback, comments, screenshots, or demo links of an application based on KoliBri (kolibri@itzbund.de). Thank you!");const g=new Set,p=(e,t)=>{(!1===g.has(e)||(null==t?void 0:t.force))&&(g.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"📑 ui/ux",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #060;"}))},b=()=>{l('"Disabled" limits accessibility and visibility. From an accessibility perspective, we recommend using the readonly attribute instead of disabled.\n- https://uxdesign.cc/is-it-ok-to-grey-out-disabled-buttons-8afa74a0fae')},m=e=>{"string"==typeof e&&""!==e||l("Some structural elements, such as the nav tag, can be used multiple times on a webpage. To distinguish between similarly named structural elements, it is necessary to set an ARIA label.\n- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role#accessibility_concerns")},v=(e,t=8)=>{t>7&&p(`[${e}] Within navigation structures, it is recommended to use no more than 7 menu items.\n\nLink:\n- https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two`)};var y=.2126,w=.7152,S=.0722,x=1/12.92;function k(e){return Math.pow((e+.055)/1.055,2.4)}function N(e){var t=e[0]/255,o=e[1]/255,r=e[2]/255,n=t<=.03928?t*x:k(t),a=o<=.03928?o*x:k(o),l=r<=.03928?r*x:k(r);return n*y+a*w+l*S}function L(e){var t=255;8===(e=e.replace(/^#/,"")).length&&(t=parseInt(e.slice(6,8),16),e=e.substring(0,6)),4===e.length&&(t=parseInt(e.slice(3,4).repeat(2),16),e=e.substring(0,3)),3===e.length&&(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]);var o=parseInt(e,16);return[o>>16,o>>8&255,255&o,t]}function A(e,t){return function(e,t){return function(e,t){return(Math.max(e,t)+.05)/(Math.min(e,t)+.05)}(N(e),N(t))}(L(e),L(t))}var M={exports:{}};function O(e){var t=T(e);return 3==t.length?t.concat(255):(t[3]=Math.round(t[3]),t)}function T(e){return"string"==typeof e?("red"==(t=e=e.toLowerCase())?[255,0,0]:"green"==t?[0,255,0]:"blue"==t?[0,0,255]:"black"==t?[0,0,0]:"white"==t?[255,255,255]:"cyan"==t?[0,255,255]:"gray"==t||"grey"==t?[128,128,128]:"magenta"==t||"pink"==t?[255,0,255]:"yellow"==t?[255,255,0]:void 0)||function(e){var t=e.replace(/^#/,""),o=t.length;if(3==o||4==o){var r=E(t[0]),n=E(t[1]),a=E(t[2]),l=3==o?255:E(t[3]);if(isNaN(r)||isNaN(n)||isNaN(a)||isNaN(l))return;return[r,n,a,l]}}(e)||function(e){var t=e.replace(/^#/,""),o=t.length;if(6==o||8==o){var r=E(t.slice(0,2)),n=E(t.slice(2,4)),a=E(t.slice(4,6)),l=6==o?255:E(t.slice(6,8));if(isNaN(r)||isNaN(n)||isNaN(a)||isNaN(l))return;return[r,n,a,l]}}(e)||function(e){if("rgb("==e.substr(0,4)){var t=(e=e.match(/^rgb\(([^)]+)\)/)[1]).split(/ *, */).map(Number),o=_(t[0],!0),r=_(t[1],!0),n=_(t[2],!0);if(-1!=o&&-1!=r&&-1!=n)return[o,r,n,255]}}(e)||function(e){if("rgba("==e.substr(0,5)){var t=(e=e.match(/^rgba\(([^)]+)\)/)[1]).split(/ *, */).map(Number),o=_(t[0],!0),r=_(t[1],!0),n=_(t[2],!0),a=_(255*t[3]);if(-1!=o&&-1!=r&&-1!=n&&-1!=a)return[o,r,n,a]}}(e)||[0,0,0,255]:function(e){if("[object Object]"===Object.prototype.toString.call(e)&&Object.getPrototypeOf(e)===Object.getPrototypeOf({})){var t=_(null!=e.r?e.r:null!=e.red?e.red:0,!0),o=_(null!=e.g?e.g:null!=e.green?e.green:0,!0),r=_(null!=e.b?e.b:null!=e.blue?e.blue:0,!0),n=_(null!=e.a?e.a:null!=e.alpha?e.alpha:255,!0);if(-1!=t&&-1!=o&&-1!=r&&-1!=n)return[t,o,r,n]}}(e)||function(e){if(Array.isArray(e)&&(3==e.length||4==e.length)){var t=_(e[0],!0),o=_(e[1],!0),r=_(e[2],!0),n=_(null!=e[3]?e[3]:255,!0);if(-1!=t&&-1!=o&&-1!=r&&-1!=n)return[t,o,r,n]}}(e)||function(e){if("number"==typeof e&&Math.floor(e)==e&&e<=4294967295&&e>=0)return[e>>16&255,e>>8&255,255&e,e>>24&255]}(e)||[0,0,0,255];var t}function C(e){var t=e.toString(16);return 1==t.length?"0"+t:t}function E(e){return 1==e.length?parseInt(e+e,16):parseInt(e,16)}function _(e,t){return"number"!=typeof e||!0===t&&Math.floor(e)!==e?-1:e>=0&&e<=255?e:-1}M.exports=O,M.exports.arr=O,M.exports.obj=function(e){var t=T(e);return{r:t[0],g:t[1],b:t[2],a:3==t.length?255:Math.round(t[3])}},M.exports.css=function(e){var t=T(e);return 3==t.length&&t.push(255),255==t[3]?"rgb("+t[0]+", "+t[1]+", "+t[2]+")":0==t[3]?"rgba("+t[0]+", "+t[1]+", "+t[2]+", 0)":"rgba("+t[0]+", "+t[1]+", "+t[2]+", "+String(t[3]/255).substr(1)+")"},M.exports.hex=function(e){3==(a=T(e)).length&&a.push(255);var t=255==a[3],o=C(a[0]),r=C(a[1]),n=C(a[2]),a=C(Math.round(a[3])),l=function(e,t,o,r){var n=["ff","00","11","22","33","44","55","66","77","88","99","aa","bb","cc","dd","ee"];return-1!=n.indexOf(e)&&-1!=n.indexOf(t)&&-1!=n.indexOf(o)&&-1!=n.indexOf(r)}(o,r,n,a);return t?l?"#"+o.charAt(0)+r.charAt(0)+n.charAt(0):"#"+o+r+n:l?"#"+o.charAt(0)+r.charAt(0)+n.charAt(0)+a.charAt(0):"#"+o+r+n+a},M.exports.num=function(e){var t=T(e);return 3==t.length?t.push(255):t[3]=Math.round(t[3]),(t[3]<<24>>>0|t[0]<<16|t[1]<<8|t[2])>>>0};const H=M.exports,j=(e,t)=>{t.forEach((t=>{!1===e.has(t)&&e.add(t)}))},q=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){const o=new Set;j(o,t.querySelectorAll(e));const r=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<r.length;t++){const n=r[t].shadowRoot;j(o,q(e,"object"==typeof n&&null!==n?n:r[t]))}return Array.from(o)}throw new Error("The parameter document for the method querySelectorAll is not type of Document, HTMLElement or ShadowRoot.")},$=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){let o=t.querySelector(e);if(null===o){const r=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<r.length;t++){const n=r[t].shadowRoot;if(o=$(e,"object"==typeof n&&null!==n?n:r[t]),null!==o)break}}return o}throw new Error("The parameter document for the method querySelector is not type of Document, HTMLElement or ShadowRoot.")},P=/\[object Object\]/,R=(e,t)=>{"string"==typeof e&&P.test(e)||t()},J=(e,t)=>{"string"==typeof e&&""===e||t()},D=(e,t)=>{(0,n.a)()&&(n.L.debug([e,t]),n.L.debug("↑ We propagate the (submit) event to this target.")),Object.defineProperty(e,"target",{value:t,writable:!1})},I=(e,t,o,r={})=>{var n,a;void 0===e.nextHooks&&(e.nextHooks=new Map),void 0===e.nextState&&(e.nextState=new Map),e.nextHooks.get(t)instanceof Map==0&&e.nextHooks.set(t,new Map),"function"==typeof r.afterPatch&&(null===(n=e.nextHooks.get(t))||void 0===n||n.set("afterPatch",r.afterPatch)),"function"==typeof r.beforePatch&&(null===(a=e.nextHooks.get(t))||void 0===a||a.set("beforePatch",r.beforePatch)),e.nextState.set(t,o),(e=>{var t,o,r;null===(t=e.nextHooks)||void 0===t||t.forEach(((t,o)=>{var r;const n=t.get("beforePatch");"function"==typeof n&&n(null===(r=e.nextState)||void 0===r?void 0:r.get(o),e.nextState,e,o)})),(null===(o=e.nextState)||void 0===o?void 0:o.size)>0&&(e.state=Object.assign(Object.assign({},e.state),Object.fromEntries(e.nextState)),delete e.nextState,null===(r=e.nextHooks)||void 0===r||r.forEach(((t,o)=>{const r=t.get("afterPatch");"function"==typeof r&&r(e.state[o],e.state,e,o)}))),delete e.nextHooks})(e)},B=(e,t,o,r)=>{u(`[${e.constructor.name}] The property value: (${o}) for '${t}' is not valid. Allowed values are: ${Array.from(r).join(", ")}`)};function z(e,t,o,r,n,a={}){o(n)?I(e,t,n,a.hooks):void 0===n&&!0!==a.required&&o(a.defaultValue)?I(e,t,a.defaultValue,a.hooks):(a.required||r.add(null),B(e,t,n,r))}const K=(e,t,o,r)=>{z(e,t,(e=>"boolean"==typeof e),new Set(["Boolean {true, false}"]),o,r)},F=(e,t,o,r={})=>{const n="number"==typeof r.minLength?null==r?void 0:r.minLength:0;z(e,t,(e=>"string"==typeof e&&e.length>=n&&(void 0===(null==r?void 0:r.maxLength)||e.length<=r.maxLength)),new Set(["String"]),o,r)},U=(e,t,o,r)=>{z(e,t,(e=>"number"==typeof e&&(void 0===(null==r?void 0:r.min)||"number"==typeof(null==r?void 0:r.min)&&e>=r.min)&&(void 0===(null==r?void 0:r.max)||"number"==typeof(null==r?void 0:r.max)&&e<=r.max)),new Set(["Number"]),o,r)},W=(e,t,o,r,a=e=>e==e,l={})=>{J(r,(()=>{R(r,(()=>{void 0===r&&(r=[]);try{try{r=ee(r)}catch(e){}if(Array.isArray(r)){const i=r.find((e=>!o(e)));void 0===i&&a(r)?I(e,t,r,l.hooks):R(i,(()=>{throw n.L.debug(i),new Error("↑ The schema for the property (_options) is not valid. The value will not be changed.")}))}else R(r,(()=>{throw n.L.debug(r),new Error("↑ The schema for the property (_options) is not valid. The value will not be changed.")}))}catch(e){n.L.debug(e)}}))}))},V=/^(true|false)$/,Y=/^-?(0|[1-9]\d*)$/,G=/^-?(0.|[1-9]\d*.)\d*[1-9]$/,Q=e=>{const t=typeof e,o=`${e}`;if("string"==typeof e)if(V.test(e))e="true"===e;else if(Y.test(e))e=parseInt(e);else if(G.test(e))e=parseFloat(e);else if(Z.test(e))try{e=ee(e)}catch(e){}return t!==typeof e&&u(`You have used a stringified property value (${o} to ${JSON.stringify(e)}) which type switched from ${t} to ${typeof e}!`),e},X=e=>{try{return JSON.stringify(e).replace(/"/g,"'")}catch(t){throw n.L.warn(["stringifyJson",e]),n.L.error("↑ The JSON could not be converted to a string. A stringifiable JSON is expected."),new Error}},Z=/^[{[]/,ee=e=>{if("string"==typeof e)try{return JSON.parse(e)}catch(t){if(Z.test(e))try{return JSON.parse(e.replace(/'/g,'"'))}catch(t){n.L.warn(["parseJson",e]),n.L.error("↑ The JSON string could not be parsed. Make sure that single quotes in the text are escaped (&#8216;).")}}throw new Error},te=e=>"boolean"==typeof e?!0===e?"true":"false":void 0,oe=e=>"string"==typeof e?e:te(e),re=(e,t)=>$(e,t||(0,n.g)()),ne=(e,t)=>q(e,t||(0,n.g)());let ae=null;const le=()=>(ae=ae||{backgroundColor:"#00000000",color:"#00000000",domNode:(0,n.g)().body,level:"Fail",score:1},ae),ie=/(\d+, ){3}0\)/,se=(e,t=le())=>{const o=getComputedStyle(e),r=ie.test(o.backgroundColor)?t.backgroundColor:H.hex(o.backgroundColor),a=ie.test(o.color)?t.color:H.hex(o.color),l=A(r,a),i={backgroundColor:r,color:a,domNode:e,level:(s=l,s>=7?"AAA":s>=4.5?"AA":s>=3?"AA Large":"Fail"),score:l};var s;return l<4.5&&n.L.error(["Color-Contrast-Error",{backgroundColor:i.backgroundColor,color:i.color,level:i.level,score:i.score},i.domNode]),i},ce=(e,t=le())=>{t.domNode instanceof HTMLElement&&(t=se(t.domNode,t));const o=t.domNode.querySelector(e);if(null===o){const o=t.domNode.querySelectorAll('[class="hydrated"]');for(let r=0;r<o.length&&(t.domNode=o[r],null===(t=ce(e,t)).domNode);r++);return t}return se(o,t)};class ue{static queryHtmlElementColors(e,t,o=!1,r=!0){let a=null;if(!0===o||!1===ue.executionLock)if(!1===o&&(ue.cache.clear(),ue.cache.set(t.domNode,t),ue.executionLock=!0,!0===r&&n.L.debug("[KoliBriUtils] Color contrast analysis started...")),e===t.domNode)a=t;else{const o=new Set;if(t.domNode.shadowRoot){const e=t.domNode.shadowRoot.children;for(let t=0;t<e.length;t++)o.add(e[t])}const r=t.domNode;if("function"==typeof r.assignedNodes){const e=r.assignedNodes();for(let t=0;t<e.length;t++)e[t]instanceof HTMLElement&&o.add(e[t])}const n=t.domNode.children;for(let e=0;e<n.length;e++)o.add(n[e]);const l=Array.from(o);for(let o=0;o<l.length;o++){let r=ue.cache.get(l[o]);void 0===r&&(r=se(l[o],t)),ue.cache.set(l[o],r);const n=ue.queryHtmlElementColors(e,r,!0,!1);if(null!==n){a=n;break}}}else n.L.debug("[KoliBriUtils] Call aborted because a color contrast analysis is currently being executed.");return!1===o&&(!0===r&&n.L.debug(`[KoliBriUtils] Color contrast analysis finished (${ue.cache.size} DOM elements are analysed).`),ue.executionLock=!1,ue.cache.clear()),a}}ue.executionLock=!1,ue.cache=new Map;class de{}de.getCssStyle=r.m,de.patchTheme=r.D,de.patchThemeTag=r.P,de.querySelector=re,de.querySelectorAll=ne,de.stringifyJson=X}}]);

package/dist/5551.js

@@ -1,2 +1,2 @@
 /*! For license information please see 5551.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5551],{5551:(n,t,e)=>{e.r(t),e.d(t,{kol_table_stateless:()=>a});var i=e(0),o=e(1491);const a=class{constructor(n){(0,i.r)(this,n),this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}render(){return(0,i.h)(i.H,{key:"b2811bdfce1d51f659bbcb931639ba1fc3f65bb1",class:"kol-table-stateless"},(0,i.h)(o.r,{key:"a6affae87b6b8768b566ed611976a998b74fef5c",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection}))}};a.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\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-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\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-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host,\n  .kol-table-stateless-wc {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .table {\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  table {\n    width: 100%;\n  }\n  caption {\n    text-align: start;\n  }\n  .focus-element {\n    font-size: 0;\n  }\n  .focus-element:focus {\n    outline: 0 !important;\n  }\n  .table:has(.focus-element:focus) {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto Highlight;\n    outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto -webkit-focus-ring-color;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .table-sort-button .button {\n    color: inherit;\n  }\n  tbody th,\n  th.align-left {\n    text-align: left;\n  }\n  tbody th .table-sort-button .button-inner,\n  th.align-left .table-sort-button .button-inner {\n    justify-items: start;\n  }\n  th.align-center {\n    text-align: center;\n  }\n  th.align-center .table-sort-button .button-inner {\n    justify-items: center;\n  }\n  th.align-right {\n    text-align: right;\n  }\n  th.align-right .table-sort-button .button-inner {\n    justify-items: end;\n  }\n  tr.foot-spacer,\n  tr.head-spacer {\n    display: none;\n  }\n  .selection-header-cell {\n    width: 0;\n  }\n  .selection-cell {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .input 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  .input .icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .input input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .input input:before {\n    content: \"\";\n  }\n  .input input[type=checkbox] {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .input input[type=radio] {\n    display: flex;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .input input[type=radio]:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .input input[type=radio]:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .input input[type=radio]:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}"}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5551],{5551:(n,t,e)=>{e.r(t),e.d(t,{kol_table_stateless:()=>a});var i=e(1316),o=e(1491);const a=class{constructor(n){(0,i.r)(this,n),this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}render(){return(0,i.h)(i.H,{key:"b2811bdfce1d51f659bbcb931639ba1fc3f65bb1",class:"kol-table-stateless"},(0,i.h)(o.r,{key:"a6affae87b6b8768b566ed611976a998b74fef5c",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection}))}};a.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\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-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\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-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host,\n  .kol-table-stateless-wc {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .table {\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  table {\n    width: 100%;\n  }\n  caption {\n    text-align: start;\n  }\n  .focus-element {\n    font-size: 0;\n  }\n  .focus-element:focus {\n    outline: 0 !important;\n  }\n  .table:has(.focus-element:focus) {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto Highlight;\n    outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto -webkit-focus-ring-color;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .table-sort-button .button {\n    color: inherit;\n  }\n  tbody th,\n  th.align-left {\n    text-align: left;\n  }\n  tbody th .table-sort-button .button-inner,\n  th.align-left .table-sort-button .button-inner {\n    justify-items: start;\n  }\n  th.align-center {\n    text-align: center;\n  }\n  th.align-center .table-sort-button .button-inner {\n    justify-items: center;\n  }\n  th.align-right {\n    text-align: right;\n  }\n  th.align-right .table-sort-button .button-inner {\n    justify-items: end;\n  }\n  tr.foot-spacer,\n  tr.head-spacer {\n    display: none;\n  }\n  .selection-header-cell {\n    width: 0;\n  }\n  .selection-cell {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .input 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  .input .icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .input input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .input input:before {\n    content: \"\";\n  }\n  .input input[type=checkbox] {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .input input[type=radio] {\n    display: flex;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .input input[type=radio]:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .input input[type=radio]:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .input input[type=radio]:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}"}}}]);

package/dist/5750.js

@@ -0,0 +1,2 @@
+/*! For license information please see 5750.js.LICENSE.txt */
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5750],{8738:(e,t,i)=>{i.d(t,{i:()=>s,n:()=>c,r:()=>a});var o=i(1316),n=i(1523),r=i(6448);const l=()=>{let e=(0,r.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,r.d)(),"KoliBri",{value:e,writable:!1})),e},s=()=>{(()=>{const e=(0,r.g)().querySelector('meta[name="kolibri"]');if(e&&e.hasAttribute("content")){const t=e.getAttribute("content");"string"==typeof t&&((0,r.s)(t.includes("dev-mode=true")),(0,r.b)(t.includes("experimental-mode=true")),(0,r.c)(t.includes("color-contrast-analysis=true")))}})(),r.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${o.E.kolibriVersion}\n\t`,{forceLog:!0})},a=()=>{!0!==l().adviceShown&&(Object.defineProperty(l(),"adviceShown",{get:function(){return!0}}),r.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let c=()=>Math.floor(16777215*Math.random()).toString(16);"test"===n.p&&(c=()=>"nonce")},5750:(e,t,i)=>{i.r(t),i.d(t,{initialize:()=>a});var o=i(8738),n=i(6448),r=i(5396);function l(e,t){try{Object.defineProperty((()=>{let e=(0,n.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,n.d)(),"KoliBri",{value:e,writable:!1})),e})(),e,{get:function(){return t}})}catch(t){n.L.debug(`KoliBri property ${e} is already bind.`)}}const s=(e,t)=>n.L.debug(`${e} ${t?"":"not "}activated`),a=()=>{if((0,o.i)(),(0,n.e)()){(0,o.r)(),l("a11yColorContrast",r.z),l("querySelector",r.v),l("querySelectorAll",r.A),l("querySelectorColors",r.B),l("utils",(function(){return r.C})),l("parseJson",r.p),l("stringifyJson",r.D);const e=(0,n.g)().body,t=(0,n.g)().createElement("svg");if(t.setAttribute("aria-label","KoliBri-DevTools"),t.setAttribute("xmlns","http://www.w3.org/2000/svg"),t.setAttribute("role","toolbar"),t.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),t.innerHTML='<svg\n  xmlns="http://www.w3.org/2000/svg"\n  width="50"\n  height="50"\n  viewBox="0 0 600 600"\n>\n  <path d="M353 322L213 304V434L353 322Z" fill="#047" />\n  <path d="M209 564V304L149 434L209 564Z" fill="#047" />\n  <path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />\n  <path d="M353 318L35 36L213 300L353 318Z" fill="#047" />\n  <path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />\n  <path d="M391 286L565 272L421 252L391 286Z" fill="#047" />\n</svg>',(0,n.g)().body.appendChild(t),s("Development mode",(0,n.e)()),s("Experimental mode",(0,n.a)()),s("Color contrast analysis",(0,n.f)()),(0,n.f)()){const t=setTimeout((()=>{clearTimeout(t),setInterval((()=>{r.C.queryHtmlElementColors((0,n.g)().createElement("div"),(0,r.z)(e),!1,!1)}),1e4)}),2500)}}}},1523:(e,t,i)=>{i.d(t,{b:()=>l,h:()=>n,p:()=>o,s:()=>r});let o="development";try{o="production"}catch(e){o="production"}const n=(e,t,i)=>{if(e&&t&&"string"==typeof i){const o=e.querySelector(`[slot="${i}"]`);o&&t.appendChild(o)}},r=e=>""===e,l=(e,t)=>e||t||""}}]);

package/dist/5835.js

@@ -1,2 +1,2 @@
 /*! For license information please see 5835.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5835],{1100:(n,t,e)=>{e.d(t,{t:()=>a});var o=e(8457),i=e(1523);let a=(n,t)=>{var e;return(null!==(e=(0,o.g)())&&void 0!==e?e:(0,o.i)("de")).translate(n,t)};"test"===i.p&&(a=n=>n)},5835:(n,t,e)=>{e.r(t),e.d(t,{kol_split_button:()=>s});var o=e(0),i=e(1100),a=e(1491);const s=class{constructor(n){(0,o.r)(this,n),this.clickButtonHandler={onClick:n=>{var t,e;"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onClick)?null===(e=this._on)||void 0===e||e.onClick(n,this._value):this.toggleDropdown()}},this.clickToggleHandler={onClick:()=>this.toggleDropdown()},this.toggleDropdown=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!this.state._show})},this.handleOnClose=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!1})},this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_show:!1}}render(){const n="kol-split-button-dropdown-label";return(0,o.h)(o.H,{key:"8ee37e534461a81c5ce1c37df75384133b917035",class:"kol-split-button"},(0,o.h)("div",{key:"d552151bb4e89fa8d2fb8bf50148c65bc9756114",class:"split-button-root"},(0,o.h)(a.c,{key:"56c34ef35ee17698914ca07171193092f2e43523",class:{"main-button":!0,button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),(0,o.h)("div",{key:"da4f1e27ef4f8a85a188df728b59ef50f9b3179f",class:"horizontal-line"}),(0,o.h)(a.c,{key:"9aab0ef9049d501b7e1cf7992500d3a52c171740",class:"secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?(0,i.t)(`${n}-close`):(0,i.t)(`${n}-open`),_on:this.clickToggleHandler})),(0,o.h)(a.p,{key:"921f4e8a33c3fe290f8218626092b8d2d5dc5ec7",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},(0,o.h)("slot",{key:"0ca8bbd7ffb77324e7062a761b2ce84731dc6249"})))}closePopup(){return n=this,t=function*(){return this.handleOnClose(),Promise.resolve()},new Promise(((e,o)=>{var i=n=>{try{s(t.next(n))}catch(n){o(n)}},a=n=>{try{s(t.throw(n))}catch(n){o(n)}},s=n=>n.done?e(n.value):Promise.resolve(n.value).then(i,a);s((t=t.apply(n,null)).next())}));var n,t}static get delegatesFocus(){return!0}};s.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  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\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-popover {\n    height: 0;\n    position: absolute;\n  }\n  .kol-popover .popover {\n    background-color: #fff;\n    min-height: max-content;\n    min-width: max-content;\n    opacity: 0;\n    position: absolute;\n  }\n  .kol-popover .show {\n    animation: 0.3s ease-in forwards fadeInOpacity;\n  }\n  .kol-popover .disappear {\n    animation: 0.3s ease-in backwards fadeInOpacity;\n  }\n  .kol-popover .arrow {\n    background-color: inherit;\n    height: var(--font-size);\n    position: absolute;\n    rotate: 0.125turn;\n    width: var(--font-size);\n    z-index: -1;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\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-wc .tooltip-content {\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: flex;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .split-button-root {\n    display: flex;\n    position: relative;\n  }\n  .main-button {\n    flex-grow: 1;\n    text-align: left;\n  }\n  .kol-popover .popover {\n    margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-popover .arrow {\n    display: none;\n  }\n}"}},1523:(n,t,e)=>{e.d(t,{b:()=>s,h:()=>i,p:()=>o,s:()=>a});let o="development";try{o="production"}catch(n){o="production"}const i=(n,t,e)=>{if(n&&t&&"string"==typeof e){const o=n.querySelector(`[slot="${e}"]`);o&&t.appendChild(o)}},a=n=>""===n,s=(n,t)=>n||t||""}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5835],{1100:(n,t,e)=>{e.d(t,{t:()=>a});var o=e(8457),i=e(1523);let a=(n,t)=>{var e;return(null!==(e=(0,o.g)())&&void 0!==e?e:(0,o.i)("de")).translate(n,t)};"test"===i.p&&(a=n=>n)},5835:(n,t,e)=>{e.r(t),e.d(t,{kol_split_button:()=>s});var o=e(1316),i=e(1100),a=e(1491);const s=class{constructor(n){(0,o.r)(this,n),this.clickButtonHandler={onClick:n=>{var t,e;"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onClick)?null===(e=this._on)||void 0===e||e.onClick(n,this._value):this.toggleDropdown()}},this.clickToggleHandler={onClick:()=>this.toggleDropdown()},this.toggleDropdown=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!this.state._show})},this.handleOnClose=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!1})},this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_show:!1}}render(){const n="kol-split-button-dropdown-label";return(0,o.h)(o.H,{key:"8ee37e534461a81c5ce1c37df75384133b917035",class:"kol-split-button"},(0,o.h)("div",{key:"d552151bb4e89fa8d2fb8bf50148c65bc9756114",class:"split-button-root"},(0,o.h)(a.c,{key:"56c34ef35ee17698914ca07171193092f2e43523",class:{"main-button":!0,button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),(0,o.h)("div",{key:"da4f1e27ef4f8a85a188df728b59ef50f9b3179f",class:"horizontal-line"}),(0,o.h)(a.c,{key:"9aab0ef9049d501b7e1cf7992500d3a52c171740",class:"secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?(0,i.t)(`${n}-close`):(0,i.t)(`${n}-open`),_on:this.clickToggleHandler})),(0,o.h)(a.p,{key:"921f4e8a33c3fe290f8218626092b8d2d5dc5ec7",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},(0,o.h)("slot",{key:"0ca8bbd7ffb77324e7062a761b2ce84731dc6249"})))}closePopup(){return n=this,t=function*(){return this.handleOnClose(),Promise.resolve()},new Promise(((e,o)=>{var i=n=>{try{s(t.next(n))}catch(n){o(n)}},a=n=>{try{s(t.throw(n))}catch(n){o(n)}},s=n=>n.done?e(n.value):Promise.resolve(n.value).then(i,a);s((t=t.apply(n,null)).next())}));var n,t}static get delegatesFocus(){return!0}};s.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  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\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-popover {\n    height: 0;\n    position: absolute;\n  }\n  .kol-popover .popover {\n    background-color: #fff;\n    min-height: max-content;\n    min-width: max-content;\n    opacity: 0;\n    position: absolute;\n  }\n  .kol-popover .show {\n    animation: 0.3s ease-in forwards fadeInOpacity;\n  }\n  .kol-popover .disappear {\n    animation: 0.3s ease-in backwards fadeInOpacity;\n  }\n  .kol-popover .arrow {\n    background-color: inherit;\n    height: var(--font-size);\n    position: absolute;\n    rotate: 0.125turn;\n    width: var(--font-size);\n    z-index: -1;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\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-wc .tooltip-content {\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: flex;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .split-button-root {\n    display: flex;\n    position: relative;\n  }\n  .main-button {\n    flex-grow: 1;\n    text-align: left;\n  }\n  .kol-popover .popover {\n    margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-popover .arrow {\n    display: none;\n  }\n}"}},1523:(n,t,e)=>{e.d(t,{b:()=>s,h:()=>i,p:()=>o,s:()=>a});let o="development";try{o="production"}catch(n){o="production"}const i=(n,t,e)=>{if(n&&t&&"string"==typeof e){const o=n.querySelector(`[slot="${e}"]`);o&&t.appendChild(o)}},a=n=>""===n,s=(n,t)=>n||t||""}}]);

package/dist/5840.js

@@ -1,2 +1,2 @@
 /*! For license information please see 5840.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5840],{5746:(n,e,t)=>{t.d(e,{K:()=>s});var i=t(3133),o=t(0),a=t(4600),l=t(1491);const s=(n,e)=>{const{id:t,class:s,label:r,level:d=1,disabled:c,open:h,onClick:p,HeadingProps:u={},HeadingButtonProps:b={},ContentProps:f={}}=n,v=(0,i._)(n,["id","class","label","level","disabled","open","onClick","HeadingProps","HeadingButtonProps","ContentProps"]),m=h?"remove":"add";return(0,o.h)("div",Object.assign({id:t,class:(0,a.c)("collapsible",{disabled:!0===c,open:!0===h},s)},v),(0,o.h)(l.b,{ref:null==u?void 0:u.ref,_label:"",_level:d,class:(0,a.c)("collapsible__heading",null==u?void 0:u.class)},(0,o.h)(l.c,{class:(0,a.c)("collapsible__heading-button",null==b?void 0:b.class),ref:null==b?void 0:b.ref,slot:"expert",_ariaControls:`${t}-control`,_ariaExpanded:h,_disabled:c,_icons:(null==b?void 0:b._icons)||`codicon codicon-${m}`,_label:r,_on:{onClick:p}})),(0,o.h)("div",{class:(0,a.c)("collapsible__wrapper",null==f?void 0:f.wrapperClass)},(0,o.h)("div",{class:(0,a.c)("collapsible__wrapper-animation",null==f?void 0:f.animationClass)},(0,o.h)("div",{"aria-hidden":!1===h?"true":void 0,class:(0,a.c)("collapsible__content",null==f?void 0:f.class),id:`${t}-control`},e))))}},4600:(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})},2896:(n,e,t)=>{t.d(e,{i:()=>s,n:()=>d,r:()=>r});var i=t(0),o=t(1523),a=t(6448);const l=()=>{let n=(0,a.d)().KoliBri;return void 0===n&&(n={},Object.defineProperty((0,a.d)(),"KoliBri",{value:n,writable:!1})),n},s=()=>{(()=>{const n=(0,a.g)().querySelector('meta[name="kolibri"]');if(n&&n.hasAttribute("content")){const e=n.getAttribute("content");"string"==typeof e&&((0,a.s)(e.includes("dev-mode=true")),(0,a.b)(e.includes("experimental-mode=true")),(0,a.c)(e.includes("color-contrast-analysis=true")))}})(),a.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${i.E.kolibriVersion}\n\t`,{forceLog:!0})},r=()=>{!0!==l().adviceShown&&(Object.defineProperty(l(),"adviceShown",{get:function(){return!0}}),a.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 d=()=>Math.floor(16777215*Math.random()).toString(16);"test"===o.p&&(d=()=>"nonce")},9588:(n,e,t)=>{t.d(e,{v:()=>o});var i=t(3101);const o=(n,e)=>{(0,i.b)(n,"_disabled",e,{hooks:{afterPatch:n=>{!0===n&&(0,i.c)()}}})}},6855:(n,e,t)=>{function i(n){n.stopImmediatePropagation(),n.stopPropagation()}function o(n,e,t){e&&function(n,e,t){const i=n.dispatchEvent(function(n,e){return new CustomEvent(`kol-${n}`,{bubbles:!0,cancelable:!0,composed:!0,detail:e})}(e,t))}(e,n,t)}function a(n){n.preventDefault(),i(n)}t.d(e,{p:()=>a,s:()=>i,t:()=>o})},5840:(n,e,t)=>{t.r(e),t.d(e,{kol_details:()=>u});var i=t(0),o=t(2896),a=t(6447),l=t(6855),s=t(5746),r=t(3101),d=t(9588),c=t(1116),h=t(3924),p=(n,e,t)=>new Promise(((i,o)=>{var a=n=>{try{s(t.next(n))}catch(n){o(n)}},l=n=>{try{s(t.throw(n))}catch(n){o(n)}},s=n=>n.done?i(n.value):Promise.resolve(n.value).then(a,l);s((t=t.apply(n,e)).next())}));const u=class{constructor(n){(0,i.r)(this,n),this.nonce=(0,o.n)(),this.catchRef=n=>{this.buttonWcRef=n},this.handleOnClick=n=>{this._open=!this._open,clearTimeout(this.toggleTimeout),this.toggleTimeout=setTimeout((()=>{var e,t;(0,l.t)("toggle",this.host,this._open),null===(t=null===(e=this.state._on)||void 0===e?void 0:e.onToggle)||void 0===t||t.call(e,n,Boolean(this._open))}),25)},this._disabled=!1,this._label=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_label:"",_level:1,_on:{}}}focus(){return p(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return p(this,null,(function*(){var n;yield null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus()}))}render(){const{_open:n,_label:e,_disabled:t}=this.state,o="details",a={id:this.nonce,label:e,open:n,disabled:t,level:1,onClick:this.handleOnClick,class:o,HeadingProps:{class:`${o}__heading`},HeadingButtonProps:{ref:this.catchRef,class:`${o}__heading-button`,_icons:"codicon codicon-chevron-right"},ContentProps:{class:`${o}__content indented-text`,wrapperClass:`${o}__wrapper`,animationClass:`${o}__wrapper-animation`}};return(0,i.h)(i.H,{key:"381f2dfd76145865895199f6a5f054e77c86dd89",class:"kol-details"},(0,i.h)(s.K,Object.assign({key:"9f072f796a4d9a3df76a7a21004930b4943ea6da"},a),(0,i.h)("slot",{key:"5364add7cb7990f4350f48b5d37a510c351ec0eb"})))}validateDisabled(n){(0,d.v)(this,n)}validateLabel(n){(0,c.v)(this,n,{required:!0})}validateLevel(n){(0,a.w)(this,n)}validateOn(n){var e;e=n,(0,r.w)(this,"_on",(n=>"object"==typeof n&&null!==n),new Set(["DetailsCallbacksPropType {Events.onToggle}"]),e)}validateOpen(n){(0,h.v)(this,n)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}get host(){return(0,i.g)(this)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};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  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n  .collapsible {\n    /* @see https://github.com/public-ui/kolibri/issues/5952 */\n    /*\n          * Inside a button, the caption text is always centered.\n          * So we have to align the text to the left.\n          */\n  }\n  .collapsible__wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    overflow: hidden;\n    transition: grid-template-rows 0.3s;\n  }\n  .collapsible__wrapper-animation {\n    min-height: 0;\n    transition: visibility 0.3s;\n    /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n    visibility: hidden;\n  }\n  .open .collapsible__wrapper {\n    grid-template-rows: 1fr;\n  }\n  .open .collapsible__wrapper-animation {\n    visibility: visible;\n  }\n  @media (prefers-reduced-motion) {\n    .collapsible__wrapper-animation, .collapsible__wrapper {\n      transition-duration: 0s;\n    }\n  }\n  @media print {\n    :not(.open) .collapsible__wrapper-animation {\n      display: none;\n    }\n  }\n  .collapsible__heading-button button .kol-span-wc {\n    justify-items: start;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .details__heading-button {\n    display: flex;\n  }\n  .details__heading-button button {\n    min-height: auto;\n  }\n  .details__heading-button button .kol-span-wc .span-label {\n    border-bottom-color: grey;\n    border-bottom-style: solid;\n  }\n  .open .details__heading-button .kol-icon::part(icon) {\n    transform: rotate(90deg);\n  }\n}"}},1116:(n,e,t)=>{t.d(e,{a:()=>h,b:()=>s,c:()=>r,h:()=>o,v:()=>c});var i=t(3101);const o=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(a))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const d=new Set(["string"]),c=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),d,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,o,a)=>{var l,d;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(e,t,o,a)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,i.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},h=c},3924:(n,e,t)=>{t.d(e,{v:()=>o});var i=t(3101);const o=(n,e,t)=>{(0,i.b)(n,"_open",e,t)}},1523:(n,e,t)=>{t.d(e,{b:()=>l,h:()=>o,p:()=>i,s:()=>a});let i="development";try{i="production"}catch(n){i="production"}const o=(n,e,t)=>{if(n&&e&&"string"==typeof t){const i=n.querySelector(`[slot="${t}"]`);i&&e.appendChild(i)}},a=n=>""===n,l=(n,e)=>n||e||""},3133:(n,e,t)=>{function i(n,e){var t={};for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&e.indexOf(i)<0&&(t[i]=n[i]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(n);o<i.length;o++)e.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(n,i[o])&&(t[i[o]]=n[i[o]])}return t}t.d(e,{_:()=>i}),"function"==typeof SuppressedError&&SuppressedError},6447:(n,e,t)=>{t.d(e,{w:()=>a});var i=t(1116),o=t(3101);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})}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5840],{9328:(n,e,t)=>{t.d(e,{K:()=>s});var i=t(3133),o=t(1316),a=t(4600),l=t(1491);const s=(n,e)=>{const{id:t,class:s,label:r,level:d=1,disabled:c,open:h,onClick:p,HeadingProps:u={},HeadingButtonProps:b={},ContentProps:f={}}=n,v=(0,i._)(n,["id","class","label","level","disabled","open","onClick","HeadingProps","HeadingButtonProps","ContentProps"]),m=h?"remove":"add";return(0,o.h)("div",Object.assign({id:t,class:(0,a.c)("collapsible",{disabled:!0===c,open:!0===h},s)},v),(0,o.h)(l.b,{ref:null==u?void 0:u.ref,_label:"",_level:d,class:(0,a.c)("collapsible__heading",null==u?void 0:u.class)},(0,o.h)(l.c,{class:(0,a.c)("collapsible__heading-button",null==b?void 0:b.class),ref:null==b?void 0:b.ref,slot:"expert",_ariaControls:`${t}-control`,_ariaExpanded:h,_disabled:c,_icons:(null==b?void 0:b._icons)||`codicon codicon-${m}`,_label:r,_on:{onClick:p}})),(0,o.h)("div",{class:(0,a.c)("collapsible__wrapper",null==f?void 0:f.wrapperClass)},(0,o.h)("div",{class:(0,a.c)("collapsible__wrapper-animation",null==f?void 0:f.animationClass)},(0,o.h)("div",{"aria-hidden":!1===h?"true":void 0,class:(0,a.c)("collapsible__content",null==f?void 0:f.class),id:`${t}-control`},e))))}},4600:(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})},8738:(n,e,t)=>{t.d(e,{i:()=>s,n:()=>d,r:()=>r});var i=t(1316),o=t(1523),a=t(6448);const l=()=>{let n=(0,a.d)().KoliBri;return void 0===n&&(n={},Object.defineProperty((0,a.d)(),"KoliBri",{value:n,writable:!1})),n},s=()=>{(()=>{const n=(0,a.g)().querySelector('meta[name="kolibri"]');if(n&&n.hasAttribute("content")){const e=n.getAttribute("content");"string"==typeof e&&((0,a.s)(e.includes("dev-mode=true")),(0,a.b)(e.includes("experimental-mode=true")),(0,a.c)(e.includes("color-contrast-analysis=true")))}})(),a.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${i.E.kolibriVersion}\n\t`,{forceLog:!0})},r=()=>{!0!==l().adviceShown&&(Object.defineProperty(l(),"adviceShown",{get:function(){return!0}}),a.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 d=()=>Math.floor(16777215*Math.random()).toString(16);"test"===o.p&&(d=()=>"nonce")},51:(n,e,t)=>{t.d(e,{v:()=>o});var i=t(5396);const o=(n,e)=>{(0,i.b)(n,"_disabled",e,{hooks:{afterPatch:n=>{!0===n&&(0,i.c)()}}})}},6855:(n,e,t)=>{function i(n){n.stopImmediatePropagation(),n.stopPropagation()}function o(n,e,t){e&&function(n,e,t){const i=n.dispatchEvent(function(n,e){return new CustomEvent(`kol-${n}`,{bubbles:!0,cancelable:!0,composed:!0,detail:e})}(e,t))}(e,n,t)}function a(n){n.preventDefault(),i(n)}t.d(e,{p:()=>a,s:()=>i,t:()=>o})},5840:(n,e,t)=>{t.r(e),t.d(e,{kol_details:()=>u});var i=t(1316),o=t(8738),a=t(7546),l=t(6855),s=t(9328),r=t(5396),d=t(51),c=t(2235),h=t(600),p=(n,e,t)=>new Promise(((i,o)=>{var a=n=>{try{s(t.next(n))}catch(n){o(n)}},l=n=>{try{s(t.throw(n))}catch(n){o(n)}},s=n=>n.done?i(n.value):Promise.resolve(n.value).then(a,l);s((t=t.apply(n,e)).next())}));const u=class{constructor(n){(0,i.r)(this,n),this.nonce=(0,o.n)(),this.catchRef=n=>{this.buttonWcRef=n},this.handleOnClick=n=>{this._open=!this._open,clearTimeout(this.toggleTimeout),this.toggleTimeout=setTimeout((()=>{var e,t;(0,l.t)("toggle",this.host,this._open),null===(t=null===(e=this.state._on)||void 0===e?void 0:e.onToggle)||void 0===t||t.call(e,n,Boolean(this._open))}),25)},this._disabled=!1,this._label=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_label:"",_level:1,_on:{}}}focus(){return p(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return p(this,null,(function*(){var n;yield null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus()}))}render(){const{_open:n,_label:e,_disabled:t}=this.state,o="details",a={id:this.nonce,label:e,open:n,disabled:t,level:1,onClick:this.handleOnClick,class:o,HeadingProps:{class:`${o}__heading`},HeadingButtonProps:{ref:this.catchRef,class:`${o}__heading-button`,_icons:"codicon codicon-chevron-right"},ContentProps:{class:`${o}__content indented-text`,wrapperClass:`${o}__wrapper`,animationClass:`${o}__wrapper-animation`}};return(0,i.h)(i.H,{key:"381f2dfd76145865895199f6a5f054e77c86dd89",class:"kol-details"},(0,i.h)(s.K,Object.assign({key:"9f072f796a4d9a3df76a7a21004930b4943ea6da"},a),(0,i.h)("slot",{key:"5364add7cb7990f4350f48b5d37a510c351ec0eb"})))}validateDisabled(n){(0,d.v)(this,n)}validateLabel(n){(0,c.v)(this,n,{required:!0})}validateLevel(n){(0,a.w)(this,n)}validateOn(n){var e;e=n,(0,r.w)(this,"_on",(n=>"object"==typeof n&&null!==n),new Set(["DetailsCallbacksPropType {Events.onToggle}"]),e)}validateOpen(n){(0,h.v)(this,n)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}get host(){return(0,i.g)(this)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};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  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n  .collapsible {\n    /* @see https://github.com/public-ui/kolibri/issues/5952 */\n    /*\n          * Inside a button, the caption text is always centered.\n          * So we have to align the text to the left.\n          */\n  }\n  .collapsible__wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    overflow: hidden;\n    transition: grid-template-rows 0.3s;\n  }\n  .collapsible__wrapper-animation {\n    min-height: 0;\n    transition: visibility 0.3s;\n    /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n    visibility: hidden;\n  }\n  .open .collapsible__wrapper {\n    grid-template-rows: 1fr;\n  }\n  .open .collapsible__wrapper-animation {\n    visibility: visible;\n  }\n  @media (prefers-reduced-motion) {\n    .collapsible__wrapper-animation, .collapsible__wrapper {\n      transition-duration: 0s;\n    }\n  }\n  @media print {\n    :not(.open) .collapsible__wrapper-animation {\n      display: none;\n    }\n  }\n  .collapsible__heading-button button .kol-span-wc {\n    justify-items: start;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .details__heading-button {\n    display: flex;\n  }\n  .details__heading-button button {\n    min-height: auto;\n  }\n  .details__heading-button button .kol-span-wc .span-label {\n    border-bottom-color: grey;\n    border-bottom-style: solid;\n  }\n  .open .details__heading-button .kol-icon::part(icon) {\n    transform: rotate(90deg);\n  }\n}"}},2235:(n,e,t)=>{t.d(e,{a:()=>h,b:()=>s,c:()=>r,h:()=>o,v:()=>c});var i=t(5396);const o=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(a))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const d=new Set(["string"]),c=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),d,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,o,a)=>{var l,d;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(e,t,o,a)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,i.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},h=c},600:(n,e,t)=>{t.d(e,{v:()=>o});var i=t(5396);const o=(n,e,t)=>{(0,i.b)(n,"_open",e,t)}},1523:(n,e,t)=>{t.d(e,{b:()=>l,h:()=>o,p:()=>i,s:()=>a});let i="development";try{i="production"}catch(n){i="production"}const o=(n,e,t)=>{if(n&&e&&"string"==typeof t){const i=n.querySelector(`[slot="${t}"]`);i&&e.appendChild(i)}},a=n=>""===n,l=(n,e)=>n||e||""},3133:(n,e,t)=>{function i(n,e){var t={};for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&e.indexOf(i)<0&&(t[i]=n[i]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(n);o<i.length;o++)e.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(n,i[o])&&(t[i[o]]=n[i[o]])}return t}t.d(e,{_:()=>i}),"function"==typeof SuppressedError&&SuppressedError},7546:(n,e,t)=>{t.d(e,{w:()=>a});var i=t(2235),o=t(5396);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})}}}]);

package/dist/5889.js

@@ -1,2 +1,2 @@
 /*! For license information please see 5889.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5889],{5889:(e,c,s)=>{s.r(c),s.d(c,{kol_button_group_wc:()=>a});var t=s(0);const a=class{constructor(e){(0,t.r)(this,e),this.state={}}render(){return(0,t.h)(t.H,{key:"2b7b59990fe511fc3c7a80e6cf650f2d960ee6ed",class:"kol-button-group-wc"},(0,t.h)("slot",{key:"ecd40828ace6acc5222f59f7abe25edac7ce6393"}))}}}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5889],{5889:(e,c,s)=>{s.r(c),s.d(c,{kol_button_group_wc:()=>a});var t=s(1316);const a=class{constructor(e){(0,t.r)(this,e),this.state={}}render(){return(0,t.h)(t.H,{key:"2b7b59990fe511fc3c7a80e6cf650f2d960ee6ed",class:"kol-button-group-wc"},(0,t.h)("slot",{key:"ecd40828ace6acc5222f59f7abe25edac7ce6393"}))}}}}]);

package/dist/5912.js

@@ -1,2 +1,2 @@
 /*! For license information please see 5912.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5912],{5001:(t,e,n)=>{n.d(e,{a:()=>s,v:()=>a});var o=n(3101);const a=(t,e,n)=>{(0,o.w)(t,e,(t=>"string"==typeof t&&i.includes(t)),new Set(i),n,{defaultValue:"top"})},i=["left","right","top","bottom"],s=(t,e)=>{a(t,"_align",e)}},1100:(t,e,n)=>{n.d(e,{t:()=>i});var o=n(8457),a=n(1523);let i=(t,e)=>{var n;return(null!==(n=(0,o.g)())&&void 0!==n?n:(0,o.i)("de")).translate(t,e)};"test"===a.p&&(i=t=>t)},5912:(t,e,n)=>{n.r(e),n.d(e,{kol_tabs:()=>u});var o=n(0),a=n(1100),i=n(1491),s=n(3101),l=n(5001),r=n(1116),d=n(6448);const h=["select-automatic","select-manual"];var c,b;(b=c||(c={})).ArrowDown="ArrowDown",b.ArrowLeft="ArrowLeft",b.ArrowRight="ArrowRight",b.ArrowUp="ArrowUp",b.Enter="Enter",b.Space=" ";const u=class{constructor(t){(0,o.r)(this,t),this.onCreateLabel=`${(0,a.t)("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,n=1)=>{const o=e+n;return o<t.length?t[o]._disabled?this.nextPossibleTabIndex(t,e,n+1):o:e},this.prevPossibleTabIndex=(t,e,n=1)=>{const o=e-n;return o>=0?t[o]._disabled?this.prevPossibleTabIndex(t,e,n+1):o:e},this.onKeyDown=t=>{switch(t.key){case c.ArrowRight:this.goToNextTab(t);break;case c.ArrowLeft:this.goToPreviousTab(t);break;case c.Space:case c.Enter:this.activateFocusedTab(t)}},this.onClickSelect=(t,e)=>{this.selectNextTabEvent(t,e)},this.onMouseDown=t=>{t.preventDefault(),t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,n=!0,o)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===n){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,o||t);t=o||t,n=!1}if(!1===n){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,o||t);(0,s.j)("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return t},this.syncSelectedAndTabs=(t,e,n,o)=>{let a,i;a="_selected"===o?t:this.state._selected,i="_tabs"===o?t:this.state._tabs,i.length>0&&e.set("_selected",this.selectNextNotDisabledTab(a,i))},this.handleTabPanels=()=>{var t,e,n;if(this.tabPanelHost instanceof HTMLDivElement)for(let o=this.tabPanelHost.children.length;o<this.state._tabs.length;o++){const a=document.createElement("div");a.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${o}`),a.setAttribute("id",`tabpanel-${o}`),a.setAttribute("role","tabpanel"),a.setAttribute("hidden","");const i=document.createElement("slot");i.setAttribute("name",`tabpanel-slot-${o}`),a.appendChild(i),this.tabPanelHost.appendChild(a),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[o])&&(null===(n=this.host)||void 0===n||n.children[o].setAttribute("slot",`tabpanel-slot-${o}`))}},this.onCreate=t=>{var e,n;t.preventDefault(),t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(n=this.state._on)||void 0===n||n.onCreate(t))},this.onBlur=()=>{this.currentFocusIndex=void 0},this._align="top",this._behavior=void 0,this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(t){const e=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}goToPreviousTab(t){const e=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}activateFocusedTab(t){"number"==typeof this.currentFocusIndex&&this.onSelect(t,this.currentFocusIndex)}selectNextTabEvent(t,e,n="activateCompletely"){var o,a;this.currentFocusIndex=e,this.focusTabById(e),"activateCompletely"===n&&(this._selected=e,null===(a=null===(o=this.state._tabs[e]._on)||void 0===o?void 0:o.onSelect)||void 0===a||a.call(o,t,e),this.onSelect(t,e))}renderButtonGroup(){return(0,o.h)("div",{"aria-label":this.state._label,class:"tabs-button-group kol-button-group-wc",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map(((t,e)=>(0,o.h)(i.c,{_disabled:t._disabled,_icons:t._icons,_hideLabel:t._hideLabel,_label:t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_variant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e}))),this.showCreateTab&&(0,o.h)(i.c,{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return(0,o.h)(o.H,{key:"0d535b55a612656edc499daa7ded4edfde600fe5",class:"kol-tabs"},(0,o.h)("div",{key:"1233a6c4d1d90a1fb4944e01bcd6032d69c36346",ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._align}`]:!0}},this.renderButtonGroup(),(0,o.h)("div",{key:"f1b9332c5245e5bf01297be11139ef5cbe7a9782",class:"tabs-content",ref:this.catchTabPanelHost})))}validateAlign(t){(0,l.a)(this,t)}validateBehavior(t){((t,e)=>{(0,s.w)(t,"_behavior",(t=>"string"==typeof t&&h.includes(t)),new Set([`KoliBriTabBehavior {${h.join(", ")}`]),e)})(this,t)}validateLabel(t){(0,r.v)(this,t,{required:!0})}validateOn(t){if("object"==typeof t&&null!==t){(0,s.f)("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const e={};"function"!=typeof t.onCreate&&"object"!=typeof t.onCreate||("object"==typeof t.onCreate?("string"==typeof t.onCreate.label&&t.onCreate.label.length>0?this.onCreateLabel=t.onCreate.label:d.L.debug("[KolTabs] The label text for New in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} is not set correctly."),"function"==typeof t.onCreate.callback?e.onCreate=t.onCreate.callback:d.L.debug("[KolTabs] The onCreate callback function for New in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} is not set correctly.")):e.onCreate=t.onCreate,this.showCreateTab="function"==typeof e.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),(0,s.s)(this,"_on",e)}}validateSelected(t){(0,s.k)(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){(0,s.g)(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),(0,s.h)("KolTabs",this.state._tabs.length)}componentWillLoad(){this.validateAlign(this._align),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateBehavior(this._behavior)}componentDidRender(){if(this.handleTabPanels(),this.tabPanelHost instanceof HTMLDivElement)for(let t=0;t<this.tabPanelHost.children.length;t++)t!==this.state._selected?this.tabPanelHost.children[t].setAttribute("hidden",""):this.tabPanelHost.children[t].removeAttribute("hidden")}focusTabById(t){if(this.tabPanelsElement){const e=(0,s.v)(`button#${this.state._label.replace(/\s/g,"-")}-tab-${t}`,this.tabPanelsElement);null==e||e.focus()}}onSelect(t,e){var n,o;null===(o=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===o||o.call(n,t,e),this.focusTabById(e)}get host(){return(0,o.g)(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};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  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\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-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\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-wc .tooltip-content {\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    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div {\n    display: grid;\n  }\n  .tabs-content {\n    overflow: auto;\n  }\n  .tabs-button-group {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  .tabs-button-group button {\n    border-bottom-color: transparent;\n    border-bottom-style: solid;\n    display: block;\n  }\n  div.grid,\n  div[role=tabpanel] {\n    height: 100%;\n  }\n  :host > .tabs-align-right {\n    display: grid;\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-right .tabs-button-group {\n    flex-direction: column;\n    order: 2;\n  }\n  :host > .tabs-align-right .tabs-button-group .kol-button-wc {\n    width: 100%;\n  }\n  :host > .tabs-align-left {\n    display: grid;\n    grid-template-columns: auto 1fr;\n  }\n  :host > .tabs-align-left .tabs-button-group {\n    flex-direction: column;\n    order: 0;\n  }\n  :host > .tabs-align-left .tabs-button-group .kol-button-wc {\n    width: 100%;\n  }\n  :host > .tabs-align-bottom {\n    display: grid;\n    grid-template-rows: 1fr auto;\n  }\n  :host > .tabs-align-bottom .tabs-button-group {\n    order: 2;\n  }\n  :host > .tabs-align-bottom .tabs-button-group > div {\n    display: flex;\n    margin: 0 1em;\n  }\n  :host > .tabs-align-bottom .tabs-button-group > div > div:first-child {\n    margin: 0 1em 0 0;\n  }\n  :host > .tabs-align-top {\n    display: grid;\n    grid-template-rows: auto 1fr;\n  }\n  :host > .tabs-align-top .tabs-button-group {\n    order: 0;\n  }\n  :host > .tabs-align-top .tabs-button-group > div {\n    display: flex;\n  }\n  :host > .tabs-align-top .tabs-button-group > div > div {\n    margin: 0 1em;\n  }\n  :host > .tabs-align-top .tabs-button-group > div > div:first-child {\n    margin: 0 1em 0 0;\n  }\n}"}},1116:(t,e,n)=>{n.d(e,{a:()=>c,b:()=>l,c:()=>r,h:()=>a,v:()=>h});var o=n(3101);const a=[0,1,2,3,4,5,6],i=/[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(i))||void 0===e?void 0:e.length)||0}(t)>=e}function r(t){return s.test(t)}const d=new Set(["string"]),h=(t,e,n={})=>{(0,o.w)(t,"_label",(t=>"string"==typeof t),d,e,function(t){var e;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(e,n,a,i)=>{var s,d;"function"==typeof(null===(s=t.hooks)||void 0===s?void 0:s.afterPatch)&&(null===(d=t.hooks)||void 0===d||d.afterPatch(e,n,a,i)),"string"==typeof e&&!1===l(e,3)&&!1===r(e)&&(0,o.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,o.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=t.hooks)||void 0===e?void 0:e.beforePatch}})}(n))},c=h},1523:(t,e,n)=>{n.d(e,{b:()=>s,h:()=>a,p:()=>o,s:()=>i});let o="development";try{o="production"}catch(t){o="production"}const a=(t,e,n)=>{if(t&&e&&"string"==typeof n){const o=t.querySelector(`[slot="${n}"]`);o&&e.appendChild(o)}},i=t=>""===t,s=(t,e)=>t||e||""}}]);
+"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5912],{3404:(t,e,n)=>{n.d(e,{a:()=>s,v:()=>a});var o=n(5396);const a=(t,e,n)=>{(0,o.w)(t,e,(t=>"string"==typeof t&&i.includes(t)),new Set(i),n,{defaultValue:"top"})},i=["left","right","top","bottom"],s=(t,e)=>{a(t,"_align",e)}},1100:(t,e,n)=>{n.d(e,{t:()=>i});var o=n(8457),a=n(1523);let i=(t,e)=>{var n;return(null!==(n=(0,o.g)())&&void 0!==n?n:(0,o.i)("de")).translate(t,e)};"test"===a.p&&(i=t=>t)},5912:(t,e,n)=>{n.r(e),n.d(e,{kol_tabs:()=>u});var o=n(1316),a=n(1100),i=n(1491),s=n(5396),l=n(3404),r=n(2235),d=n(6448);const h=["select-automatic","select-manual"];var c,b;(b=c||(c={})).ArrowDown="ArrowDown",b.ArrowLeft="ArrowLeft",b.ArrowRight="ArrowRight",b.ArrowUp="ArrowUp",b.Enter="Enter",b.Space=" ";const u=class{constructor(t){(0,o.r)(this,t),this.onCreateLabel=`${(0,a.t)("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,n=1)=>{const o=e+n;return o<t.length?t[o]._disabled?this.nextPossibleTabIndex(t,e,n+1):o:e},this.prevPossibleTabIndex=(t,e,n=1)=>{const o=e-n;return o>=0?t[o]._disabled?this.prevPossibleTabIndex(t,e,n+1):o:e},this.onKeyDown=t=>{switch(t.key){case c.ArrowRight:this.goToNextTab(t);break;case c.ArrowLeft:this.goToPreviousTab(t);break;case c.Space:case c.Enter:this.activateFocusedTab(t)}},this.onClickSelect=(t,e)=>{this.selectNextTabEvent(t,e)},this.onMouseDown=t=>{t.preventDefault(),t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,n=!0,o)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===n){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,o||t);t=o||t,n=!1}if(!1===n){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,o||t);(0,s.j)("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return t},this.syncSelectedAndTabs=(t,e,n,o)=>{let a,i;a="_selected"===o?t:this.state._selected,i="_tabs"===o?t:this.state._tabs,i.length>0&&e.set("_selected",this.selectNextNotDisabledTab(a,i))},this.handleTabPanels=()=>{var t,e,n;if(this.tabPanelHost instanceof HTMLDivElement)for(let o=this.tabPanelHost.children.length;o<this.state._tabs.length;o++){const a=document.createElement("div");a.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${o}`),a.setAttribute("id",`tabpanel-${o}`),a.setAttribute("role","tabpanel"),a.setAttribute("hidden","");const i=document.createElement("slot");i.setAttribute("name",`tabpanel-slot-${o}`),a.appendChild(i),this.tabPanelHost.appendChild(a),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[o])&&(null===(n=this.host)||void 0===n||n.children[o].setAttribute("slot",`tabpanel-slot-${o}`))}},this.onCreate=t=>{var e,n;t.preventDefault(),t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(n=this.state._on)||void 0===n||n.onCreate(t))},this.onBlur=()=>{this.currentFocusIndex=void 0},this._align="top",this._behavior=void 0,this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(t){const e=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}goToPreviousTab(t){const e=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}activateFocusedTab(t){"number"==typeof this.currentFocusIndex&&this.onSelect(t,this.currentFocusIndex)}selectNextTabEvent(t,e,n="activateCompletely"){var o,a;this.currentFocusIndex=e,this.focusTabById(e),"activateCompletely"===n&&(this._selected=e,null===(a=null===(o=this.state._tabs[e]._on)||void 0===o?void 0:o.onSelect)||void 0===a||a.call(o,t,e),this.onSelect(t,e))}renderButtonGroup(){return(0,o.h)("div",{"aria-label":this.state._label,class:"tabs-button-group kol-button-group-wc",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map(((t,e)=>(0,o.h)(i.c,{_disabled:t._disabled,_icons:t._icons,_hideLabel:t._hideLabel,_label:t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_variant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e}))),this.showCreateTab&&(0,o.h)(i.c,{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return(0,o.h)(o.H,{key:"0d535b55a612656edc499daa7ded4edfde600fe5",class:"kol-tabs"},(0,o.h)("div",{key:"1233a6c4d1d90a1fb4944e01bcd6032d69c36346",ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._align}`]:!0}},this.renderButtonGroup(),(0,o.h)("div",{key:"f1b9332c5245e5bf01297be11139ef5cbe7a9782",class:"tabs-content",ref:this.catchTabPanelHost})))}validateAlign(t){(0,l.a)(this,t)}validateBehavior(t){((t,e)=>{(0,s.w)(t,"_behavior",(t=>"string"==typeof t&&h.includes(t)),new Set([`KoliBriTabBehavior {${h.join(", ")}`]),e)})(this,t)}validateLabel(t){(0,r.v)(this,t,{required:!0})}validateOn(t){if("object"==typeof t&&null!==t){(0,s.f)("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const e={};"function"!=typeof t.onCreate&&"object"!=typeof t.onCreate||("object"==typeof t.onCreate?("string"==typeof t.onCreate.label&&t.onCreate.label.length>0?this.onCreateLabel=t.onCreate.label:d.L.debug("[KolTabs] The label text for New in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} is not set correctly."),"function"==typeof t.onCreate.callback?e.onCreate=t.onCreate.callback:d.L.debug("[KolTabs] The onCreate callback function for New in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} is not set correctly.")):e.onCreate=t.onCreate,this.showCreateTab="function"==typeof e.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),(0,s.s)(this,"_on",e)}}validateSelected(t){(0,s.k)(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){(0,s.g)(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),(0,s.h)("KolTabs",this.state._tabs.length)}componentWillLoad(){this.validateAlign(this._align),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateBehavior(this._behavior)}componentDidRender(){if(this.handleTabPanels(),this.tabPanelHost instanceof HTMLDivElement)for(let t=0;t<this.tabPanelHost.children.length;t++)t!==this.state._selected?this.tabPanelHost.children[t].setAttribute("hidden",""):this.tabPanelHost.children[t].removeAttribute("hidden")}focusTabById(t){if(this.tabPanelsElement){const e=(0,s.v)(`button#${this.state._label.replace(/\s/g,"-")}-tab-${t}`,this.tabPanelsElement);null==e||e.focus()}}onSelect(t,e){var n,o;null===(o=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===o||o.call(n,t,e),this.focusTabById(e)}get host(){return(0,o.g)(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};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  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\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-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\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-wc .tooltip-content {\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    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div {\n    display: grid;\n  }\n  .tabs-content {\n    overflow: auto;\n  }\n  .tabs-button-group {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  .tabs-button-group button {\n    border-bottom-color: transparent;\n    border-bottom-style: solid;\n    display: block;\n  }\n  div.grid,\n  div[role=tabpanel] {\n    height: 100%;\n  }\n  :host > .tabs-align-right {\n    display: grid;\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-right .tabs-button-group {\n    flex-direction: column;\n    order: 2;\n  }\n  :host > .tabs-align-right .tabs-button-group .kol-button-wc {\n    width: 100%;\n  }\n  :host > .tabs-align-left {\n    display: grid;\n    grid-template-columns: auto 1fr;\n  }\n  :host > .tabs-align-left .tabs-button-group {\n    flex-direction: column;\n    order: 0;\n  }\n  :host > .tabs-align-left .tabs-button-group .kol-button-wc {\n    width: 100%;\n  }\n  :host > .tabs-align-bottom {\n    display: grid;\n    grid-template-rows: 1fr auto;\n  }\n  :host > .tabs-align-bottom .tabs-button-group {\n    order: 2;\n  }\n  :host > .tabs-align-bottom .tabs-button-group > div {\n    display: flex;\n    margin: 0 1em;\n  }\n  :host > .tabs-align-bottom .tabs-button-group > div > div:first-child {\n    margin: 0 1em 0 0;\n  }\n  :host > .tabs-align-top {\n    display: grid;\n    grid-template-rows: auto 1fr;\n  }\n  :host > .tabs-align-top .tabs-button-group {\n    order: 0;\n  }\n  :host > .tabs-align-top .tabs-button-group > div {\n    display: flex;\n  }\n  :host > .tabs-align-top .tabs-button-group > div > div {\n    margin: 0 1em;\n  }\n  :host > .tabs-align-top .tabs-button-group > div > div:first-child {\n    margin: 0 1em 0 0;\n  }\n}"}},2235:(t,e,n)=>{n.d(e,{a:()=>c,b:()=>l,c:()=>r,h:()=>a,v:()=>h});var o=n(5396);const a=[0,1,2,3,4,5,6],i=/[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(i))||void 0===e?void 0:e.length)||0}(t)>=e}function r(t){return s.test(t)}const d=new Set(["string"]),h=(t,e,n={})=>{(0,o.w)(t,"_label",(t=>"string"==typeof t),d,e,function(t){var e;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(e,n,a,i)=>{var s,d;"function"==typeof(null===(s=t.hooks)||void 0===s?void 0:s.afterPatch)&&(null===(d=t.hooks)||void 0===d||d.afterPatch(e,n,a,i)),"string"==typeof e&&!1===l(e,3)&&!1===r(e)&&(0,o.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,o.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=t.hooks)||void 0===e?void 0:e.beforePatch}})}(n))},c=h},1523:(t,e,n)=>{n.d(e,{b:()=>s,h:()=>a,p:()=>o,s:()=>i});let o="development";try{o="production"}catch(t){o="production"}const a=(t,e,n)=>{if(t&&e&&"string"==typeof n){const o=t.querySelector(`[slot="${n}"]`);o&&e.appendChild(o)}},i=t=>""===t,s=(t,e)=>t||e||""}}]);