@trimble-oss/moduswebcomponents/modus-wc/p-d30e03ea.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{h as o,r,c as s,H as c,g as a}from"./p-D5XAQERj.js";import{C as e}from"./p-CXrnmYJx.js";import{i as t}from"./p-DlW2F98o.js";const l=({className:r})=>o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-solid mi-alert ${r||""}`,viewBox:"0 0 24 24"},o("path",{d:"M22.87 19.04 13.72 3c-.76-1.33-2.68-1.33-3.44 0L1.13 19.04C.38 20.36 1.33 22 2.85 22h18.3c1.52 0 2.47-1.64 1.72-2.96m-11.92-9.9c0-.63.45-1.15 1.06-1.15s1.06.51 1.06 1.15c0 .04-.01.12-.01.14l-.39 5.04c-.04.44-.3.7-.66.7s-.62-.26-.66-.7l-.4-5.04zm1.06 9.89c-.67 0-1.21-.54-1.21-1.21s.54-1.19 1.21-1.19 1.21.54 1.21 1.19-.54 1.21-1.21 1.21"})),d=({className:r})=>o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-solid mi-check-circle ${r||""}`,viewBox:"0 0 24 24"},o("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m5.56 7.74-6.39 6.4a1 1 0 0 1-1.42-.01l-3.3-3.34-.01-.01a.993.993 0 0 1 .01-1.4.996.996 0 0 1 1.41 0l2.6 2.62 5.68-5.69a.996.996 0 0 1 1.41 0v.02h.01c.39.39.39 1.02 0 1.41"})),m=({className:r})=>o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-solid mi-info ${r||""}`,viewBox:"0 0 24 24"},o("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1.06 14.15c0 .55-.45 1-1 1s-1-.45-1-1v-4.14c0-.55.45-1 1-1s1 .45 1 1zm-1-7.11c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1"})),i=({className:r})=>o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-solid mi-warning ${r||""}`,viewBox:"0 0 24 24"},o("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-1.06 5.63c0-.63.45-1.15 1.06-1.15s1.06.51 1.06 1.15c0 .04-.01.12-.01.14l-.39 5.04c-.04.44-.3.7-.66.7s-.62-.26-.66-.7l-.4-5.04zM12 17.52c-.67 0-1.21-.54-1.21-1.21s.54-1.19 1.21-1.19 1.21.54 1.21 1.19-.54 1.21-1.21 1.21"})),u=class{constructor(o){r(this,o),this.dismissClick=s(this,"dismissClick"),this.inheritedAttributes={},this.customClass="",this.dismissible=!1,this.variant="info",this.role="status"}componentWillLoad(){this.inheritedAttributes=t(this.el,["role"])}getClasses(){const o=["modus-wc-alert"],r=(({variant:o})=>{let r="";return o&&(r=`${r} modus-wc-alert-${o}`),r.trim()})({variant:this.variant});return r&&o.push(r),this.customClass&&o.push(this.customClass),o.join(" ")}getLeadingIcon(){if(this.icon)return o("modus-wc-icon",{"custom-class":"modus-wc-alert-icon",name:this.icon});switch(this.variant){case"error":return o(l,{className:"modus-wc-alert-icon"});case"success":return o(d,{className:"modus-wc-alert-icon"});case"warning":return o(i,{className:"modus-wc-alert-icon"});default:return o(m,{className:"modus-wc-alert-icon"})}}delayChanged(o){clearTimeout(this.timerId),this.timerId=setTimeout((()=>{this.dismissElement()}),o)}dismissElement(){this.dismissClick.emit(),this.el.remove()}componentDidLoad(){this.delay&&this.delay>0&&(this.timerId=setTimeout((()=>{this.dismissElement()}),this.delay))}disconnectedCallback(){clearTimeout(this.timerId)}elementKeyupHandler(o){if("Escape"===o.code){if(!this.dismissible)return;this.dismissElement()}}render(){return o(c,{key:"53bf0c060956aec86bbb41ff9c5367ae3757070d"},o("div",Object.assign({key:"9932f1c3e714eaa85c4cfaea462f22bac6cfe622",class:this.getClasses(),role:this.role},this.inheritedAttributes),this.getLeadingIcon(),o("div",{key:"6514a604258e9190708d7eabfabe1c6ed2449218"},o("div",{key:"9535218f2a5252d70f5b6008489c04c75e2982d2",class:"title"},this.alertTitle),this.alertDescription&&o("div",{key:"c412b0f7735aac130ad8ca647ab3af07cf536c10",class:"description"},this.alertDescription),!this.alertTitle&&!this.alertDescription&&o("slot",{key:"7796cb5d4f7e9c6141618db4d8db91053dd1cea1",name:"content"})),o("slot",{key:"2b2722869563a768fe537f37b077377fb98b45b4",name:"button"}),this.dismissible&&o("modus-wc-button",{key:"5f913216d03ae975c6468f0f5ff5c311c812d92e","aria-label":"notification button",color:"secondary",size:"sm",slot:"button",variant:"borderless",onButtonClick:()=>this.dismissElement()},o(e,{key:"0aa4e8db4057b286dc299d0376b0443486fae761",className:"modus-wc-alert-close-icon"}))))}get el(){return a(this)}static get watchers(){return{delay:["delayChanged"]}}};u.style="modus-wc-alert .modus-wc-alert{align-content:center;border-left-width:var(--modus-wc-border-width-xl);border-radius:var(--modus-wc-border-radius-lg)}modus-wc-alert .modus-wc-alert .title{font-size:var(--modus-wc-font-size-md);font-weight:var(--modus-wc-font-weight-bold)}modus-wc-alert .modus-wc-alert .description{font-size:var(--modus-wc-font-size-md)}modus-wc-alert .modus-wc-alert.modus-wc-alert-info{background-color:color-mix(in sRGB, var(--modus-wc-color-primary) 15%, transparent);border-color:var(--modus-wc-color-highlight-blue);color:var(--modus-wc-color-base-content)}modus-wc-alert .modus-wc-alert.modus-wc-alert-error{background-color:color-mix(in sRGB, var(--modus-wc-color-error) 20%, transparent);border-color:var(--modus-wc-color-error);color:var(--modus-wc-error-content)}modus-wc-alert .modus-wc-alert.modus-wc-alert-success{background-color:color-mix(in sRGB, var(--modus-wc-color-success) 20%, transparent);border-color:var(--modus-wc-color-success);color:var(--modus-wc-success-content)}modus-wc-alert .modus-wc-alert.modus-wc-alert-warning{background-color:color-mix(in sRGB, var(--modus-wc-color-warning) 20%, transparent);border-color:var(--modus-wc-color-warning);color:var(--modus-wc-color-base-content)}modus-wc-alert .modus-wc-alert .modus-wc-alert-close-icon,modus-wc-alert .modus-wc-alert .modus-wc-alert-icon{height:1.5rem;width:1.5rem}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert,[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert{border-left-width:12px;border-radius:var(--modus-wc-border-radius-md);gap:var(--modus-wc-spacing-sm);min-height:56px;padding-bottom:var(--modus-wc-spacing-sm);padding-top:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert{color:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-info{background-color:var(--modus-wc-color-blue-pale);border-color:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-info .modus-wc-alert-icon{color:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-error{background-color:var(--modus-wc-color-red-pale);border-color:var(--modus-wc-color-red)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-error .modus-wc-alert-icon{color:var(--modus-wc-color-red)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-success{background-color:var(--modus-wc-color-green-pale);border-color:var(--modus-wc-color-green)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-success .modus-wc-alert-icon{color:var(--modus-wc-color-green)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning{background-color:var(--modus-wc-color-yellow-pale);border-color:var(--modus-wc-color-yellow-dark)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning .modus-wc-alert-icon{color:var(--modus-wc-color-yellow-dark)}[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-info{background-color:color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 50%, transparent);border-color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-error{background-color:color-mix(in sRGB, var(--modus-wc-color-red) 50%, transparent);border-color:var(--modus-wc-color-red);color:var(--modus-wc-error-content)}[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-success{background-color:color-mix(in sRGB, var(--modus-wc-color-green) 50%, transparent);border-color:var(--modus-wc-color-green);color:var(--modus-wc-success-content)}[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning{background-color:color-mix(in sRGB, var(--modus-wc-color-yellow-dark) 50%, transparent);border-color:var(--modus-wc-color-yellow-dark);color:var(--modus-wc-color-white)}";export{u as modus_wc_alert}