@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
1 lines • 12 kB
JavaScript
import{h as o,r as a,d as i,g as c}from"./p-C1-Dpkp7.js";import{h as n}from"./p-tWS3Egrk.js";import{i as t}from"./p-DJ2rBB6r.js";const s=({className:a})=>o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-chevron-double-left ${a||""}`,viewBox:"0 0 24 24"},o("path",{d:"m14.42 12 3.88-3.88a.996.996 0 1 0-1.41-1.41L12.3 11.3a.996.996 0 0 0 0 1.41l4.59 4.59c.38.38 1.01.38 1.4-.01a.996.996 0 0 0 0-1.41zm-2.71-5.29a.996.996 0 0 0-1.41 0L5.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59c.38.38 1.01.38 1.4-.01s.39-1.02 0-1.41L7.83 12l3.88-3.88a.996.996 0 0 0 0-1.41"})),d=({className:a})=>o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-chevron-double-right ${a||""}`,viewBox:"0 0 24 24"},o("path",{d:"M7.12 6.71c-.39-.39-1.03-.39-1.42 0a.996.996 0 0 0 0 1.41L9.58 12 5.7 15.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41zm11.17 4.58L13.7 6.7c-.38-.38-1.02-.38-1.41 0a.996.996 0 0 0 0 1.41l3.88 3.88-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41Z"})),r=({className:a})=>o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-chevron-left ${a||""}`,viewBox:"0 0 24 24"},o("path",{d:"M14.71 6.71a.996.996 0 0 0-1.41 0L8.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59a.996.996 0 1 0 1.41-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41"})),m=({className:a})=>o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-chevron-right ${a||""}`,viewBox:"0 0 24 24"},o("path",{d:"M9.29 6.71a.996.996 0 0 0 0 1.41L13.17 12l-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01"})),u=class{constructor(o){a(this,o),this.pageChange=i(this,"pageChange",7),this.inheritedAttributes={},this.maxVisibleButtons=5,this.count=1,this.customClass="",this.page=1,this.size="md",this.visiblePages=[],this.handlePageClick=o=>{o===this.page||o<1||o>this.count||(this.pageChange.emit({newPage:o,prevPage:this.page}),this.page=o)}}calculateVisiblePages(){const o=[],a=Math.floor(this.maxVisibleButtons/2);let i=Math.max(1,this.page-a),c=Math.min(this.count,i+this.maxVisibleButtons-1);c-i+1<this.maxVisibleButtons&&(i=Math.max(1,c-this.maxVisibleButtons+1));for(let a=i;a<=c;a++)o.push(a);this.visiblePages=o}componentWillLoad(){n(this.el),this.calculateVisiblePages(),this.inheritedAttributes=t(this.el)}getClasses(){const o=["modus-wc-pagination-btn","modus-wc-join-item","modus-wc-btn","modus-wc-btn-square"],a=["modus-wc-pagination","modus-wc-join"];this.customClass&&a.push(this.customClass);const i=a.join(" "),c=(({size:o})=>{let a="";return o&&(a=`${a} modus-wc-btn-${o}`),a.trim()})({size:this.size});return c&&o.push(c),{paginationClasses:i,buttonClasses:o.join(" ")}}render(){var a,i,c,n,t;const{paginationClasses:u,buttonClasses:l}=this.getClasses(),e=1===this.page,g=this.page===this.count,w=this.count>this.maxVisibleButtons,p={firstPage:(null===(a=this.ariaLabelValues)||void 0===a?void 0:a.firstPage)||"First page",lastPage:(null===(i=this.ariaLabelValues)||void 0===i?void 0:i.lastPage)||"Last page",nextPage:(null===(c=this.ariaLabelValues)||void 0===c?void 0:c.nextPage)||"Next page",page:(null===(n=this.ariaLabelValues)||void 0===n?void 0:n.page)||"Page {0}",previousPage:(null===(t=this.ariaLabelValues)||void 0===t?void 0:t.previousPage)||"Previous page"};return o("div",Object.assign({key:"870701d38d9853d97d95453e9bbf556cc00c7468",class:u},this.inheritedAttributes),w&&o("button",{key:"67f902c86d0c8364d57a71e40432dbcc101c8bca","aria-label":p.firstPage,class:l,disabled:e,onClick:()=>this.handlePageClick(1)},o(s,{key:"e61ab9bc4d55ff9ddbc1925cdd6930493587fc1c",className:"modus-wc-pagination-icon"})),o("button",{key:"16fdc803df19967e78f852cad9c58d53a2a47195","aria-label":this.prevButtonText?void 0:p.previousPage,class:`${l} ${this.prevButtonText?"modus-wc-pagination-button-text":""}`,disabled:e,onClick:()=>this.handlePageClick(this.page-1)},this.prevButtonText?o("span",null,this.prevButtonText):o(r,{className:"modus-wc-pagination-icon"})),this.visiblePages.map((a=>o("button",{"aria-current":this.page===a?"page":void 0,"aria-label":p.page.replace("{0}",a.toString()),class:`${l} ${this.page===a?"modus-wc-btn-active":""}`,onClick:()=>this.handlePageClick(a)},a))),o("button",{key:"0f32980c0a5e37cc976f24efde1deb06ff71722b","aria-label":this.nextButtonText?void 0:p.nextPage,class:`${l} ${this.nextButtonText?"modus-wc-pagination-button-text":""}`,disabled:g,onClick:()=>this.handlePageClick(this.page+1)},this.nextButtonText?o("span",null,this.nextButtonText):o(m,{className:"modus-wc-pagination-icon"})),w&&o("button",{key:"ec0f2d19399461f0abcecbbd9a209ddb69b912f7","aria-label":p.lastPage,class:l,disabled:g,onClick:()=>this.handlePageClick(this.count)},o(d,{key:"ce8b9536a69a669d31681b60c77c2a4238a2826f",className:"modus-wc-pagination-icon"})))}get el(){return c(this)}static get watchers(){return{page:["calculateVisiblePages"],count:["calculateVisiblePages"]}}};u.style="modus-wc-pagination .modus-wc-pagination{background-color:var(--modus-wc-color-base-100);color:var(--modus-wc-color-base-content)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn{background-color:var(--modus-wc-color-base-100);border-color:transparent}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:hover{background-color:var(--modus-wc-color-base-100);color:var(--modus-wc-color-primary)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:focus{background-color:var(--modus-wc-color-base-200);color:var(--modus-wc-color-primary)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn-selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn-active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn-open{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn-disabled:hover{background-color:inherit}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn--active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn--selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn-checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.pressed{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn-pressed{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn[aria-pressed=true]{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-sm .modus-wc-pagination-icon{height:var(--modus-wc-line-height-sm);width:var(--modus-wc-line-height-sm)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-md .modus-wc-pagination-icon{height:var(--modus-wc-ling-height-md);width:var(--modus-wc-line-height-md)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-lg .modus-wc-pagination-icon{height:var(--modus-wc-line-height-lg);width:var(--modus-wc-line-height-lg)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-button-text{padding:calc(var(--modus-wc-spacing-sm) - 2px);width:auto !important}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled){background-color:var(--modus-wc-color-base-100);color:var(--modus-wc-color-base-content)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled).modus-wc-btn-active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled):hover:not(.modus-wc-btn-active){background-color:var(--modus-wc-color-base-300);border-color:transparent}[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination,[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination{background-color:transparent}[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn,[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn{background-color:transparent;border:none;border-radius:var(--modus-wc-border-radius-md) !important;box-shadow:none}[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-sm,[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-sm{height:var(--modus-wc-line-height-md);max-height:var(--modus-wc-line-height-md);min-height:var(--modus-wc-line-height-md);width:var(--modus-wc-line-height-md)}[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-md,[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-md{height:var(--modus-wc-line-height-lg);max-height:var(--modus-wc-line-height-lg);min-height:var(--modus-wc-line-height-lg);width:var(--modus-wc-line-height-lg)}[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-lg,[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-lg{height:var(--modus-wc-line-height-xl);max-height:var(--modus-wc-line-height-xl);min-height:var(--modus-wc-line-height-xl);width:var(--modus-wc-line-height-xl)}[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled){color:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled).modus-wc-btn-active{background-color:var(--modus-wc-color-blue-pale);color:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled):hover:not(.modus-wc-btn-active){background-color:var(--modus-wc-color-gray-0)}[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled){color:var(--modus-wc-color-gray-2)}[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled).modus-wc-btn-active{background-color:var(--modus-wc-color-highlight-blue);color:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled):hover:not(.modus-wc-btn-active){background-color:var(--modus-wc-color-gray-8)}";export{u as modus_wc_pagination}