@trimble-oss/moduswebcomponents/modus-wc/p-9cbd8da2.entry.js

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

import{r as s,c as o,h as c,H as t,g as a}from"./p-dzXW86AR.js";import{i}from"./p-B5lx0dpl.js";const e=class{constructor(c){s(this,c),this.inputBlur=o(this,"inputBlur"),this.inputChange=o(this,"inputChange"),this.inputFocus=o(this,"inputFocus"),this.inheritedAttributes={},this.customClass="",this.disabled=!1,this.indeterminate=!1,this.name="",this.required=!1,this.size="md",this.value=!1,this.handleBlur=s=>{this.inputBlur.emit(s)},this.handleFocus=s=>{this.inputFocus.emit(s)},this.handleInput=s=>{this.inputChange.emit(s)}}componentDidRender(){const s=this.el.querySelector('input[type="checkbox"]');s&&(s.indeterminate=this.indeterminate)}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel="Checkbox"),this.inheritedAttributes=i(this.el)}getClasses(){const s=["modus-wc-checkbox"],o=(({size:s})=>{let o="";return s&&(o=`${o} modus-wc-checkbox-${s}`),o.trim()})({size:this.size});return o&&s.push(o),this.customClass&&s.push(this.customClass),s.join(" ")}render(){return c(t,{key:"98750606924759916a598db5e6befc7098734119",class:"modus-wc-checkbox-host"},c("input",Object.assign({key:"be35fe01388db0cc0e270770d6716697d41b6b54","aria-checked":this.indeterminate?"mixed":this.value,"aria-disabled":this.disabled,checked:this.value,class:this.getClasses(),disabled:this.disabled,id:this.inputId,name:this.name,onBlur:this.handleBlur,onFocus:this.handleFocus,onInput:this.handleInput,required:this.required,tabIndex:this.inputTabIndex,type:"checkbox"},this.inheritedAttributes)),this.label&&c("modus-wc-input-label",{key:"00123acd4cbc9e7a3c89e763f67b9c57381b68d0",forId:this.inputId,labelText:this.label,required:this.required,size:this.size}))}get el(){return a(this)}};e.style="modus-wc-checkbox.modus-wc-checkbox-host{align-items:center;display:flex}modus-wc-checkbox.modus-wc-checkbox-host .modus-wc-input-label{font-weight:var(--modus-wc-font-weight-normal);padding-inline-start:var(--modus-wc-spacing-md)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox{--chkbg:var(--modus-wc-color-highlight-blue);--fallback-bc:var(--modus-wc-color-gray-4);--chkfg:var(--modus-wc-color-white);border-radius:var(--modus-wc-border-radius-sm);border-width:var(--modus-wc-border-width-sm)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-sm,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-sm{height:0.75rem;width:0.75rem}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-md,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-md{height:1rem;width:1rem}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-lg,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-lg{height:1.25rem;width:1.25rem}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:checked,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:checked{--fallback-bc:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:checked:hover,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:checked:hover{--chkbg:var(--modus-wc-color-blue-light);--fallback-bc:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:indeterminate,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:indeterminate{--fallback-bc:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:disabled,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:disabled{opacity:0.3}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:disabled:not(:checked),[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:disabled:not(:checked){background-color:unset;border:var(--modus-wc-border-width-sm) solid var(--modus-wc-color-gray-4)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:focus,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:focus{outline-color:color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 75%, transparent)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:hover,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:hover{--fallback-bc:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox{--chkbg:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:checked{--fallback-bc:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:checked:hover{--chkbg:var(--modus-wc-color-trimble-blue);--fallback-bc:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:indeterminate{--fallback-bc:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:focus{outline-color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:hover{--fallback-bc:var(--modus-wc-color-blue-light)}";const d=({className:s})=>c("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-chevron-double-left ${s||""}`,viewBox:"0 0 24 24"},c("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"})),m=({className:s})=>c("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-chevron-double-right ${s||""}`,viewBox:"0 0 24 24"},c("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"})),h=({className:s})=>c("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-chevron-left ${s||""}`,viewBox:"0 0 24 24"},c("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"})),u=({className:s})=>c("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-chevron-right ${s||""}`,viewBox:"0 0 24 24"},c("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"})),l=class{constructor(c){s(this,c),this.pageChange=o(this,"pageChange"),this.inheritedAttributes={},this.maxVisibleButtons=5,this.count=1,this.customClass="",this.page=1,this.size="md",this.visiblePages=[],this.handlePageClick=s=>{s===this.page||s<1||s>this.count||(this.pageChange.emit({newPage:s,prevPage:this.page}),this.page=s)}}calculateVisiblePages(){const s=[],o=Math.floor(this.maxVisibleButtons/2);let c=Math.max(1,this.page-o),t=Math.min(this.count,c+this.maxVisibleButtons-1);t-c+1<this.maxVisibleButtons&&(c=Math.max(1,t-this.maxVisibleButtons+1));for(let o=c;o<=t;o++)s.push(o);this.visiblePages=s}componentWillLoad(){this.calculateVisiblePages(),this.inheritedAttributes=i(this.el)}getClasses(){const s=["modus-wc-pagination-btn","modus-wc-join-item","modus-wc-btn","modus-wc-btn-square"],o=["modus-wc-pagination","modus-wc-join"];this.customClass&&o.push(this.customClass);const c=o.join(" "),t=(({size:s})=>{let o="";return s&&(o=`${o} modus-wc-btn-${s}`),o.trim()})({size:this.size});return t&&s.push(t),{paginationClasses:c,buttonClasses:s.join(" ")}}render(){var s,o,t,a,i;const{paginationClasses:e,buttonClasses:l}=this.getClasses(),n=1===this.page,r=this.page===this.count,w=this.count>this.maxVisibleButtons,b={firstPage:(null===(s=this.ariaLabelValues)||void 0===s?void 0:s.firstPage)||"First page",lastPage:(null===(o=this.ariaLabelValues)||void 0===o?void 0:o.lastPage)||"Last page",nextPage:(null===(t=this.ariaLabelValues)||void 0===t?void 0:t.nextPage)||"Next page",page:(null===(a=this.ariaLabelValues)||void 0===a?void 0:a.page)||"Page {0}",previousPage:(null===(i=this.ariaLabelValues)||void 0===i?void 0:i.previousPage)||"Previous page"};return c("div",Object.assign({key:"a98ee63c53970988224d69574f8caef0a18e83c8",class:e},this.inheritedAttributes),w&&c("button",{key:"60f632a86371057be72603418ff9484579002849","aria-label":b.firstPage,class:l,disabled:n,onClick:()=>this.handlePageClick(1)},c(d,{key:"28d4d49215b91ce731bc5995a63fdacc64508b85",className:"modus-wc-pagination-icon"})),c("button",{key:"964764254784345bd0631658c2d9a1b76714c93d","aria-label":this.prevButtonText?void 0:b.previousPage,class:`${l} ${this.prevButtonText?"modus-wc-pagination-button-text":""}`,disabled:n,onClick:()=>this.handlePageClick(this.page-1)},this.prevButtonText?c("span",null,this.prevButtonText):c(h,{className:"modus-wc-pagination-icon"})),this.visiblePages.map((s=>c("button",{"aria-current":this.page===s?"page":void 0,"aria-label":b.page.replace("{0}",s.toString()),class:`${l} ${this.page===s?"modus-wc-btn-active":""}`,onClick:()=>this.handlePageClick(s)},s))),c("button",{key:"f4554c62d1e20b95e324b73b223a1a6b2ad1eaf2","aria-label":this.nextButtonText?void 0:b.nextPage,class:`${l} ${this.nextButtonText?"modus-wc-pagination-button-text":""}`,disabled:r,onClick:()=>this.handlePageClick(this.page+1)},this.nextButtonText?c("span",null,this.nextButtonText):c(u,{className:"modus-wc-pagination-icon"})),w&&c("button",{key:"f725c5b939a5340637304c34ff260c51a6cbd5cd","aria-label":b.lastPage,class:l,disabled:r,onClick:()=>this.handlePageClick(this.count)},c(m,{key:"b133e57a7633ed14304db9bd3c89c50f98cb33d2",className:"modus-wc-pagination-icon"})))}get el(){return a(this)}static get watchers(){return{page:["calculateVisiblePages"],count:["calculateVisiblePages"]}}};l.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.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);color:var(--modus-wc-color-primary-content)}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)}";const n=class{constructor(c){s(this,c),this.inputBlur=o(this,"inputBlur"),this.inputChange=o(this,"inputChange"),this.inputFocus=o(this,"inputFocus"),this.inheritedAttributes={},this.bordered=!0,this.customClass="",this.disabled=!1,this.options=[],this.required=!1,this.size="md",this.value="",this.handleBlur=s=>{this.inputBlur.emit(s)},this.handleFocus=s=>{this.inputFocus.emit(s)},this.handleInput=s=>{this.inputChange.emit(s)}}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel="Select"),this.inheritedAttributes=i(this.el)}getClasses(){const s=["modus-wc-select","modus-wc-w-full"],o=(({bordered:s,feedback:o,size:c})=>{let t="";return s&&(t=`${t} modus-wc-select-bordered`),o&&(t=`${t} modus-wc-input--${o.level}`),c&&(t=`${t} modus-wc-select-${c}`),t.trim()})({bordered:this.bordered,feedback:this.feedback,size:this.size});return o&&s.push(o),this.customClass&&s.push(this.customClass),s.join(" ")}render(){return c(t,{key:"fe16ac943cb0b5ef7983890d68335804a92362b8"},this.label&&c("modus-wc-input-label",{key:"3874531fe70334eb7b95a6d0ee5c37ddf23148d7",forId:this.inputId,labelText:this.label,required:this.required,size:this.size}),c("select",Object.assign({key:"b21f3b652da487383197f0b2872e098177690ae6",class:this.getClasses(),disabled:this.disabled,id:this.inputId,name:this.name,onBlur:this.handleBlur,onFocus:this.handleFocus,onInput:this.handleInput,required:this.required,tabindex:this.inputTabIndex},this.inheritedAttributes),this.options.map((s=>c("option",{disabled:s.disabled,selected:s.value===this.value,value:s.value},s.label)))),this.feedback&&c("modus-wc-input-feedback",{key:"2827a99a1e016538434f13a759fe64e7f205b68a",level:this.feedback.level,message:this.feedback.message,size:this.size}))}get el(){return a(this)}};n.style=".modus-wc-input--error{border-color:var(--modus-wc-color-error) !important}.modus-wc-input--info{border-color:var(--modus-wc-color-info) !important}.modus-wc-input--success{border-color:var(--modus-wc-color-success) !important}.modus-wc-input--warning{border-color:var(--modus-wc-color-warning) !important}modus-wc-select .modus-wc-input-label{padding-bottom:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select,[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select{border-radius:var(--modus-wc-border-radius-md)}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select.modus-wc-select-sm,[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select.modus-wc-select-sm{font-size:var(--modus-wc-font-size-sm);height:var(--modus-wc-input-height-sm);line-height:var(--modus-wc-input-height-sm);min-height:var(--modus-wc-input-height-sm)}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select.modus-wc-select-md,[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select.modus-wc-select-md{font-size:var(--modus-wc-font-size-md);height:var(--modus-wc-input-height-md);line-height:var(--modus-wc-input-height-md);min-height:var(--modus-wc-input-height-md)}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select.modus-wc-select-lg,[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select.modus-wc-select-lg{font-size:var(--modus-wc-font-size-lg);height:var(--modus-wc-input-height-lg);line-height:var(--modus-wc-font-size-lg);min-height:var(--modus-wc-font-size-lg)}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select:focus,[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select:focus{border-color:var(--modus-wc-color-blue-light);border-width:var(--modus-wc-border-width-sm);box-shadow:none;outline:none}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select.modus-wc-select-bordered:not(:disabled):not(:focus){border-color:var(--modus-wc-color-gray-6)}[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select:focus{border-color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select,[data-theme=modus-modern-dark] modus-wc-select .modus-wc-select{background-color:var(--modus-wc-color-gray-10)}";export{e as modus_wc_checkbox,l as modus_wc_pagination,n as modus_wc_select}