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 6.25 kB
import{h as c,r as s,e,g as o}from"./p-C1-Dpkp7.js";import{i as d}from"./p-DJ2rBB6r.js";import{h as a}from"./p-tWS3Egrk.js";const u=({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"})),i=({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"})),r=class{constructor(c){s(this,c),this.inheritedAttributes={},this.customClass="",this.icon="",this.message="",this.size="md"}componentWillLoad(){a(this.el),this.inheritedAttributes=d(this.el)}getClasses(){const c=["modus-wc-input-feedback"],s=(({level:c,size:s})=>{let e="";return c&&(e=`${e} modus-wc-input-feedback--${c}`),s&&(e=`${e} modus-wc-input-feedback--${s}`),e.trim()})({level:this.level,size:this.size});return s&&c.push(s),this.customClass&&c.push(this.customClass),c.join(" ")}getPresetIcon(){switch(this.level){case"error":case"warning":return c(t,{className:"modus-wc-input-feedback-icon"});case"info":return c(i,{className:"modus-wc-input-feedback-icon"});case"success":return c(u,{className:"modus-wc-input-feedback-icon"})}}render(){return c(e,{key:"8e3ab4b2d6c3b412dfc4e3a0b2250c9bd35af2ef"},c("div",Object.assign({key:"d0f98f24f7f5998395d9e5b48206b9412d5a67ba",class:this.getClasses()},this.inheritedAttributes),this.icon?c("modus-wc-icon",{decorative:!0,name:this.icon}):this.getPresetIcon(),c("span",{key:"997c37332c46924cb7343b9795e6ead938b759f4"},this.message)))}get el(){return o(this)}};r.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)}";export{r as modus_wc_input_feedback}