@public-ui/components/dist/kolibri/kol-pagination.entry.js

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

/*!
 * KoliBri - The accessible HTML-Standard
 */
import{r as t,h as n,H as i,g as e}from"./index-136f59ac.js";import{E as o,S as s,w as a,y as l,j as r}from"./index-88dea7b1.js";import{t as h}from"./i18n-01abf777.js";import{n as c}from"./dev.utils-77f0b548.js";import{r as d,a as p}from"./unique-nav-labels-de957b96.js";import{h as u,a as f}from"./component-names-799e91e2.js";import{d as b,K as g}from"./events-5886c68b.js";import{v as m}from"./custom-class-30e531d5.js";import{v as _}from"./label-5982d241.js";import{v as k}from"./tooltip-align-4c18152e.js";import"./i18n-45224cc3.js";import"./align-a05c3d17.js";const y=(t,n,e)=>{o(t,"_max",n,e)},v="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  /* TODO. Once #7126 is completed, move :host block into .kol-pagination  */\n  :host {\n    align-items: center;\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n  }\n  .kol-pagination__navigation-list {\n    align-items: center;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: 0.5em;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-pagination__separator:before {\n    content: \"•••\";\n  }\n}",x=v,w={left:"codicon codicon-debug-reverse-continue"},z={left:"codicon codicon-chevron-left"},S={right:"codicon codicon-chevron-right"},C={right:"codicon codicon-debug-continue"};function j(){const t=navigator.language||"de-DE";return t.includes("-")?t:`${t}-${t.toUpperCase()}`}const O=j(),A=new Intl.NumberFormat(O,{style:"decimal",minimumFractionDigits:0,maximumFractionDigits:0}),B=class{constructor(n){t(this,n),this.nonce=c(),this.calcCount=(t,n=1)=>Math.ceil(t/n),this.getCount=()=>this.calcCount(this.state._max,this.state._pageSize),this.onClick=(t,n)=>{"function"==typeof this.state._on.onClick&&this.state._on.onClick(t,n),this.host&&b(this.host,g.click,n),this.onChangePage(t,n)},this.onChangePage=(t,n)=>{const e=setTimeout((()=>{clearTimeout(e),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,n),this.host&&b(this.host,g.changePage,n)}))},this.onChangePageSize=(t,n)=>{if("number"==typeof(n=parseInt(n[0]))&&n>0&&this._pageSize!==n){this._pageSize=n;const e=setTimeout((()=>{clearTimeout(e),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize),this.host&&b(this.host,g.changePageSize,this._pageSize)}))}},this.onGoToFirst={onClick:t=>{this.onClick(t,1)}},this.onGoToEnd={onClick:t=>{this.onClick(t,this.getCount())}},this.onGoBackward={onClick:t=>{this.onClick(t,this.state._page-1)}},this.onGoForward={onClick:t=>{this.onClick(t,this.state._page+1)}},this.beforePageSize=(t,n)=>{let e=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 t=i.find((t=>t.value===e));e=void 0===t?i[0].value:t.value,n.set("_pageSize",e)}const a=n.has("_page")?n.get("_page"):this.state._page,o=n.has("_max")?n.get("_max"):this.state._max;this.syncPage(n,a,n.get("_pageSize"),o)},this.syncPage=(t,n,e,i)=>{if(i>0){const a=this.calcCount(i,e);a>0&&(n>a?(t.set("_page",a),this.onChangePage(s,a)):n<1&&(t.set("_page",1),this.onChangePage(s,1)))}},this.beforePageSizeOptions=(t,n)=>{const e=[];if(Array.isArray(t))for(const n of t)"number"==typeof n&&e.push({label:h("kol-page-per-site",{placeholders:{entries:`${n}`}}),value:n});n.set("_pageSizeOptions",e),this.beforePageSize(e,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:h("kol-pagination"),_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_max:0}}render(){var t;let e=!1;const a=this.getCount(),o=Array.from(Array(a).keys()).map((t=>t+1)).map((t=>t<=this.state._boundaryCount||t>a-this.state._boundaryCount||t>=this.state._page-this.state._siblingCount&&t<=this.state._page+this.state._siblingCount?(e=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===e?(e=!1,n("li",{key:c()},n("span",{class:"kol-pagination__separator","aria-hidden":"true"}))):null));return n(i,{class:"kol-pagination"},n("nav",{"aria-label":this.state._label},n("ul",{class:"kol-pagination__navigation-list"},this.state._hasButtons.first&&n("li",null,n(f,{class:"kol-pagination__button kol-pagination__button--first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:w,_hideLabel:!0,_label:h("kol-page-first"),_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&n("li",null,n(f,{class:"kol-pagination__button kol-pagination__button--previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:z,_hideLabel:!0,_label:h("kol-page-back"),_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),o,this.state._hasButtons.next&&n("li",null,n(f,{class:"kol-pagination__button kol-pagination__button--next",exportparts:"icon",_customClass:this.state._customClass,_disabled:a<=this.state._page,_icons:S,_hideLabel:!0,_label:h("kol-page-next"),_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&n("li",null,n(f,{class:"kol-pagination__button kol-pagination__button--last",exportparts:"icon",_customClass:this.state._customClass,_disabled:a<=this.state._page,_icons:C,_hideLabel:!0,_label:h("kol-page-last"),_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&n(u,{_hideLabel:!0,_id:`pagination-size-${this.nonce}`,_label:h("kol-entries-per-site"),_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:[this.state._pageSize]}))}getUnselectedPageButton(t){return n("li",{key:c()},n(f,{exportparts:"icon",_customClass:this.state._customClass,_label:"",_on:{onClick:n=>{this.onClick(n,t)}}},n("span",{slot:"expert"},n("span",{class:"visually-hidden"},h("kol-page"))," ",A.format(t))))}getSelectedPageButton(t){return n("li",{key:c()},n(f,{class:"kol-pagination__button kol-pagination__button--selected",_customClass:this.state._customClass,_disabled:!0,_label:""},n("span",{slot:"expert"},n("span",{class:"visually-hidden"},h("kol-page"))," ",A.format(t))))}validateBoundaryCount(t){o(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){m(this,t)}validateLabel(t,n,e=!1){e||d(this.state._label),_(this,t),p(this.state._label)}validateHasButtons(t){a(this,"_hasButtons",(t=>"boolean"==typeof t||"string"==typeof t||"object"==typeof t&&null!==t),new Set(["Boolean","PaginationHasButton"]),t,{hooks:{beforePatch:(t,n)=>{if("boolean"==typeof t)n.set("_hasButtons",{first:t,last:t,next:t,previous:t});else{if("string"==typeof t)try{t=r(t)}catch(t){n.delete("_hasButtons")}"object"==typeof t&&null!==t&&n.set("_hasButtons",Object.assign(Object.assign({},this.state._hasButtons),{first:"boolean"==typeof t.first?!0===t.first:this.state._hasButtons.first,last:"boolean"==typeof t.last?!0===t.last:this.state._hasButtons.last,next:"boolean"==typeof t.next?!0===t.next:this.state._hasButtons.next,previous:"boolean"==typeof t.previous?!0===t.previous:this.state._hasButtons.previous}))}}}})}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validatePage(t){o(this,"_page",t,{hooks:{beforePatch:(t,n)=>{const e=n.has("_pageSize")?n.get("_pageSize"):this.state._pageSize,i=n.has("_max")?n.get("_max"):this.state._max;this.syncPage(n,t,e,i)}}})}validatePageSize(t){o(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){l(this,"_pageSizeOptions",(t=>"number"==typeof t),t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){o(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){y(this,t,{hooks:{beforePatch:(t,n)=>{const e=n.has("_page")?n.get("_page"):this.state._page,i=n.has("_pageSize")?n.get("_pageSize"):this.state._pageSize;this.syncPage(n,e,i,t)}}})}validateTooltipAlign(t){k(this,t)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount),this.validateCustomClass(this._customClass),this.validateHasButtons(this._hasButtons),this.validateLabel(this._label,void 0,!0),this.validateOn(this._on),this.validatePage(this._page),this.validatePageSize(this._pageSize),this.validatePageSizeOptions(this._pageSizeOptions),this.validateSiblingCount(this._siblingCount),this.validateTooltipAlign(this._tooltipAlign),this.validateMax(this._max),this.validatePage(this._page)}disconnectedCallback(){d(this.state._label)}get host(){return e(this)}static get watchers(){return{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}}};B.style={default:x};export{B as kol_pagination};