@public-ui/components 2.1.5-rc.8 → 2.1.6

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 t}from"./index-5c159215.js";import{t as o}from"./i18n-59fb5a46.js";import{v as a}from"./show-bd1ff7bd.js";import{w as r}from"./prop.validators-db70e3c4.js";import"./i18n-3dcfca85.js";import"./reuse-108ee8f5.js";import"./index-db4aa6e4.js";import"./dev.utils-1ca991a2.js";const s=["cycle","dot","none"],l=(n,e)=>{r(n,"_variant",(n=>"string"==typeof n&&s.includes(n)),new Set(s),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: 44px;\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 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .spin.cycle {\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n    height: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin.cycle > .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  .spin.cycle > .loader::before {\n    content: \"\";\n    box-sizing: border-box;\n    position: absolute;\n    inset: 0px;\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: #fc0;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n    }\n    75% {\n      border-color: red;\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  } /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .spin.cycle > .loader {\n      animation-duration: 4s;\n    }\n    .spin.cycle > .loader::before {\n      animation-duration: 6s;\n    }\n  }\n}\n@layer kol-component {\n  .spin.dot {\n    height: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin.dot > span {\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  .spin.dot > span:first-child {\n    background-color: #fc0;\n    z-index: 0;\n    animation: 1s infinite spin1;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin.dot > span:nth-child(2) {\n    background-color: red;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin.dot > span:nth-child(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  .spin.dot > span:nth-child(4) {\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  } /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .spin.dot > span:first-child,\n    .spin.dot > span:nth-child(2),\n    .spin.dot > span:nth-child(3),\n    .spin.dot > span:nth-child(4) {\n      animation-duration: 2s;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin {\n    display: block;\n    padding: calc(2rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n}",c=d;function p(n){switch(n){case"cycle":return e("span",{class:"loader"});case"none":return e("slot",{name:"expert"});default:return e(t,null,e("span",{class:"bg-spin-1"}),e("span",{class:"bg-spin-2"}),e("span",{class:"bg-spin-3"}),e("span",{class:"bg-neutral"}))}}const h=class{constructor(e){n(this,e),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return e(i,{key:"6974287d918166c7f954447289a132cd48605222",class:"kol-spin"},this.state._show?e("span",{"aria-busy":"true","aria-label":o("kol-action-running"),"aria-live":"polite",class:{spin:!0,[this.state._variant]:!0},role:"alert"},p(this.state._variant)):this.showToggled&&e("span",{"aria-label":o("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){l(this,n)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};h.style={default:c};export{h as kol_spin};
+import{r as n,h as e,H as i,F as t}from"./index-8a349081.js";import{t as o}from"./i18n-6d848180.js";import{v as a}from"./show-d234ff64.js";import{w as r}from"./prop.validators-f89d26b4.js";import"./i18n-3dcfca85.js";import"./reuse-523ba2ac.js";import"./index-db4aa6e4.js";import"./dev.utils-fab45cbc.js";const s=["cycle","dot","none"],l=(n,e)=>{r(n,"_variant",(n=>"string"==typeof n&&s.includes(n)),new Set(s),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: 44px;\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 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .spin.cycle {\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n    height: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin.cycle > .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  .spin.cycle > .loader::before {\n    content: \"\";\n    box-sizing: border-box;\n    position: absolute;\n    inset: 0px;\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: #fc0;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n    }\n    75% {\n      border-color: red;\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  } /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .spin.cycle > .loader {\n      animation-duration: 4s;\n    }\n    .spin.cycle > .loader::before {\n      animation-duration: 6s;\n    }\n  }\n}\n@layer kol-component {\n  .spin.dot {\n    height: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin.dot > span {\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  .spin.dot > span:first-child {\n    background-color: #fc0;\n    z-index: 0;\n    animation: 1s infinite spin1;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin.dot > span:nth-child(2) {\n    background-color: red;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin.dot > span:nth-child(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  .spin.dot > span:nth-child(4) {\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  } /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .spin.dot > span:first-child,\n    .spin.dot > span:nth-child(2),\n    .spin.dot > span:nth-child(3),\n    .spin.dot > span:nth-child(4) {\n      animation-duration: 2s;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin {\n    display: block;\n    padding: calc(2rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n}",c=d;function p(n){switch(n){case"cycle":return e("span",{class:"loader"});case"none":return e("slot",{name:"expert"});default:return e(t,null,e("span",{class:"bg-spin-1"}),e("span",{class:"bg-spin-2"}),e("span",{class:"bg-spin-3"}),e("span",{class:"bg-neutral"}))}}const h=class{constructor(e){n(this,e),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return e(i,{key:"6974287d918166c7f954447289a132cd48605222",class:"kol-spin"},this.state._show?e("span",{"aria-busy":"true","aria-label":o("kol-action-running"),"aria-live":"polite",class:{spin:!0,[this.state._variant]:!0},role:"alert"},p(this.state._variant)):this.showToggled&&e("span",{"aria-label":o("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){l(this,n)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};h.style={default:c};export{h 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 e,H as t}from"./index-5c159215.js";import{t as i}from"./i18n-59fb5a46.js";import{c as s}from"./component-names-3f4a13bb.js";import"./i18n-3dcfca85.js";import"./reuse-108ee8f5.js";const o="/*\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: 44px;\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 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: flex;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .main-button {\n    flex-grow: 1;\n    text-align: left;\n  }\n  /* popover */\n  .popover {\n    height: 0;\n    left: 0;\n    min-width: 100%;\n    overflow: hidden;\n    position: absolute;\n    top: 100%;\n    transition: height 0.3s ease-in-out;\n  }\n  .popover-content {\n    inset: 0 0 auto 0;\n    min-width: 100%;\n    position: absolute;\n  }\n}",a=o,l=class{constructor(t){n(this,t),this.clickButtonHandler={onClick:n=>{var t,e;"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onClick)?null===(e=this._on)||void 0===e||e.onClick(n,this._value):this.toggleDropdown()}},this.clickToggleHandler={onClick:()=>this.toggleDropdown()},this.openDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height=`${this.dropdownContent.clientHeight}px`,this.state=Object.assign(Object.assign({},this.state),{_show:!0}))},this.closeDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height="",this.state=Object.assign(Object.assign({},this.state),{_show:!1}))},this.toggleDropdown=n=>{("boolean"==typeof n?n:!this.state._show)?this.openDropdown():this.closeDropdown()},this.catchDropdownElements=n=>{n&&(this.dropdown=n,setTimeout((()=>{this.dropdownContent=n.firstChild})))},this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_show:!1}}render(){const n="kol-split-button-dropdown-label";return e(t,{key:"5a64a4a751b51c8852063bc917c1bbf986bca867",class:"kol-split-button"},e(s,{key:"ab8baa7f5a5f4de4d0bf79c8d8d5376640cdb516",class:{"main-button":!0,button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),e("div",{key:"246e21fea2320d7a1c6e53ed54d17515a53ba8c8",class:"horizontal-line"}),e(s,{key:"ca5f0ba735ac3638cc7256c7a7cd8fc7ab9d3fc6",class:"secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?i(`${n}-close`):i(`${n}-open`),_on:this.clickToggleHandler}),e("div",{key:"9855493347ef418b84ba215bcb7f32170a09f140",class:"popover",ref:this.catchDropdownElements},e("div",{key:"f476df593c9956b8262510944c57c99f1bead60d",class:"popover-content"},e("slot",{key:"7021bef08ce563c515e416b35f8f84b6a7acd05c"}))))}};l.style={default:a};export{l as kol_split_button};
+import{r as n,h as e,H as t}from"./index-8a349081.js";import{t as i}from"./i18n-6d848180.js";import{c as s}from"./component-names-5dd1e02a.js";import"./i18n-3dcfca85.js";import"./reuse-523ba2ac.js";const o="/*\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: 44px;\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 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: flex;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .main-button {\n    flex-grow: 1;\n    text-align: left;\n  }\n  /* popover */\n  .popover {\n    height: 0;\n    left: 0;\n    min-width: 100%;\n    overflow: hidden;\n    position: absolute;\n    top: 100%;\n    transition: height 0.3s ease-in-out;\n  }\n  .popover-content {\n    inset: 0 0 auto 0;\n    min-width: 100%;\n    position: absolute;\n  }\n}",a=o,l=class{constructor(t){n(this,t),this.clickButtonHandler={onClick:n=>{var t,e;"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onClick)?null===(e=this._on)||void 0===e||e.onClick(n,this._value):this.toggleDropdown()}},this.clickToggleHandler={onClick:()=>this.toggleDropdown()},this.openDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height=`${this.dropdownContent.clientHeight}px`,this.state=Object.assign(Object.assign({},this.state),{_show:!0}))},this.closeDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height="",this.state=Object.assign(Object.assign({},this.state),{_show:!1}))},this.toggleDropdown=n=>{("boolean"==typeof n?n:!this.state._show)?this.openDropdown():this.closeDropdown()},this.catchDropdownElements=n=>{n&&(this.dropdown=n,setTimeout((()=>{this.dropdownContent=n.firstChild})))},this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_show:!1}}render(){const n="kol-split-button-dropdown-label";return e(t,{key:"5a64a4a751b51c8852063bc917c1bbf986bca867",class:"kol-split-button"},e(s,{key:"ab8baa7f5a5f4de4d0bf79c8d8d5376640cdb516",class:{"main-button":!0,button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),e("div",{key:"246e21fea2320d7a1c6e53ed54d17515a53ba8c8",class:"horizontal-line"}),e(s,{key:"ca5f0ba735ac3638cc7256c7a7cd8fc7ab9d3fc6",class:"secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?i(`${n}-close`):i(`${n}-open`),_on:this.clickToggleHandler}),e("div",{key:"9855493347ef418b84ba215bcb7f32170a09f140",class:"popover",ref:this.catchDropdownElements},e("div",{key:"f476df593c9956b8262510944c57c99f1bead60d",class:"popover-content"},e("slot",{key:"7021bef08ce563c515e416b35f8f84b6a7acd05c"}))))}};l.style={default:a};export{l as kol_split_button};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as e,h as a,H as s}from"./index-5c159215.js";import{t}from"./i18n-59fb5a46.js";import{v as i}from"./label-20475610.js";import{i as r}from"./prop.validators-db70e3c4.js";import"./i18n-3dcfca85.js";import"./reuse-108ee8f5.js";import"./index-db4aa6e4.js";import"./dev.utils-1ca991a2.js";const o=class{constructor(a){e(this,a),this._label=void 0,this._symbol=void 0,this.state={_label:t("kol-warning"),_symbol:""}}render(){return a(s,{key:"34b75c8f44124c57103e84e6f4f33ed6df1fe998",class:"kol-symbol"},a("span",{key:"57a61aba5a3b316f0ef65a4685ac2e7eed690c28","aria-label":this.state._label,role:"term"},this.state._symbol))}validateLabel(a){i(this,a,{required:!0})}validateSymbol(a){r(this,"_symbol",a,{required:!0})}componentWillLoad(){this.validateLabel(this._label),this.validateSymbol(this._symbol)}static get watchers(){return{_label:["validateLabel"],_symbol:["validateSymbol"]}}};export{o as kol_symbol};
+import{r as e,h as a,H as s}from"./index-8a349081.js";import{t}from"./i18n-6d848180.js";import{v as i}from"./label-37acddfe.js";import{i as r}from"./prop.validators-f89d26b4.js";import"./i18n-3dcfca85.js";import"./reuse-523ba2ac.js";import"./index-db4aa6e4.js";import"./dev.utils-fab45cbc.js";const o=class{constructor(a){e(this,a),this._label=void 0,this._symbol=void 0,this.state={_label:t("kol-warning"),_symbol:""}}render(){return a(s,{key:"34b75c8f44124c57103e84e6f4f33ed6df1fe998",class:"kol-symbol"},a("span",{key:"57a61aba5a3b316f0ef65a4685ac2e7eed690c28","aria-label":this.state._label,role:"term"},this.state._symbol))}validateLabel(a){i(this,a,{required:!0})}validateSymbol(a){r(this,"_symbol",a,{required:!0})}componentWillLoad(){this.validateLabel(this._label),this.validateSymbol(this._symbol)}static get watchers(){return{_label:["validateLabel"],_symbol:["validateSymbol"]}}};export{o as kol_symbol};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as i,g as e}from"./index-5c159215.js";import{t as o}from"./i18n-59fb5a46.js";import{t as s,r as a}from"./component-names-3f4a13bb.js";import{t as l}from"./events-29e84d75.js";import{v as h,a as r,b as d,c,E as u}from"./events-2b67c17a.js";import{w as f,s as p,t as b,i as m,p as g,o as v,j as y}from"./prop.validators-db70e3c4.js";import{v as w}from"./label-20475610.js";import"./i18n-3dcfca85.js";import"./reuse-108ee8f5.js";import"./index-db4aa6e4.js";import"./dev.utils-1ca991a2.js";const _=["top","bottom","both"],k=(t,e)=>{f(t,"_paginationPosition",(t=>"string"==typeof t&&_.includes(t)),new Set([`PaginationPositionPropType {${_.join(", ")}`]),e,{defaultValue:"bottom"})},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: 44px;\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 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :root {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  div.pagination .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  div.pagination,\n  div.pagination > div:last-child {\n    display: grid;\n    place-items: center;\n  }\n  @media (max-width: 1024px) {\n    div.pagination .kol-pagination {\n      flex-direction: column;\n    }\n  }\n  @media (min-width: 1024px) {\n    div.pagination,\n    div.pagination > div:last-child {\n      grid-auto-flow: column;\n    }\n    div.pagination .kol-pagination {\n      display: flex;\n    }\n  }\n}\n@layer kol-component {\n  :host,\n  .kol-table-stateless-wc {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .table {\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  table {\n    width: 100%;\n  }\n  caption {\n    text-align: start;\n  }\n  .focus-element {\n    font-size: 0;\n  }\n  .focus-element:focus {\n    outline: 0 !important;\n  }\n  .table:has(.focus-element:focus) {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .table-sort-button .button {\n    color: inherit;\n  }\n  tbody th,\n  th.align-left {\n    text-align: left;\n  }\n  tbody th .table-sort-button .button-inner,\n  th.align-left .table-sort-button .button-inner {\n    justify-items: start;\n  }\n  th.align-center {\n    text-align: center;\n  }\n  th.align-center .table-sort-button .button-inner {\n    justify-items: center;\n  }\n  th.align-right {\n    text-align: right;\n  }\n  th.align-right .table-sort-button .button-inner {\n    justify-items: end;\n  }\n  .selection-header-cell {\n    width: 0;\n  }\n  .selection-cell {\n    white-space: nowrap;\n  }\n}",x=S,j=[10,20,50,100],z=t=>!0===t||""===t||"object"==typeof t&&null!==t,C=class{constructor(e){t(this,e),this.sortDirections=new Map,this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"},this.setSortDirection=(t,e)=>{this.sortDirections.clear(),this.sortDirections.set(t,e),this.sortFunction=t},this.handlePagination={onClick:(t,e)=>{var i;"function"==typeof(null===(i=this.state._pagination._on)||void 0===i?void 0:i.onClick)&&this.state._pagination._on.onClick(t,e),p(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePage:(t,e)=>{var i;"function"==typeof(null===(i=this.state._pagination._on)||void 0===i?void 0:i.onChangePage)&&this.state._pagination._on.onChangePage(t,e),p(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePageSize:(t,e)=>{var i;"function"==typeof(null===(i=this.state._pagination._on)||void 0===i?void 0:i.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,e),p(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:e})),p(this,"_pageSize",e)}},this.updateSortedData=(t=this.sortedColumnHead)=>{if(this.disableSort)return void p(this,"_sortedData",this.state._data);let e=this.state._data;if(this.sortData.length>0)e=this.state._data.sort(((t,e)=>{for(let i=0;i<this.sortData.length;i++){const n=this.sortData[i],a=n.compareFn(t,e);if(0!==a)return"ASC"===n.direction?a:-a}return 0}));else if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"ASC":e=this.sortFunction([...this.state._data]),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"ASC"};break;case"DESC":e=this.sortFunction([...this.state._data]).reverse(),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"DESC"};break;default:e=[...this.state._data],this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"}}p(this,"_sortedData",e)},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.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){f(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){h(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){r(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){k(this,t)}changeCellSort(t){var e;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key==(null===(e=this.sortData[0])||void 0===e?void 0:e.key)||(this.sortData=[]);const i=this.sortData.findIndex((e=>e.key===t.key));if(i>=0){const t=this.sortData[i];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(i,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(t)}else if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData(t)}}validateHeaders(t){b(t,(()=>{v(t,(()=>{try{t=g(t)}catch(t){}f(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var e,i,n,a;const o=t=>{let e=!1;t.forEach((t=>{const i=t.key;if(!i)return;const n=t.sortDirection;"ASC"!==n&&"DESC"!==n||("function"==typeof t.compareFn?((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:i,compareFn:t.compareFn,direction:n}),e=!0):"function"==typeof t.sort&&(this.setSortDirection(t.sort,n),setTimeout((()=>this.updateSortedData({key:i,label:t.label,sortDirection:n})))))})),e&&setTimeout((()=>this.updateSortedData()))},s=t;null===(e=s.horizontal)||void 0===e||e.forEach(o),null===(i=s.vertical)||void 0===i||i.forEach(o),s.horizontal&&s.vertical&&(null===(n=s.horizontal)||void 0===n?void 0:n.length)>0&&(null===(a=s.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){m(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){d(this,t)}validateOn(t){c(this,t)}validatePagination(t){try{t=g(t)}catch(t){}this.showPagination=z(t),f(this,"_pagination",z,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}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.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection)}selectDisplayedData(t,e,i){return"number"==typeof e&&e>0&&"number"==typeof i&&i>0?(this.pageStartSlice=e*(i-1),this.pageEndSlice=e*i>t.length?t.length:e*i,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(){return n("div",{class:"pagination"},n("span",null,o("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"}})),n("div",null,n(s,{_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||j,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:o("kol-table-pagination-label",{placeholders:{label:this.state._label}})})))}getHeaderCellSortState(t){if(!this.disableSort&&("function"==typeof t.compareFn||"function"==typeof t.sort)){if(t.key===this.sortedColumnHead.key)return this.sortedColumnHead.sortDirection;if(t.key){const e=this.sortData.find((e=>e.key===t.key));if(null==e?void 0:e.direction)return e.direction}return"NOS"}}handleSort({key:t}){const e=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((e=>e.key===t));e&&this.changeCellSort(e)}getSelectedData(t){var e;if(this.state._selection){const i=null!==(e=this.state._selection.keyPropertyName)&&void 0!==e?e:"id";if(i)return this.state._sortedData.filter((e=>t.includes(e[i])))}return[]}handleSelectionChange(t,e){var i;this.state._selection&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},this.state._selection),{selectedKeys:e})}));const n=this.getSelectedData(e);l("selection-change",this.host,n),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i[u.onSelectionChange])&&this.state._on[u.onSelectionChange](t,n)}async getSelection(){var t;const e=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(e)}render(){var t,e,o,s;const l=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(e=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==e?e:10:this.state._sortedData.length,this.state._pagination._page||1),r="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,h="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,d={horizontal: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)}))))),vertical: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)})))))};return n(i,{key:"46971d2320abf74da8cc5b427ffd9fe43486479a",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&r,n(a,{key:"3e734d9d92edc5507c8b50e2ac2305487d4c7941",_data:l,_headerCells:d,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,e)=>{this.handleSort(e)},onSelectionChange:(t,e)=>{this.handleSelectionChange(t,e)}},_selection:this.state._selection}),this.pageEndSlice>0&&this.showPagination&&h)}get host(){return e(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_pagination:["validatePagination"]}}};C.style={default:x};export{C as kol_table_stateful};
+import{r as t,h as n,H as i,g as e}from"./index-8a349081.js";import{t as o}from"./i18n-6d848180.js";import{t as s,r as a}from"./component-names-5dd1e02a.js";import{t as l}from"./events-29e84d75.js";import{v as h,a as r,b as d,c,E as u}from"./events-9570402d.js";import{w as f,s as p,t as b,i as m,p as g,o as v,j as y}from"./prop.validators-f89d26b4.js";import{v as w}from"./label-37acddfe.js";import"./i18n-3dcfca85.js";import"./reuse-523ba2ac.js";import"./common-54bf85ba.js";import"./index-db4aa6e4.js";import"./dev.utils-fab45cbc.js";const _=["top","bottom","both"],k=(t,e)=>{f(t,"_paginationPosition",(t=>"string"==typeof t&&_.includes(t)),new Set([`PaginationPositionPropType {${_.join(", ")}`]),e,{defaultValue:"bottom"})},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: 44px;\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 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :root {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  div.pagination .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  div.pagination,\n  div.pagination > div:last-child {\n    display: grid;\n    place-items: center;\n  }\n  @media (max-width: 1024px) {\n    div.pagination .kol-pagination {\n      flex-direction: column;\n    }\n  }\n  @media (min-width: 1024px) {\n    div.pagination,\n    div.pagination > div:last-child {\n      grid-auto-flow: column;\n    }\n    div.pagination .kol-pagination {\n      display: flex;\n    }\n  }\n}\n@layer kol-component {\n  :host,\n  .kol-table-stateless-wc {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .table {\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  table {\n    width: 100%;\n  }\n  caption {\n    text-align: start;\n  }\n  .focus-element {\n    font-size: 0;\n  }\n  .focus-element:focus {\n    outline: 0 !important;\n  }\n  .table:has(.focus-element:focus) {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .table-sort-button .button {\n    color: inherit;\n  }\n  tbody th,\n  th.align-left {\n    text-align: left;\n  }\n  tbody th .table-sort-button .button-inner,\n  th.align-left .table-sort-button .button-inner {\n    justify-items: start;\n  }\n  th.align-center {\n    text-align: center;\n  }\n  th.align-center .table-sort-button .button-inner {\n    justify-items: center;\n  }\n  th.align-right {\n    text-align: right;\n  }\n  th.align-right .table-sort-button .button-inner {\n    justify-items: end;\n  }\n  .selection-header-cell {\n    width: 0;\n  }\n  .selection-cell {\n    white-space: nowrap;\n  }\n}",x=S,j=[10,20,50,100],z=t=>!0===t||""===t||"object"==typeof t&&null!==t,C=class{constructor(e){t(this,e),this.sortDirections=new Map,this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"},this.setSortDirection=(t,e)=>{this.sortDirections.clear(),this.sortDirections.set(t,e),this.sortFunction=t},this.handlePagination={onClick:(t,e)=>{var i;"function"==typeof(null===(i=this.state._pagination._on)||void 0===i?void 0:i.onClick)&&this.state._pagination._on.onClick(t,e),p(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePage:(t,e)=>{var i;"function"==typeof(null===(i=this.state._pagination._on)||void 0===i?void 0:i.onChangePage)&&this.state._pagination._on.onChangePage(t,e),p(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePageSize:(t,e)=>{var i;"function"==typeof(null===(i=this.state._pagination._on)||void 0===i?void 0:i.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,e),p(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:e})),p(this,"_pageSize",e)}},this.updateSortedData=(t=this.sortedColumnHead)=>{if(this.disableSort)return void p(this,"_sortedData",this.state._data);let e=this.state._data;if(this.sortData.length>0)e=this.state._data.sort(((t,e)=>{for(let i=0;i<this.sortData.length;i++){const n=this.sortData[i],a=n.compareFn(t,e);if(0!==a)return"ASC"===n.direction?a:-a}return 0}));else if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"ASC":e=this.sortFunction([...this.state._data]),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"ASC"};break;case"DESC":e=this.sortFunction([...this.state._data]).reverse(),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"DESC"};break;default:e=[...this.state._data],this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"}}p(this,"_sortedData",e)},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.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){f(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){h(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){r(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){k(this,t)}changeCellSort(t){var e;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key==(null===(e=this.sortData[0])||void 0===e?void 0:e.key)||(this.sortData=[]);const i=this.sortData.findIndex((e=>e.key===t.key));if(i>=0){const t=this.sortData[i];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(i,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(t)}else if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData(t)}}validateHeaders(t){b(t,(()=>{v(t,(()=>{try{t=g(t)}catch(t){}f(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var e,i,n,a;const o=t=>{let e=!1;t.forEach((t=>{const i=t.key;if(!i)return;const n=t.sortDirection;"ASC"!==n&&"DESC"!==n||("function"==typeof t.compareFn?((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:i,compareFn:t.compareFn,direction:n}),e=!0):"function"==typeof t.sort&&(this.setSortDirection(t.sort,n),setTimeout((()=>this.updateSortedData({key:i,label:t.label,sortDirection:n})))))})),e&&setTimeout((()=>this.updateSortedData()))},s=t;null===(e=s.horizontal)||void 0===e||e.forEach(o),null===(i=s.vertical)||void 0===i||i.forEach(o),s.horizontal&&s.vertical&&(null===(n=s.horizontal)||void 0===n?void 0:n.length)>0&&(null===(a=s.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){m(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){d(this,t)}validateOn(t){c(this,t)}validatePagination(t){try{t=g(t)}catch(t){}this.showPagination=z(t),f(this,"_pagination",z,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}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.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection)}selectDisplayedData(t,e,i){return"number"==typeof e&&e>0&&"number"==typeof i&&i>0?(this.pageStartSlice=e*(i-1),this.pageEndSlice=e*i>t.length?t.length:e*i,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(){return n("div",{class:"pagination"},n("span",null,o("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"}})),n("div",null,n(s,{_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||j,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:o("kol-table-pagination-label",{placeholders:{label:this.state._label}})})))}getHeaderCellSortState(t){if(!this.disableSort&&("function"==typeof t.compareFn||"function"==typeof t.sort)){if(t.key===this.sortedColumnHead.key)return this.sortedColumnHead.sortDirection;if(t.key){const e=this.sortData.find((e=>e.key===t.key));if(null==e?void 0:e.direction)return e.direction}return"NOS"}}handleSort({key:t}){const e=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((e=>e.key===t));e&&this.changeCellSort(e)}getSelectedData(t){var e;if(this.state._selection){const i=null!==(e=this.state._selection.keyPropertyName)&&void 0!==e?e:"id";if(i)return this.state._sortedData.filter((e=>t.includes(e[i])))}return[]}handleSelectionChange(t,e){var i;this.state._selection&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},this.state._selection),{selectedKeys:e})}));const n=this.getSelectedData(e);l("selection-change",this.host,n),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i[u.onSelectionChange])&&this.state._on[u.onSelectionChange](t,n)}async getSelection(){var t;const e=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(e)}render(){var t,e,o,s;const l=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(e=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==e?e:10:this.state._sortedData.length,this.state._pagination._page||1),r="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,h="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,d={horizontal: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)}))))),vertical: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)})))))};return n(i,{key:"ef2625964e2f48cc83b990a43c18e4cb8b8db789",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&r,n(a,{key:"93efa6c3ba5f34770419833279935891cd2654b0",_data:l,_headerCells:d,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,e)=>{this.handleSort(e)},onSelectionChange:(t,e)=>{this.handleSelectionChange(t,e)}},_selection:this.state._selection}),this.pageEndSlice>0&&this.showPagination&&h)}get host(){return e(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_pagination:["validatePagination"]}}};C.style={default:x};export{C as kol_table_stateful};

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

@@ -1 +1 @@
-{"version":3,"names":["paginationPositionPropTypeOptions","validatePaginationPosition","component","value","watchValidator","includes","Set","join","defaultValue","defaultStyleCss","KolTableStatefulDefaultStyle0","PAGINATION_OPTIONS","paginationValidator","KolTableStateful","this","sortDirections","Map","sortData","showPagination","pageStartSlice","pageEndSlice","disableSort","sortedColumnHead","label","key","sortDirection","setSortDirection","sort","direction","clear","set","sortFunction","handlePagination","onClick","event","page","_a","state","_pagination","_on","setState","Object","assign","_page","onChangePage","onChangePageSize","pageSize","_pageSize","updateSortedData","cell","_data","sortedData","length","a","b","index","data","result","compareFn","get","reverse","_allowMultiSort","_dataFoot","_headers","horizontal","vertical","_label","_max","_sortedData","_paginationPosition","validateAllowMultiSort","validateData","validateTableData","afterPatch","setTimeout","validateDataFoot","validateTableDataFoot","changeCellSort","headerCell","findIndex","settings","splice","push","validateHeaders","emptyStringByArrayHandler","objectObjectHandler","parseJson","e","hooks","beforePatch","nextValue","applySort","headers","hasSortedCells","forEach","_b","_c","_d","devHint","validateLabel","required","validateMinWidth","watchString","undefined","validateSelection","validateTableSelection","validateOn","validateTableStatefulCallbacks","validatePagination","componentWillLoad","_minWidth","_selection","selectDisplayedData","slice","renderPagination","h","class","translate","placeholders","start","toString","end","total","Array","isArray","KolPaginationTag","_boundaryCount","_customClass","_pageSizeOptions","_siblingCount","_tooltipAlign","getHeaderCellSortState","find","handleSort","flat","getSelectedData","selectedKeys","keyPropertyName","filter","item","handleSelectionChange","selectedData","tryToDispatchKoliBriEvent","host","Events","onSelectionChange","getSelection","render","displayedData","paginationTop","paginationBottom","headerCells","map","row","column","Host","KolTableStatelessWcTag","_headerCells","onSort","_","payload"],"sources":["src/schema/props/pagination-position.ts","src/components/table-stateful/style.scss?tag=kol-table-stateful&mode=default&encapsulation=shadow","src/components/table-stateful/shadow.tsx"],"sourcesContent":["/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils/prop.validators';\n\nconst paginationPositionPropTypeOptions = ['top', 'bottom', 'both'] as const;\nexport type PaginationPositionPropType = (typeof paginationPositionPropTypeOptions)[number];\n\n/**\n * Defines which position should be used for presentation.\n */\nexport type PropPaginationPosition = {\n\tpaginationPosition: PaginationPositionPropType;\n};\n\n/* validator */\nexport const validatePaginationPosition = (component: Generic.Element.Component, value?: PaginationPositionPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_paginationPosition`,\n\t\t(value) => typeof value === 'string' && paginationPositionPropTypeOptions.includes(value),\n\t\tnew Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t\t{\n\t\t\tdefaultValue: 'bottom',\n\t\t},\n\t);\n};\n","@import '../@shared/mixins';\n@import '../@shared/kol-table-stateless-mixin';\n\n@layer kol-component {\n\t:root {\n\t\tfont-size: rem(16);\n\t}\n\n\tdiv.pagination .kol-pagination {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n\n\tdiv.pagination,\n\tdiv.pagination > div:last-child {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t@media (max-width: 1024px) {\n\t\tdiv.pagination .kol-pagination {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\tdiv.pagination,\n\t\tdiv.pagination > div:last-child {\n\t\t\tgrid-auto-flow: column;\n\t\t}\n\n\t\tdiv.pagination .kol-pagination {\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n}\n\n@include kol-table-stateless-styles;\n","/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\nimport type {\n\tKoliBriDataCompareFn,\n\tKoliBriPaginationButtonCallbacks,\n\tKoliBriSortDirection,\n\tKoliBriSortFunction,\n\tKoliBriTableDataType,\n\tKoliBriTableHeaderCellWithLogic,\n\tKoliBriTableHeaders,\n\tKoliBriTablePaginationProps,\n\tKoliBriTableSelectedHead,\n\tLabelPropType,\n\tPaginationPositionPropType,\n\tStringified,\n\tTableAPI,\n\tTableStatefulCallbacksPropType,\n\tTableDataFootPropType,\n\tTableDataPropType,\n\tTableHeaderCells,\n\tTableSelectionPropType,\n\tTableStates,\n} from '../../schema';\nimport {\n\tdevHint,\n\temptyStringByArrayHandler,\n\tobjectObjectHandler,\n\tparseJson,\n\tsetState,\n\tvalidateLabel,\n\tvalidatePaginationPosition,\n\tvalidateTableData,\n\tvalidateTableDataFoot,\n\tvalidateTableSelection,\n\tvalidateTableStatefulCallbacks,\n\twatchString,\n\twatchValidator,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Method, Prop, State, Watch, Element } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { KolPaginationTag, KolTableStatelessWcTag } from '../../core/component-names';\nimport type { SortEventPayload } from '../../schema';\nimport { tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { Events } from '../../schema/enums';\n\nconst PAGINATION_OPTIONS = [10, 20, 50, 100];\n\nconst paginationValidator = (value: unknown) => value === true || value === '' /* true */ || (typeof value === 'object' && value !== null);\n\ntype SortData = {\n\tlabel: string;\n\tkey: string;\n\tcompareFn: KoliBriDataCompareFn;\n\tdirection: KoliBriSortDirection;\n};\n\n@Component({\n\ttag: 'kol-table-stateful',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTableStateful implements TableAPI {\n\t@Element() private readonly host?: HTMLKolTableStatelessWcElement;\n\n\t/**\n\t * @deprecated only for backward compatibility\n\t */\n\tprivate sortFunction?: KoliBriSortFunction;\n\t/**\n\t * @deprecated only for backward compatibility\n\t */\n\tprivate sortDirections: Map<KoliBriSortFunction, KoliBriSortDirection> = new Map();\n\tprivate sortData: SortData[] = [];\n\tprivate showPagination = false;\n\tprivate pageStartSlice = 0;\n\tprivate pageEndSlice = 10;\n\tprivate disableSort = false;\n\n\t/**\n\t * @deprecated only for backward compatibility\n\t */\n\tprivate sortedColumnHead: KoliBriTableSelectedHead = { label: '', key: '', sortDirection: 'NOS' };\n\n\t/**\n\t * Defines whether to allow multi sort.\n\t */\n\t@Prop() public _allowMultiSort?: boolean;\n\n\t/**\n\t * Defines the primary table data.\n\t */\n\t@Prop() public _data!: Stringified<KoliBriTableDataType[]>;\n\n\t/**\n\t * Defines the data for the table footer.\n\t */\n\t@Prop() public _dataFoot?: Stringified<KoliBriTableDataType[]>;\n\n\t/**\n\t * Defines the horizontal and vertical table headers.\n\t */\n\t@Prop() public _headers!: Stringified<KoliBriTableHeaders>;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Defines the table min-width.\n\t */\n\t@Prop() public _minWidth?: string;\n\n\t/**\n\t * Defines whether to show the data distributed over multiple pages.\n\t */\n\t@Prop() public _pagination?: boolean | Stringified<KoliBriTablePaginationProps>;\n\t/**\n\t * Controls the position of the pagination.\n\t */\n\t@Prop() public _paginationPosition?: PaginationPositionPropType = 'bottom';\n\t/**\n\t * Defines how rows can be selected and the current selection.\n\t */\n\t@Prop() public _selection?: TableSelectionPropType;\n\t/**\n\t * Defines the callback functions for table events.\n\t */\n\t@Prop() public _on?: TableStatefulCallbacksPropType;\n\n\t@State() public state: TableStates = {\n\t\t_allowMultiSort: false,\n\t\t_data: [],\n\t\t_dataFoot: [],\n\t\t_headers: {\n\t\t\thorizontal: [],\n\t\t\tvertical: [],\n\t\t},\n\t\t_label: '', // ⚠ required\n\t\t_pagination: {\n\t\t\t_page: 1,\n\t\t\t_pageSize: 10,\n\t\t\t_max: 0,\n\t\t},\n\t\t_sortedData: [],\n\t\t_paginationPosition: 'bottom',\n\t};\n\n\t@Watch('_allowMultiSort')\n\tpublic validateAllowMultiSort(value?: boolean): void {\n\t\twatchValidator(this, '_allowMultiSort', () => true, new Set(['boolean']), value, {\n\t\t\tdefaultValue: false,\n\t\t});\n\t}\n\n\t@Watch('_data')\n\tpublic validateData(value?: TableDataPropType): void {\n\t\tvalidateTableData(this, value, {\n\t\t\tafterPatch: () => {\n\t\t\t\t// TODO: kein guter Hack (endless loop)\n\t\t\t\tsetTimeout(this.updateSortedData);\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_dataFoot')\n\tpublic validateDataFoot(value?: TableDataFootPropType): void {\n\t\tvalidateTableDataFoot(this, value, {\n\t\t\tafterPatch: () => {\n\t\t\t\tsetTimeout(this.updateSortedData);\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_paginationPosition')\n\tpublic validatePaginationPosition(value?: PaginationPositionPropType): void {\n\t\tvalidatePaginationPosition(this, value);\n\t}\n\n\t/**\n\t * @deprecated only for backward compatibility\n\t */\n\tprivate setSortDirection = (sort: KoliBriSortFunction, direction: KoliBriSortDirection) => {\n\t\t/**\n\t\t * Durch des Clearen, ist es nicht möglich eine Mehr-Spalten-Sortierung\n\t\t * darzustellen. Das wäre der Fall, wenn man ggf. Daten in außerhalb der\n\t\t * Komponente sortiert und diese sortiert von außen rein gibt und der\n\t\t * Sortierungsalgorithmus mehrere Spalten zusammen sortierte.\n\t\t *\n\t\t * Beachte auch col.sort !== this.sortFunction\n\t\t */\n\t\tthis.sortDirections.clear();\n\t\tthis.sortDirections.set(sort, direction);\n\t\tthis.sortFunction = sort;\n\t};\n\n\tprivate changeCellSort(headerCell: KoliBriTableHeaderCellWithLogic) {\n\t\tif (typeof headerCell.compareFn === 'function') {\n\t\t\tif (!this.state._allowMultiSort && headerCell.key != this.sortData[0]?.key) {\n\t\t\t\t// clear when another column is sorted and multi sort is not allowed\n\t\t\t\tthis.sortData = [];\n\t\t\t}\n\n\t\t\tconst index = this.sortData.findIndex((value) => value.key === headerCell.key);\n\t\t\tif (index >= 0) {\n\t\t\t\tconst settings = this.sortData[index];\n\t\t\t\tswitch (settings.direction) {\n\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\tsettings.direction = 'DESC';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\tthis.sortData.splice(index, 1);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tsettings.direction = 'ASC';\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t} else if (headerCell.key) {\n\t\t\t\tthis.sortData.push({\n\t\t\t\t\tlabel: headerCell.label,\n\t\t\t\t\tkey: headerCell.key,\n\t\t\t\t\tcompareFn: headerCell.compareFn,\n\t\t\t\t\tdirection: 'ASC',\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tthis.updateSortedData(headerCell as KoliBriTableSelectedHead);\n\t\t} else if (typeof headerCell.sort === 'function') {\n\t\t\tthis.sortFunction = headerCell.sort;\n\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\tcase 'ASC':\n\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'DESC');\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'DESC':\n\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'NOS');\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'ASC');\n\t\t\t}\n\t\t\tthis.updateSortedData(headerCell as KoliBriTableSelectedHead);\n\t\t}\n\t}\n\n\t@Watch('_headers')\n\tpublic validateHeaders(value?: Stringified<KoliBriTableHeaders>): void {\n\t\t/**\n\t\t * - es darf maximal ein Header als primary markiert werden (last win)\n\t\t * - der primary-Header entscheidet implizit über _order und _orientation\n\t\t *   - primary-Headers müssen das key-Property setzen\n\t\t *   - nicht primary-Headers müssen das key-Property nicht setzen (wird ignoriert)\n\t\t *   - _order: wird durch den primary-Header geregelt\n\t\t *   - _orientation: wird durch den primary-Header geregelt\n\t\t * - sobald ein Header sortierbar ist, darf es nur noch entweder horizontale\n\t\t *   oder vertikale Header geben, aber nicht mehr beides\n\t\t */\n\t\temptyStringByArrayHandler(value, () => {\n\t\t\tobjectObjectHandler(value, () => {\n\t\t\t\ttry {\n\t\t\t\t\tvalue = parseJson<KoliBriTableHeaders>(value);\n\t\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t\t} catch (e) {\n\t\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t\t}\n\t\t\t\twatchValidator(this, '_headers', (value): boolean => typeof value === 'object' && value !== null, new Set(['KoliBriTableHeaders']), value, {\n\t\t\t\t\thooks: {\n\t\t\t\t\t\tbeforePatch: (nextValue: unknown) => {\n\t\t\t\t\t\t\tconst applySort = (headers: KoliBriTableHeaderCellWithLogic[]) => {\n\t\t\t\t\t\t\t\tlet hasSortedCells = false;\n\t\t\t\t\t\t\t\theaders.forEach((cell) => {\n\t\t\t\t\t\t\t\t\tconst key = cell.key;\n\t\t\t\t\t\t\t\t\tif (!key) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tconst sortDirection = cell.sortDirection;\n\t\t\t\t\t\t\t\t\tif (sortDirection === 'ASC' || sortDirection === 'DESC') {\n\t\t\t\t\t\t\t\t\t\tif (typeof cell.compareFn === 'function') {\n\t\t\t\t\t\t\t\t\t\t\tif (this.state._allowMultiSort || this.sortData.length === 0) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.sortData.push({ label: cell.label, key, compareFn: cell.compareFn, direction: sortDirection });\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\thasSortedCells = true;\n\t\t\t\t\t\t\t\t\t\t} else if (typeof cell.sort === 'function') {\n\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(cell.sort, sortDirection);\n\t\t\t\t\t\t\t\t\t\t\tsetTimeout(() => this.updateSortedData({ key, label: cell.label, sortDirection }));\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\tif (hasSortedCells) {\n\t\t\t\t\t\t\t\t\tsetTimeout(() => this.updateSortedData());\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\tconst headers: KoliBriTableHeaders = nextValue as KoliBriTableHeaders;\n\t\t\t\t\t\t\theaders.horizontal?.forEach(applySort);\n\t\t\t\t\t\t\theaders.vertical?.forEach(applySort);\n\n\t\t\t\t\t\t\tif (headers.horizontal && headers.vertical && headers.horizontal?.length > 0 && headers.vertical?.length > 0) {\n\t\t\t\t\t\t\t\tthis.disableSort = true;\n\t\t\t\t\t\t\t\tdevHint(\n\t\t\t\t\t\t\t\t\t`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)`,\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_minWidth')\n\tpublic validateMinWidth(value?: string): void {\n\t\twatchString(this, '_minWidth', value, {\n\t\t\tdefaultValue: undefined,\n\t\t});\n\t}\n\n\t@Watch('_selection')\n\tpublic validateSelection(value?: TableSelectionPropType): void {\n\t\tvalidateTableSelection(this, value);\n\t}\n\t@Watch('_on')\n\tpublic validateOn(value?: TableStatefulCallbacksPropType): void {\n\t\tvalidateTableStatefulCallbacks(this, value);\n\t}\n\n\tprivate readonly handlePagination: KoliBriPaginationButtonCallbacks = {\n\t\tonClick: (event: Event, page: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onClick === 'function') {\n\t\t\t\tthis.state._pagination._on.onClick(event, page);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_page: page,\n\t\t\t});\n\t\t},\n\t\tonChangePage: (event: Event, page: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onChangePage === 'function') {\n\t\t\t\tthis.state._pagination._on.onChangePage(event, page);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_page: page,\n\t\t\t});\n\t\t},\n\t\tonChangePageSize: (event: Event, pageSize: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onChangePageSize === 'function') {\n\t\t\t\tthis.state._pagination._on.onChangePageSize(event, pageSize);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_pageSize: pageSize,\n\t\t\t});\n\t\t\tsetState(this, '_pageSize', pageSize);\n\t\t},\n\t};\n\n\t@Watch('_pagination')\n\tpublic validatePagination(value?: boolean | Stringified<KoliBriTablePaginationProps>): void {\n\t\ttry {\n\t\t\tvalue = parseJson<boolean | KoliBriTablePaginationProps>(value);\n\t\t\t// eslint-disable-next-line no-empty\n\t\t} catch (e) {\n\t\t\t// value behält den ursprünglichen Wert\n\t\t}\n\n\t\tthis.showPagination = paginationValidator(value);\n\n\t\twatchValidator<boolean | Stringified<KoliBriTablePaginationProps>>(\n\t\t\tthis,\n\t\t\t'_pagination',\n\t\t\tpaginationValidator,\n\t\t\tnew Set(['boolean', 'KoliBriTablePagination']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: {\n\t\t\t\t\t_page: 1,\n\t\t\t\t\t_pageSize: 10,\n\t\t\t\t\t_max: 0,\n\t\t\t\t},\n\t\t\t},\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAllowMultiSort(this._allowMultiSort);\n\t\tthis.validateData(this._data);\n\t\tthis.validateDataFoot(this._dataFoot);\n\t\tthis.validateHeaders(this._headers);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMinWidth(this._minWidth);\n\t\tthis.validatePagination(this._pagination);\n\t\tthis.validatePaginationPosition(this._paginationPosition);\n\t\tthis.validateSelection(this._selection);\n\t}\n\n\tprivate selectDisplayedData(data: KoliBriTableDataType[], pageSize: number, page: number): KoliBriTableDataType[] {\n\t\tif (typeof pageSize === 'number' && pageSize > 0 && typeof page === 'number' && page > 0) {\n\t\t\tthis.pageStartSlice = pageSize * (page - 1);\n\t\t\tthis.pageEndSlice = pageSize * page > data.length ? data.length : pageSize * page;\n\t\t\treturn data.slice(this.pageStartSlice, this.pageEndSlice);\n\t\t} else {\n\t\t\tthis.pageStartSlice = 0;\n\t\t\tthis.pageEndSlice = data.length;\n\t\t\treturn data;\n\t\t}\n\t}\n\n\t/**\n\t *\n\t * @param cell only used for old single sort. Can be removed when sort is removed.\n\t */\n\tprivate updateSortedData = (cell: KoliBriTableSelectedHead = this.sortedColumnHead) => {\n\t\tif (this.disableSort) {\n\t\t\tsetState(this, '_sortedData', this.state._data);\n\t\t\treturn;\n\t\t}\n\n\t\tlet sortedData: KoliBriTableDataType[] = this.state._data;\n\t\tif (this.sortData.length > 0) {\n\t\t\tsortedData = this.state._data.sort((a: KoliBriTableDataType, b: KoliBriTableDataType) => {\n\t\t\t\tfor (let index = 0; index < this.sortData.length; index++) {\n\t\t\t\t\tconst data = this.sortData[index];\n\t\t\t\t\tconst result = data.compareFn(a, b);\n\t\t\t\t\tif (result !== 0) {\n\t\t\t\t\t\treturn data.direction === 'ASC' ? result : -result;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn 0;\n\t\t\t});\n\t\t} else if (typeof this.sortFunction === 'function') {\n\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\tcase 'ASC':\n\t\t\t\t\tsortedData = this.sortFunction([...this.state._data]);\n\t\t\t\t\tthis.sortedColumnHead = { label: cell.label, key: cell.key, sortDirection: 'ASC' };\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'DESC':\n\t\t\t\t\tsortedData = this.sortFunction([...this.state._data]).reverse();\n\t\t\t\t\tthis.sortedColumnHead = { label: cell.label, key: cell.key, sortDirection: 'DESC' };\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'NOS':\n\t\t\t\tdefault:\n\t\t\t\t\tsortedData = [...this.state._data];\n\t\t\t\t\tthis.sortedColumnHead = { label: '', key: '', sortDirection: 'NOS' };\n\t\t\t}\n\t\t}\n\t\tsetState(this, '_sortedData', sortedData);\n\t};\n\n\tprivate renderPagination(): JSX.Element {\n\t\treturn (\n\t\t\t<div class=\"pagination\">\n\t\t\t\t<span>\n\t\t\t\t\t{translate('kol-table-visible-range', {\n\t\t\t\t\t\tplaceholders: {\n\t\t\t\t\t\t\tstart: this.pageEndSlice > 0 ? (this.pageStartSlice + 1).toString() : '0',\n\t\t\t\t\t\t\tend: this.pageEndSlice.toString(),\n\t\t\t\t\t\t\ttotal:\n\t\t\t\t\t\t\t\tthis.state._pagination && this.state._pagination._max > 0\n\t\t\t\t\t\t\t\t\t? this.state._pagination._max.toString()\n\t\t\t\t\t\t\t\t\t: Array.isArray(this.state._data)\n\t\t\t\t\t\t\t\t\t\t? this.state._data.length.toString()\n\t\t\t\t\t\t\t\t\t\t: '0',\n\t\t\t\t\t\t},\n\t\t\t\t\t})}\n\t\t\t\t</span>\n\t\t\t\t<div>\n\t\t\t\t\t<KolPaginationTag\n\t\t\t\t\t\t_boundaryCount={this.state._pagination._boundaryCount}\n\t\t\t\t\t\t_customClass={this.state._pagination._customClass}\n\t\t\t\t\t\t_on={this.handlePagination}\n\t\t\t\t\t\t_page={this.state._pagination._page}\n\t\t\t\t\t\t_pageSize={this.state._pagination._pageSize}\n\t\t\t\t\t\t_pageSizeOptions={this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS}\n\t\t\t\t\t\t_siblingCount={this.state._pagination._siblingCount}\n\t\t\t\t\t\t_tooltipAlign=\"bottom\"\n\t\t\t\t\t\t_max={this.state._pagination._max || this.state._pagination._max || this.state._data.length}\n\t\t\t\t\t\t_label={translate('kol-table-pagination-label', { placeholders: { label: this.state._label } })}\n\t\t\t\t\t></KolPaginationTag>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate getHeaderCellSortState(headerCell: KoliBriTableHeaderCellWithLogic): KoliBriSortDirection | undefined {\n\t\tif (!this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function')) {\n\t\t\tif (headerCell.key === this.sortedColumnHead.key) {\n\t\t\t\treturn this.sortedColumnHead.sortDirection;\n\t\t\t}\n\t\t\tif (headerCell.key) {\n\t\t\t\tconst data = this.sortData.find((value) => value.key === headerCell.key);\n\t\t\t\tif (data?.direction) {\n\t\t\t\t\treturn data.direction;\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn 'NOS';\n\t\t}\n\t}\n\n\tprivate handleSort({ key }: SortEventPayload) {\n\t\tconst headerCell = [...(this.state._headers.horizontal || []).flat(), ...(this.state._headers.vertical || []).flat()].find((cell) => cell.key === key);\n\t\tif (headerCell) {\n\t\t\tthis.changeCellSort(headerCell);\n\t\t}\n\t}\n\n\tprivate getSelectedData(selectedKeys: string[]): KoliBriTableDataType[] {\n\t\tif (this.state._selection) {\n\t\t\tconst keyPropertyName = this.state._selection.keyPropertyName ?? 'id';\n\t\t\tif (keyPropertyName) return this.state._sortedData.filter((item) => selectedKeys.includes(item[keyPropertyName] as string));\n\t\t}\n\t\treturn [];\n\t}\n\tprivate handleSelectionChange(event: Event, value: string[]): void {\n\t\tif (this.state._selection)\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_selection: {\n\t\t\t\t\t...this.state._selection,\n\t\t\t\t\tselectedKeys: value,\n\t\t\t\t},\n\t\t\t};\n\t\tconst selectedData = this.getSelectedData(value);\n\n\t\ttryToDispatchKoliBriEvent('selection-change', this.host, selectedData);\n\n\t\tif (typeof this.state._on?.[Events.onSelectionChange] === 'function') {\n\t\t\tthis.state._on[Events.onSelectionChange](event, selectedData);\n\t\t}\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getSelection(): Promise<KoliBriTableDataType[]> {\n\t\tconst selectedKeys: string[] = this.state._selection?.selectedKeys || [];\n\t\tconst selectedData = this.getSelectedData(selectedKeys);\n\n\t\treturn selectedData;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst displayedData: KoliBriTableDataType[] = this.selectDisplayedData(\n\t\t\tthis.state._sortedData,\n\t\t\tthis.showPagination ? this.state._pagination?._pageSize ?? 10 : this.state._sortedData.length,\n\t\t\tthis.state._pagination._page || 1,\n\t\t);\n\t\tconst paginationTop = this._paginationPosition === 'top' || this._paginationPosition === 'both' ? this.renderPagination() : null;\n\t\tconst paginationBottom = this._paginationPosition === 'bottom' || this._paginationPosition === 'both' ? this.renderPagination() : null;\n\n\t\tconst headerCells: TableHeaderCells = {\n\t\t\thorizontal: this.state._headers.horizontal?.map((row) => row.map((cell) => ({ ...cell, sortDirection: this.getHeaderCellSortState(cell) }))),\n\t\t\tvertical: this.state._headers.vertical?.map((column) => column.map((cell) => ({ ...cell, sortDirection: this.getHeaderCellSortState(cell) }))),\n\t\t};\n\t\treturn (\n\t\t\t<Host class=\"kol-table-stateful\">\n\t\t\t\t{this.pageEndSlice > 0 && this.showPagination && paginationTop}\n\t\t\t\t<KolTableStatelessWcTag\n\t\t\t\t\t_data={displayedData}\n\t\t\t\t\t_headerCells={headerCells}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_dataFoot={this.state._dataFoot}\n\t\t\t\t\t_minWidth={this.state._minWidth}\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonSort: (_: MouseEvent, payload: SortEventPayload) => {\n\t\t\t\t\t\t\tthis.handleSort(payload);\n\t\t\t\t\t\t},\n\t\t\t\t\t\tonSelectionChange: (event: Event, value: string[]) => {\n\t\t\t\t\t\t\tthis.handleSelectionChange(event, value);\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\t_selection={this.state._selection}\n\t\t\t\t/>\n\t\t\t\t{this.pageEndSlice > 0 && this.showPagination && paginationBottom}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["paginationPositionPropTypeOptions","validatePaginationPosition","component","value","watchValidator","includes","Set","join","defaultValue","defaultStyleCss","KolTableStatefulDefaultStyle0","PAGINATION_OPTIONS","paginationValidator","KolTableStateful","this","sortDirections","Map","sortData","showPagination","pageStartSlice","pageEndSlice","disableSort","sortedColumnHead","label","key","sortDirection","setSortDirection","sort","direction","clear","set","sortFunction","handlePagination","onClick","event","page","_a","state","_pagination","_on","setState","Object","assign","_page","onChangePage","onChangePageSize","pageSize","_pageSize","updateSortedData","cell","_data","sortedData","length","a","b","index","data","result","compareFn","get","reverse","_allowMultiSort","_dataFoot","_headers","horizontal","vertical","_label","_max","_sortedData","_paginationPosition","validateAllowMultiSort","validateData","validateTableData","afterPatch","setTimeout","validateDataFoot","validateTableDataFoot","changeCellSort","headerCell","findIndex","settings","splice","push","validateHeaders","emptyStringByArrayHandler","objectObjectHandler","parseJson","e","hooks","beforePatch","nextValue","applySort","headers","hasSortedCells","forEach","_b","_c","_d","devHint","validateLabel","required","validateMinWidth","watchString","undefined","validateSelection","validateTableSelection","validateOn","validateTableStatefulCallbacks","validatePagination","componentWillLoad","_minWidth","_selection","selectDisplayedData","slice","renderPagination","h","class","translate","placeholders","start","toString","end","total","Array","isArray","KolPaginationTag","_boundaryCount","_customClass","_pageSizeOptions","_siblingCount","_tooltipAlign","getHeaderCellSortState","find","handleSort","flat","getSelectedData","selectedKeys","keyPropertyName","filter","item","handleSelectionChange","selectedData","tryToDispatchKoliBriEvent","host","Events","onSelectionChange","getSelection","render","displayedData","paginationTop","paginationBottom","headerCells","map","row","column","Host","KolTableStatelessWcTag","_headerCells","onSort","_","payload"],"sources":["src/schema/props/pagination-position.ts","src/components/table-stateful/style.scss?tag=kol-table-stateful&mode=default&encapsulation=shadow","src/components/table-stateful/shadow.tsx"],"sourcesContent":["/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils/prop.validators';\n\nconst paginationPositionPropTypeOptions = ['top', 'bottom', 'both'] as const;\nexport type PaginationPositionPropType = (typeof paginationPositionPropTypeOptions)[number];\n\n/**\n * Defines which position should be used for presentation.\n */\nexport type PropPaginationPosition = {\n\tpaginationPosition: PaginationPositionPropType;\n};\n\n/* validator */\nexport const validatePaginationPosition = (component: Generic.Element.Component, value?: PaginationPositionPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_paginationPosition`,\n\t\t(value) => typeof value === 'string' && paginationPositionPropTypeOptions.includes(value),\n\t\tnew Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t\t{\n\t\t\tdefaultValue: 'bottom',\n\t\t},\n\t);\n};\n","@import '../@shared/mixins';\n@import '../@shared/kol-table-stateless-mixin';\n\n@layer kol-component {\n\t:root {\n\t\tfont-size: rem(16);\n\t}\n\n\tdiv.pagination .kol-pagination {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n\n\tdiv.pagination,\n\tdiv.pagination > div:last-child {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t@media (max-width: 1024px) {\n\t\tdiv.pagination .kol-pagination {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\tdiv.pagination,\n\t\tdiv.pagination > div:last-child {\n\t\t\tgrid-auto-flow: column;\n\t\t}\n\n\t\tdiv.pagination .kol-pagination {\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n}\n\n@include kol-table-stateless-styles;\n","/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\nimport type {\n\tKoliBriDataCompareFn,\n\tKoliBriPaginationButtonCallbacks,\n\tKoliBriSortDirection,\n\tKoliBriSortFunction,\n\tKoliBriTableDataType,\n\tKoliBriTableHeaderCellWithLogic,\n\tKoliBriTableHeaders,\n\tKoliBriTablePaginationProps,\n\tKoliBriTableSelectedHead,\n\tLabelPropType,\n\tPaginationPositionPropType,\n\tStringified,\n\tTableAPI,\n\tTableStatefulCallbacksPropType,\n\tTableDataFootPropType,\n\tTableDataPropType,\n\tTableHeaderCells,\n\tTableSelectionPropType,\n\tTableStates,\n} from '../../schema';\nimport {\n\tdevHint,\n\temptyStringByArrayHandler,\n\tobjectObjectHandler,\n\tparseJson,\n\tsetState,\n\tvalidateLabel,\n\tvalidatePaginationPosition,\n\tvalidateTableData,\n\tvalidateTableDataFoot,\n\tvalidateTableSelection,\n\tvalidateTableStatefulCallbacks,\n\twatchString,\n\twatchValidator,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Method, Prop, State, Watch, Element } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { KolPaginationTag, KolTableStatelessWcTag } from '../../core/component-names';\nimport type { SortEventPayload } from '../../schema';\nimport { tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { Events } from '../../schema/enums';\n\nconst PAGINATION_OPTIONS = [10, 20, 50, 100];\n\nconst paginationValidator = (value: unknown) => value === true || value === '' /* true */ || (typeof value === 'object' && value !== null);\n\ntype SortData = {\n\tlabel: string;\n\tkey: string;\n\tcompareFn: KoliBriDataCompareFn;\n\tdirection: KoliBriSortDirection;\n};\n\n@Component({\n\ttag: 'kol-table-stateful',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTableStateful implements TableAPI {\n\t@Element() private readonly host?: HTMLKolTableStatelessWcElement;\n\n\t/**\n\t * @deprecated only for backward compatibility\n\t */\n\tprivate sortFunction?: KoliBriSortFunction;\n\t/**\n\t * @deprecated only for backward compatibility\n\t */\n\tprivate sortDirections: Map<KoliBriSortFunction, KoliBriSortDirection> = new Map();\n\tprivate sortData: SortData[] = [];\n\tprivate showPagination = false;\n\tprivate pageStartSlice = 0;\n\tprivate pageEndSlice = 10;\n\tprivate disableSort = false;\n\n\t/**\n\t * @deprecated only for backward compatibility\n\t */\n\tprivate sortedColumnHead: KoliBriTableSelectedHead = { label: '', key: '', sortDirection: 'NOS' };\n\n\t/**\n\t * Defines whether to allow multi sort.\n\t */\n\t@Prop() public _allowMultiSort?: boolean;\n\n\t/**\n\t * Defines the primary table data.\n\t */\n\t@Prop() public _data!: Stringified<KoliBriTableDataType[]>;\n\n\t/**\n\t * Defines the data for the table footer.\n\t */\n\t@Prop() public _dataFoot?: Stringified<KoliBriTableDataType[]>;\n\n\t/**\n\t * Defines the horizontal and vertical table headers.\n\t */\n\t@Prop() public _headers!: Stringified<KoliBriTableHeaders>;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Defines the table min-width.\n\t */\n\t@Prop() public _minWidth?: string;\n\n\t/**\n\t * Defines whether to show the data distributed over multiple pages.\n\t */\n\t@Prop() public _pagination?: boolean | Stringified<KoliBriTablePaginationProps>;\n\t/**\n\t * Controls the position of the pagination.\n\t */\n\t@Prop() public _paginationPosition?: PaginationPositionPropType = 'bottom';\n\t/**\n\t * Defines how rows can be selected and the current selection.\n\t */\n\t@Prop() public _selection?: TableSelectionPropType;\n\t/**\n\t * Defines the callback functions for table events.\n\t */\n\t@Prop() public _on?: TableStatefulCallbacksPropType;\n\n\t@State() public state: TableStates = {\n\t\t_allowMultiSort: false,\n\t\t_data: [],\n\t\t_dataFoot: [],\n\t\t_headers: {\n\t\t\thorizontal: [],\n\t\t\tvertical: [],\n\t\t},\n\t\t_label: '', // ⚠ required\n\t\t_pagination: {\n\t\t\t_page: 1,\n\t\t\t_pageSize: 10,\n\t\t\t_max: 0,\n\t\t},\n\t\t_sortedData: [],\n\t\t_paginationPosition: 'bottom',\n\t};\n\n\t@Watch('_allowMultiSort')\n\tpublic validateAllowMultiSort(value?: boolean): void {\n\t\twatchValidator(this, '_allowMultiSort', () => true, new Set(['boolean']), value, {\n\t\t\tdefaultValue: false,\n\t\t});\n\t}\n\n\t@Watch('_data')\n\tpublic validateData(value?: TableDataPropType): void {\n\t\tvalidateTableData(this, value, {\n\t\t\tafterPatch: () => {\n\t\t\t\t// TODO: kein guter Hack (endless loop)\n\t\t\t\tsetTimeout(this.updateSortedData);\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_dataFoot')\n\tpublic validateDataFoot(value?: TableDataFootPropType): void {\n\t\tvalidateTableDataFoot(this, value, {\n\t\t\tafterPatch: () => {\n\t\t\t\tsetTimeout(this.updateSortedData);\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_paginationPosition')\n\tpublic validatePaginationPosition(value?: PaginationPositionPropType): void {\n\t\tvalidatePaginationPosition(this, value);\n\t}\n\n\t/**\n\t * @deprecated only for backward compatibility\n\t */\n\tprivate setSortDirection = (sort: KoliBriSortFunction, direction: KoliBriSortDirection) => {\n\t\t/**\n\t\t * Durch des Clearen, ist es nicht möglich eine Mehr-Spalten-Sortierung\n\t\t * darzustellen. Das wäre der Fall, wenn man ggf. Daten in außerhalb der\n\t\t * Komponente sortiert und diese sortiert von außen rein gibt und der\n\t\t * Sortierungsalgorithmus mehrere Spalten zusammen sortierte.\n\t\t *\n\t\t * Beachte auch col.sort !== this.sortFunction\n\t\t */\n\t\tthis.sortDirections.clear();\n\t\tthis.sortDirections.set(sort, direction);\n\t\tthis.sortFunction = sort;\n\t};\n\n\tprivate changeCellSort(headerCell: KoliBriTableHeaderCellWithLogic) {\n\t\tif (typeof headerCell.compareFn === 'function') {\n\t\t\tif (!this.state._allowMultiSort && headerCell.key != this.sortData[0]?.key) {\n\t\t\t\t// clear when another column is sorted and multi sort is not allowed\n\t\t\t\tthis.sortData = [];\n\t\t\t}\n\n\t\t\tconst index = this.sortData.findIndex((value) => value.key === headerCell.key);\n\t\t\tif (index >= 0) {\n\t\t\t\tconst settings = this.sortData[index];\n\t\t\t\tswitch (settings.direction) {\n\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\tsettings.direction = 'DESC';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\tthis.sortData.splice(index, 1);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tsettings.direction = 'ASC';\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t} else if (headerCell.key) {\n\t\t\t\tthis.sortData.push({\n\t\t\t\t\tlabel: headerCell.label,\n\t\t\t\t\tkey: headerCell.key,\n\t\t\t\t\tcompareFn: headerCell.compareFn,\n\t\t\t\t\tdirection: 'ASC',\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tthis.updateSortedData(headerCell as KoliBriTableSelectedHead);\n\t\t} else if (typeof headerCell.sort === 'function') {\n\t\t\tthis.sortFunction = headerCell.sort;\n\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\tcase 'ASC':\n\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'DESC');\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'DESC':\n\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'NOS');\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'ASC');\n\t\t\t}\n\t\t\tthis.updateSortedData(headerCell as KoliBriTableSelectedHead);\n\t\t}\n\t}\n\n\t@Watch('_headers')\n\tpublic validateHeaders(value?: Stringified<KoliBriTableHeaders>): void {\n\t\t/**\n\t\t * - es darf maximal ein Header als primary markiert werden (last win)\n\t\t * - der primary-Header entscheidet implizit über _order und _orientation\n\t\t *   - primary-Headers müssen das key-Property setzen\n\t\t *   - nicht primary-Headers müssen das key-Property nicht setzen (wird ignoriert)\n\t\t *   - _order: wird durch den primary-Header geregelt\n\t\t *   - _orientation: wird durch den primary-Header geregelt\n\t\t * - sobald ein Header sortierbar ist, darf es nur noch entweder horizontale\n\t\t *   oder vertikale Header geben, aber nicht mehr beides\n\t\t */\n\t\temptyStringByArrayHandler(value, () => {\n\t\t\tobjectObjectHandler(value, () => {\n\t\t\t\ttry {\n\t\t\t\t\tvalue = parseJson<KoliBriTableHeaders>(value);\n\t\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t\t} catch (e) {\n\t\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t\t}\n\t\t\t\twatchValidator(this, '_headers', (value): boolean => typeof value === 'object' && value !== null, new Set(['KoliBriTableHeaders']), value, {\n\t\t\t\t\thooks: {\n\t\t\t\t\t\tbeforePatch: (nextValue: unknown) => {\n\t\t\t\t\t\t\tconst applySort = (headers: KoliBriTableHeaderCellWithLogic[]) => {\n\t\t\t\t\t\t\t\tlet hasSortedCells = false;\n\t\t\t\t\t\t\t\theaders.forEach((cell) => {\n\t\t\t\t\t\t\t\t\tconst key = cell.key;\n\t\t\t\t\t\t\t\t\tif (!key) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tconst sortDirection = cell.sortDirection;\n\t\t\t\t\t\t\t\t\tif (sortDirection === 'ASC' || sortDirection === 'DESC') {\n\t\t\t\t\t\t\t\t\t\tif (typeof cell.compareFn === 'function') {\n\t\t\t\t\t\t\t\t\t\t\tif (this.state._allowMultiSort || this.sortData.length === 0) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.sortData.push({ label: cell.label, key, compareFn: cell.compareFn, direction: sortDirection });\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\thasSortedCells = true;\n\t\t\t\t\t\t\t\t\t\t} else if (typeof cell.sort === 'function') {\n\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(cell.sort, sortDirection);\n\t\t\t\t\t\t\t\t\t\t\tsetTimeout(() => this.updateSortedData({ key, label: cell.label, sortDirection }));\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\tif (hasSortedCells) {\n\t\t\t\t\t\t\t\t\tsetTimeout(() => this.updateSortedData());\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\tconst headers: KoliBriTableHeaders = nextValue as KoliBriTableHeaders;\n\t\t\t\t\t\t\theaders.horizontal?.forEach(applySort);\n\t\t\t\t\t\t\theaders.vertical?.forEach(applySort);\n\n\t\t\t\t\t\t\tif (headers.horizontal && headers.vertical && headers.horizontal?.length > 0 && headers.vertical?.length > 0) {\n\t\t\t\t\t\t\t\tthis.disableSort = true;\n\t\t\t\t\t\t\t\tdevHint(\n\t\t\t\t\t\t\t\t\t`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)`,\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_minWidth')\n\tpublic validateMinWidth(value?: string): void {\n\t\twatchString(this, '_minWidth', value, {\n\t\t\tdefaultValue: undefined,\n\t\t});\n\t}\n\n\t@Watch('_selection')\n\tpublic validateSelection(value?: TableSelectionPropType): void {\n\t\tvalidateTableSelection(this, value);\n\t}\n\t@Watch('_on')\n\tpublic validateOn(value?: TableStatefulCallbacksPropType): void {\n\t\tvalidateTableStatefulCallbacks(this, value);\n\t}\n\n\tprivate readonly handlePagination: KoliBriPaginationButtonCallbacks = {\n\t\tonClick: (event: Event, page: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onClick === 'function') {\n\t\t\t\tthis.state._pagination._on.onClick(event, page);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_page: page,\n\t\t\t});\n\t\t},\n\t\tonChangePage: (event: Event, page: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onChangePage === 'function') {\n\t\t\t\tthis.state._pagination._on.onChangePage(event, page);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_page: page,\n\t\t\t});\n\t\t},\n\t\tonChangePageSize: (event: Event, pageSize: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onChangePageSize === 'function') {\n\t\t\t\tthis.state._pagination._on.onChangePageSize(event, pageSize);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_pageSize: pageSize,\n\t\t\t});\n\t\t\tsetState(this, '_pageSize', pageSize);\n\t\t},\n\t};\n\n\t@Watch('_pagination')\n\tpublic validatePagination(value?: boolean | Stringified<KoliBriTablePaginationProps>): void {\n\t\ttry {\n\t\t\tvalue = parseJson<boolean | KoliBriTablePaginationProps>(value);\n\t\t\t// eslint-disable-next-line no-empty\n\t\t} catch (e) {\n\t\t\t// value behält den ursprünglichen Wert\n\t\t}\n\n\t\tthis.showPagination = paginationValidator(value);\n\n\t\twatchValidator<boolean | Stringified<KoliBriTablePaginationProps>>(\n\t\t\tthis,\n\t\t\t'_pagination',\n\t\t\tpaginationValidator,\n\t\t\tnew Set(['boolean', 'KoliBriTablePagination']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: {\n\t\t\t\t\t_page: 1,\n\t\t\t\t\t_pageSize: 10,\n\t\t\t\t\t_max: 0,\n\t\t\t\t},\n\t\t\t},\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAllowMultiSort(this._allowMultiSort);\n\t\tthis.validateData(this._data);\n\t\tthis.validateDataFoot(this._dataFoot);\n\t\tthis.validateHeaders(this._headers);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMinWidth(this._minWidth);\n\t\tthis.validatePagination(this._pagination);\n\t\tthis.validatePaginationPosition(this._paginationPosition);\n\t\tthis.validateSelection(this._selection);\n\t}\n\n\tprivate selectDisplayedData(data: KoliBriTableDataType[], pageSize: number, page: number): KoliBriTableDataType[] {\n\t\tif (typeof pageSize === 'number' && pageSize > 0 && typeof page === 'number' && page > 0) {\n\t\t\tthis.pageStartSlice = pageSize * (page - 1);\n\t\t\tthis.pageEndSlice = pageSize * page > data.length ? data.length : pageSize * page;\n\t\t\treturn data.slice(this.pageStartSlice, this.pageEndSlice);\n\t\t} else {\n\t\t\tthis.pageStartSlice = 0;\n\t\t\tthis.pageEndSlice = data.length;\n\t\t\treturn data;\n\t\t}\n\t}\n\n\t/**\n\t *\n\t * @param cell only used for old single sort. Can be removed when sort is removed.\n\t */\n\tprivate updateSortedData = (cell: KoliBriTableSelectedHead = this.sortedColumnHead) => {\n\t\tif (this.disableSort) {\n\t\t\tsetState(this, '_sortedData', this.state._data);\n\t\t\treturn;\n\t\t}\n\n\t\tlet sortedData: KoliBriTableDataType[] = this.state._data;\n\t\tif (this.sortData.length > 0) {\n\t\t\tsortedData = this.state._data.sort((a: KoliBriTableDataType, b: KoliBriTableDataType) => {\n\t\t\t\tfor (let index = 0; index < this.sortData.length; index++) {\n\t\t\t\t\tconst data = this.sortData[index];\n\t\t\t\t\tconst result = data.compareFn(a, b);\n\t\t\t\t\tif (result !== 0) {\n\t\t\t\t\t\treturn data.direction === 'ASC' ? result : -result;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn 0;\n\t\t\t});\n\t\t} else if (typeof this.sortFunction === 'function') {\n\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\tcase 'ASC':\n\t\t\t\t\tsortedData = this.sortFunction([...this.state._data]);\n\t\t\t\t\tthis.sortedColumnHead = { label: cell.label, key: cell.key, sortDirection: 'ASC' };\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'DESC':\n\t\t\t\t\tsortedData = this.sortFunction([...this.state._data]).reverse();\n\t\t\t\t\tthis.sortedColumnHead = { label: cell.label, key: cell.key, sortDirection: 'DESC' };\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'NOS':\n\t\t\t\tdefault:\n\t\t\t\t\tsortedData = [...this.state._data];\n\t\t\t\t\tthis.sortedColumnHead = { label: '', key: '', sortDirection: 'NOS' };\n\t\t\t}\n\t\t}\n\t\tsetState(this, '_sortedData', sortedData);\n\t};\n\n\tprivate renderPagination(): JSX.Element {\n\t\treturn (\n\t\t\t<div class=\"pagination\">\n\t\t\t\t<span>\n\t\t\t\t\t{translate('kol-table-visible-range', {\n\t\t\t\t\t\tplaceholders: {\n\t\t\t\t\t\t\tstart: this.pageEndSlice > 0 ? (this.pageStartSlice + 1).toString() : '0',\n\t\t\t\t\t\t\tend: this.pageEndSlice.toString(),\n\t\t\t\t\t\t\ttotal:\n\t\t\t\t\t\t\t\tthis.state._pagination && this.state._pagination._max > 0\n\t\t\t\t\t\t\t\t\t? this.state._pagination._max.toString()\n\t\t\t\t\t\t\t\t\t: Array.isArray(this.state._data)\n\t\t\t\t\t\t\t\t\t\t? this.state._data.length.toString()\n\t\t\t\t\t\t\t\t\t\t: '0',\n\t\t\t\t\t\t},\n\t\t\t\t\t})}\n\t\t\t\t</span>\n\t\t\t\t<div>\n\t\t\t\t\t<KolPaginationTag\n\t\t\t\t\t\t_boundaryCount={this.state._pagination._boundaryCount}\n\t\t\t\t\t\t_customClass={this.state._pagination._customClass}\n\t\t\t\t\t\t_on={this.handlePagination}\n\t\t\t\t\t\t_page={this.state._pagination._page}\n\t\t\t\t\t\t_pageSize={this.state._pagination._pageSize}\n\t\t\t\t\t\t_pageSizeOptions={this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS}\n\t\t\t\t\t\t_siblingCount={this.state._pagination._siblingCount}\n\t\t\t\t\t\t_tooltipAlign=\"bottom\"\n\t\t\t\t\t\t_max={this.state._pagination._max || this.state._pagination._max || this.state._data.length}\n\t\t\t\t\t\t_label={translate('kol-table-pagination-label', { placeholders: { label: this.state._label } })}\n\t\t\t\t\t></KolPaginationTag>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate getHeaderCellSortState(headerCell: KoliBriTableHeaderCellWithLogic): KoliBriSortDirection | undefined {\n\t\tif (!this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function')) {\n\t\t\tif (headerCell.key === this.sortedColumnHead.key) {\n\t\t\t\treturn this.sortedColumnHead.sortDirection;\n\t\t\t}\n\t\t\tif (headerCell.key) {\n\t\t\t\tconst data = this.sortData.find((value) => value.key === headerCell.key);\n\t\t\t\tif (data?.direction) {\n\t\t\t\t\treturn data.direction;\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn 'NOS';\n\t\t}\n\t}\n\n\tprivate handleSort({ key }: SortEventPayload) {\n\t\tconst headerCell = [...(this.state._headers.horizontal || []).flat(), ...(this.state._headers.vertical || []).flat()].find((cell) => cell.key === key);\n\t\tif (headerCell) {\n\t\t\tthis.changeCellSort(headerCell);\n\t\t}\n\t}\n\n\tprivate getSelectedData(selectedKeys: string[]): KoliBriTableDataType[] {\n\t\tif (this.state._selection) {\n\t\t\tconst keyPropertyName = this.state._selection.keyPropertyName ?? 'id';\n\t\t\tif (keyPropertyName) return this.state._sortedData.filter((item) => selectedKeys.includes(item[keyPropertyName] as string));\n\t\t}\n\t\treturn [];\n\t}\n\tprivate handleSelectionChange(event: Event, value: string[]): void {\n\t\tif (this.state._selection)\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_selection: {\n\t\t\t\t\t...this.state._selection,\n\t\t\t\t\tselectedKeys: value,\n\t\t\t\t},\n\t\t\t};\n\t\tconst selectedData = this.getSelectedData(value);\n\n\t\ttryToDispatchKoliBriEvent('selection-change', this.host, selectedData);\n\n\t\tif (typeof this.state._on?.[Events.onSelectionChange] === 'function') {\n\t\t\tthis.state._on[Events.onSelectionChange](event, selectedData);\n\t\t}\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getSelection(): Promise<KoliBriTableDataType[]> {\n\t\tconst selectedKeys: string[] = this.state._selection?.selectedKeys || [];\n\t\tconst selectedData = this.getSelectedData(selectedKeys);\n\n\t\treturn selectedData;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst displayedData: KoliBriTableDataType[] = this.selectDisplayedData(\n\t\t\tthis.state._sortedData,\n\t\t\tthis.showPagination ? (this.state._pagination?._pageSize ?? 10) : this.state._sortedData.length,\n\t\t\tthis.state._pagination._page || 1,\n\t\t);\n\t\tconst paginationTop = this._paginationPosition === 'top' || this._paginationPosition === 'both' ? this.renderPagination() : null;\n\t\tconst paginationBottom = this._paginationPosition === 'bottom' || this._paginationPosition === 'both' ? this.renderPagination() : null;\n\n\t\tconst headerCells: TableHeaderCells = {\n\t\t\thorizontal: this.state._headers.horizontal?.map((row) => row.map((cell) => ({ ...cell, sortDirection: this.getHeaderCellSortState(cell) }))),\n\t\t\tvertical: this.state._headers.vertical?.map((column) => column.map((cell) => ({ ...cell, sortDirection: this.getHeaderCellSortState(cell) }))),\n\t\t};\n\t\treturn (\n\t\t\t<Host class=\"kol-table-stateful\">\n\t\t\t\t{this.pageEndSlice > 0 && this.showPagination && paginationTop}\n\t\t\t\t<KolTableStatelessWcTag\n\t\t\t\t\t_data={displayedData}\n\t\t\t\t\t_headerCells={headerCells}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_dataFoot={this.state._dataFoot}\n\t\t\t\t\t_minWidth={this.state._minWidth}\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonSort: (_: MouseEvent, payload: SortEventPayload) => {\n\t\t\t\t\t\t\tthis.handleSort(payload);\n\t\t\t\t\t\t},\n\t\t\t\t\t\tonSelectionChange: (event: Event, value: string[]) => {\n\t\t\t\t\t\t\tthis.handleSelectionChange(event, value);\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\t_selection={this.state._selection}\n\t\t\t\t/>\n\t\t\t\t{this.pageEndSlice > 0 && this.showPagination && paginationBottom}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}

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,H as i,g as s}from"./index-5c159215.js";import{x as n,c as o}from"./component-names-3f4a13bb.js";import{t as l}from"./i18n-59fb5a46.js";import{t as a}from"./events-29e84d75.js";import{n as d}from"./dev.utils-1f727579.js";import{t as r,o as c,p as h,w as f,i as u}from"./prop.validators-db70e3c4.js";import{v,a as b,d as p,b as y,E as m}from"./events-2b67c17a.js";import{v as g}from"./label-20475610.js";import"./i18n-3dcfca85.js";import"./reuse-108ee8f5.js";import"./dev.utils-1ca991a2.js";import"./index-db4aa6e4.js";const _=(e,t)=>{r(t,(()=>{c(t,(()=>{try{t=h(t)}catch(e){}f(e,"_headerCells",(e=>"object"==typeof e&&null!==e),new Set(["TableHeaderCellsPropType"]),t)}))}))},k=class{constructor(a){t(this,a),this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.renderTableRow=(t,a)=>{var i,l;let o=String(a);return this.horizontal&&(null===(i=t[0])||void 0===i?void 0:i.data)&&(o=null!==(l=this.getDataKey(t[0].data))&&void 0!==l?l:o),e("tr",{key:`row-${o}`},this.renderSelectionCell(t,a),t.map(((e,t)=>this.renderTableCell(e,a,t))))},this.renderTableCell=(t,a,i)=>{let l=`${a}-${i}-${t.label}`;if(t.data){const e=this.getDataKey(t.data);l=e?`${e}-${this.horizontal?i:a}`:l}return!1===t.asTd?this.renderHeadingCell(t,a,i):e("td",{key:`cell-${l}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?e=>{this.cellRender(t,e)}:void 0},"function"!=typeof t.render?t.label:"")},this.state={_data:[],_label:"",_headerCells:{horizontal:[],vertical:[]}},this.tableDivElementHasScrollbar=!1,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}validateData(e){v(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){b(this,e)}validateHeaderCells(e){_(this,e)}validateLabel(e){g(this,e,{required:!0})}validateMinWidth(e){u(this,"_minWidth",e,{defaultValue:void 0})}validateOn(e){p(this,e)}validateSelection(e){y(this,e)}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}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,d())})),this.dataToKeyMap.forEach(((t,a)=>{e.includes(a)||this.dataToKeyMap.delete(a)}))}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 a=e.render(t,e,e.data,this.state._data);"string"==typeof a&&(t.textContent=a)}}))))}getNumberOfCols(e,t){let a=0;return e.forEach((e=>{let t=0;e.forEach((e=>{var a;return t+=null!==(a=e.colSpan)&&void 0!==a?a:1})),a<t&&(a=t)})),0===a&&(a=t.length),a}getNumberOfRows(e,t){var a;let i=0;return e.forEach((e=>{let t=0;e.forEach((e=>{var a;return t+=null!==(a=e.rowSpan)&&void 0!==a?a:1})),i<t&&(i=t)})),0===i?i=t.length:i-=(null===(a=this.state._dataFoot)||void 0===a?void 0:a.length)||0,i}filterHeaderKeys(e){const t=[];return e.forEach((e=>{e.forEach((e=>{"string"==typeof e.key&&t.push(e)}))})),t}getPrimaryHeader(e){var t,a;let i=this.filterHeaderKeys(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===i.length&&(i=this.filterHeaderKeys(null!==(a=e.vertical)&&void 0!==a?a:[]),i.length>0&&(this.horizontal=!1)),i}createDataField(e,t,a){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 o=this.getPrimaryHeader(t),s=this.getNumberOfCols(t.horizontal,e);let n=this.getNumberOfRows(t.vertical,e),r=0;a&&(r=n,n+=(null===(i=this.state._dataFoot)||void 0===i?void 0:i.length)||0);const d=[],c=[],h=[];t.vertical.forEach(((e,t)=>{c[t]=0,h[t]=[]}));for(let i=r;i<n;i++){const l=[];t.vertical.forEach(((e,t)=>{let a=0;if(h[t].forEach((e=>a+=e)),a<=i){const o=e[i-a+c[t]];if("object"==typeof o){l.push(Object.assign(Object.assign({},o),{asTd:!1,data:{}}));let e=1;if("number"==typeof o.rowSpan&&o.rowSpan>1&&(e=o.rowSpan),h[t].push(e),"number"==typeof o.colSpan&&o.colSpan>1)for(let a=1;a<o.colSpan;a++)h[t+a].push(e);c[t]++}}}));for(let t=0;t<s;t++)if(!0===this.horizontal){const s=a&&this.state._dataFoot?this.state._dataFoot[i-r]:e[i];"object"==typeof o[t]&&null!==o[t]&&"string"==typeof o[t].key&&"object"==typeof s&&null!==s&&l.push(Object.assign(Object.assign({},o[t]),{colSpan:void 0,data:s,label:s[o[t].key],rowSpan:void 0}))}else"object"==typeof o[i]&&null!==o[i]&&"string"==typeof o[i].key&&"object"==typeof e[t]&&null!==e[t]&&l.push(Object.assign(Object.assign({},o[i]),{colSpan:void 0,data:e[t],label:e[t][o[i].key],rowSpan:void 0}));d.push(l)}if(0===e.length){let e=0,a=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=>{a+=e.rowSpan||1})));const i={colSpan:e,label:l("kol-no-entries"),render:void 0,rowSpan:Math.max(a,1)};0===d.length?d.push([i]):d[0].push(i)}return d}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)}renderSelectionCell(t,i){var l,o,s;if(!this.state._selection)return"";const r=null!==(l=this.state._selection.keyPropertyName)&&void 0!==l?l:"id",d=t.find((e=>e.key===r));if(!d)return"";const c=(null==d?void 0:d.data)[r],h=null===(s=null===(o=this.state._selection)||void 0===o?void 0:o.selectedKeys)||void 0===s?void 0:s.includes(c),v=this.state._selection.label(d.data);return e("td",{key:`tbody-${i}-selection`,class:"selection-cell"},e(n,{_label:v,_hideLabel:!0,_checked:h,_tooltipAlign:"right",_on:{onInput:(e,t)=>{var i,l,o,s,n;const r=t?[...null!==(l=null===(i=this.state._selection)||void 0===i?void 0:i.selectedKeys)&&void 0!==l?l:[],c]:null===(s=null===(o=this.state._selection)||void 0===o?void 0:o.selectedKeys)||void 0===s?void 0:s.filter((e=>e!==c));a("selection-change",this.host,r),"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n[m.onSelectionChange])&&this.state._on[m.onSelectionChange](e,null!=r?r:[])}}}))}renderHeadingSelectionCell(){var t;if(!this.state._selection)return"";const i=null===(t=this.state._selection.selectedKeys)||void 0===t?void 0:t.length,o=i===this.state._data.length,s=0!==i&&!o;let r="kol-table-selection-intermediate";return o&&!s&&(r="kol-table-selection-none"),0===i&&(r="kol-table-selection-all"),e("th",{key:"thead-0-selection",class:"selection-cell selection-control"},e(n,{_label:l(r),_hideLabel:!0,_checked:o&&!s,_indeterminate:s,_tooltipAlign:"right",_on:{onInput:(e,t)=>{var i;let l=[];!t&&o||(l=this.state._data),a("selection-change",this.host,l),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i[m.onSelectionChange])&&this.state._on[m.onSelectionChange](e,l.map((e=>null==e?void 0:e.id)))}}}))}renderHeadingCell(t,a,i){let l,s="codicon codicon-fold";if(t.sortDirection)switch(t.sortDirection){case"ASC":s="codicon codicon-chevron-up",l="ascending";break;case"DESC":s="codicon codicon-chevron-down",l="descending"}return e("th",{key:`${a}-${i}-${t.label}`,class:t.textAlign?`align-${t.textAlign}`:void 0,scope:"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{width:t.width},"aria-sort":l,"data-sort":`sort-${t.sortDirection}`},t.sortDirection?e(o,{class:"table-sort-button",exportparts:"icon",_icons:{right:s},_label:t.label,_on:{onClick:e=>{var a;"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onSort)&&t.key&&t.sortDirection&&this.state._on.onSort(e,{key:t.key,currentSortDirection:t.sortDirection})}}}):t.label)}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return"";const t=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return e("tfoot",null,t.map(this.renderTableRow))}render(){const t=this.createDataField(this.state._data,this.state._headerCells);return e(i,{key:"66506c625a129e21c0f90d7db4859e25ebf929ad",class:"kol-table-stateless-wc"},e("div",{key:"1ef318d8570a5a6179dbdfa0d2f9e93552c4357a",ref:e=>this.tableDivElement=e,class:"table",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},e("table",{key:"ebb6d3e06ab196020138f44dfffab92ac706cad5",style:{minWidth:this.state._minWidth}},e("div",{key:"ec760f18bd7f6da915c54524413409c0ac84a154",class:"focus-element",tabindex:this.tableDivElementHasScrollbar?"0":void 0,"aria-describedby":"caption"}," "),e("caption",{key:"03dbef2ff5c0ee9d09e3e837508966b1a769591e",id:"caption"},this.state._label),Array.isArray(this.state._headerCells.horizontal)&&e("thead",{key:"9b3b2097e4cff4c993bafe6e76356e26976d4924"},this.state._headerCells.horizontal.map(((t,a)=>e("tr",{key:`thead-${a}`},this.state._selection&&this.renderHeadingSelectionCell(),t.map(((t,i)=>!0===t.asTd?e("td",{key:`thead-${a}-${i}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?e=>{this.cellRender(t,e)}:void 0},"function"!=typeof t.render?t.label:""):this.renderHeadingCell(t,a,i))))))),e("tbody",{key:"f0e6616484ae198a065ebeeab1d5fd41e7bd5093"},t.map(this.renderTableRow)),this.renderFoot())))}get host(){return s(this)}static get watchers(){return{_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"],_selection:["validateSelection"]}}};export{k as kol_table_stateless_wc};
+import{r as t,h as e,H as i,g as s}from"./index-8a349081.js";import{y as n,c as o}from"./component-names-5dd1e02a.js";import{t as l}from"./i18n-6d848180.js";import{t as a}from"./events-29e84d75.js";import{n as d}from"./dev.utils-6191a11c.js";import{t as r,o as c,p as h,w as f,i as u}from"./prop.validators-f89d26b4.js";import{v,a as b,d as p,b as y,E as m}from"./events-9570402d.js";import{v as g}from"./label-37acddfe.js";import"./i18n-3dcfca85.js";import"./reuse-523ba2ac.js";import"./dev.utils-fab45cbc.js";import"./index-db4aa6e4.js";import"./common-54bf85ba.js";const _=(e,t)=>{r(t,(()=>{c(t,(()=>{try{t=h(t)}catch(e){}f(e,"_headerCells",(e=>"object"==typeof e&&null!==e),new Set(["TableHeaderCellsPropType"]),t)}))}))},k=class{constructor(a){t(this,a),this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.renderTableRow=(t,a)=>{var i,l;let o=String(a);return this.horizontal&&(null===(i=t[0])||void 0===i?void 0:i.data)&&(o=null!==(l=this.getDataKey(t[0].data))&&void 0!==l?l:o),e("tr",{key:`row-${o}`},this.renderSelectionCell(t,a),t.map(((e,t)=>this.renderTableCell(e,a,t))))},this.renderTableCell=(t,a,i)=>{let l=`${a}-${i}-${t.label}`;if(t.data){const e=this.getDataKey(t.data);l=e?`${e}-${this.horizontal?i:a}`:l}return!1===t.asTd?this.renderHeadingCell(t,a,i):e("td",{key:`cell-${l}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?e=>{this.cellRender(t,e)}:void 0},"function"!=typeof t.render?t.label:"")},this.state={_data:[],_label:"",_headerCells:{horizontal:[],vertical:[]}},this.tableDivElementHasScrollbar=!1,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}validateData(e){v(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){b(this,e)}validateHeaderCells(e){_(this,e)}validateLabel(e){g(this,e,{required:!0})}validateMinWidth(e){u(this,"_minWidth",e,{defaultValue:void 0})}validateOn(e){p(this,e)}validateSelection(e){y(this,e)}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}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,d())})),this.dataToKeyMap.forEach(((t,a)=>{e.includes(a)||this.dataToKeyMap.delete(a)}))}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 a=e.render(t,e,e.data,this.state._data);"string"==typeof a&&(t.textContent=a)}}))))}getNumberOfCols(e,t){let a=0;return e.forEach((e=>{let t=0;e.forEach((e=>{var a;return t+=null!==(a=e.colSpan)&&void 0!==a?a:1})),a<t&&(a=t)})),0===a&&(a=t.length),a}getNumberOfRows(e,t){var a;let i=0;return e.forEach((e=>{let t=0;e.forEach((e=>{var a;return t+=null!==(a=e.rowSpan)&&void 0!==a?a:1})),i<t&&(i=t)})),0===i?i=t.length:i-=(null===(a=this.state._dataFoot)||void 0===a?void 0:a.length)||0,i}filterHeaderKeys(e){const t=[];return e.forEach((e=>{e.forEach((e=>{"string"==typeof e.key&&t.push(e)}))})),t}getPrimaryHeader(e){var t,a;let i=this.filterHeaderKeys(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===i.length&&(i=this.filterHeaderKeys(null!==(a=e.vertical)&&void 0!==a?a:[]),i.length>0&&(this.horizontal=!1)),i}createDataField(e,t,a){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 o=this.getPrimaryHeader(t),s=this.getNumberOfCols(t.horizontal,e);let n=this.getNumberOfRows(t.vertical,e),r=0;a&&(r=n,n+=(null===(i=this.state._dataFoot)||void 0===i?void 0:i.length)||0);const d=[],c=[],h=[];t.vertical.forEach(((e,t)=>{c[t]=0,h[t]=[]}));for(let i=r;i<n;i++){const l=[];t.vertical.forEach(((e,t)=>{let a=0;if(h[t].forEach((e=>a+=e)),a<=i){const o=e[i-a+c[t]];if("object"==typeof o){l.push(Object.assign(Object.assign({},o),{asTd:!1,data:{}}));let e=1;if("number"==typeof o.rowSpan&&o.rowSpan>1&&(e=o.rowSpan),h[t].push(e),"number"==typeof o.colSpan&&o.colSpan>1)for(let a=1;a<o.colSpan;a++)h[t+a].push(e);c[t]++}}}));for(let t=0;t<s;t++)if(!0===this.horizontal){const s=a&&this.state._dataFoot?this.state._dataFoot[i-r]:e[i];"object"==typeof o[t]&&null!==o[t]&&"string"==typeof o[t].key&&"object"==typeof s&&null!==s&&l.push(Object.assign(Object.assign({},o[t]),{colSpan:void 0,data:s,label:s[o[t].key],rowSpan:void 0}))}else"object"==typeof o[i]&&null!==o[i]&&"string"==typeof o[i].key&&"object"==typeof e[t]&&null!==e[t]&&l.push(Object.assign(Object.assign({},o[i]),{colSpan:void 0,data:e[t],label:e[t][o[i].key],rowSpan:void 0}));d.push(l)}if(0===e.length){let e=0,a=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=>{a+=e.rowSpan||1})));const i={colSpan:e,label:l("kol-no-entries"),render:void 0,rowSpan:Math.max(a,1)};0===d.length?d.push([i]):d[0].push(i)}return d}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)}renderSelectionCell(t,i){var l,o,s;if(!this.state._selection)return"";const r=null!==(l=this.state._selection.keyPropertyName)&&void 0!==l?l:"id",d=t.find((e=>e.key===r));if(!d)return"";const c=(null==d?void 0:d.data)[r],h=null===(s=null===(o=this.state._selection)||void 0===o?void 0:o.selectedKeys)||void 0===s?void 0:s.includes(c),v=this.state._selection.label(d.data);return e("td",{key:`tbody-${i}-selection`,class:"selection-cell"},e(n,{_label:v,_hideLabel:!0,_checked:h,_tooltipAlign:"right",_on:{onInput:(e,t)=>{var i,l,o,s,n;const r=t?[...null!==(l=null===(i=this.state._selection)||void 0===i?void 0:i.selectedKeys)&&void 0!==l?l:[],c]:null===(s=null===(o=this.state._selection)||void 0===o?void 0:o.selectedKeys)||void 0===s?void 0:s.filter((e=>e!==c));a("selection-change",this.host,r),"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n[m.onSelectionChange])&&this.state._on[m.onSelectionChange](e,null!=r?r:[])}}}))}renderHeadingSelectionCell(){var t;if(!this.state._selection)return"";const i=null===(t=this.state._selection.selectedKeys)||void 0===t?void 0:t.length,o=i===this.state._data.length,s=0!==i&&!o;let r="kol-table-selection-intermediate";return o&&!s&&(r="kol-table-selection-none"),0===i&&(r="kol-table-selection-all"),e("th",{key:"thead-0-selection",class:"selection-cell selection-control"},e(n,{_label:l(r),_hideLabel:!0,_checked:o&&!s,_indeterminate:s,_tooltipAlign:"right",_on:{onInput:(e,t)=>{var i;let l=[];!t&&o||(l=this.state._data),a("selection-change",this.host,l),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i[m.onSelectionChange])&&this.state._on[m.onSelectionChange](e,l.map((e=>null==e?void 0:e.id)))}}}))}renderHeadingCell(t,a,i){let l,s="codicon codicon-fold";if(t.sortDirection)switch(t.sortDirection){case"ASC":s="codicon codicon-chevron-up",l="ascending";break;case"DESC":s="codicon codicon-chevron-down",l="descending"}return e("th",{key:`${a}-${i}-${t.label}`,class:t.textAlign?`align-${t.textAlign}`:void 0,scope:"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{width:t.width},"aria-sort":l,"data-sort":`sort-${t.sortDirection}`},t.sortDirection?e(o,{class:"table-sort-button",exportparts:"icon",_icons:{right:s},_label:t.label,_on:{onClick:e=>{var a;"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onSort)&&t.key&&t.sortDirection&&this.state._on.onSort(e,{key:t.key,currentSortDirection:t.sortDirection})}}}):t.label)}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return"";const t=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return e("tfoot",null,t.map(this.renderTableRow))}render(){const t=this.createDataField(this.state._data,this.state._headerCells);return e(i,{key:"762148d404ad64b0711ef8dedb454dfc796ef88f",class:"kol-table-stateless-wc"},e("div",{key:"bb961bed50072ed6369d534e836c3051bb016ee7",ref:e=>this.tableDivElement=e,class:"table",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},e("table",{key:"da8170b6636e45b757b68d87aaaa50583fd721e4",style:{minWidth:this.state._minWidth}},e("div",{key:"4ec3daba2c822df83343a707402ce40ffa2976c7",class:"focus-element",tabindex:this.tableDivElementHasScrollbar?"0":void 0,"aria-describedby":"caption"}," "),e("caption",{key:"08b6d869ec1c07f0a7f2e1cdf39e792dc3d72144",id:"caption"},this.state._label),Array.isArray(this.state._headerCells.horizontal)&&e("thead",{key:"761dd07138afbc4595837934d9c0d67246de130f"},this.state._headerCells.horizontal.map(((t,a)=>e("tr",{key:`thead-${a}`},this.state._selection&&this.renderHeadingSelectionCell(),t.map(((t,i)=>!0===t.asTd?e("td",{key:`thead-${a}-${i}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?e=>{this.cellRender(t,e)}:void 0},"function"!=typeof t.render?t.label:""):this.renderHeadingCell(t,a,i))))))),e("tbody",{key:"a41f9b4ff984f9cb26516363e7b77ab764cdfcd6"},t.map(this.renderTableRow)),this.renderFoot())))}get host(){return s(this)}static get watchers(){return{_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"],_selection:["validateSelection"]}}};export{k as kol_table_stateless_wc};