import{r as _,a5 as d,h as a,a6 as b,c as r,H as y,B as p,w as k,X as v,p as w}from"./index-BeCeuELg.js";import{t as s}from"./i18n-43b7aa72-DSS4ELtF.js";import{n as h}from"./dev.utils-109baad9-BGIjjL5C.js";import{r as u,a as z}from"./unique-nav-labels-62f5fdbc-C0vTOAA_.js";import{v as C}from"./custom-class-a04500e8-C6ZEFqbT.js";import{v as S}from"./label-3757689e-D7ErDa5R.js";import{v as P}from"./tooltip-align-184e92e1-DetagLgg.js";import"./align-a1976178-CkMi2aRf.js";const x=(e,t,n)=>{p(e,"_max",t,n)},B=`@charset "UTF-8";
/*
 * This file contains all rules for accessibility.
 */
@layer kol-a11y {
  :host {
    /*
     * Minimum size of interactive elements.
     */
    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));
    color: black;
    /*
     * No element should be used without a background and font color whose contrast ratio has
     * not been checked. By initially setting the background color to white and the font color
     * to black, the contrast ratio is ensured and explicit adjustment is forced.
     */
    background-color: white;
    /*
     * Verdana is an accessible font that can be used without requiring additional loading time.
     */
    font-family: Verdana;
    /*
     * Letter spacing is required for all texts.
     */
    letter-spacing: inherit;
    /*
     * Word spacing is required for all texts.
     */
    word-spacing: inherit;
  }
  * {
    /*
     * This rule enables the word dividing for all texts. That is important for high zoom levels.
     */
    hyphens: auto;
    /*
     * This rule enables the word dividing for all texts. That is important for high zoom levels.
     */
    word-break: break-word;
  }
  /*
   * All interactive elements should have a minimum size of rem(44).
   */
  /* input:not([type='checkbox'], [type='radio'], [type='range']), */
  /* option, */
  /* select, */
  /* textarea, */
  button,
  .kol-input .input {
    min-width: var(--a11y-min-size);
    min-height: var(--a11y-min-size);
  }
  /*
   * Some interactive elements should not inherit the font-family and font-size.
   */
  a,
  button,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  input,
  option,
  select,
  textarea {
    /*
     * All elements should inherit the font family from his parent element.
     */
    font-family: inherit;
    /*
     * All elements should inherit the font size from his parent element.
     */
    font-size: inherit;
    /*
     * Letter spacing is required for all texts.
     */
    letter-spacing: inherit;
    /*
     * Word spacing is required for all texts.
     */
    word-spacing: inherit;
  }
  /**
  * Sometimes we need the semantic element for accessibility reasons,
  * but we don't want to show it.
  *
  * - https://www.a11yproject.com/posts/how-to-hide-content/
  */
  .visually-hidden {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }
}
@layer kol-global {
  /*
   * Dieses CSS stellt sicher, dass der Standard-Style
   * von A und Button resettet werden.
   */
  :is(a, button) {
    background-color: transparent;
    width: 100%; /* 100% needed for custom width from outside */
    margin: 0;
    padding: 0;
    border: none;
  }
  /*
   * Ensure elements with hidden attribute to be actually not visible
   * @see https://meowni.ca/hidden.is.a.lie.html
   */
  [hidden] {
    display: none !important;
  }
}
@layer kol-global {
  :host {
    /*
     * The max-width is needed to prevent the table from overflowing the
     * parent node, if the table is wider than the parent node.
     */
    max-width: 100%;
    font-size: calc(16rem / var(--kolibri-root-font-size, 16));
  }
  * {
    /*
     * We prefer to box-sizing: border-box for all elements.
     */
    box-sizing: border-box;
  }
  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */
  .kol-span-wc {
    display: grid;
    place-items: center;
  }
  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */
  .kol-span-wc > span {
    display: flex;
    place-items: center;
  }
  a,
  button {
    cursor: pointer;
  }
  /* This is the text label. */
  .hide-label > .kol-span-wc > span > span {
    display: none;
  }
  /* Reset browser agent style. */
  button:disabled {
    color: unset;
  }
  .disabled label,
  .disabled:focus-within label,
  [aria-disabled=true],
  [aria-disabled=true]:focus,
  [disabled],
  [disabled]:focus {
    opacity: 0.5;
    outline: none;
    cursor: not-allowed;
  }
  [aria-disabled=true]:focus .kol-span-wc,
  [disabled]:focus .kol-span-wc {
    outline: none !important;
  }
  .badge-text-hint {
    color: black;
    background-color: lightgray;
  }
}
@layer kol-component {
  :host {
    display: block;
  }
}
@layer kol-component {
  .kol-tooltip-wc {
    display: contents;
  }
  .kol-tooltip-wc .tooltip-floating {
    opacity: 0;
    display: none;
    position: fixed;
    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */
    top: 0;
    left: 0;
    /* Can be used to specify the tooltip-width from the outside. Unset by default. */
    width: var(--kol-tooltip-width, unset);
    max-width: 90vw;
    max-height: 90vh;
    animation-direction: normal;
    /* Can be used to specify the animation duration from the outside. 250ms by default. */
    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
  }
  .kol-tooltip-wc .tooltip-floating.hide {
    animation-name: hideTooltip;
  }
  .kol-tooltip-wc .tooltip-floating.show {
    animation-name: showTooltip;
  }
  /* Shared between content and arrow */
  .kol-tooltip-wc .tooltip-area {
    color: #000;
    background-color: #fff;
  }
  .kol-tooltip-wc .tooltip-arrow {
    transform: rotate(45deg);
    position: absolute;
    z-index: 999;
    width: calc(10rem / var(--kolibri-root-font-size, 16));
    height: calc(10rem / var(--kolibri-root-font-size, 16));
  }
  .kol-tooltip-wc .tooltip-content {
    position: relative;
    z-index: 1000;
  }
  @keyframes hideTooltip {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      display: none;
    }
  }
  @keyframes showTooltip {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}
@layer kol-component {
  .required label > span::after,
  .required legend > span::after {
    content: "*";
  }
}
@layer kol-component {
  input,
  textarea {
    cursor: text;
  }
  input[type=checkbox],
  input[type=color],
  input[type=file],
  input[type=radio],
  input[type=range],
  label,
  option,
  select {
    cursor: pointer;
  }
  /* input[type='checkbox'], */
  /* input[type='radio'], */
  /* input[type='range'], */
  input[type=color],
  input[type=date],
  input[type=datetime-local],
  input[type=email],
  input[type=file],
  input[type=month],
  input[type=number],
  input[type=password],
  input[type=search],
  input[type=tel],
  input[type=text],
  input[type=time],
  input[type=url],
  input[type=week],
  option,
  select,
  textarea {
    background-color: transparent;
    width: 100%;
  }
  /* needed hack for vertical alignment */
  input[type=file] {
    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;
  }
  /* needed hack for vertical alignment */
  select[multiple] option {
    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;
  }
}
@layer kol-component {
  .kol-alert-wc {
    display: grid;
  }
  .kol-alert-wc .heading {
    display: flex;
    place-items: center;
  }
  .kol-alert-wc .heading > div {
    flex-grow: 1;
  }
  .close {
    /* Visible with forced colors */
    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));
  }
}
@layer kol-component {
  .kol-input {
    display: grid;
  }
  .kol-input .input-slot {
    flex-grow: 1;
  }
  input:focus,
  option:focus,
  select:focus,
  textarea:focus {
    outline: 0;
  }
  .input {
    background-color: white;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  button:not([role=link]) {
    min-height: auto;
  }
  .input > .kol-icon {
    display: grid;
    place-items: center;
  }
  .kol-input.required .input-tooltip .span-label::after {
    content: "*";
  }
}
@layer kol-component {
  option:checked::before {
    content: "✓ ";
  }
}
@layer kol-component {
  :host {
    display: grid;
    gap: calc(16rem / var(--kolibri-root-font-size, 16));
    align-items: center;
    grid-template-columns: 1fr auto;
  }
  .navigation-list {
    display: inline-flex;
    margin: 0;
    padding: 0;
    gap: 0.5em;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
  }
  .separator:before {
    content: "•••";
  }
  .page-size {
    display: flex;
    gap: 0.5em;
    align-items: center;
  }
}`,A=B,T={left:"codicon codicon-debug-reverse-continue"},O={left:"codicon codicon-chevron-left"},L={right:"codicon codicon-chevron-right"},E={right:"codicon codicon-debug-continue"};function M(){const e=navigator.language||"de-DE";return e.includes("-")?e:`${e}-${e.toUpperCase()}`}const j=M(),g=new Intl.NumberFormat(j,{style:"decimal",minimumFractionDigits:0,maximumFractionDigits:0}),D=class{constructor(e){_(this,e),this.calcCount=(t,n=1)=>Math.ceil(t/n),this.getCount=()=>this.calcCount(this.state._max,this.state._pageSize),this.onClick=(t,n)=>{typeof this.state._on.onClick=="function"&&this.state._on.onClick(t,n),this.onChangePage(t,n)},this.onChangePage=(t,n)=>{const o=setTimeout(()=>{clearTimeout(o),typeof this.state._on.onChangePage=="function"&&this.state._on.onChangePage(t,n)})},this.onChangePageSize=(t,n)=>{if(n=parseInt(n[0]),typeof n=="number"&&n>0&&this._pageSize!==n){this._pageSize=n;const o=setTimeout(()=>{clearTimeout(o),typeof this.state._on.onChangePageSize=="function"&&this.state._on.onChangePageSize(t,this._pageSize)})}},this.onGoToFirst={onClick:t=>{this.onClick(t,1)}},this.onGoToEnd={onClick:t=>{this.onClick(t,this.getCount())}},this.onGoBackward={onClick:t=>{this.onClick(t,this.state._page-1)}},this.onGoForward={onClick:t=>{this.onClick(t,this.state._page+1)}},this.beforePageSize=(t,n)=>{let o=n.has("_pageSize")?n.get("_pageSize"):this.state._pageSize;const i=n.has("_pageSizeOptions")?n.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(i)&&i.length>0){const c=i.find(f=>f.value===o);c===void 0?o=i[0].value:o=c.value,n.set("_pageSize",o)}const l=n.has("_page")?n.get("_page"):this.state._page,m=n.has("_max")?n.get("_max"):this.state._max;this.syncPage(n,l,n.get("_pageSize"),m)},this.syncPage=(t,n,o,i)=>{if(i>0){const l=this.calcCount(i,o);l>0&&(n>l?(t.set("_page",l),this.onChangePage(d,l)):n<1&&(t.set("_page",1),this.onChangePage(d,1)))}},this.beforePageSizeOptions=(t,n)=>{const o=[];if(Array.isArray(t))for(const i of t)typeof i=="number"&&o.push({label:`${i}`,value:i});n.set("_pageSizeOptions",o),this.beforePageSize(o,n)},this._boundaryCount=1,this._customClass=void 0,this._label=void 0,this._hasButtons=!0,this._page=void 0,this._pageSize=1,this._pageSizeOptions=[],this._on=void 0,this._siblingCount=1,this._tooltipAlign="top",this._max=void 0,this.state={_boundaryCount:1,_label:s("kol-pagination"),_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_max:0}}render(){var e;let t=!1;const n=this.getCount(),o=Array.from(Array(n).keys()).map(i=>i+1).map(i=>i<=this.state._boundaryCount||i>n-this.state._boundaryCount||i>=this.state._page-this.state._siblingCount&&i<=this.state._page+this.state._siblingCount?(t=!0,this.state._page===i?this.getSelectedPageButton(i):this.getUnselectedPageButton(i)):t===!0?(t=!1,a("li",{key:h()},a("span",{class:"separator","aria-hidden":"true"}))):null);return a(y,{class:"kol-pagination"},a("nav",{"aria-label":this.state._label},a("ul",{class:"navigation-list"},this.state._hasButtons.first&&a("li",null,a(r,{class:"first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:T,_hideLabel:!0,_label:s("kol-page-first"),_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&a("li",null,a(r,{class:"previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:O,_hideLabel:!0,_label:s("kol-page-back"),_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),o,this.state._hasButtons.next&&a("li",null,a(r,{class:"next",exportparts:"icon",_customClass:this.state._customClass,_disabled:n<=this.state._page,_icons:L,_hideLabel:!0,_label:s("kol-page-next"),_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&a("li",null,a(r,{class:"last",exportparts:"icon",_customClass:this.state._customClass,_disabled:n<=this.state._page,_icons:E,_hideLabel:!0,_label:s("kol-page-last"),_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),((e=this.state._pageSizeOptions)===null||e===void 0?void 0:e.length)>0&&a("div",{class:"page-size"},a(b,{_label:s("kol-entries-per-site"),_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:[this.state._pageSize]})))}getUnselectedPageButton(e){const t=g.format(e);return a("li",{key:h()},a(r,{_ariaDescription:`${s("kol-page")} ${t}`,_customClass:this.state._customClass,_label:t,_on:{onClick:n=>{this.onClick(n,e)}}}))}getSelectedPageButton(e){const t=g.format(e);return a("li",{key:h()},a(r,{"aria-current":"page",class:"selected",_ariaDescription:`${s("kol-page")} ${t}`,_customClass:this.state._customClass,_disabled:!0,_label:t}))}validateBoundaryCount(e){p(this,"_boundaryCount",Math.max(0,e??1))}validateCustomClass(e){C(this,e)}validateLabel(e,t,n=!1){n||u(this.state._label),S(this,e),z(this.state._label)}validateHasButtons(e){k(this,"_hasButtons",t=>typeof t=="boolean"||typeof t=="string"||typeof t=="object"&&t!==null,new Set(["Boolean","PaginationHasButton"]),e,{hooks:{beforePatch:(t,n)=>{if(typeof t=="boolean")n.set("_hasButtons",{first:t,last:t,next:t,previous:t});else{if(typeof t=="string")try{t=w(t)}catch{n.delete("_hasButtons")}typeof t=="object"&&t!==null&&n.set("_hasButtons",Object.assign(Object.assign({},this.state._hasButtons),{first:typeof t.first=="boolean"?t.first===!0:this.state._hasButtons.first,last:typeof t.last=="boolean"?t.last===!0:this.state._hasButtons.last,next:typeof t.next=="boolean"?t.next===!0:this.state._hasButtons.next,previous:typeof t.previous=="boolean"?t.previous===!0:this.state._hasButtons.previous}))}}}})}validateOn(e){typeof e=="object"&&e!==null&&(this.state=Object.assign(Object.assign({},this.state),{_on:e}))}validatePage(e){p(this,"_page",e,{hooks:{beforePatch:(t,n)=>{const o=n.has("_pageSize")?n.get("_pageSize"):this.state._pageSize,i=n.has("_max")?n.get("_max"):this.state._max;this.syncPage(n,t,o,i)}}})}validatePageSize(e){p(this,"_pageSize",e,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(e){v(this,"_pageSizeOptions",t=>typeof t=="number",e,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(e){p(this,"_siblingCount",Math.max(0,e??1))}validateMax(e){x(this,e,{hooks:{beforePatch:(t,n)=>{const o=n.has("_page")?n.get("_page"):this.state._page,i=n.has("_pageSize")?n.get("_pageSize"):this.state._pageSize;this.syncPage(n,o,i,t)}}})}validateTooltipAlign(e){P(this,e)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount),this.validateCustomClass(this._customClass),this.validateHasButtons(this._hasButtons),this.validateLabel(this._label,void 0,!0),this.validateOn(this._on),this.validatePage(this._page),this.validatePageSize(this._pageSize),this.validatePageSizeOptions(this._pageSizeOptions),this.validateSiblingCount(this._siblingCount),this.validateTooltipAlign(this._tooltipAlign),this.validateMax(this._max),this.validatePage(this._page)}disconnectedCallback(){u(this.state._label)}static get watchers(){return{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}}};D.style={default:A};export{D as kol_pagination};
//# sourceMappingURL=kol-pagination.entry-C7yVr3UO.js.map
