if(!customElements.get("remex-pagginator")){class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this._total=0,this._pg=1,this._pgSize=15,this._activeBg="#AAA",this._inactiveBg="#CCC",this._textColor="#fff",this._radius="50%",this._nextLabel="",this._prevLabel=""}static get observedAttributes(){return["pg","pg-size","total","active-bg","inactive-bg","text-color","radius","next-label","prev-label"]}get nextLabel(){return this._nextLabel}set nextLabel(t){this._nextLabel=t,this.setAttribute("next-label",this._nextLabel),this.render()}get prevLabel(){return this._prevLabel}set prevLabel(t){this._prevLabel=t,this.setAttribute("prev-label",this._prevLabel),this.render()}get pg(){return this._pg}get pgSize(){return this._pgSize}get total(){return this._total}get activeBg(){return this._activeBg}get inactiveBg(){return this._inactiveBg}get textColor(){return this._textColor}get radius(){return this._radius}set pg(t){this._pg=parseInt(t,10),
this.setAttribute("pg",this._pg),this.render()}set pgSize(t){this._pgSize=parseInt(t,10),this.setAttribute("pg-size",this._pgSize),this.render()}set total(t){this._total=parseInt(t,10),this.setAttribute("total",this._total),this.render()}set activeBg(t){this._activeBg=t,this.setAttribute("active-bg",this._activeBg),this.render()}set inactiveBg(t){this._inactiveBg=t,this.setAttribute("inactive-bg",this._inactiveBg),this.render()}set textColor(t){this._textColor=t,this.setAttribute("text-color",this._textColor),this.render()}set radius(t){this._radius=t,this.setAttribute("radius",this._radius),this.render()}attributeChangedCallback(t,e,i){if(e!==i){switch(t){case"pg":this._pg=parseInt(i,10);break;case"pg-size":this._pgSize=parseInt(i,10);break;case"total":this._total=parseInt(i,10);break;case"active-bg":this._activeBg=i;break;case"inactive-bg":this._inactiveBg=i;break;case"text-color":this._textColor=i;break;case"radius":this._radius=i}this.render()}}connectedCallback(){this.render()}
render(){const t=Math.ceil(this._total/this._pgSize),e=this._pg
;this.shadowRoot.innerHTML=`\n                <style>\n                    .pagination {\n                        display: flex;\n                        list-style: none;\n                        padding: 0;\n                        justify-content: center;\n                        align-items: center;\n                    }\n                    .page-item {\n                        margin: 0 5px;\n                    }\n                    .page-link {\n                        display: block;\n                        padding: 5px 10px;\n                        text-decoration: none;\n                        color: ${this._textColor};\n                        background-color: ${this._inactiveBg};\n                        border-radius: ${this._radius};\n                        cursor: pointer;\n                    }\n                    .page-link.active {\n                        background-color: ${this._activeBg};\n                    }\n                    .page-link:hover {\n                        opacity: 0.8;\n                    }\n                    .page-link[disabled] {\n                        pointer-events: none;\n                        opacity: 0.5;\n                    }\n                </style>\n                <ul class="pagination">\n                    <li class="page-item">\n                        <a class="page-link prev" ${1===e?"disabled":""}>&#10094; ${this.prevLabel}</a>\n                    </li>\n                    ${Array.from({
length:t},((t,i)=>`\n                        <li class="page-item">\n                            <a class="page-link ${i+1===e?"active":""}" data-page="${i+1}">${i+1}</a>\n                        </li>\n                    `)).join("")}\n                    <li class="page-item">\n                        <a class="page-link next" ${e===t?"disabled":""}>${this.nextLabel} &#10095;</a>\n                    </li>\n                </ul>\n            `,this.shadowRoot.querySelectorAll(".page-link").forEach((i=>{i.addEventListener("click",(s=>{if(s.preventDefault(),i.classList.contains("prev"))e>1&&this.dispatchPagginateEvent(e-1);else if(i.classList.contains("next"))e<t&&this.dispatchPagginateEvent(e+1);else{const t=parseInt(i.getAttribute("data-page"),10);t!==e&&this.dispatchPagginateEvent(t)}}))}))}dispatchPagginateEvent(t){this.dispatchEvent(new CustomEvent("pagginate",{detail:{page:t}}))}}customElements.define("remex-pagginator",t)}