@trimble-oss/moduswebcomponents/modus-wc/p-6117bae5.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,h as o,H as t,g as a}from"./p-D5XAQERj.js";import{i}from"./p-DlW2F98o.js";const e=class{constructor(o){s(this,o),this.inputBlur=c(this,"inputBlur"),this.inputChange=c(this,"inputChange"),this.inputFocus=c(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"],c=(({size:s})=>{let c="";return s&&(c=`${c} modus-wc-checkbox-${s}`),c.trim()})({size:this.size});return c&&s.push(c),this.customClass&&s.push(this.customClass),s.join(" ")}render(){return o(t,{key:"2c42aefb37c871d59894fce4b06d5f6a7e89fd6e",class:"modus-wc-checkbox-host"},o("input",Object.assign({key:"7a15adf0ff6e852ab15f4223f3a8910b8cc8e62d","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&&o("modus-wc-input-label",{key:"210f63d3ae893ca446b9b52199cc4e22832767af",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})=>o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-chevron-double-left ${s||""}`,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"})),m=({className:s})=>o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-chevron-double-right ${s||""}`,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"})),h=({className:s})=>o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-chevron-left ${s||""}`,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"})),u=({className:s})=>o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-chevron-right ${s||""}`,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"})),l=class{constructor(o){s(this,o),this.pageChange=c(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=[],c=Math.floor(this.maxVisibleButtons/2);let o=Math.max(1,this.page-c),t=Math.min(this.count,o+this.maxVisibleButtons-1);t-o+1<this.maxVisibleButtons&&(o=Math.max(1,t-this.maxVisibleButtons+1));for(let c=o;c<=t;c++)s.push(c);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"],c=["modus-wc-pagination","modus-wc-join"];this.customClass&&c.push(this.customClass);const o=c.join(" "),t=(({size:s})=>{let c="";return s&&(c=`${c} modus-wc-btn-${s}`),c.trim()})({size:this.size});return t&&s.push(t),{paginationClasses:o,buttonClasses:s.join(" ")}}render(){var s,c,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===(c=this.ariaLabelValues)||void 0===c?void 0:c.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 o("div",Object.assign({key:"28ca82b0a3acdde2451ea21db96ed508c2416b2c",class:e},this.inheritedAttributes),w&&o("button",{key:"51579b0eb900cb21bca2cbb3dcabcf544aa3601c","aria-label":b.firstPage,class:l,disabled:n,onClick:()=>this.handlePageClick(1)},o(d,{key:"3d13ab7871e254a83decd24928e291d5ffd03450",className:"modus-wc-pagination-icon"})),o("button",{key:"43309c62540f30f043eb65ba25f286eb1aef238e","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?o("span",null,this.prevButtonText):o(h,{className:"modus-wc-pagination-icon"})),this.visiblePages.map((s=>o("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))),o("button",{key:"79e14ac8d4e2b3db06a7fdbdbd2bc777ced99fb4","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?o("span",null,this.nextButtonText):o(u,{className:"modus-wc-pagination-icon"})),w&&o("button",{key:"da4ca2113ab15b826aeb1fc1f85d84d0e7c09819","aria-label":b.lastPage,class:l,disabled:r,onClick:()=>this.handlePageClick(this.count)},o(m,{key:"b116319cd57ce4863213dbdba4b0cade5c64de5e",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(o){s(this,o),this.inputBlur=c(this,"inputBlur"),this.inputChange=c(this,"inputChange"),this.inputFocus=c(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"],c=(({bordered:s,feedback:c,size:o})=>{let t="";return s&&(t=`${t} modus-wc-select-bordered`),c&&(t=`${t} modus-wc-input--${c.level}`),o&&(t=`${t} modus-wc-select-${o}`),t.trim()})({bordered:this.bordered,feedback:this.feedback,size:this.size});return c&&s.push(c),this.customClass&&s.push(this.customClass),s.join(" ")}render(){return o(t,{key:"105f4e06d3fce8ae7c4c3b663613004a275a48b0"},this.label&&o("modus-wc-input-label",{key:"87acfb2056bf7fa24460219c7b91d8bdb7413b5b",forId:this.inputId,labelText:this.label,required:this.required,size:this.size}),o("select",Object.assign({key:"1a2ca389c24128654b6857ad076f01481b3777a3",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=>o("option",{disabled:s.disabled,selected:s.value===this.value,value:s.value},s.label)))),this.feedback&&o("modus-wc-input-feedback",{key:"aa662901e740e13d0504c46eda4d7db63ebc792d",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}