@public-ui/components 3.0.0-0a564237c37a5d1ca12470bdd73e4ea1eac06982.0 → 3.0.0-37e952f54ae220a836264edf844556a2c45116ea.0

package/dist/kolibri/kol-skip-nav.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-058cc56d.js";import{r as t,a as i}from"./unique-nav-labels-768d04e9.js";import{w as o}from"./validation-70143d97.js";import{e as a}from"./component-names-7ee7402b.js";import{v as l}from"./label-0219bcdb.js";import"./dev.utils-fab45cbc.js";import"./prop.validators-de1491c5.js";import"./index-0a773c52.js";const s="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-skip-nav {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-skip-nav__list {\n    display: grid;\n    list-style: none;\n    place-items: center;\n  }\n  .kol-skip-nav__list-item {\n    height: 0;\n  }\n  .kol-skip-nav .kol-link {\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .kol-skip-nav .kol-link:focus {\n    background-color: #fff;\n    left: unset;\n    position: unset;\n  }\n}",r=s,d=class{constructor(e){n(this,e),this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return e("nav",{key:"6696f974f96add5529fce40c73c96429d6d46c14",class:"kol-skip-nav","aria-label":this.state._label},e("ul",{key:"44472c7c253cb6bdffd89d999d9b5f11a39bad22",class:"kol-skip-nav__list"},this.state._links.map(((n,t)=>e("li",{class:"kol-skip-nav__list-item",key:t},e(a,Object.assign({},n)))))))}validateLabel(n,e,o=!1){o||t(this.state._label),l(this,n,{required:!0}),i(this.state._label)}validateLinks(n){o("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){t(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};d.style={default:r};export{d as kol_skip_nav};
+import{r as n,h as e}from"./index-62ec26b4.js";import{r as t,a as i}from"./unique-nav-labels-768d04e9.js";import{w as o}from"./validation-b0361862.js";import{e as a}from"./component-names-7ee7402b.js";import{v as l}from"./label-5355d0b2.js";import"./dev.utils-fab45cbc.js";import"./prop.validators-bb13c77c.js";import"./index-932feda8.js";const s="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-skip-nav {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-skip-nav__list {\n    display: grid;\n    list-style: none;\n    place-items: center;\n  }\n  .kol-skip-nav__list-item {\n    height: 0;\n  }\n  .kol-skip-nav .kol-link {\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .kol-skip-nav .kol-link:focus {\n    background-color: #fff;\n    left: unset;\n    position: unset;\n  }\n}",r=s,d=class{constructor(e){n(this,e),this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return e("nav",{key:"6696f974f96add5529fce40c73c96429d6d46c14",class:"kol-skip-nav","aria-label":this.state._label},e("ul",{key:"44472c7c253cb6bdffd89d999d9b5f11a39bad22",class:"kol-skip-nav__list"},this.state._links.map(((n,t)=>e("li",{class:"kol-skip-nav__list-item",key:t},e(a,Object.assign({},n)))))))}validateLabel(n,e,o=!1){o||t(this.state._label),l(this,n,{required:!0}),i(this.state._label)}validateLinks(n){o("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){t(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};d.style={default:r};export{d as kol_skip_nav};

package/dist/kolibri/kol-spin.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as i,F as o}from"./index-058cc56d.js";import{t}from"./i18n-efbafc80.js";import{c as r}from"./clsx-09a06a12.js";import{v as a}from"./show-46145480.js";import{w as s}from"./prop.validators-de1491c5.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";import"./index-0a773c52.js";import"./dev.utils-fab45cbc.js";const l=["cycle","dot","none"],c=(n,e)=>{s(n,"_variant",(n=>"string"==typeof n&&l.includes(n)),new Set(l),e)},d="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-spin__spinner--cycle {\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n    height: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__loader {\n    display: block;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    position: relative;\n    animation: 2s linear infinite rotate;\n  }\n  .kol-spin__loader::before {\n    content: \"\";\n    box-sizing: border-box;\n    position: absolute;\n    inset: 0;\n    border-radius: 50%;\n    border: 5px solid #333;\n    animation: 3s linear infinite prixClipFix;\n  }\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes prixClipFix {\n    0% {\n      border-color: #fff;\n      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n    }\n    25% {\n      border-color: #666;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n    }\n    50% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n    }\n    75% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n    }\n    100% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n    }\n  }\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .kol-spin__loader {\n      animation-duration: 4s;\n    }\n    .kol-spin__loader::before {\n      animation-duration: 6s;\n    }\n  }\n}\n@layer kol-component {\n  .kol-spin__spinner--dot {\n    height: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element {\n    animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    border-radius: 50%;\n    border: calc(0.16rem / var(--kolibri-root-font-size, 16)) solid #fff;\n    height: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    top: calc(0.16rem / var(--kolibri-root-font-size, 16));\n    width: calc(12.8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--1 {\n    background-color: #000;\n    z-index: 0;\n    animation: 1s infinite spin1;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--2 {\n    background-color: #000;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--3 {\n    background-color: #000;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: calc(17.6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--neutral {\n    background-color: #666;\n    z-index: 0;\n    animation: 1s infinite spin3;\n    left: calc(33.6rem / var(--kolibri-root-font-size, 16));\n  }\n  @keyframes spin1 {\n    0% {\n      transform: scale(0);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n  @keyframes spin2 {\n    0% {\n      transform: translate(0, 0);\n    }\n    100% {\n      transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), 0);\n    }\n  }\n  @keyframes spin3 {\n    0% {\n      transform: scale(1);\n    }\n    100% {\n      transform: scale(0);\n    }\n  }\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .kol-spin__spinner-element {\n      animation-duration: 2s;\n    }\n  }\n}\n@layer kol-component {\n  .kol-spin {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner {\n    display: block;\n    padding: calc(2rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n}",p=d;function h(n){switch(n){case"cycle":return e("span",{class:"kol-spin__loader"});case"none":return e("slot",{name:"expert"});default:return e(o,null,e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--1"}),e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--2"}),e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--3"}),e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--neutral"}))}}const m=class{constructor(e){n(this,e),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return e(i,{key:"728409fcfcd08192157e7b2e561ec6c0c1f482c7",class:"kol-spin"},this.state._show?e("span",{"aria-busy":"true","aria-label":t("kol-action-running"),"aria-live":"polite",class:r("kol-spin__spinner",`kol-spin__spinner--${this.state._variant}`),role:"alert"},h(this.state._variant)):this.showToggled&&e("span",{"aria-label":t("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(n){this.showToggled=!0===this.state._show&&!1===this._show,a(this,n)}validateVariant(n){c(this,n)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};m.style={default:p};export{m as kol_spin};
+import{r as n,h as e,H as i,F as o}from"./index-62ec26b4.js";import{t}from"./i18n-efbafc80.js";import{c as r}from"./clsx-09a06a12.js";import{v as a}from"./show-fea62c9e.js";import{w as s}from"./prop.validators-bb13c77c.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";import"./index-932feda8.js";import"./dev.utils-fab45cbc.js";const l=["cycle","dot","none"],c=(n,e)=>{s(n,"_variant",(n=>"string"==typeof n&&l.includes(n)),new Set(l),e)},d="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-spin__spinner--cycle {\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n    height: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__loader {\n    display: block;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    position: relative;\n    animation: 2s linear infinite rotate;\n  }\n  .kol-spin__loader::before {\n    content: \"\";\n    box-sizing: border-box;\n    position: absolute;\n    inset: 0;\n    border-radius: 50%;\n    border: 5px solid #333;\n    animation: 3s linear infinite prixClipFix;\n  }\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes prixClipFix {\n    0% {\n      border-color: #fff;\n      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n    }\n    25% {\n      border-color: #666;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n    }\n    50% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n    }\n    75% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n    }\n    100% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n    }\n  }\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .kol-spin__loader {\n      animation-duration: 4s;\n    }\n    .kol-spin__loader::before {\n      animation-duration: 6s;\n    }\n  }\n}\n@layer kol-component {\n  .kol-spin__spinner--dot {\n    height: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element {\n    animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    border-radius: 50%;\n    border: calc(0.16rem / var(--kolibri-root-font-size, 16)) solid #fff;\n    height: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    top: calc(0.16rem / var(--kolibri-root-font-size, 16));\n    width: calc(12.8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--1 {\n    background-color: #000;\n    z-index: 0;\n    animation: 1s infinite spin1;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--2 {\n    background-color: #000;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--3 {\n    background-color: #000;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: calc(17.6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--neutral {\n    background-color: #666;\n    z-index: 0;\n    animation: 1s infinite spin3;\n    left: calc(33.6rem / var(--kolibri-root-font-size, 16));\n  }\n  @keyframes spin1 {\n    0% {\n      transform: scale(0);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n  @keyframes spin2 {\n    0% {\n      transform: translate(0, 0);\n    }\n    100% {\n      transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), 0);\n    }\n  }\n  @keyframes spin3 {\n    0% {\n      transform: scale(1);\n    }\n    100% {\n      transform: scale(0);\n    }\n  }\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .kol-spin__spinner-element {\n      animation-duration: 2s;\n    }\n  }\n}\n@layer kol-component {\n  .kol-spin {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner {\n    display: block;\n    padding: calc(2rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n}",p=d;function h(n){switch(n){case"cycle":return e("span",{class:"kol-spin__loader"});case"none":return e("slot",{name:"expert"});default:return e(o,null,e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--1"}),e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--2"}),e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--3"}),e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--neutral"}))}}const m=class{constructor(e){n(this,e),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return e(i,{key:"728409fcfcd08192157e7b2e561ec6c0c1f482c7",class:"kol-spin"},this.state._show?e("span",{"aria-busy":"true","aria-label":t("kol-action-running"),"aria-live":"polite",class:r("kol-spin__spinner",`kol-spin__spinner--${this.state._variant}`),role:"alert"},h(this.state._variant)):this.showToggled&&e("span",{"aria-label":t("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(n){this.showToggled=!0===this.state._show&&!1===this._show,a(this,n)}validateVariant(n){c(this,n)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};m.style={default:p};export{m as kol_spin};

package/dist/kolibri/kol-split-button.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as t}from"./index-058cc56d.js";import{t as e}from"./i18n-efbafc80.js";import{k as o,a as i}from"./component-names-7ee7402b.js";import{c as s}from"./clsx-09a06a12.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";const a="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-popover {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: 0;\n    position: absolute;\n  }\n  .kol-popover__content {\n    background-color: #fff;\n    min-height: max-content;\n    min-width: max-content;\n    opacity: 0;\n    position: absolute;\n  }\n  .kol-popover__content--visible {\n    animation: 0.3s ease-in forwards fadeInOpacity;\n  }\n  .kol-popover__content--disappear {\n    animation: 0.3s ease-in backwards fadeInOpacity;\n  }\n  .kol-popover__arrow {\n    background-color: inherit;\n    height: var(--font-size);\n    position: absolute;\n    rotate: 0.125turn;\n    width: var(--font-size);\n    z-index: -1;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-split-button {\n    display: flex;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .kol-split-button__root {\n    display: flex;\n    position: relative;\n  }\n  .kol-split-button__button {\n    flex-grow: 1;\n    text-align: left;\n  }\n  .kol-split-button .kol-popover__content {\n    margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-popover__arrow {\n    display: none;\n  }\n}",l=a,r=class{constructor(t){n(this,t),this.clickButtonHandler={onClick:n=>{var t,e;n.stopPropagation(),"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onClick)?null===(e=this._on)||void 0===e||e.onClick(n,this._value):this.toggleDropdown()}},this.clickToggleHandler={onClick:n=>{n.stopPropagation(),this.toggleDropdown()}},this.toggleDropdown=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!this.state._show})},this.handleOnClose=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!1})},this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_show:!1}}render(){const n="kol-split-button-dropdown-label";return t("div",{key:"0c88a85fb8276e85ec24cb2e4c6d5b4ea5f4def5",class:"kol-split-button"},t("div",{key:"dc3714e07c2520223c2b8cad45898e9815282681",class:"kol-split-button__root"},t(i,{key:"b7f61444b57f22216b4614c2a713c33585183ba1",class:s("kol-split-button__button",{[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0}),_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),t("div",{key:"fcb8212ab113127e25ebea6b1b69e90fa2c767ae",class:"kol-split-button__horizontal-line"}),t(i,{key:"81fe77362ce48e18fa23d20c6801a8d2cd224a15",class:"kol-split-button__secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?e(`${n}-close`):e(`${n}-open`),_on:this.clickToggleHandler})),t(o,{key:"a70171de4785124fec0f53ece004864f1ef0d2f7",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},t("slot",{key:"9ce7ea4b4157712fed4b866c18f50842fbd83704"})))}async closePopup(){return this.handleOnClose(),Promise.resolve()}static get delegatesFocus(){return!0}};r.style={default:l};export{r as kol_split_button};
+import{r as n,h as t}from"./index-62ec26b4.js";import{t as e}from"./i18n-efbafc80.js";import{k as o,a as i}from"./component-names-7ee7402b.js";import{c as s}from"./clsx-09a06a12.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";const a="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-popover {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: 0;\n    position: absolute;\n  }\n  .kol-popover__content {\n    background-color: #fff;\n    min-height: max-content;\n    min-width: max-content;\n    opacity: 0;\n    position: absolute;\n  }\n  .kol-popover__content--visible {\n    animation: 0.3s ease-in forwards fadeInOpacity;\n  }\n  .kol-popover__content--disappear {\n    animation: 0.3s ease-in backwards fadeInOpacity;\n  }\n  .kol-popover__arrow {\n    background-color: inherit;\n    height: var(--font-size);\n    position: absolute;\n    rotate: 0.125turn;\n    width: var(--font-size);\n    z-index: -1;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-split-button {\n    display: flex;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .kol-split-button__root {\n    display: flex;\n    position: relative;\n  }\n  .kol-split-button__button {\n    flex-grow: 1;\n    text-align: left;\n  }\n  .kol-split-button .kol-popover__content {\n    margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-popover__arrow {\n    display: none;\n  }\n}",l=a,r=class{constructor(t){n(this,t),this.clickButtonHandler={onClick:n=>{var t,e;n.stopPropagation(),"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onClick)?null===(e=this._on)||void 0===e||e.onClick(n,this._value):this.toggleDropdown()}},this.clickToggleHandler={onClick:n=>{n.stopPropagation(),this.toggleDropdown()}},this.toggleDropdown=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!this.state._show})},this.handleOnClose=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!1})},this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_show:!1}}render(){const n="kol-split-button-dropdown-label";return t("div",{key:"0c88a85fb8276e85ec24cb2e4c6d5b4ea5f4def5",class:"kol-split-button"},t("div",{key:"dc3714e07c2520223c2b8cad45898e9815282681",class:"kol-split-button__root"},t(i,{key:"b7f61444b57f22216b4614c2a713c33585183ba1",class:s("kol-split-button__button",{[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0}),_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),t("div",{key:"fcb8212ab113127e25ebea6b1b69e90fa2c767ae",class:"kol-split-button__horizontal-line"}),t(i,{key:"81fe77362ce48e18fa23d20c6801a8d2cd224a15",class:"kol-split-button__secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?e(`${n}-close`):e(`${n}-open`),_on:this.clickToggleHandler})),t(o,{key:"a70171de4785124fec0f53ece004864f1ef0d2f7",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},t("slot",{key:"9ce7ea4b4157712fed4b866c18f50842fbd83704"})))}async closePopup(){return this.handleOnClose(),Promise.resolve()}static get delegatesFocus(){return!0}};r.style={default:l};export{r as kol_split_button};

package/dist/kolibri/kol-table-settings-wc.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as e,h as t,g as s}from"./index-058cc56d.js";import{t as a}from"./i18n-efbafc80.js";import{l as i,b as l,m as n,n as o,a as c,i as b}from"./component-names-7ee7402b.js";import{d,K as r}from"./events-5886c68b.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";const h=class{constructor(t){e(this,t),this.tableSettings={columns:[]},this.errorMessage=null,this._tableSettings={columns:[]}}handleTableSettingsChange(e){this.tableSettings=Object.assign(Object.assign({},e),{columns:this.sortColumnsByPosition(e.columns)})}componentWillLoad(){this.handleTableSettingsChange(this._tableSettings)}sortColumnsByPosition(e){return[...e].sort(((e,t)=>e.position-t.position))}moveColumn(e,t){const s=[...this.tableSettings.columns],a=s.findIndex((t=>t.key===e)),i="up"===t?a-1:a+1,n=s[a],l=s[i],o=s.map((e=>e.key===n.key?Object.assign(Object.assign({},e),{position:l.position}):e.key===l.key?Object.assign(Object.assign({},e),{position:n.position}):e));this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.sortColumnsByPosition(o)})}handleVisibilityChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map((s=>s.key===e?Object.assign(Object.assign({},s),{visible:Boolean(t)}):s))})}handleWidthChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map((s=>s.key===e?Object.assign(Object.assign({},s),{width:Number(t)}):s))})}handleCancel(){var e;null===(e=this.popoverRef)||void 0===e||e.hidePopover()}handleSubmit(e){var t;e.preventDefault();const s=this.tableSettings.columns.some((e=>e.visible));s?this.host&&(this.errorMessage=null,d(this.host,r.settingsChange,this.tableSettings),null===(t=this.popoverRef)||void 0===t||t.hidePopover()):this.errorMessage=a("kol-table-settings-error-all-invisible")}render(){const e=[...this.tableSettings.columns].sort(((e,t)=>e.position-t.position));return t(b,{key:"a3e0145a3399d8dee361f7e29e34198b1ec99b27",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"codicon codicon-settings-gear",_label:a("kol-table-settings"),_popoverAlign:"top",_hideLabel:!0},t("div",{key:"66f2e14ac78f6d865a6a6ad9e2393c94c42fa8a7",class:"kol-table-settings__content"},t(i,{key:"558f2b97ac8c7f049147125a642e5e4862108dda",_label:a("kol-table-settings"),_level:0}),this.errorMessage&&t(l,{key:"433c0381c504eff423516b40d899751ae5ea4658",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),t("form",{key:"404aae1da74273e840c1980fe3a94d126cbfbe8b",onSubmit:this.handleSubmit.bind(this)},t("div",{key:"d18a3fe79c0f576dbf23444eb06a744d003b77af",class:"kol-table-settings__columns-container"},t("div",{key:"adb1ad8d4afc6e0dc062f7dfb2cbbfebbc5b83d1",class:"kol-table-settings__columns"},e.map(((s,i)=>t("div",{key:s.key,class:"kol-table-settings__column"},t(n,{_checked:s.visible,_label:a("kol-table-settings-show-column",{placeholders:{column:s.label}}),_value:!0,_hideLabel:!0,_on:{onInput:(e,t)=>this.handleVisibilityChange(s.key,t)}}),t("span",null,s.label),t(o,{_hideLabel:!0,_value:s.width,_label:a("kol-table-settings-column-width",{placeholders:{column:s.label}}),_min:1,_on:{onInput:(e,t)=>this.handleWidthChange(s.key,t)}}),t(c,{_icons:"codicon codicon-arrow-up",_label:a("kol-table-settings-move-up",{placeholders:{column:s.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"up")},_disabled:0===i,"data-testid":"table-settings-move-up"}),t(c,{_icons:"codicon codicon-arrow-down",_label:a("kol-table-settings-move-down",{placeholders:{column:s.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"down")},_disabled:i===e.length-1,"data-testid":"table-settings-move-down"})))))),t("div",{key:"d0f48d73ce013cbd5b185a437756482c855ac9dc",class:"kol-table-settings__actions"},t(c,{key:"a7e5797e348e821f8054a92121ecff1d61b13135",_label:a("kol-table-settings-cancel"),_variant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),t(c,{key:"b42ca9c4f951fcc93a281f022dabafda59fe3373",_label:a("kol-table-settings-apply"),_variant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return s(this)}static get watchers(){return{_tableSettings:["handleTableSettingsChange"]}}};export{h as kol_table_settings_wc};
+import{r as e,h as t,g as s}from"./index-62ec26b4.js";import{t as a}from"./i18n-efbafc80.js";import{l as i,b as l,m as n,n as o,a as c,i as b}from"./component-names-7ee7402b.js";import{d,K as r}from"./events-5886c68b.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";const h=class{constructor(t){e(this,t),this.tableSettings={columns:[]},this.errorMessage=null,this._tableSettings={columns:[]}}handleTableSettingsChange(e){this.tableSettings=Object.assign(Object.assign({},e),{columns:this.sortColumnsByPosition(e.columns)})}componentWillLoad(){this.handleTableSettingsChange(this._tableSettings)}sortColumnsByPosition(e){return[...e].sort(((e,t)=>e.position-t.position))}moveColumn(e,t){const s=[...this.tableSettings.columns],a=s.findIndex((t=>t.key===e)),i="up"===t?a-1:a+1,n=s[a],l=s[i],o=s.map((e=>e.key===n.key?Object.assign(Object.assign({},e),{position:l.position}):e.key===l.key?Object.assign(Object.assign({},e),{position:n.position}):e));this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.sortColumnsByPosition(o)})}handleVisibilityChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map((s=>s.key===e?Object.assign(Object.assign({},s),{visible:Boolean(t)}):s))})}handleWidthChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map((s=>s.key===e?Object.assign(Object.assign({},s),{width:Number(t)}):s))})}handleCancel(){var e;null===(e=this.popoverRef)||void 0===e||e.hidePopover()}handleSubmit(e){var t;e.preventDefault();const s=this.tableSettings.columns.some((e=>e.visible));s?this.host&&(this.errorMessage=null,d(this.host,r.settingsChange,this.tableSettings),null===(t=this.popoverRef)||void 0===t||t.hidePopover()):this.errorMessage=a("kol-table-settings-error-all-invisible")}render(){const e=[...this.tableSettings.columns].sort(((e,t)=>e.position-t.position));return t(b,{key:"a3e0145a3399d8dee361f7e29e34198b1ec99b27",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"codicon codicon-settings-gear",_label:a("kol-table-settings"),_popoverAlign:"top",_hideLabel:!0},t("div",{key:"66f2e14ac78f6d865a6a6ad9e2393c94c42fa8a7",class:"kol-table-settings__content"},t(i,{key:"558f2b97ac8c7f049147125a642e5e4862108dda",_label:a("kol-table-settings"),_level:0}),this.errorMessage&&t(l,{key:"433c0381c504eff423516b40d899751ae5ea4658",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),t("form",{key:"404aae1da74273e840c1980fe3a94d126cbfbe8b",onSubmit:this.handleSubmit.bind(this)},t("div",{key:"d18a3fe79c0f576dbf23444eb06a744d003b77af",class:"kol-table-settings__columns-container"},t("div",{key:"adb1ad8d4afc6e0dc062f7dfb2cbbfebbc5b83d1",class:"kol-table-settings__columns"},e.map(((s,i)=>t("div",{key:s.key,class:"kol-table-settings__column"},t(n,{_checked:s.visible,_label:a("kol-table-settings-show-column",{placeholders:{column:s.label}}),_value:!0,_hideLabel:!0,_on:{onInput:(e,t)=>this.handleVisibilityChange(s.key,t)}}),t("span",null,s.label),t(o,{_hideLabel:!0,_value:s.width,_label:a("kol-table-settings-column-width",{placeholders:{column:s.label}}),_min:1,_on:{onInput:(e,t)=>this.handleWidthChange(s.key,t)}}),t(c,{_icons:"codicon codicon-arrow-up",_label:a("kol-table-settings-move-up",{placeholders:{column:s.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"up")},_disabled:0===i,"data-testid":"table-settings-move-up"}),t(c,{_icons:"codicon codicon-arrow-down",_label:a("kol-table-settings-move-down",{placeholders:{column:s.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"down")},_disabled:i===e.length-1,"data-testid":"table-settings-move-down"})))))),t("div",{key:"d0f48d73ce013cbd5b185a437756482c855ac9dc",class:"kol-table-settings__actions"},t(c,{key:"a7e5797e348e821f8054a92121ecff1d61b13135",_label:a("kol-table-settings-cancel"),_variant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),t(c,{key:"b42ca9c4f951fcc93a281f022dabafda59fe3373",_label:a("kol-table-settings-apply"),_variant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return s(this)}static get watchers(){return{_tableSettings:["handleTableSettingsChange"]}}};export{h as kol_table_settings_wc};

package/dist/kolibri/kol-table-stateful.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as t,H as e,g as i}from"./index-058cc56d.js";import{o,p as a}from"./component-names-7ee7402b.js";import{t as l}from"./i18n-efbafc80.js";import{K as s,d as r}from"./events-5886c68b.js";import{v as d,a as h,b as c,c as b,d as u,C as p}from"./table-settings-9d7f54fa.js";import{w as f,s as m,q as _,i as g,p as k,o as v,j as y}from"./prop.validators-de1491c5.js";import{v as w}from"./label-0219bcdb.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";import"./common-54bf85ba.js";import"./index-0a773c52.js";import"./dev.utils-fab45cbc.js";const x=["top","bottom","both"],z=(t,n)=>{f(t,"_paginationPosition",(t=>"string"==typeof t&&x.includes(t)),new Set([`PaginationPositionPropType {${x.join(", ")}`]),n,{defaultValue:"bottom"})},S="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    margin: auto;\n    width: 100%;\n  }\n}\n@layer kol-component {\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    border: 1px solid #000;\n    margin: 0;\n    padding: 0;\n  }\n}\n@layer kol-component {\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: 1;\n  }\n  .kol-table-settings__columns-container {\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(200rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    align-items: center;\n    display: grid;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content 1fr calc(100rem / var(--kolibri-root-font-size, 16)) auto auto;\n    overflow: hidden;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n    position: relative;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__focus-element:focus {\n    outline: 0 !important;\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n    display: grid;\n    place-items: center;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  @media (min-width: 1024px) {\n    .kol-pagination {\n      display: flex;\n    }\n  }\n  @media (max-width: 1024px) {\n    .kol-pagination {\n      flex-direction: column;\n    }\n  }\n}",j=S,C=[10,20,50,100],O=t=>!0===t||""===t||"object"==typeof t&&null!==t,P=class{constructor(t){n(this,t),this.catchRef=t=>{this.tableWcRef=t},this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.handlePagination={onClick:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,n),m(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePage:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,n),m(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePageSize:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,n),m(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),m(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=()=>{if(this.disableSort)return void m(this,"_sortedData",this.state._data);const t=[...this.state._data];this.sortData.length>0&&t.sort(((t,n)=>{for(let e=0;e<this.sortData.length;e++){const i=this.sortData[e],a=i.compareFn(t,n);if(0!==a)return"ASC"===i.direction?a:-a}return 0})),m(this,"_sortedData",t)},this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0,this._tableSettings=void 0,this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){f(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){d(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){h(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){z(this,t)}changeCellSort(t){var n;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key==(null===(n=this.sortData[0])||void 0===n?void 0:n.key)||(this.sortData=[]);const e=this.sortData.findIndex((n=>n.key===t.key));if(e>=0){const t=this.sortData[e];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(e,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData()}}validateHeaders(t){_(t,(()=>{v(t,(()=>{try{t=k(t)}catch(t){}f(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,e,i,a;const o=t=>{let n=!1;t.forEach((t=>{const e=t.key;if(!e)return;const i=t.sortDirection;"ASC"!==i&&"DESC"!==i||"function"==typeof t.compareFn&&((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:e,compareFn:t.compareFn,direction:i}),n=!0)})),n&&setTimeout((()=>this.updateSortedData()))},l=t;null===(n=l.horizontal)||void 0===n||n.forEach(o),null===(e=l.vertical)||void 0===e||e.forEach(o),l.horizontal&&l.vertical&&(null===(i=l.horizontal)||void 0===i?void 0:i.length)>0&&(null===(a=l.vertical)||void 0===a?void 0:a.length)>0&&(this.disableSort=!0,y("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})}))}))}validateLabel(t){w(this,t,{required:!0})}validateMinWidth(t){g(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){c(this,t)}validateOn(t){b(this,t)}validateTableSettings(t){u(this,t)}validatePagination(t){try{t=k(t)}catch(t){}this.showPagination=O(t),f(this,"_pagination",O,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener(s.selectionChange,this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener(s.selectionChange,this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateTableSettings(this._tableSettings)}selectDisplayedData(t,n,e){return"number"==typeof n&&n>0&&"number"==typeof e&&e>0?(this.pageStartSlice=n*(e-1),this.pageEndSlice=n*e>t.length?t.length:n*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(n){const e=l("kol-table-pagination-label",{placeholders:{label:`${this.state._label} (${l(`kol-pagination-position-${n}`)})`}});return t("div",{class:`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`},t("span",null,l("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),t("div",{class:"kol-table-stateful__pagination-wrapper"},t(o,{class:"test",_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||C,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:e})))}getHeaderCellSortState(t){if(!this.disableSort&&"function"==typeof t.compareFn){if(t.key){const n=this.sortData.find((n=>n.key===t.key));if(null==n?void 0:n.direction)return n.direction}return"NOS"}}handleSort({key:t}){const n=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((n=>n.key===t));n&&this.changeCellSort(n)}getSelectedData(t){var n;const e=this.state._selection;if(e){const i=null!==(n=e.keyPropertyName)&&void 0!==n?n:"id",a=this.state._sortedData.filter((n=>t.includes(n[i])));if(!1===(null==e?void 0:e.multiple))return a[0];if(i)return a}return null}handleSelectionChange(t,n){var e;const i=this.state._selection;i&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},i),{selectedKeys:"object"==typeof n?n:[n]})}));const a=this.getSelectedData(n);"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e[p.onSelectionChange])&&this.state._on[p.onSelectionChange](t,a),this.host&&r(this.host,s.selectionChange,a)}async getSelection(){var t;const n=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(n)}render(){var n,i,o,l,s,r;const d=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(i=null===(n=this.state._pagination)||void 0===n?void 0:n._pageSize)&&void 0!==i?i:10:this.state._sortedData.length,this.state._pagination._page||1),h="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("top"):null,c="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("bottom"):null,p={horizontal:null!==(l=null===(o=this.state._headers.horizontal)||void 0===o?void 0:o.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))))&&void 0!==l?l:[],vertical:null!==(r=null===(s=this.state._headers.vertical)||void 0===s?void 0:s.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))))&&void 0!==r?r:[]};return t(e,{key:"28ef6723c730e6f9a52694c65b984b27b97bbe43",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&h,t(a,{key:"78fcf96661bd3e57bc41fbc3523096e7de513eeb",ref:this.catchRef,_data:d,_headerCells:p,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection,_tableSettings:this.state._tableSettings}),this.pageEndSlice>0&&this.showPagination&&c)}get host(){return i(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_tableSettings:["validateTableSettings"],_pagination:["validatePagination"]}}};P.style={default:j};export{P as kol_table_stateful};
+import{r as n,h as t,H as e,g as i}from"./index-62ec26b4.js";import{o,p as a}from"./component-names-7ee7402b.js";import{t as l}from"./i18n-efbafc80.js";import{K as s,d as r}from"./events-5886c68b.js";import{v as d,a as h,b as c,c as b,d as u,C as p}from"./table-settings-4fe55021.js";import{w as f,s as m,q as _,i as g,p as k,o as v,j as y}from"./prop.validators-bb13c77c.js";import{v as w}from"./label-5355d0b2.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";import"./common-54bf85ba.js";import"./index-932feda8.js";import"./dev.utils-fab45cbc.js";const x=["top","bottom","both"],z=(t,n)=>{f(t,"_paginationPosition",(t=>"string"==typeof t&&x.includes(t)),new Set([`PaginationPositionPropType {${x.join(", ")}`]),n,{defaultValue:"bottom"})},S="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    margin: auto;\n    width: 100%;\n  }\n}\n@layer kol-component {\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    border: 1px solid #000;\n    margin: 0;\n    padding: 0;\n  }\n}\n@layer kol-component {\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: 1;\n  }\n  .kol-table-settings__columns-container {\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(200rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    align-items: center;\n    display: grid;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content 1fr calc(100rem / var(--kolibri-root-font-size, 16)) auto auto;\n    overflow: hidden;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n    position: relative;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__focus-element:focus {\n    outline: 0 !important;\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n    display: grid;\n    place-items: center;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  @media (min-width: 1024px) {\n    .kol-pagination {\n      display: flex;\n    }\n  }\n  @media (max-width: 1024px) {\n    .kol-pagination {\n      flex-direction: column;\n    }\n  }\n}",j=S,C=[10,20,50,100],O=t=>!0===t||""===t||"object"==typeof t&&null!==t,P=class{constructor(t){n(this,t),this.catchRef=t=>{this.tableWcRef=t},this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.handlePagination={onClick:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,n),m(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePage:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,n),m(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePageSize:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,n),m(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),m(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=()=>{if(this.disableSort)return void m(this,"_sortedData",this.state._data);const t=[...this.state._data];this.sortData.length>0&&t.sort(((t,n)=>{for(let e=0;e<this.sortData.length;e++){const i=this.sortData[e],a=i.compareFn(t,n);if(0!==a)return"ASC"===i.direction?a:-a}return 0})),m(this,"_sortedData",t)},this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0,this._tableSettings=void 0,this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){f(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){d(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){h(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){z(this,t)}changeCellSort(t){var n;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key==(null===(n=this.sortData[0])||void 0===n?void 0:n.key)||(this.sortData=[]);const e=this.sortData.findIndex((n=>n.key===t.key));if(e>=0){const t=this.sortData[e];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(e,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData()}}validateHeaders(t){_(t,(()=>{v(t,(()=>{try{t=k(t)}catch(t){}f(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,e,i,a;const o=t=>{let n=!1;t.forEach((t=>{const e=t.key;if(!e)return;const i=t.sortDirection;"ASC"!==i&&"DESC"!==i||"function"==typeof t.compareFn&&((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:e,compareFn:t.compareFn,direction:i}),n=!0)})),n&&setTimeout((()=>this.updateSortedData()))},l=t;null===(n=l.horizontal)||void 0===n||n.forEach(o),null===(e=l.vertical)||void 0===e||e.forEach(o),l.horizontal&&l.vertical&&(null===(i=l.horizontal)||void 0===i?void 0:i.length)>0&&(null===(a=l.vertical)||void 0===a?void 0:a.length)>0&&(this.disableSort=!0,y("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})}))}))}validateLabel(t){w(this,t,{required:!0})}validateMinWidth(t){g(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){c(this,t)}validateOn(t){b(this,t)}validateTableSettings(t){u(this,t)}validatePagination(t){try{t=k(t)}catch(t){}this.showPagination=O(t),f(this,"_pagination",O,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener(s.selectionChange,this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener(s.selectionChange,this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateTableSettings(this._tableSettings)}selectDisplayedData(t,n,e){return"number"==typeof n&&n>0&&"number"==typeof e&&e>0?(this.pageStartSlice=n*(e-1),this.pageEndSlice=n*e>t.length?t.length:n*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(n){const e=l("kol-table-pagination-label",{placeholders:{label:`${this.state._label} (${l(`kol-pagination-position-${n}`)})`}});return t("div",{class:`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`},t("span",null,l("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),t("div",{class:"kol-table-stateful__pagination-wrapper"},t(o,{class:"test",_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||C,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:e})))}getHeaderCellSortState(t){if(!this.disableSort&&"function"==typeof t.compareFn){if(t.key){const n=this.sortData.find((n=>n.key===t.key));if(null==n?void 0:n.direction)return n.direction}return"NOS"}}handleSort({key:t}){const n=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((n=>n.key===t));n&&this.changeCellSort(n)}getSelectedData(t){var n;const e=this.state._selection;if(e){const i=null!==(n=e.keyPropertyName)&&void 0!==n?n:"id",a=this.state._sortedData.filter((n=>t.includes(n[i])));if(!1===(null==e?void 0:e.multiple))return a[0];if(i)return a}return null}handleSelectionChange(t,n){var e;const i=this.state._selection;i&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},i),{selectedKeys:"object"==typeof n?n:[n]})}));const a=this.getSelectedData(n);"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e[p.onSelectionChange])&&this.state._on[p.onSelectionChange](t,a),this.host&&r(this.host,s.selectionChange,a)}async getSelection(){var t;const n=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(n)}render(){var n,i,o,l,s,r;const d=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(i=null===(n=this.state._pagination)||void 0===n?void 0:n._pageSize)&&void 0!==i?i:10:this.state._sortedData.length,this.state._pagination._page||1),h="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("top"):null,c="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("bottom"):null,p={horizontal:null!==(l=null===(o=this.state._headers.horizontal)||void 0===o?void 0:o.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))))&&void 0!==l?l:[],vertical:null!==(r=null===(s=this.state._headers.vertical)||void 0===s?void 0:s.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))))&&void 0!==r?r:[]};return t(e,{key:"28ef6723c730e6f9a52694c65b984b27b97bbe43",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&h,t(a,{key:"78fcf96661bd3e57bc41fbc3523096e7de513eeb",ref:this.catchRef,_data:d,_headerCells:p,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection,_tableSettings:this.state._tableSettings}),this.pageEndSlice>0&&this.showPagination&&c)}get host(){return i(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_tableSettings:["validateTableSettings"],_pagination:["validatePagination"]}}};P.style={default:j};export{P as kol_table_stateful};

package/dist/kolibri/kol-table-stateless-wc.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,F as n,g as i}from"./index-058cc56d.js";import{c as r}from"./clsx-09a06a12.js";import{d as o,f as a,a as l,v as s}from"./component-names-7ee7402b.js";import{t as c}from"./i18n-efbafc80.js";import{q as u,o as d,p as f,w as h,s as v}from"./prop.validators-de1491c5.js";import{n as b}from"./dev.utils-869ad410.js";import{d as _,K as p}from"./events-5886c68b.js";import{v as y,a as j,e as k,b as m,d as w,C as g}from"./table-settings-9d7f54fa.js";import{b as S,r as A,a as O,f as $,i as x,S as C}from"./isArray-7a60fa7f.js";import{i as D}from"./isObject-ffcbbb76.js";import{v as M}from"./label-0219bcdb.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";import"./index-0a773c52.js";import"./dev.utils-fab45cbc.js";import"./common-54bf85ba.js";const W=(e,t)=>{u(t,(()=>{d(t,(()=>{try{t=f(t)}catch(e){}h(e,"_headerCells",(e=>"object"==typeof e&&null!==e&&(void 0===e.horizontal||Array.isArray(e.horizontal)&&void 0===e.horizontal.find((e=>!Array.isArray(e))))&&(void 0===e.vertical||Array.isArray(e.vertical)&&void 0===e.vertical.find((e=>!Array.isArray(e))))&&!0),new Set(["TableHeaderCellsPropType"]),t)}))}))};var F="[object AsyncFunction]",P="[object Function]",T="[object GeneratorFunction]",E="[object Proxy]";function K(e){if(!D(e))return!1;var t=S(e);return t==P||t==T||t==F||t==E}var R=A["__core-js_shared__"];const H=R;var I=function(){var e=/[^.]+$/.exec(H&&H.keys&&H.keys.IE_PROTO||"");return e?"Symbol(src)_1."+e:""}();function N(e){return!!I&&I in e}var z=Function.prototype,B=z.toString;function U(e){if(null!=e){try{return B.call(e)}catch(e){}try{return e+""}catch(e){}}return""}var L=/[\\^$.*+?()[\]{}|]/g,V=/^\[object .+?Constructor\]$/,q=Function.prototype,G=Object.prototype,J=q.toString,Q=G.hasOwnProperty,X=RegExp("^"+J.call(Q).replace(L,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");function Y(e){return!(!D(e)||N(e))&&(K(e)?X:V).test(U(e))}function Z(e,t){return null==e?void 0:e[t]}function tt(e,t){var n=Z(e,t);return Y(n)?n:void 0}var et=tt(A,"WeakMap");const nt=et;var it=9007199254740991,rt=/^(?:0|[1-9]\d*)$/;function ot(e,t){var n=typeof e;return!!(t=null==t?it:t)&&("number"==n||"symbol"!=n&&rt.test(e))&&e>-1&&e%1==0&&e<t}function at(e,t){return e===t||e!=e&&t!=t}var lt=9007199254740991;function st(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=lt}function ct(e){return null!=e&&st(e.length)&&!K(e)}var ut=Object.prototype;function dt(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||ut)}function ft(e,t){for(var n=-1,i=Array(e);++n<e;)i[n]=t(n);return i}var ht="[object Arguments]";function vt(e){return O(e)&&S(e)==ht}var bt=Object.prototype,_t=bt.hasOwnProperty,pt=bt.propertyIsEnumerable,yt=vt(function(){return arguments}())?vt:function(e){return O(e)&&_t.call(e,"callee")&&!pt.call(e,"callee")};const jt=yt;function kt(){return!1}var mt="object"==typeof exports&&exports&&!exports.nodeType&&exports,wt=mt&&"object"==typeof module&&module&&!module.nodeType&&module,gt=wt&&wt.exports===mt,St=gt?A.Buffer:void 0,At=St?St.isBuffer:void 0,Ot=At||kt;const $t=Ot;var xt="[object Arguments]",Ct="[object Array]",Dt="[object Boolean]",Mt="[object Date]",Wt="[object Error]",Ft="[object Function]",Pt="[object Map]",Tt="[object Number]",Et="[object Object]",Kt="[object RegExp]",Rt="[object Set]",Ht="[object String]",It="[object WeakMap]",Nt="[object ArrayBuffer]",zt="[object DataView]",Bt="[object Float32Array]",Ut="[object Float64Array]",Lt="[object Int8Array]",Vt="[object Int16Array]",qt="[object Int32Array]",Gt="[object Uint8Array]",Jt="[object Uint8ClampedArray]",Qt="[object Uint16Array]",Xt="[object Uint32Array]",Yt={};function Zt(e){return O(e)&&st(e.length)&&!!Yt[S(e)]}function te(e){return function(t){return e(t)}}Yt[Bt]=Yt[Ut]=Yt[Lt]=Yt[Vt]=Yt[qt]=Yt[Gt]=Yt[Jt]=Yt[Qt]=Yt[Xt]=!0,Yt[xt]=Yt[Ct]=Yt[Nt]=Yt[Dt]=Yt[zt]=Yt[Mt]=Yt[Wt]=Yt[Ft]=Yt[Pt]=Yt[Tt]=Yt[Et]=Yt[Kt]=Yt[Rt]=Yt[Ht]=Yt[It]=!1;var ee="object"==typeof exports&&exports&&!exports.nodeType&&exports,ne=ee&&"object"==typeof module&&module&&!module.nodeType&&module,ie=ne&&ne.exports===ee,re=ie&&$.process,oe=function(){try{var e=ne&&ne.require&&ne.require("util").types;return e||re&&re.binding&&re.binding("util")}catch(e){}}();const ae=oe;var le=oe&&oe.isTypedArray,se=le?te(le):Zt;const ce=se;var ue=Object.prototype,de=ue.hasOwnProperty;function fe(e,t){var n=x(e),i=!n&&jt(e),a=!n&&!i&&$t(e),r=!n&&!i&&!a&&ce(e),o=n||i||a||r,l=o?ft(e.length,String):[],s=l.length;for(var c in e)!t&&!de.call(e,c)||o&&("length"==c||a&&("offset"==c||"parent"==c)||r&&("buffer"==c||"byteLength"==c||"byteOffset"==c)||ot(c,s))||l.push(c);return l}function he(e,t){return function(n){return e(t(n))}}var ve=he(Object.keys,Object);const be=ve;var _e=Object.prototype,pe=_e.hasOwnProperty;function ye(e){if(!dt(e))return be(e);var t=[];for(var n in Object(e))pe.call(e,n)&&"constructor"!=n&&t.push(n);return t}function je(e){return ct(e)?fe(e):ye(e)}var ke=tt(Object,"create");const me=ke;function we(){this.__data__=me?me(null):{},this.size=0}function ge(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t}var Se="__lodash_hash_undefined__",Ae=Object.prototype,Oe=Ae.hasOwnProperty;function $e(e){var t=this.__data__;if(me){var n=t[e];return n===Se?void 0:n}return Oe.call(t,e)?t[e]:void 0}var xe=Object.prototype,Ce=xe.hasOwnProperty;function De(e){var t=this.__data__;return me?void 0!==t[e]:Ce.call(t,e)}var Me="__lodash_hash_undefined__";function We(e,t){var n=this.__data__;return this.size+=this.has(e)?0:1,n[e]=me&&void 0===t?Me:t,this}function Fe(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var i=e[t];this.set(i[0],i[1])}}function Pe(){this.__data__=[],this.size=0}function Te(e,t){for(var n=e.length;n--;)if(at(e[n][0],t))return n;return-1}Fe.prototype.clear=we,Fe.prototype.delete=ge,Fe.prototype.get=$e,Fe.prototype.has=De,Fe.prototype.set=We;var Ee=Array.prototype,Ke=Ee.splice;function Re(e){var t=this.__data__,n=Te(t,e);return!(n<0)&&(n==t.length-1?t.pop():Ke.call(t,n,1),--this.size,!0)}function He(e){var t=this.__data__,n=Te(t,e);return n<0?void 0:t[n][1]}function Ie(e){return Te(this.__data__,e)>-1}function Ne(e,t){var n=this.__data__,i=Te(n,e);return i<0?(++this.size,n.push([e,t])):n[i][1]=t,this}function ze(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var i=e[t];this.set(i[0],i[1])}}ze.prototype.clear=Pe,ze.prototype.delete=Re,ze.prototype.get=He,ze.prototype.has=Ie,ze.prototype.set=Ne;var Be=tt(A,"Map");const Ue=Be;function Le(){this.size=0,this.__data__={hash:new Fe,map:new(Ue||ze),string:new Fe}}function Ve(e){var t=typeof e;return"string"==t||"number"==t||"symbol"==t||"boolean"==t?"__proto__"!==e:null===e}function qe(e,t){var n=e.__data__;return Ve(t)?n["string"==typeof t?"string":"hash"]:n.map}function Ge(e){var t=qe(this,e).delete(e);return this.size-=t?1:0,t}function Je(e){return qe(this,e).get(e)}function Qe(e){return qe(this,e).has(e)}function Xe(e,t){var n=qe(this,e),i=n.size;return n.set(e,t),this.size+=n.size==i?0:1,this}function Ye(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var i=e[t];this.set(i[0],i[1])}}function Ze(e,t){for(var n=-1,i=t.length,a=e.length;++n<i;)e[a+n]=t[n];return e}function tn(){this.__data__=new ze,this.size=0}function en(e){var t=this.__data__,n=t.delete(e);return this.size=t.size,n}function nn(e){return this.__data__.get(e)}function rn(e){return this.__data__.has(e)}Ye.prototype.clear=Le,Ye.prototype.delete=Ge,Ye.prototype.get=Je,Ye.prototype.has=Qe,Ye.prototype.set=Xe;var on=200;function an(e,t){var n=this.__data__;if(n instanceof ze){var i=n.__data__;if(!Ue||i.length<on-1)return i.push([e,t]),this.size=++n.size,this;n=this.__data__=new Ye(i)}return n.set(e,t),this.size=n.size,this}function ln(e){var t=this.__data__=new ze(e);this.size=t.size}function sn(e,t){for(var n=-1,i=null==e?0:e.length,a=0,r=[];++n<i;){var o=e[n];t(o,n,e)&&(r[a++]=o)}return r}function cn(){return[]}ln.prototype.clear=tn,ln.prototype.delete=en,ln.prototype.get=nn,ln.prototype.has=rn,ln.prototype.set=an;var un=Object.prototype,dn=un.propertyIsEnumerable,fn=Object.getOwnPropertySymbols,hn=fn?function(e){return null==e?[]:(e=Object(e),sn(fn(e),(function(t){return dn.call(e,t)})))}:cn;const vn=hn;function bn(e,t,n){var i=t(e);return x(e)?i:Ze(i,n(e))}function _n(e){return bn(e,je,vn)}var pn=tt(A,"DataView");const yn=pn;var jn=tt(A,"Promise");const kn=jn;var mn=tt(A,"Set");const wn=mn;var gn="[object Map]",Sn="[object Object]",An="[object Promise]",On="[object Set]",$n="[object WeakMap]",xn="[object DataView]",Cn=U(yn),Dn=U(Ue),Mn=U(kn),Wn=U(wn),Fn=U(nt),Pn=S;(yn&&Pn(new yn(new ArrayBuffer(1)))!=xn||Ue&&Pn(new Ue)!=gn||kn&&Pn(kn.resolve())!=An||wn&&Pn(new wn)!=On||nt&&Pn(new nt)!=$n)&&(Pn=function(e){var t=S(e),n=t==Sn?e.constructor:void 0,i=n?U(n):"";if(i)switch(i){case Cn:return xn;case Dn:return gn;case Mn:return An;case Wn:return On;case Fn:return $n}return t});const Tn=Pn;var En=A.Uint8Array;const Kn=En;var Rn="__lodash_hash_undefined__";function Hn(e){return this.__data__.set(e,Rn),this}function In(e){return this.__data__.has(e)}function Nn(e){var t=-1,n=null==e?0:e.length;for(this.__data__=new Ye;++t<n;)this.add(e[t])}function zn(e,t){for(var n=-1,i=null==e?0:e.length;++n<i;)if(t(e[n],n,e))return!0;return!1}function Bn(e,t){return e.has(t)}Nn.prototype.add=Nn.prototype.push=Hn,Nn.prototype.has=In;var Un=1,Ln=2;function Vn(e,t,n,i,a,r){var o=n&Un,l=e.length,s=t.length;if(l!=s&&!(o&&s>l))return!1;var c=r.get(e),d=r.get(t);if(c&&d)return c==t&&d==e;var h=-1,u=!0,b=n&Ln?new Nn:void 0;for(r.set(e,t),r.set(t,e);++h<l;){var v=e[h],_=t[h];if(i)var f=o?i(_,v,h,t,e,r):i(v,_,h,e,t,r);if(void 0!==f){if(f)continue;u=!1;break}if(b){if(!zn(t,(function(e,t){if(!Bn(b,t)&&(v===e||a(v,e,n,i,r)))return b.push(t)}))){u=!1;break}}else if(v!==_&&!a(v,_,n,i,r)){u=!1;break}}return r.delete(e),r.delete(t),u}function qn(e){var t=-1,n=Array(e.size);return e.forEach((function(e,i){n[++t]=[i,e]})),n}function Gn(e){var t=-1,n=Array(e.size);return e.forEach((function(e){n[++t]=e})),n}var Jn=1,Qn=2,Xn="[object Boolean]",Yn="[object Date]",Zn="[object Error]",ti="[object Map]",ei="[object Number]",ni="[object RegExp]",ii="[object Set]",ri="[object String]",oi="[object Symbol]",ai="[object ArrayBuffer]",li="[object DataView]",si=C?C.prototype:void 0,ci=si?si.valueOf:void 0;function ui(e,t,n,i,a,r,o){switch(n){case li:if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case ai:return!(e.byteLength!=t.byteLength||!r(new Kn(e),new Kn(t)));case Xn:case Yn:case ei:return at(+e,+t);case Zn:return e.name==t.name&&e.message==t.message;case ni:case ri:return e==t+"";case ti:var l=qn;case ii:var s=i&Jn;if(l||(l=Gn),e.size!=t.size&&!s)return!1;var c=o.get(e);if(c)return c==t;i|=Qn,o.set(e,t);var d=Vn(l(e),l(t),i,a,r,o);return o.delete(e),d;case oi:if(ci)return ci.call(e)==ci.call(t)}return!1}var di=1,fi=Object.prototype,hi=fi.hasOwnProperty;function vi(e,t,n,i,a,r){var o=n&di,l=_n(e),s=l.length;if(s!=_n(t).length&&!o)return!1;for(var c=s;c--;){var d=l[c];if(!(o?d in t:hi.call(t,d)))return!1}var h=r.get(e),u=r.get(t);if(h&&u)return h==t&&u==e;var b=!0;r.set(e,t),r.set(t,e);for(var v=o;++c<s;){var _=e[d=l[c]],f=t[d];if(i)var p=o?i(f,_,d,t,e,r):i(_,f,d,e,t,r);if(!(void 0===p?_===f||a(_,f,n,i,r):p)){b=!1;break}v||(v="constructor"==d)}if(b&&!v){var y=e.constructor,g=t.constructor;y==g||!("constructor"in e)||!("constructor"in t)||"function"==typeof y&&y instanceof y&&"function"==typeof g&&g instanceof g||(b=!1)}return r.delete(e),r.delete(t),b}var bi=1,_i="[object Arguments]",pi="[object Array]",yi="[object Object]",ji=Object.prototype,ki=ji.hasOwnProperty;function mi(e,t,n,i,a,r){var o=x(e),l=x(t),s=o?pi:Tn(e),c=l?pi:Tn(t),d=(s=s==_i?yi:s)==yi,h=(c=c==_i?yi:c)==yi,u=s==c;if(u&&$t(e)){if(!$t(t))return!1;o=!0,d=!1}if(u&&!d)return r||(r=new ln),o||ce(e)?Vn(e,t,n,i,a,r):ui(e,t,s,n,i,a,r);if(!(n&bi)){var b=d&&ki.call(e,"__wrapped__"),v=h&&ki.call(t,"__wrapped__");if(b||v){var _=b?e.value():e,f=v?t.value():t;return r||(r=new ln),a(_,f,n,i,r)}}return!!u&&(r||(r=new ln),vi(e,t,n,i,a,r))}function wi(e,t,n,i,a){return e===t||(null==e||null==t||!O(e)&&!O(t)?e!=e&&t!=t:mi(e,t,n,i,wi,a))}function gi(e,t){return wi(e,t)}const Si=/^\d+(\.\d+)?([a-z]+|%)?$/,Ai=(e,t,n)=>{h(e,"_minWidth",(e=>"string"==typeof e&&Si.test(e)),new Set(["String","/^\\d+(\\.\\d+)?([a-z]+|%)?$/"]),t,n)},Oi=class{constructor(n){t(this,n),this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.renderTableRow=(t,n,i,a=!1)=>{var o,l;let s=String(n);return this.horizontal&&(null===(o=t[0])||void 0===o?void 0:o.data)&&(s=null!==(l=this.getDataKey(t[0].data))&&void 0!==l?l:s),e("tr",{class:r("kol-table__row",{"kol-table__row--body":!a,"kol-table__row--footer":a}),key:`row-${s}`},this.renderSelectionCell(t,n),t.map(((e,t)=>this.renderTableCell(e,n,t,i))))},this.renderTableCell=(t,n,i,a)=>{const o=this.getColumnSettings(t);if(o&&!o.visible)return"";let l=`${n}-${i}-${t.label}`;if(t.data){const e=this.getDataKey(t.data);l=e?`${e}-${this.horizontal?i:n}`:l}return t.headerCell?this.renderHeadingCell(t,n,i,a):e("td",{key:`cell-${l}`,class:r("kol-table__cell kol-table__cell--body",{[`kol-table__cell--align-${t.textAlign}`]:t.textAlign}),colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:(null==o?void 0:o.width)?`${o.width}ch`:t.width},ref:"function"==typeof t.render?e=>{this.cellRender(t,e)}:void 0},"function"!=typeof t.render?t.label:"")},this.state={_data:[],_headerCells:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto"},this.tableDivElementHasScrollbar=!1,this.previousHeaderCells=void 0,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,this._tableSettings=void 0}validateData(e){y(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){j(this,e)}validateHeaderCells(e){W(this,e),gi(this.previousHeaderCells,this.state._headerCells)||this.initializeTableSettings(),this.previousHeaderCells=this.state._headerCells}validateLabel(e){M(this,e,{required:!0})}validateMinWidth(e){Ai(this,e)}validateOn(e){k(this,e)}validateSelection(e){m(this,e)}validateTableSettings(e){w(this,e)}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const n=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let i=this.checkboxRefs.indexOf(n);i>-1&&(e.preventDefault(),"ArrowDown"===e.key?(i=(i+1)%this.checkboxRefs.length,this.checkboxRefs[i].focus()):"ArrowUp"===e.key&&(e.preventDefault(),i=(i+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[i].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}handleSettingsChange(e){v(this,"_tableSettings",e.detail)}disconnectedCallback(){var e;null===(e=this.tableDivElementResizeObserver)||void 0===e||e.disconnect()}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}updateDataToKeyMap(e){e.forEach((e=>{this.dataToKeyMap.has(e)||this.dataToKeyMap.set(e,b())})),this.dataToKeyMap.forEach(((t,n)=>{e.includes(n)||this.dataToKeyMap.delete(n)}))}getDataKey(e){return this.dataToKeyMap.get(e)}cellRender(e,t){t&&(clearTimeout(this.cellsToRenderTimeouts.get(t)),this.cellsToRenderTimeouts.set(t,setTimeout((()=>{if("function"==typeof e.render){const n=e.render(t,e,e.data,this.state._data);"string"==typeof n&&(t.textContent=n)}}))))}getNumberOfCols(e,t){let n=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var n;return t+=null!==(n=e.colSpan)&&void 0!==n?n:1})),n<t&&(n=t)})),0===n&&(n=t.length),n}getNumberOfRows(e,t){var n;let i=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var n;return t+=null!==(n=e.rowSpan)&&void 0!==n?n:1})),i<t&&(i=t)})),0===i?i=t.length:i-=(null===(n=this.state._dataFoot)||void 0===n?void 0:n.length)||0,i}getThePrimaryHeadersWithKeysIfExists(e){const t=[];return e.forEach((e=>{e.forEach((e=>{"string"==typeof e.key&&t.push(e)}))})),t}getPrimaryHeaders(e){var t,n;let i=this.getThePrimaryHeadersWithKeysIfExists(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===i.length&&(i=this.getThePrimaryHeadersWithKeysIfExists(null!==(n=e.vertical)&&void 0!==n?n:[]),i.length>0&&(this.horizontal=!1)),i}getColumnPositionMap(){var e;const t=new Map;return null===(e=this.state._tableSettings)||void 0===e||e.columns.forEach((e=>{t.set(e.key,e.position)})),t}sortByColumnPosition(e){const t=this.getColumnPositionMap();return[...e].sort(((e,n)=>{var i,a,r,o;return(null!==(a=t.get(null!==(i=e.key)&&void 0!==i?i:""))&&void 0!==a?a:Number.MAX_SAFE_INTEGER)-(null!==(o=t.get(null!==(r=n.key)&&void 0!==r?r:""))&&void 0!==o?o:Number.MAX_SAFE_INTEGER)}))}createDataField(e,t,n){var i;t.horizontal=Array.isArray(null==t?void 0:t.horizontal)?t.horizontal:[],t.vertical=Array.isArray(null==t?void 0:t.vertical)?t.vertical:[];const a=this.getPrimaryHeaders(t),r=this.getNumberOfCols(t.horizontal,e);let o=this.getNumberOfRows(t.vertical,e),l=0;n&&(l=o,o+=(null===(i=this.state._dataFoot)||void 0===i?void 0:i.length)||0);const s=[],d=[],h=[];t.vertical.forEach(((e,t)=>{d[t]=0,h[t]=[]}));const u=this.sortByColumnPosition(a);for(let i=l;i<o;i++){const a=[];t.vertical.forEach(((e,t)=>{let n=0;if(h[t].forEach((e=>n+=e)),n<=i){const r=e[i-n+d[t]];if("object"==typeof r){a.push(Object.assign(Object.assign({},r),{headerCell:!0,data:{}}));let e=1;if("number"==typeof r.rowSpan&&r.rowSpan>1&&(e=r.rowSpan),h[t].push(e),"number"==typeof r.colSpan&&r.colSpan>1)for(let n=1;n<r.colSpan;n++)h[t+n].push(e);d[t]++}}}));for(let t=0;t<r;t++)if(!0===this.horizontal){const r=n&&this.state._dataFoot?this.state._dataFoot[i-l]:e[i];"object"==typeof u[t]&&null!==u[t]&&"string"==typeof u[t].key&&"object"==typeof r&&null!==r&&a.push(Object.assign(Object.assign({},u[t]),{colSpan:void 0,data:r,label:r[u[t].key],rowSpan:void 0}))}else"object"==typeof u[i]&&null!==u[i]&&"string"==typeof u[i].key&&"object"==typeof e[t]&&null!==e[t]&&a.push(Object.assign(Object.assign({},u[i]),{colSpan:void 0,data:e[t],label:e[t][u[i].key],rowSpan:void 0}));s.push(a)}if(0===e.length){let e=0,n=0;Array.isArray(t.horizontal)&&t.horizontal.length>0&&t.horizontal[0].forEach((t=>{e+=t.colSpan||1})),Array.isArray(t.vertical)&&t.vertical.length>0&&(e-=t.vertical.length,t.vertical[0].forEach((e=>{n+=e.rowSpan||1})));const i={colSpan:e,label:c("kol-no-entries"),render:void 0,rowSpan:Math.max(n,1)};0===s.length?s.push([i]):s[0].push(i)}return s}handleSelectionChangeCallbackAndEvent(e,t){var n;"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n[g.onSelectionChange])&&this.state._on[g.onSelectionChange](e,t),this.host&&_(this.host,p.selectionChange,t)}initializeTableSettings(){if(this._tableSettings)return;const e=this.getPrimaryHeaders(this.state._headerCells);this.state._tableSettings||(this.state._tableSettings={columns:[]}),this.state._tableSettings.columns=e.filter((e=>e.key)).map(((e,t)=>{var n;return{key:null!==(n=e.key)&&void 0!==n?n:b(),label:e.label,position:t,visible:!0}}))}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaderCells(this._headerCells),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validateSelection(this._selection),this.validateTableSettings(this._tableSettings)}renderSelectionCell(t,n){var i,l,s;const c=this.state._selection;if(!c)return"";const d=this.getSelectionKeyPropertyName(),h=null===(i=t[0])||void 0===i?void 0:i.data;if(!h)return"";const u=h[d],b=c.multiple||void 0===c.multiple,v=null===(l=null==c?void 0:c.selectedKeys)||void 0===l?void 0:l.includes(u),_=null===(s=null==c?void 0:c.disabledKeys)||void 0===s?void 0:s.includes(u),f=c.label(h),p={name:"selection",checked:v,disabled:_,id:u,"aria-label":f};return e("td",{key:`tbody-${n}-selection`,class:"kol-table__cell kol-table__cell--selection"},e("div",{class:r("kol-table__selection",{"kol-table__selection--checked":v})},b?e("label",{class:r("kol-table__selection-label",{"kol-table__selection-label--disabled":_})},e(o,{class:"kol-table__selection-icon",_icons:"codicon "+(v?"codicon-check":""),_label:""}),e("input",Object.assign({class:r("kol-table__selection-input kol-table__selection-input--checkbox"),ref:e=>e&&this.checkboxRefs.push(e)},p,{type:"checkbox",onInput:e=>{var t,n;const i=v?null===(n=null==c?void 0:c.selectedKeys)||void 0===n?void 0:n.filter((e=>e!==u)):[...null!==(t=null==c?void 0:c.selectedKeys)&&void 0!==t?t:[],u];this.handleSelectionChangeCallbackAndEvent(e,null!=i?i:[])}}))):e("label",{class:"kol-table__selection-label"},e("input",Object.assign({class:r("kol-table__selection-input kol-table__selection-input--radio")},p,{type:"radio",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,u)}}))),e(a,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${u}-label`,_label:f})))}getColumnSettings(e){var t;return null===(t=this.state._tableSettings)||void 0===t?void 0:t.columns.find((t=>t.key===e.key))}getSelectionKeyPropertyName(){var e,t;return null!==(t=null===(e=this.state._selection)||void 0===e?void 0:e.keyPropertyName)&&void 0!==t?t:"id"}getDataWithSelectionEnabled(){const e=this.getSelectionKeyPropertyName();return this.state._data.filter((t=>{var n,i;return!(null===(i=null===(n=this.state._selection)||void 0===n?void 0:n.disabledKeys)||void 0===i?void 0:i.includes(t[e]))}))}getSelectedKeysWithoutDisabledKeys(){var e,t;return null===(t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys)||void 0===t?void 0:t.filter((e=>{var t,n;return!(null===(n=null===(t=this.state._selection)||void 0===t?void 0:t.disabledKeys)||void 0===n?void 0:n.includes(e))}))}getSelectedKeysWithDisabledKeysOnly(){var e,t;return null===(t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys)||void 0===t?void 0:t.filter((e=>{var t,n;return null===(n=null===(t=this.state._selection)||void 0===t?void 0:t.disabledKeys)||void 0===n?void 0:n.includes(e)}))}getRevertedSelection(e){var t;const n=this.getSelectionKeyPropertyName(),i=null!==(t=this.getSelectedKeysWithDisabledKeysOnly())&&void 0!==t?t:[];return e&&i.push(...this.getDataWithSelectionEnabled().map((e=>null==e?void 0:e[n]))),i}getTableMinWidth(){var e,t;const n=null!==(t=null===(e=this.state._tableSettings)||void 0===e?void 0:e.columns.filter((e=>e.visible)).reduce(((e,t)=>{var n;return e+(null!==(n=t.width)&&void 0!==n?n:0)}),0))&&void 0!==t?t:0;return"auto"===this.state._minWidth?`${n}ch`:`max(${this.state._minWidth}, ${n}ch)`}renderHeadingSelectionCell(){var t,n;const i=this.state._selection;if(!i||!i.multiple&&void 0!==i.multiple)return e("th",{class:"kol-table__cell kol-table__cell--header",key:"thead-0"});const l=null!==(n=null===(t=this.getSelectedKeysWithoutDisabledKeys())||void 0===t?void 0:t.length)&&void 0!==n?n:0,s=l===this.getDataWithSelectionEnabled().length,d=0!==l&&!s;let h="kol-table-selection-indeterminate";s&&!d&&(h="kol-table-selection-none"),0===l&&(h="kol-table-selection-all");const u=c(h);return e("th",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header"},e("div",{class:r("kol-table__selection",{"kol-table__selection--indeterminate":d,"kol-table__selection--checked":s})},e("label",{class:"kol-table__selection-label"},e(o,{class:"kol-table__selection-icon",_icons:"codicon "+(d?"codicon-remove":s?"codicon-check":""),_label:""}),e("input",{class:r("kol-table__selection-input kol-table__selection-input--checkbox"),"data-testid":"selection-checkbox-all",ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:s&&!d,indeterminate:d,"aria-label":u,type:"checkbox",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,this.getRevertedSelection(!s))}})),e(a,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${h}-label`,_label:u})))}renderHeaderTdCell(){return e(n,null,Array.isArray(this.state._headerCells.horizontal)&&this.state._headerCells.horizontal.length>0&&Array.isArray(this.state._headerCells.vertical)&&this.state._headerCells.vertical.length>0&&Array.isArray(this.state._headerCells.horizontal)&&e("td",{"aria-hidden":"true",colSpan:this.state._headerCells.vertical.length,rowSpan:this.state._headerCells.horizontal.length}))}renderHeadingCell(t,n,i,a){const o=this.getColumnSettings(t);if(o&&!o.visible)return"";let s,c="codicon codicon-fold";if(t.sortDirection)switch(t.sortDirection){case"ASC":c="codicon codicon-chevron-up",s="ascending";break;case"DESC":c="codicon codicon-chevron-down",s="descending"}const d=a?"row":"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col";return e("th",{key:`${n}-${i}-${t.label}`,class:r("kol-table__cell kol-table__cell--header",{[`kol-table__cell--align-${t.textAlign}`]:t.textAlign,[`kol-table__cell--${s}`]:s}),scope:d,colSpan:t.colSpan,rowSpan:t.rowSpan,style:{width:(null==o?void 0:o.width)?`${o.width}ch`:t.width},"aria-sort":s,"data-sort":`sort-${t.sortDirection}`},t.sortDirection?e(l,{class:"kol-table__sort-button",exportparts:"icon",_icons:{right:c},_label:t.label,_on:{onClick:e=>{var n;"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onSort)&&t.key&&t.sortDirection&&this.state._on.onSort(e,{key:t.key,currentSortDirection:t.sortDirection}),this.host&&_(this.host,p.sort,{key:t.key,currentSortDirection:t.sortDirection})}}}):t.label)}renderSpacer(t,n){var i,a;const o=(null===(i=this.state._headerCells.vertical)||void 0===i?void 0:i.length)||0,l=null===(a=null==n?void 0:n[0])||void 0===a?void 0:a.reduce(((e,t)=>e+(t.colSpan||1)),0),s=this.state._selection?1:0;return e("tr",{"aria-hidden":"true",class:r("kol-table__spacer",`kol-table__spacer--${t}`)},e("td",{class:r(`kol-table__spacer-line kol-table__spacer-line--${t}`),colSpan:o+l+s}))}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return null;const t=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return e("tfoot",{class:"kol-table__footer"},[this.renderSpacer("foot",t),t.map(((e,t)=>this.renderTableRow(e,t,!0,!0)))])}render(){var t;const n=this.createDataField(this.state._data,this.state._headerCells);this.checkboxRefs=[];const i=null===(t=this.state._headerCells.horizontal)||void 0===t?void 0:t.map((e=>this.sortByColumnPosition(e)));return e("div",{key:"41ef1f9232f94305a6492420a311cf543b582a22",class:"kol-table"},e(s,{key:"3e0def33d6cf806d72c305d0e350b7ee4b2d3899",_tableSettings:this.state._tableSettings}),e("div",{key:"cc55a031f7bae8733cc5877763b68f9b1717b3e2",ref:e=>this.tableDivElement=e,class:"kol-table__scroll-container",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},e("table",{key:"c96b4770ff54fb28a6d6eea1a9f021132e04652c",class:"kol-table__table",style:{minWidth:this.getTableMinWidth()}},e("div",{key:"96095fade8aa2347d2db8e4a42a735e07a683f05",class:"kol-table__focus-element",tabindex:this.tableDivElementHasScrollbar?"0":void 0,"aria-describedby":"caption"}," "),e("caption",{key:"fbf77baecd9f1f569c97df6596e598926f4fc420",class:"kol-table__caption",id:"caption"},this.state._label),Array.isArray(i)&&e("thead",{key:"aeab10b5b582c3134e5e0e7a483fbd441e00edc1",class:"kol-table__head"},[i.map(((t,n)=>e("tr",{class:"kol-table__head-row",key:`thead-${n}`},this.state._selection&&this.renderHeadingSelectionCell(),0===n&&this.renderHeaderTdCell(),Array.isArray(t)&&t.map(((e,t)=>this.renderHeadingCell(e,n,t,!1)))))),this.renderSpacer("head",i)]),e("tbody",{key:"536ad9c3574792ce18cf2694a4251cd781587aea",class:"kol-table__body"},n.map(((e,t)=>this.renderTableRow(e,t,!0)))),this.renderFoot())))}get host(){return i(this)}static get watchers(){return{_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"],_selection:["validateSelection"],_tableSettings:["validateTableSettings"]}}};export{Oi as kol_table_stateless_wc};
+import{r as t,h as e,F as n,g as i}from"./index-62ec26b4.js";import{c as r}from"./clsx-09a06a12.js";import{d as o,f as a,a as l,v as s}from"./component-names-7ee7402b.js";import{t as c}from"./i18n-efbafc80.js";import{q as u,o as d,p as f,w as h,s as v}from"./prop.validators-bb13c77c.js";import{n as b}from"./dev.utils-ada1cd11.js";import{d as _,K as p}from"./events-5886c68b.js";import{v as y,a as j,e as k,b as m,d as w,C as g}from"./table-settings-4fe55021.js";import{b as S,r as A,a as O,f as $,i as x,S as C}from"./isArray-7a60fa7f.js";import{i as D}from"./isObject-ffcbbb76.js";import{v as M}from"./label-5355d0b2.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";import"./index-932feda8.js";import"./dev.utils-fab45cbc.js";import"./common-54bf85ba.js";const W=(e,t)=>{u(t,(()=>{d(t,(()=>{try{t=f(t)}catch(e){}h(e,"_headerCells",(e=>"object"==typeof e&&null!==e&&(void 0===e.horizontal||Array.isArray(e.horizontal)&&void 0===e.horizontal.find((e=>!Array.isArray(e))))&&(void 0===e.vertical||Array.isArray(e.vertical)&&void 0===e.vertical.find((e=>!Array.isArray(e))))&&!0),new Set(["TableHeaderCellsPropType"]),t)}))}))};var F="[object AsyncFunction]",P="[object Function]",T="[object GeneratorFunction]",E="[object Proxy]";function K(e){if(!D(e))return!1;var t=S(e);return t==P||t==T||t==F||t==E}var R=A["__core-js_shared__"];const H=R;var I=function(){var e=/[^.]+$/.exec(H&&H.keys&&H.keys.IE_PROTO||"");return e?"Symbol(src)_1."+e:""}();function N(e){return!!I&&I in e}var z=Function.prototype,B=z.toString;function U(e){if(null!=e){try{return B.call(e)}catch(e){}try{return e+""}catch(e){}}return""}var L=/[\\^$.*+?()[\]{}|]/g,V=/^\[object .+?Constructor\]$/,q=Function.prototype,G=Object.prototype,J=q.toString,Q=G.hasOwnProperty,X=RegExp("^"+J.call(Q).replace(L,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");function Y(e){return!(!D(e)||N(e))&&(K(e)?X:V).test(U(e))}function Z(e,t){return null==e?void 0:e[t]}function tt(e,t){var n=Z(e,t);return Y(n)?n:void 0}var et=tt(A,"WeakMap");const nt=et;var it=9007199254740991,rt=/^(?:0|[1-9]\d*)$/;function ot(e,t){var n=typeof e;return!!(t=null==t?it:t)&&("number"==n||"symbol"!=n&&rt.test(e))&&e>-1&&e%1==0&&e<t}function at(e,t){return e===t||e!=e&&t!=t}var lt=9007199254740991;function st(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=lt}function ct(e){return null!=e&&st(e.length)&&!K(e)}var ut=Object.prototype;function dt(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||ut)}function ft(e,t){for(var n=-1,i=Array(e);++n<e;)i[n]=t(n);return i}var ht="[object Arguments]";function vt(e){return O(e)&&S(e)==ht}var bt=Object.prototype,_t=bt.hasOwnProperty,pt=bt.propertyIsEnumerable,yt=vt(function(){return arguments}())?vt:function(e){return O(e)&&_t.call(e,"callee")&&!pt.call(e,"callee")};const jt=yt;function kt(){return!1}var mt="object"==typeof exports&&exports&&!exports.nodeType&&exports,wt=mt&&"object"==typeof module&&module&&!module.nodeType&&module,gt=wt&&wt.exports===mt,St=gt?A.Buffer:void 0,At=St?St.isBuffer:void 0,Ot=At||kt;const $t=Ot;var xt="[object Arguments]",Ct="[object Array]",Dt="[object Boolean]",Mt="[object Date]",Wt="[object Error]",Ft="[object Function]",Pt="[object Map]",Tt="[object Number]",Et="[object Object]",Kt="[object RegExp]",Rt="[object Set]",Ht="[object String]",It="[object WeakMap]",Nt="[object ArrayBuffer]",zt="[object DataView]",Bt="[object Float32Array]",Ut="[object Float64Array]",Lt="[object Int8Array]",Vt="[object Int16Array]",qt="[object Int32Array]",Gt="[object Uint8Array]",Jt="[object Uint8ClampedArray]",Qt="[object Uint16Array]",Xt="[object Uint32Array]",Yt={};function Zt(e){return O(e)&&st(e.length)&&!!Yt[S(e)]}function te(e){return function(t){return e(t)}}Yt[Bt]=Yt[Ut]=Yt[Lt]=Yt[Vt]=Yt[qt]=Yt[Gt]=Yt[Jt]=Yt[Qt]=Yt[Xt]=!0,Yt[xt]=Yt[Ct]=Yt[Nt]=Yt[Dt]=Yt[zt]=Yt[Mt]=Yt[Wt]=Yt[Ft]=Yt[Pt]=Yt[Tt]=Yt[Et]=Yt[Kt]=Yt[Rt]=Yt[Ht]=Yt[It]=!1;var ee="object"==typeof exports&&exports&&!exports.nodeType&&exports,ne=ee&&"object"==typeof module&&module&&!module.nodeType&&module,ie=ne&&ne.exports===ee,re=ie&&$.process,oe=function(){try{var e=ne&&ne.require&&ne.require("util").types;return e||re&&re.binding&&re.binding("util")}catch(e){}}();const ae=oe;var le=oe&&oe.isTypedArray,se=le?te(le):Zt;const ce=se;var ue=Object.prototype,de=ue.hasOwnProperty;function fe(e,t){var n=x(e),i=!n&&jt(e),a=!n&&!i&&$t(e),r=!n&&!i&&!a&&ce(e),o=n||i||a||r,l=o?ft(e.length,String):[],s=l.length;for(var c in e)!t&&!de.call(e,c)||o&&("length"==c||a&&("offset"==c||"parent"==c)||r&&("buffer"==c||"byteLength"==c||"byteOffset"==c)||ot(c,s))||l.push(c);return l}function he(e,t){return function(n){return e(t(n))}}var ve=he(Object.keys,Object);const be=ve;var _e=Object.prototype,pe=_e.hasOwnProperty;function ye(e){if(!dt(e))return be(e);var t=[];for(var n in Object(e))pe.call(e,n)&&"constructor"!=n&&t.push(n);return t}function je(e){return ct(e)?fe(e):ye(e)}var ke=tt(Object,"create");const me=ke;function we(){this.__data__=me?me(null):{},this.size=0}function ge(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t}var Se="__lodash_hash_undefined__",Ae=Object.prototype,Oe=Ae.hasOwnProperty;function $e(e){var t=this.__data__;if(me){var n=t[e];return n===Se?void 0:n}return Oe.call(t,e)?t[e]:void 0}var xe=Object.prototype,Ce=xe.hasOwnProperty;function De(e){var t=this.__data__;return me?void 0!==t[e]:Ce.call(t,e)}var Me="__lodash_hash_undefined__";function We(e,t){var n=this.__data__;return this.size+=this.has(e)?0:1,n[e]=me&&void 0===t?Me:t,this}function Fe(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var i=e[t];this.set(i[0],i[1])}}function Pe(){this.__data__=[],this.size=0}function Te(e,t){for(var n=e.length;n--;)if(at(e[n][0],t))return n;return-1}Fe.prototype.clear=we,Fe.prototype.delete=ge,Fe.prototype.get=$e,Fe.prototype.has=De,Fe.prototype.set=We;var Ee=Array.prototype,Ke=Ee.splice;function Re(e){var t=this.__data__,n=Te(t,e);return!(n<0)&&(n==t.length-1?t.pop():Ke.call(t,n,1),--this.size,!0)}function He(e){var t=this.__data__,n=Te(t,e);return n<0?void 0:t[n][1]}function Ie(e){return Te(this.__data__,e)>-1}function Ne(e,t){var n=this.__data__,i=Te(n,e);return i<0?(++this.size,n.push([e,t])):n[i][1]=t,this}function ze(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var i=e[t];this.set(i[0],i[1])}}ze.prototype.clear=Pe,ze.prototype.delete=Re,ze.prototype.get=He,ze.prototype.has=Ie,ze.prototype.set=Ne;var Be=tt(A,"Map");const Ue=Be;function Le(){this.size=0,this.__data__={hash:new Fe,map:new(Ue||ze),string:new Fe}}function Ve(e){var t=typeof e;return"string"==t||"number"==t||"symbol"==t||"boolean"==t?"__proto__"!==e:null===e}function qe(e,t){var n=e.__data__;return Ve(t)?n["string"==typeof t?"string":"hash"]:n.map}function Ge(e){var t=qe(this,e).delete(e);return this.size-=t?1:0,t}function Je(e){return qe(this,e).get(e)}function Qe(e){return qe(this,e).has(e)}function Xe(e,t){var n=qe(this,e),i=n.size;return n.set(e,t),this.size+=n.size==i?0:1,this}function Ye(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var i=e[t];this.set(i[0],i[1])}}function Ze(e,t){for(var n=-1,i=t.length,a=e.length;++n<i;)e[a+n]=t[n];return e}function tn(){this.__data__=new ze,this.size=0}function en(e){var t=this.__data__,n=t.delete(e);return this.size=t.size,n}function nn(e){return this.__data__.get(e)}function rn(e){return this.__data__.has(e)}Ye.prototype.clear=Le,Ye.prototype.delete=Ge,Ye.prototype.get=Je,Ye.prototype.has=Qe,Ye.prototype.set=Xe;var on=200;function an(e,t){var n=this.__data__;if(n instanceof ze){var i=n.__data__;if(!Ue||i.length<on-1)return i.push([e,t]),this.size=++n.size,this;n=this.__data__=new Ye(i)}return n.set(e,t),this.size=n.size,this}function ln(e){var t=this.__data__=new ze(e);this.size=t.size}function sn(e,t){for(var n=-1,i=null==e?0:e.length,a=0,r=[];++n<i;){var o=e[n];t(o,n,e)&&(r[a++]=o)}return r}function cn(){return[]}ln.prototype.clear=tn,ln.prototype.delete=en,ln.prototype.get=nn,ln.prototype.has=rn,ln.prototype.set=an;var un=Object.prototype,dn=un.propertyIsEnumerable,fn=Object.getOwnPropertySymbols,hn=fn?function(e){return null==e?[]:(e=Object(e),sn(fn(e),(function(t){return dn.call(e,t)})))}:cn;const vn=hn;function bn(e,t,n){var i=t(e);return x(e)?i:Ze(i,n(e))}function _n(e){return bn(e,je,vn)}var pn=tt(A,"DataView");const yn=pn;var jn=tt(A,"Promise");const kn=jn;var mn=tt(A,"Set");const wn=mn;var gn="[object Map]",Sn="[object Object]",An="[object Promise]",On="[object Set]",$n="[object WeakMap]",xn="[object DataView]",Cn=U(yn),Dn=U(Ue),Mn=U(kn),Wn=U(wn),Fn=U(nt),Pn=S;(yn&&Pn(new yn(new ArrayBuffer(1)))!=xn||Ue&&Pn(new Ue)!=gn||kn&&Pn(kn.resolve())!=An||wn&&Pn(new wn)!=On||nt&&Pn(new nt)!=$n)&&(Pn=function(e){var t=S(e),n=t==Sn?e.constructor:void 0,i=n?U(n):"";if(i)switch(i){case Cn:return xn;case Dn:return gn;case Mn:return An;case Wn:return On;case Fn:return $n}return t});const Tn=Pn;var En=A.Uint8Array;const Kn=En;var Rn="__lodash_hash_undefined__";function Hn(e){return this.__data__.set(e,Rn),this}function In(e){return this.__data__.has(e)}function Nn(e){var t=-1,n=null==e?0:e.length;for(this.__data__=new Ye;++t<n;)this.add(e[t])}function zn(e,t){for(var n=-1,i=null==e?0:e.length;++n<i;)if(t(e[n],n,e))return!0;return!1}function Bn(e,t){return e.has(t)}Nn.prototype.add=Nn.prototype.push=Hn,Nn.prototype.has=In;var Un=1,Ln=2;function Vn(e,t,n,i,a,r){var o=n&Un,l=e.length,s=t.length;if(l!=s&&!(o&&s>l))return!1;var c=r.get(e),d=r.get(t);if(c&&d)return c==t&&d==e;var h=-1,u=!0,b=n&Ln?new Nn:void 0;for(r.set(e,t),r.set(t,e);++h<l;){var v=e[h],_=t[h];if(i)var f=o?i(_,v,h,t,e,r):i(v,_,h,e,t,r);if(void 0!==f){if(f)continue;u=!1;break}if(b){if(!zn(t,(function(e,t){if(!Bn(b,t)&&(v===e||a(v,e,n,i,r)))return b.push(t)}))){u=!1;break}}else if(v!==_&&!a(v,_,n,i,r)){u=!1;break}}return r.delete(e),r.delete(t),u}function qn(e){var t=-1,n=Array(e.size);return e.forEach((function(e,i){n[++t]=[i,e]})),n}function Gn(e){var t=-1,n=Array(e.size);return e.forEach((function(e){n[++t]=e})),n}var Jn=1,Qn=2,Xn="[object Boolean]",Yn="[object Date]",Zn="[object Error]",ti="[object Map]",ei="[object Number]",ni="[object RegExp]",ii="[object Set]",ri="[object String]",oi="[object Symbol]",ai="[object ArrayBuffer]",li="[object DataView]",si=C?C.prototype:void 0,ci=si?si.valueOf:void 0;function ui(e,t,n,i,a,r,o){switch(n){case li:if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case ai:return!(e.byteLength!=t.byteLength||!r(new Kn(e),new Kn(t)));case Xn:case Yn:case ei:return at(+e,+t);case Zn:return e.name==t.name&&e.message==t.message;case ni:case ri:return e==t+"";case ti:var l=qn;case ii:var s=i&Jn;if(l||(l=Gn),e.size!=t.size&&!s)return!1;var c=o.get(e);if(c)return c==t;i|=Qn,o.set(e,t);var d=Vn(l(e),l(t),i,a,r,o);return o.delete(e),d;case oi:if(ci)return ci.call(e)==ci.call(t)}return!1}var di=1,fi=Object.prototype,hi=fi.hasOwnProperty;function vi(e,t,n,i,a,r){var o=n&di,l=_n(e),s=l.length;if(s!=_n(t).length&&!o)return!1;for(var c=s;c--;){var d=l[c];if(!(o?d in t:hi.call(t,d)))return!1}var h=r.get(e),u=r.get(t);if(h&&u)return h==t&&u==e;var b=!0;r.set(e,t),r.set(t,e);for(var v=o;++c<s;){var _=e[d=l[c]],f=t[d];if(i)var p=o?i(f,_,d,t,e,r):i(_,f,d,e,t,r);if(!(void 0===p?_===f||a(_,f,n,i,r):p)){b=!1;break}v||(v="constructor"==d)}if(b&&!v){var y=e.constructor,g=t.constructor;y==g||!("constructor"in e)||!("constructor"in t)||"function"==typeof y&&y instanceof y&&"function"==typeof g&&g instanceof g||(b=!1)}return r.delete(e),r.delete(t),b}var bi=1,_i="[object Arguments]",pi="[object Array]",yi="[object Object]",ji=Object.prototype,ki=ji.hasOwnProperty;function mi(e,t,n,i,a,r){var o=x(e),l=x(t),s=o?pi:Tn(e),c=l?pi:Tn(t),d=(s=s==_i?yi:s)==yi,h=(c=c==_i?yi:c)==yi,u=s==c;if(u&&$t(e)){if(!$t(t))return!1;o=!0,d=!1}if(u&&!d)return r||(r=new ln),o||ce(e)?Vn(e,t,n,i,a,r):ui(e,t,s,n,i,a,r);if(!(n&bi)){var b=d&&ki.call(e,"__wrapped__"),v=h&&ki.call(t,"__wrapped__");if(b||v){var _=b?e.value():e,f=v?t.value():t;return r||(r=new ln),a(_,f,n,i,r)}}return!!u&&(r||(r=new ln),vi(e,t,n,i,a,r))}function wi(e,t,n,i,a){return e===t||(null==e||null==t||!O(e)&&!O(t)?e!=e&&t!=t:mi(e,t,n,i,wi,a))}function gi(e,t){return wi(e,t)}const Si=/^\d+(\.\d+)?([a-z]+|%)?$/,Ai=(e,t,n)=>{h(e,"_minWidth",(e=>"string"==typeof e&&Si.test(e)),new Set(["String","/^\\d+(\\.\\d+)?([a-z]+|%)?$/"]),t,n)},Oi=class{constructor(n){t(this,n),this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.renderTableRow=(t,n,i,a=!1)=>{var o,l;let s=String(n);return this.horizontal&&(null===(o=t[0])||void 0===o?void 0:o.data)&&(s=null!==(l=this.getDataKey(t[0].data))&&void 0!==l?l:s),e("tr",{class:r("kol-table__row",{"kol-table__row--body":!a,"kol-table__row--footer":a}),key:`row-${s}`},this.renderSelectionCell(t,n),t.map(((e,t)=>this.renderTableCell(e,n,t,i))))},this.renderTableCell=(t,n,i,a)=>{const o=this.getColumnSettings(t);if(o&&!o.visible)return"";let l=`${n}-${i}-${t.label}`;if(t.data){const e=this.getDataKey(t.data);l=e?`${e}-${this.horizontal?i:n}`:l}return t.headerCell?this.renderHeadingCell(t,n,i,a):e("td",{key:`cell-${l}`,class:r("kol-table__cell kol-table__cell--body",{[`kol-table__cell--align-${t.textAlign}`]:t.textAlign}),colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:(null==o?void 0:o.width)?`${o.width}ch`:t.width},ref:"function"==typeof t.render?e=>{this.cellRender(t,e)}:void 0},"function"!=typeof t.render?t.label:"")},this.state={_data:[],_headerCells:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto"},this.tableDivElementHasScrollbar=!1,this.previousHeaderCells=void 0,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,this._tableSettings=void 0}validateData(e){y(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){j(this,e)}validateHeaderCells(e){W(this,e),gi(this.previousHeaderCells,this.state._headerCells)||this.initializeTableSettings(),this.previousHeaderCells=this.state._headerCells}validateLabel(e){M(this,e,{required:!0})}validateMinWidth(e){Ai(this,e)}validateOn(e){k(this,e)}validateSelection(e){m(this,e)}validateTableSettings(e){w(this,e)}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const n=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let i=this.checkboxRefs.indexOf(n);i>-1&&(e.preventDefault(),"ArrowDown"===e.key?(i=(i+1)%this.checkboxRefs.length,this.checkboxRefs[i].focus()):"ArrowUp"===e.key&&(e.preventDefault(),i=(i+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[i].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}handleSettingsChange(e){v(this,"_tableSettings",e.detail)}disconnectedCallback(){var e;null===(e=this.tableDivElementResizeObserver)||void 0===e||e.disconnect()}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}updateDataToKeyMap(e){e.forEach((e=>{this.dataToKeyMap.has(e)||this.dataToKeyMap.set(e,b())})),this.dataToKeyMap.forEach(((t,n)=>{e.includes(n)||this.dataToKeyMap.delete(n)}))}getDataKey(e){return this.dataToKeyMap.get(e)}cellRender(e,t){t&&(clearTimeout(this.cellsToRenderTimeouts.get(t)),this.cellsToRenderTimeouts.set(t,setTimeout((()=>{if("function"==typeof e.render){const n=e.render(t,e,e.data,this.state._data);"string"==typeof n&&(t.textContent=n)}}))))}getNumberOfCols(e,t){let n=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var n;return t+=null!==(n=e.colSpan)&&void 0!==n?n:1})),n<t&&(n=t)})),0===n&&(n=t.length),n}getNumberOfRows(e,t){var n;let i=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var n;return t+=null!==(n=e.rowSpan)&&void 0!==n?n:1})),i<t&&(i=t)})),0===i?i=t.length:i-=(null===(n=this.state._dataFoot)||void 0===n?void 0:n.length)||0,i}getThePrimaryHeadersWithKeysIfExists(e){const t=[];return e.forEach((e=>{e.forEach((e=>{"string"==typeof e.key&&t.push(e)}))})),t}getPrimaryHeaders(e){var t,n;let i=this.getThePrimaryHeadersWithKeysIfExists(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===i.length&&(i=this.getThePrimaryHeadersWithKeysIfExists(null!==(n=e.vertical)&&void 0!==n?n:[]),i.length>0&&(this.horizontal=!1)),i}getColumnPositionMap(){var e;const t=new Map;return null===(e=this.state._tableSettings)||void 0===e||e.columns.forEach((e=>{t.set(e.key,e.position)})),t}sortByColumnPosition(e){const t=this.getColumnPositionMap();return[...e].sort(((e,n)=>{var i,a,r,o;return(null!==(a=t.get(null!==(i=e.key)&&void 0!==i?i:""))&&void 0!==a?a:Number.MAX_SAFE_INTEGER)-(null!==(o=t.get(null!==(r=n.key)&&void 0!==r?r:""))&&void 0!==o?o:Number.MAX_SAFE_INTEGER)}))}createDataField(e,t,n){var i;t.horizontal=Array.isArray(null==t?void 0:t.horizontal)?t.horizontal:[],t.vertical=Array.isArray(null==t?void 0:t.vertical)?t.vertical:[];const a=this.getPrimaryHeaders(t),r=this.getNumberOfCols(t.horizontal,e);let o=this.getNumberOfRows(t.vertical,e),l=0;n&&(l=o,o+=(null===(i=this.state._dataFoot)||void 0===i?void 0:i.length)||0);const s=[],d=[],h=[];t.vertical.forEach(((e,t)=>{d[t]=0,h[t]=[]}));const u=this.sortByColumnPosition(a);for(let i=l;i<o;i++){const a=[];t.vertical.forEach(((e,t)=>{let n=0;if(h[t].forEach((e=>n+=e)),n<=i){const r=e[i-n+d[t]];if("object"==typeof r){a.push(Object.assign(Object.assign({},r),{headerCell:!0,data:{}}));let e=1;if("number"==typeof r.rowSpan&&r.rowSpan>1&&(e=r.rowSpan),h[t].push(e),"number"==typeof r.colSpan&&r.colSpan>1)for(let n=1;n<r.colSpan;n++)h[t+n].push(e);d[t]++}}}));for(let t=0;t<r;t++)if(!0===this.horizontal){const r=n&&this.state._dataFoot?this.state._dataFoot[i-l]:e[i];"object"==typeof u[t]&&null!==u[t]&&"string"==typeof u[t].key&&"object"==typeof r&&null!==r&&a.push(Object.assign(Object.assign({},u[t]),{colSpan:void 0,data:r,label:r[u[t].key],rowSpan:void 0}))}else"object"==typeof u[i]&&null!==u[i]&&"string"==typeof u[i].key&&"object"==typeof e[t]&&null!==e[t]&&a.push(Object.assign(Object.assign({},u[i]),{colSpan:void 0,data:e[t],label:e[t][u[i].key],rowSpan:void 0}));s.push(a)}if(0===e.length){let e=0,n=0;Array.isArray(t.horizontal)&&t.horizontal.length>0&&t.horizontal[0].forEach((t=>{e+=t.colSpan||1})),Array.isArray(t.vertical)&&t.vertical.length>0&&(e-=t.vertical.length,t.vertical[0].forEach((e=>{n+=e.rowSpan||1})));const i={colSpan:e,label:c("kol-no-entries"),render:void 0,rowSpan:Math.max(n,1)};0===s.length?s.push([i]):s[0].push(i)}return s}handleSelectionChangeCallbackAndEvent(e,t){var n;"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n[g.onSelectionChange])&&this.state._on[g.onSelectionChange](e,t),this.host&&_(this.host,p.selectionChange,t)}initializeTableSettings(){if(this._tableSettings)return;const e=this.getPrimaryHeaders(this.state._headerCells);this.state._tableSettings||(this.state._tableSettings={columns:[]}),this.state._tableSettings.columns=e.filter((e=>e.key)).map(((e,t)=>{var n;return{key:null!==(n=e.key)&&void 0!==n?n:b(),label:e.label,position:t,visible:!0}}))}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaderCells(this._headerCells),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validateSelection(this._selection),this.validateTableSettings(this._tableSettings)}renderSelectionCell(t,n){var i,l,s;const c=this.state._selection;if(!c)return"";const d=this.getSelectionKeyPropertyName(),h=null===(i=t[0])||void 0===i?void 0:i.data;if(!h)return"";const u=h[d],b=c.multiple||void 0===c.multiple,v=null===(l=null==c?void 0:c.selectedKeys)||void 0===l?void 0:l.includes(u),_=null===(s=null==c?void 0:c.disabledKeys)||void 0===s?void 0:s.includes(u),f=c.label(h),p={name:"selection",checked:v,disabled:_,id:u,"aria-label":f};return e("td",{key:`tbody-${n}-selection`,class:"kol-table__cell kol-table__cell--selection"},e("div",{class:r("kol-table__selection",{"kol-table__selection--checked":v})},b?e("label",{class:r("kol-table__selection-label",{"kol-table__selection-label--disabled":_})},e(o,{class:"kol-table__selection-icon",_icons:"codicon "+(v?"codicon-check":""),_label:""}),e("input",Object.assign({class:r("kol-table__selection-input kol-table__selection-input--checkbox"),ref:e=>e&&this.checkboxRefs.push(e)},p,{type:"checkbox",onInput:e=>{var t,n;const i=v?null===(n=null==c?void 0:c.selectedKeys)||void 0===n?void 0:n.filter((e=>e!==u)):[...null!==(t=null==c?void 0:c.selectedKeys)&&void 0!==t?t:[],u];this.handleSelectionChangeCallbackAndEvent(e,null!=i?i:[])}}))):e("label",{class:"kol-table__selection-label"},e("input",Object.assign({class:r("kol-table__selection-input kol-table__selection-input--radio")},p,{type:"radio",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,u)}}))),e(a,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${u}-label`,_label:f})))}getColumnSettings(e){var t;return null===(t=this.state._tableSettings)||void 0===t?void 0:t.columns.find((t=>t.key===e.key))}getSelectionKeyPropertyName(){var e,t;return null!==(t=null===(e=this.state._selection)||void 0===e?void 0:e.keyPropertyName)&&void 0!==t?t:"id"}getDataWithSelectionEnabled(){const e=this.getSelectionKeyPropertyName();return this.state._data.filter((t=>{var n,i;return!(null===(i=null===(n=this.state._selection)||void 0===n?void 0:n.disabledKeys)||void 0===i?void 0:i.includes(t[e]))}))}getSelectedKeysWithoutDisabledKeys(){var e,t;return null===(t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys)||void 0===t?void 0:t.filter((e=>{var t,n;return!(null===(n=null===(t=this.state._selection)||void 0===t?void 0:t.disabledKeys)||void 0===n?void 0:n.includes(e))}))}getSelectedKeysWithDisabledKeysOnly(){var e,t;return null===(t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys)||void 0===t?void 0:t.filter((e=>{var t,n;return null===(n=null===(t=this.state._selection)||void 0===t?void 0:t.disabledKeys)||void 0===n?void 0:n.includes(e)}))}getRevertedSelection(e){var t;const n=this.getSelectionKeyPropertyName(),i=null!==(t=this.getSelectedKeysWithDisabledKeysOnly())&&void 0!==t?t:[];return e&&i.push(...this.getDataWithSelectionEnabled().map((e=>null==e?void 0:e[n]))),i}getTableMinWidth(){var e,t;const n=null!==(t=null===(e=this.state._tableSettings)||void 0===e?void 0:e.columns.filter((e=>e.visible)).reduce(((e,t)=>{var n;return e+(null!==(n=t.width)&&void 0!==n?n:0)}),0))&&void 0!==t?t:0;return"auto"===this.state._minWidth?`${n}ch`:`max(${this.state._minWidth}, ${n}ch)`}renderHeadingSelectionCell(){var t,n;const i=this.state._selection;if(!i||!i.multiple&&void 0!==i.multiple)return e("th",{class:"kol-table__cell kol-table__cell--header",key:"thead-0"});const l=null!==(n=null===(t=this.getSelectedKeysWithoutDisabledKeys())||void 0===t?void 0:t.length)&&void 0!==n?n:0,s=l===this.getDataWithSelectionEnabled().length,d=0!==l&&!s;let h="kol-table-selection-indeterminate";s&&!d&&(h="kol-table-selection-none"),0===l&&(h="kol-table-selection-all");const u=c(h);return e("th",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header"},e("div",{class:r("kol-table__selection",{"kol-table__selection--indeterminate":d,"kol-table__selection--checked":s})},e("label",{class:"kol-table__selection-label"},e(o,{class:"kol-table__selection-icon",_icons:"codicon "+(d?"codicon-remove":s?"codicon-check":""),_label:""}),e("input",{class:r("kol-table__selection-input kol-table__selection-input--checkbox"),"data-testid":"selection-checkbox-all",ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:s&&!d,indeterminate:d,"aria-label":u,type:"checkbox",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,this.getRevertedSelection(!s))}})),e(a,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${h}-label`,_label:u})))}renderHeaderTdCell(){return e(n,null,Array.isArray(this.state._headerCells.horizontal)&&this.state._headerCells.horizontal.length>0&&Array.isArray(this.state._headerCells.vertical)&&this.state._headerCells.vertical.length>0&&Array.isArray(this.state._headerCells.horizontal)&&e("td",{"aria-hidden":"true",colSpan:this.state._headerCells.vertical.length,rowSpan:this.state._headerCells.horizontal.length}))}renderHeadingCell(t,n,i,a){const o=this.getColumnSettings(t);if(o&&!o.visible)return"";let s,c="codicon codicon-fold";if(t.sortDirection)switch(t.sortDirection){case"ASC":c="codicon codicon-chevron-up",s="ascending";break;case"DESC":c="codicon codicon-chevron-down",s="descending"}const d=a?"row":"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col";return e("th",{key:`${n}-${i}-${t.label}`,class:r("kol-table__cell kol-table__cell--header",{[`kol-table__cell--align-${t.textAlign}`]:t.textAlign,[`kol-table__cell--${s}`]:s}),scope:d,colSpan:t.colSpan,rowSpan:t.rowSpan,style:{width:(null==o?void 0:o.width)?`${o.width}ch`:t.width},"aria-sort":s,"data-sort":`sort-${t.sortDirection}`},t.sortDirection?e(l,{class:"kol-table__sort-button",exportparts:"icon",_icons:{right:c},_label:t.label,_on:{onClick:e=>{var n;"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onSort)&&t.key&&t.sortDirection&&this.state._on.onSort(e,{key:t.key,currentSortDirection:t.sortDirection}),this.host&&_(this.host,p.sort,{key:t.key,currentSortDirection:t.sortDirection})}}}):t.label)}renderSpacer(t,n){var i,a;const o=(null===(i=this.state._headerCells.vertical)||void 0===i?void 0:i.length)||0,l=null===(a=null==n?void 0:n[0])||void 0===a?void 0:a.reduce(((e,t)=>e+(t.colSpan||1)),0),s=this.state._selection?1:0;return e("tr",{"aria-hidden":"true",class:r("kol-table__spacer",`kol-table__spacer--${t}`)},e("td",{class:r(`kol-table__spacer-line kol-table__spacer-line--${t}`),colSpan:o+l+s}))}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return null;const t=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return e("tfoot",{class:"kol-table__footer"},[this.renderSpacer("foot",t),t.map(((e,t)=>this.renderTableRow(e,t,!0,!0)))])}render(){var t;const n=this.createDataField(this.state._data,this.state._headerCells);this.checkboxRefs=[];const i=null===(t=this.state._headerCells.horizontal)||void 0===t?void 0:t.map((e=>this.sortByColumnPosition(e)));return e("div",{key:"41ef1f9232f94305a6492420a311cf543b582a22",class:"kol-table"},e(s,{key:"3e0def33d6cf806d72c305d0e350b7ee4b2d3899",_tableSettings:this.state._tableSettings}),e("div",{key:"cc55a031f7bae8733cc5877763b68f9b1717b3e2",ref:e=>this.tableDivElement=e,class:"kol-table__scroll-container",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},e("table",{key:"c96b4770ff54fb28a6d6eea1a9f021132e04652c",class:"kol-table__table",style:{minWidth:this.getTableMinWidth()}},e("div",{key:"96095fade8aa2347d2db8e4a42a735e07a683f05",class:"kol-table__focus-element",tabindex:this.tableDivElementHasScrollbar?"0":void 0,"aria-describedby":"caption"}," "),e("caption",{key:"fbf77baecd9f1f569c97df6596e598926f4fc420",class:"kol-table__caption",id:"caption"},this.state._label),Array.isArray(i)&&e("thead",{key:"aeab10b5b582c3134e5e0e7a483fbd441e00edc1",class:"kol-table__head"},[i.map(((t,n)=>e("tr",{class:"kol-table__head-row",key:`thead-${n}`},this.state._selection&&this.renderHeadingSelectionCell(),0===n&&this.renderHeaderTdCell(),Array.isArray(t)&&t.map(((e,t)=>this.renderHeadingCell(e,n,t,!1)))))),this.renderSpacer("head",i)]),e("tbody",{key:"536ad9c3574792ce18cf2694a4251cd781587aea",class:"kol-table__body"},n.map(((e,t)=>this.renderTableRow(e,t,!0)))),this.renderFoot())))}get host(){return i(this)}static get watchers(){return{_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"],_selection:["validateSelection"],_tableSettings:["validateTableSettings"]}}};export{Oi as kol_table_stateless_wc};

package/dist/kolibri/kol-table-stateless.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-058cc56d.js";import{p as t}from"./component-names-7ee7402b.js";const o="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    margin: auto;\n    width: 100%;\n  }\n}\n@layer kol-component {\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    border: 1px solid #000;\n    margin: 0;\n    padding: 0;\n  }\n}\n@layer kol-component {\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: 1;\n  }\n  .kol-table-settings__columns-container {\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(200rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    align-items: center;\n    display: grid;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content 1fr calc(100rem / var(--kolibri-root-font-size, 16)) auto auto;\n    overflow: hidden;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n    position: relative;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__focus-element:focus {\n    outline: 0 !important;\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}",i=o,l=class{constructor(e){n(this,e),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,this._tableSettings=void 0}render(){return e(t,{key:"9e5cbf024de83c62888cfee1ecb15ee9ed1f8ffc",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection,_tableSettings:this._tableSettings})}};l.style={default:i};export{l as kol_table_stateless};
+import{r as n,h as e}from"./index-62ec26b4.js";import{p as t}from"./component-names-7ee7402b.js";const o="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    margin: auto;\n    width: 100%;\n  }\n}\n@layer kol-component {\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    border: 1px solid #000;\n    margin: 0;\n    padding: 0;\n  }\n}\n@layer kol-component {\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: 1;\n  }\n  .kol-table-settings__columns-container {\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(200rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    align-items: center;\n    display: grid;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content 1fr calc(100rem / var(--kolibri-root-font-size, 16)) auto auto;\n    overflow: hidden;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n    position: relative;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__focus-element:focus {\n    outline: 0 !important;\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}",i=o,l=class{constructor(e){n(this,e),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,this._tableSettings=void 0}render(){return e(t,{key:"9e5cbf024de83c62888cfee1ecb15ee9ed1f8ffc",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection,_tableSettings:this._tableSettings})}};l.style={default:i};export{l as kol_table_stateless};

package/dist/kolibri/kol-tabs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,g as e}from"./index-058cc56d.js";import{t as i}from"./i18n-efbafc80.js";import{a as o}from"./component-names-7ee7402b.js";import{d as s,K as a}from"./events-5886c68b.js";import{c as l}from"./clsx-09a06a12.js";import{w as r,j as d,f as h,s as c,k as b,g as u,h as f,t as p}from"./prop.validators-de1491c5.js";import{v as m}from"./align-2f553440.js";import{v}from"./label-0219bcdb.js";import{L as g}from"./dev.utils-fab45cbc.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";import"./index-0a773c52.js";const y=["select-automatic","select-manual"],k=(t,e)=>{r(t,"_behavior",(t=>"string"==typeof t&&y.includes(t)),new Set([`KoliBriTabBehavior {${y.join(", ")}`]),e)};var w;!function(t){t.ArrowDown="ArrowDown",t.ArrowLeft="ArrowLeft",t.ArrowRight="ArrowRight",t.ArrowUp="ArrowUp",t.Enter="Enter",t.Space=" "}(w||(w={}));const _="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-tabs {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: var(--display);\n    grid-template-rows: var(--grid-template-rows);\n    grid-template-columns: var(--grid-template-columns);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-flex-direction: column;\n    --button-group-order: 2;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-flex-direction: column;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: grid;\n    --grid-template-rows: 1fr auto;\n    --button-group-order: 2;\n  }\n  .kol-tabs__tabs-align-top {\n    --display: grid;\n    --grid-template-rows: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs__content {\n    overflow: auto;\n  }\n  .kol-tabs__button-group {\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: var(--button-group-flex-direction);\n    order: var(--button-group-order);\n  }\n  .kol-tabs__button-group .kol-button {\n    border-bottom-color: transparent;\n    border-bottom-style: solid;\n    display: block;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n}",x=_,T=class{constructor(e){t(this,e),this.onCreateLabel=`${i("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 w.ArrowRight:this.goToNextTab(t);break;case w.ArrowLeft:this.goToPreviousTab(t);break;case w.Space:case w.Enter:this.activateFocusedTab(t)}},this.onClickSelect=(t,e)=>{this.selectNextTabEvent(t,e)},this.onMouseDown=t=>{t.preventDefault()},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);d("[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.refreshTabPanels=()=>{var t,e,n,o;if(this.tabPanelHost){for(;this.tabPanelHost.firstChild;)this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);for(let a=0;a<(null===(t=this.state._tabs)||void 0===t?void 0:t.length);a++){const t=document.createElement("div");t.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${a}`),t.setAttribute("id",`tabpanel-${a}`),t.setAttribute("role","tabpanel"),t.setAttribute("hidden","");const i=document.createElement("slot");i.setAttribute("name",`tabpanel-slot-${a}`),t.appendChild(i),null===(e=this.tabPanelHost)||void 0===e||e.appendChild(t),"undefined"!=typeof HTMLCollection&&(null===(n=this.host)||void 0===n?void 0:n.children)instanceof HTMLCollection&&(null===(o=this.host)||void 0===o?void 0:o.children[a])&&this.host.children[a].setAttribute("slot",`tabpanel-slot-${a}`)}this.updateVisiblePanel()}},this.updateVisiblePanel=()=>{this.tabPanelHost&&Array.from(this.tabPanelHost.children).forEach(((t,e)=>{e===this.state._selected?t.removeAttribute("hidden"):t.setAttribute("hidden","")}))},this.onCreate=t=>{var e,n;t.preventDefault(),"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;if(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 n("div",{"aria-label":this.state._label,class:"kol-tabs__button-group",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map(((t,e)=>n(o,{_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&&n(o,{class:"kol-tabs_button-create",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return n("div",{key:"ace31fe22b60c6419c6c04842d4b5e256a20a77c",ref:t=>{this.tabPanelsElement=t},class:l("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),n("div",{key:"ca508552303e1da3567a6534fb68969cb1f221e4",class:"kol-tabs__content",ref:this.catchTabPanelHost}))}validateAlign(t){m(this,t)}validateBehavior(t){k(this,t)}validateLabel(t){v(this,t,{required:!0})}validateOn(t){if("object"==typeof t&&null!==t){h("[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:g.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:g.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),c(this,"_on",e)}}validateSelected(t){b(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){u(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs,afterPatch:this.refreshTabPanels}}),f("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(){this.refreshTabPanels()}focusTabById(t){if(this.tabPanelsElement){const e=p(`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.host&&s(this.host,a.select,e),this.focusTabById(e)}get host(){return e(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};T.style={default:x};export{T as kol_tabs};
+import{r as t,h as n,g as e}from"./index-62ec26b4.js";import{t as i}from"./i18n-efbafc80.js";import{a as o}from"./component-names-7ee7402b.js";import{d as s,K as a}from"./events-5886c68b.js";import{c as l}from"./clsx-09a06a12.js";import{w as r,j as d,f as h,s as c,k as b,g as u,h as f,t as p}from"./prop.validators-bb13c77c.js";import{v as m}from"./align-679f189f.js";import{v}from"./label-5355d0b2.js";import{L as g}from"./dev.utils-fab45cbc.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";import"./index-932feda8.js";const y=["select-automatic","select-manual"],k=(e,t)=>{r(e,"_behavior",(e=>"string"==typeof e&&y.includes(e)),new Set([`KoliBriTabBehavior {${y.join(", ")}`]),t)};var w;!function(e){e.ArrowDown="ArrowDown",e.ArrowLeft="ArrowLeft",e.ArrowRight="ArrowRight",e.ArrowUp="ArrowUp",e.Enter="Enter",e.Space=" "}(w||(w={}));const _="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-tabs {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: var(--display);\n    grid-template-rows: var(--grid-template-rows);\n    grid-template-columns: var(--grid-template-columns);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-flex-direction: column;\n    --button-group-order: 2;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-flex-direction: column;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: grid;\n    --grid-template-rows: 1fr auto;\n    --button-group-order: 2;\n  }\n  .kol-tabs__tabs-align-top {\n    --display: grid;\n    --grid-template-rows: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs__content {\n    overflow: auto;\n  }\n  .kol-tabs__button-group {\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: var(--button-group-flex-direction);\n    order: var(--button-group-order);\n  }\n  .kol-tabs__button-group .kol-button {\n    border-bottom-color: transparent;\n    border-bottom-style: solid;\n    display: block;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n}",x=_,T=class{constructor(e){t(this,e),this.onCreateLabel=`${i("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(e,t,n=1)=>{const o=t+n;return o<e.length?e[o]._disabled?this.nextPossibleTabIndex(e,t,n+1):o:t},this.prevPossibleTabIndex=(e,t,n=1)=>{const o=t-n;return o>=0?e[o]._disabled?this.prevPossibleTabIndex(e,t,n+1):o:t},this.onKeyDown=e=>{switch(e.key){case w.ArrowRight:this.goToNextTab(e);break;case w.ArrowLeft:this.goToPreviousTab(e);break;case w.Space:case w.Enter:this.activateFocusedTab(e)}},this.onClickSelect=(e,t)=>{this.selectNextTabEvent(e,t)},this.onMouseDown=e=>{e.preventDefault()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=e=>{this.tabPanelHost=e},this.selectNextNotDisabledTab=(e,t,n=!0,o)=>{if(e>t.length-1&&(e=t.length-1),e<0&&(e=0),Array.isArray(t)&&t[e]&&t[e]._disabled){if(!0===n){if(e<t.length-1)return this.selectNextNotDisabledTab(e+1,t,!0,o||e);e=o||e,n=!1}if(!1===n){if(e>0)return this.selectNextNotDisabledTab(e-1,t,!1,o||e);d("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return e},this.syncSelectedAndTabs=(e,t,n,o)=>{let a,i;a="_selected"===o?e:this.state._selected,i="_tabs"===o?e:this.state._tabs,i.length>0&&t.set("_selected",this.selectNextNotDisabledTab(a,i))},this.refreshTabPanels=()=>{var e,t,n,o;if(this.tabPanelHost){for(;this.tabPanelHost.firstChild;)this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);for(let a=0;a<(null===(e=this.state._tabs)||void 0===e?void 0:e.length);a++){const e=document.createElement("div");e.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${a}`),e.setAttribute("id",`tabpanel-${a}`),e.setAttribute("role","tabpanel"),e.setAttribute("hidden","");const i=document.createElement("slot");i.setAttribute("name",`tabpanel-slot-${a}`),e.appendChild(i),null===(t=this.tabPanelHost)||void 0===t||t.appendChild(e),"undefined"!=typeof HTMLCollection&&(null===(n=this.host)||void 0===n?void 0:n.children)instanceof HTMLCollection&&(null===(o=this.host)||void 0===o?void 0:o.children[a])&&this.host.children[a].setAttribute("slot",`tabpanel-slot-${a}`)}this.updateVisiblePanel()}},this.updateVisiblePanel=()=>{this.tabPanelHost&&Array.from(this.tabPanelHost.children).forEach(((e,t)=>{t===this.state._selected?e.removeAttribute("hidden"):e.setAttribute("hidden","")}))},this.onCreate=e=>{var t,n;e.preventDefault(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onCreate)&&(null===(n=this.state._on)||void 0===n||n.onCreate(e))},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(e){const t=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(e,t,this.getKeyboardTabChangeMode())}goToPreviousTab(e){const t=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(e,t,this.getKeyboardTabChangeMode())}activateFocusedTab(e){"number"==typeof this.currentFocusIndex&&this.onSelect(e,this.currentFocusIndex)}selectNextTabEvent(e,t,n="activateCompletely"){var o,a;if(this.currentFocusIndex=t,this.focusTabById(t),"activateCompletely"===n){this._selected=t;null===(a=null===(o=this.state._tabs[t]._on)||void 0===o?void 0:o.onSelect)||void 0===a||a.call(o,e,t),this.onSelect(e,t)}}renderButtonGroup(){return n("div",{"aria-label":this.state._label,class:"kol-tabs__button-group",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map(((e,t)=>n(o,{_disabled:e._disabled,_icons:e._icons,_hideLabel:e._hideLabel,_label:e._label,_on:this.callbacks,_tabIndex:this.state._selected===t?0:-1,_tooltipAlign:e._tooltipAlign,_variant:this.state._selected===t?"custom":void 0,_customClass:this.state._selected===t?"selected":void 0,_ariaControls:`tabpanel-${t}`,_ariaSelected:this.state._selected===t,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${t}`,_role:"tab",_value:t}))),this.showCreateTab&&n(o,{class:"kol-tabs_button-create",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return n("div",{key:"ace31fe22b60c6419c6c04842d4b5e256a20a77c",ref:e=>{this.tabPanelsElement=e},class:l("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),n("div",{key:"ca508552303e1da3567a6534fb68969cb1f221e4",class:"kol-tabs__content",ref:this.catchTabPanelHost}))}validateAlign(e){m(this,e)}validateBehavior(e){k(this,e)}validateLabel(e){v(this,e,{required:!0})}validateOn(e){if("object"==typeof e&&null!==e){h("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const t={};"function"!=typeof e.onCreate&&"object"!=typeof e.onCreate||("object"==typeof e.onCreate?("string"==typeof e.onCreate.label&&e.onCreate.label.length>0?this.onCreateLabel=e.onCreate.label:g.debug("[KolTabs] The label text for New in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} is not set correctly."),"function"==typeof e.onCreate.callback?t.onCreate=e.onCreate.callback:g.debug("[KolTabs] The onCreate callback function for New in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} is not set correctly.")):t.onCreate=e.onCreate,this.showCreateTab="function"==typeof t.onCreate),"function"==typeof e.onSelect&&(t.onSelect=e.onSelect),c(this,"_on",t)}}validateSelected(e){b(this,"_selected",e,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(e){u(this,"_tabs",(e=>"object"==typeof e&&null!==e&&"string"==typeof e._label&&e._label.length>0),e,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs,afterPatch:this.refreshTabPanels}}),f("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(){this.refreshTabPanels()}focusTabById(e){if(this.tabPanelsElement){const t=p(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}onSelect(e,t){var n,o;null===(o=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===o||o.call(n,e,t),this.host&&s(this.host,a.select,t),this.focusTabById(t)}get host(){return e(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};T.style={default:x};export{T as kol_tabs};