@trimble-oss/moduswebcomponents/modus-wc/p-56a7db55.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-dzXW86AR.js";import{C as e}from"./p-DRdpe2Q2.js";import{i as l}from"./p-B5lx0dpl.js";const t=({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"})),u=({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"})),i=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=l(this.el)}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(t,{className:"modus-wc-alert-icon"});case"success":return o(d,{className:"modus-wc-alert-icon"});case"warning":return o(u,{className:"modus-wc-alert-icon"});default:return o(m,{className:"modus-wc-alert-icon"})}}dismissElement(){this.dismissClick.emit(),this.el.remove()}elementKeyupHandler(o){if("Escape"===o.code){if(!this.dismissible)return;this.dismissElement()}}render(){return o(c,{key:"ff58a84ce4f9b8759861ede4b00693a58eb4b11c"},o("div",Object.assign({key:"51c9b14f4e6213656390d901a52dbd19ad2b4fdb",class:this.getClasses(),role:"alert"},this.inheritedAttributes),this.getLeadingIcon(),o("div",{key:"93322c4734b330ffefa3ffdfab3ad781f8df8abd"},o("div",{key:"1ef6a0fa862599050b742573a0c8d83ed19b3862",class:"title"},this.alertTitle),this.alertDescription&&o("div",{key:"771d7359f9f4a9c8c2b640528cbba5b7153d3342",class:"description"},this.alertDescription),!this.alertTitle&&!this.alertDescription&&o("slot",{key:"5b639f9b87e45c269a774563eed8459664597926",name:"content"})),o("slot",{key:"e5b2e44765cd18a55af6c4a2f7b8caf78b5ca2dd",name:"button"}),this.dismissible&&o("modus-wc-button",{key:"3b4f1a20f02594da0723aaab05870663d40af477","aria-label":"notification button",color:"secondary",size:"sm",slot:"button",variant:"borderless",onButtonClick:()=>this.dismissElement()},o(e,{key:"fe49717c6fc1325cf6e5a954f162184b272a723e",className:"modus-wc-alert-close-icon"}))))}get el(){return a(this)}};i.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{i as modus_wc_alert}