UNPKG

@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 9.68 kB
import{r as s,h as c,H as e,g as o}from"./p-D5XAQERj.js";import{i as d}from"./p-DlW2F98o.js";const i=class{constructor(c){s(this,c),this.inheritedAttributes={},this.customClass="",this.decorative=!0,this.size="md"}componentWillLoad(){this.decorative||this.el.ariaLabel||(this.el.ariaLabel=`${this.name} icon`),this.inheritedAttributes=d(this.el)}getClasses(){const s=["modus-wc-icon modus-icons"];return s.push(`modus-wc-icon--${this.size}`),this.customClass&&s.push(this.customClass),s.join(" ")}render(){const s=this.decorative?void 0:"img";return c(e,{key:"81718a9ea5b64625ca3b89ddabe0be8f2f31df73",class:"modus-wc-flex modus-wc-items-center"},c("i",Object.assign({key:"e384b6a3a1bc388cb16e7fea0b34a5e9c6670be7","aria-hidden":this.decorative?"true":null,"aria-label":this.decorative?null:this.el.ariaLabel,class:this.getClasses(),role:s,tabindex:-1},this.inheritedAttributes),this.name))}get el(){return o(this)}};i.style="modus-wc-icon .modus-icons.modus-wc-icon--xs{font-size:1rem}modus-wc-icon .modus-icons.modus-wc-icon--sm{font-size:1.25rem}modus-wc-icon .modus-icons.modus-wc-icon--md{font-size:1.5rem}modus-wc-icon .modus-icons.modus-wc-icon--lg{font-size:2rem}modus-wc-icon .modus-icons.modus-wc-icon--xl{font-size:4rem}modus-wc-icon i::before,modus-wc-icon i::after{font-family:inherit !important}";const a=({className:s})=>c("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-outline mi-check-circle ${s||""}`,viewBox:"0 0 24 24"},c("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m5.04-11.28V8.7c-.4-.39-1.03-.39-1.42 0L10.33 14l-2.6-2.62a.996.996 0 0 0-1.41 0 .984.984 0 0 0-.01 1.4l.01.01 3.3 3.34a1 1 0 0 0 1.42.01l6-6.01a.996.996 0 0 0 0-1.41"})),u=({className:s})=>c("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-outline mi-info ${s||""}`,viewBox:"0 0 24 24"},c("path",{d:"M12 9.03c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1M12 22c5.52 0 10-4.48 10-10S17.52 2 12 2 2 6.48 2 12s4.48 10 10 10m0-18c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0 13c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1"})),t=({className:s})=>c("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-outline mi-warning ${s||""}`,viewBox:"0 0 24 24"},c("path",{d:"M12 15.12c-.67 0-1.21.54-1.21 1.19s.54 1.21 1.21 1.21 1.21-.54 1.21-1.21-.54-1.19-1.21-1.19m0-1.61c.36 0 .62-.26.66-.7l.39-5.04s.01-.1.01-.14c0-.63-.45-1.15-1.06-1.15s-1.06.51-1.06 1.15v.14l.4 5.04c.04.44.28.7.66.7M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"})),n=class{constructor(c){s(this,c),this.inheritedAttributes={},this.customClass="",this.icon="",this.message="",this.size="md"}componentWillLoad(){this.inheritedAttributes=d(this.el)}getClasses(){const s=["modus-wc-input-feedback"],c=(({level:s,size:c})=>{let e="";return s&&(e=`${e} modus-wc-input-feedback--${s}`),c&&(e=`${e} modus-wc-input-feedback--${c}`),e.trim()})({level:this.level,size:this.size});return c&&s.push(c),this.customClass&&s.push(this.customClass),s.join(" ")}getPresetIcon(){switch(this.level){case"error":case"warning":return c(t,{className:"modus-wc-input-feedback-icon"});case"info":return c(u,{className:"modus-wc-input-feedback-icon"});case"success":return c(a,{className:"modus-wc-input-feedback-icon"})}}render(){return c(e,{key:"ded54b9ce471063dc50ed10bb58ddc5567e9d6fa"},c("div",Object.assign({key:"adfa707815c57e662b7875c889a1ecd442017040",class:this.getClasses()},this.inheritedAttributes),this.icon?c("modus-wc-icon",{decorative:!0,name:this.icon}):this.getPresetIcon(),c("span",{key:"2a0da0ab5ff2fd9f46a26ddfe639b867041b0164"},this.message)))}get el(){return o(this)}};n.style="modus-wc-input-feedback .modus-wc-input-feedback{align-items:center;border-radius:0 0 var(--modus-wc-border-radius-sm) var(--modus-wc-border-radius-sm);display:flex;font-weight:var(--modus-wc-font-weight-semibold);gap:var(--modus-wc-spacing-sm);margin-top:var(--modus-wc-spacing-sm);padding:var(--modus-wc-spacing-xs) 0}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--sm{font-size:var(--modus-wc-font-size-xs)}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--sm .modus-wc-input-feedback-icon{height:var(--modus-wc-font-size-lg);width:var(--modus-wc-font-size-lg)}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--md{font-size:var(--modus-wc-font-size-sm)}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--md .modus-wc-input-feedback-icon{height:var(--modus-wc-font-size-xl);width:var(--modus-wc-font-size-xl)}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--lg{font-size:var(--modus-wc-font-size-md)}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--lg .modus-wc-input-feedback-icon{height:var(--modus-wc-font-size-2xl);width:var(--modus-wc-font-size-2xl)}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback{background-color:var(--modus-wc-color-base-100);border-radius:var(--modus-wc-border-radius-lg);padding:var(--modus-wc-spacing-sm)}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--error{color:var(--modus-wc-color-error)}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--info{color:var(--modus-wc-color-info)}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--success{color:var(--modus-wc-color-success)}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--warning{color:var(--modus-wc-color-warning)}[data-theme=modus-classic-light] modus-wc-input-feedback .modus-wc-input-feedback{border-radius:0;margin-top:0;padding:var(--modus-wc-spacing-xs) 0}[data-theme=modus-classic-light] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--error{background-color:transparent;color:var(--modus-wc-color-red)}[data-theme=modus-classic-light] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--info{background-color:transparent;color:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--success{background-color:transparent;color:var(--modus-wc-color-green-dark)}[data-theme=modus-classic-light] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--warning{background-color:transparent;color:var(--modus-wc-color-yellow-dark)}[data-theme=modus-classic-dark] modus-wc-input-feedback .modus-wc-input-feedback{border-radius:0;color:var(--modus-wc-color-white);margin-top:0;padding:var(--modus-wc-spacing-xs) 0}[data-theme=modus-classic-dark] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--error{background-color:var(--modus-wc-color-red)}[data-theme=modus-classic-dark] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--info{background-color:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-dark] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--success{background-color:var(--modus-wc-color-green-dark)}[data-theme=modus-classic-dark] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--warning{background-color:var(--modus-wc-color-yellow-dark);color:var(--modus-wc-color-black)}";const m=class{constructor(c){s(this,c),this.inheritedAttributes={},this.customClass="",this.required=!1,this.size="md",this.getClasses=()=>{const s=["modus-wc-input-label"];return this.size&&s.push(`modus-wc-input-label-size-${this.size}`),this.customClass&&s.push(this.customClass),s.join(" ")}}componentWillLoad(){this.inheritedAttributes=d(this.el)}render(){return c(e,{key:"62b2bb840ab521f43598060ed9d3a419c52c862e",class:"modus-wc-input-label-host"},c("label",Object.assign({key:"792891bba9eafad34ca5eb8eeba4398ae03acd2b",class:this.getClasses(),htmlFor:this.forId},this.inheritedAttributes),this.labelText,this.required&&c("span",{key:"6bec08b26f903eaeada8ae9630777b735f38af24","aria-hidden":"true",class:"required-indicator"}," *"),this.subLabelText&&c("div",{key:"2869fbd51cf41a1545be648ae99b37f19b44ef54",class:"modus-wc-input-label-sublabel"},this.subLabelText),c("slot",{key:"bff8002fc67310c3ee3c8ef781699d9f9ea3f4fb"})))}get el(){return o(this)}};m.style="modus-wc-input-label.modus-wc-input-label-host{align-items:center;display:flex}modus-wc-input-label .modus-wc-input-label{font-weight:var(--modus-wc-font-weight-bold)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-sm{font-size:var(--modus-wc-font-size-xs)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-sm .modus-wc-input-label-sublabel{font-size:var(--modus-wc-font-size-2xs)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-md{font-size:var(--modus-wc-font-size-sm)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-md .modus-wc-input-label-sublabel{font-size:var(--modus-wc-font-size-xs)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-lg{font-size:var(--modus-wc-font-size-md)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-lg .modus-wc-input-label-sublabel{font-size:var(--modus-wc-font-size-sm)}modus-wc-input-label .modus-wc-input-label .required-indicator{color:var(--modus-wc-color-error)}[data-theme=modus-classic-light] modus-wc-input-label .modus-wc-input-label{color:var(--modus-wc-color-gray-8)}[data-theme=modus-classic-dark] modus-wc-input-label .modus-wc-input-label{color:var(--modus-wc-color-gray-2)}";export{i as modus_wc_icon,n as modus_wc_input_feedback,m as modus_wc_input_label}