@trimble-oss/moduswebcomponents/modus-wc/p-7c7f13fc.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 o,c as r,h as c,H as a,g as s}from"./p-D_4hbGjA.js";import{i as e}from"./p-BLBSdonk.js";const t=class{constructor(c){o(this,c),this.dismissClick=r(this,"dismissClick"),this.inheritedAttributes={},this.customClass="",this.dismissible=!1,this.variant="info"}componentWillLoad(){this.el.hasAttribute("role")||this.el.setAttribute("role","status"),this.inheritedAttributes=e(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 c("modus-wc-icon",{"custom-class":"modus-wc-alert-icon",name:this.icon,variant:"outlined"});switch(this.variant){case"error":return c("modus-wc-icon",{"custom-class":"modus-wc-alert-icon",name:"alert",variant:"outlined"});case"success":return c("modus-wc-icon",{"custom-class":"modus-wc-alert-icon",name:"check_circle"});case"warning":return c("modus-wc-icon",{"custom-class":"modus-wc-alert-icon",name:"warning",variant:"outlined"});default:return c("modus-wc-icon",{"custom-class":"modus-wc-alert-icon",name:"info",variant:"outlined"})}}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 c(a,{key:"4fba2bccde6a15c0d6431a1c593ac4b6a3de9a2c"},c("div",Object.assign({key:"6ecb7d3d6643b3323da231775595447812faacfa",class:this.getClasses()},this.inheritedAttributes),this.getLeadingIcon(),c("div",{key:"7ba3c57d00f326da4be078db4920960128c8159d"},c("div",{key:"69e1c5848fb512f65320abf87818213f5fda0127",class:"title"},this.alertTitle),this.alertDescription&&c("div",{key:"053789b7eef0bea2e510b5a483ea09a340ce712f",class:"description"},this.alertDescription),!this.alertTitle&&!this.alertDescription&&c("slot",{key:"f94f1ded917dcdf0fe0c29f3b4c4e03b8556ed87",name:"content"})),c("slot",{key:"7007b90ccffc25123265d1b4ad35bca5ff205a5c",name:"button"}),this.dismissible&&c("modus-wc-button",{key:"2466b7e16d87ba8dd6bf2bc5611c546e42790d51","aria-label":"notification button",color:"tertiary",size:"sm",slot:"button",variant:"borderless",onButtonClick:()=>this.dismissElement()},c("modus-wc-icon",{key:"de2c7f0ec8db5b689a36536a4fa8b1080f071b21","custom-class":"modus-wc-alert-close-icon",name:"close",variant:"outlined"}))))}get el(){return s(this)}static get watchers(){return{delay:["delayChanged"]}}};t.style="modus-wc-alert .modus-wc-alert{align-content:center;background-color:var(--modus-wc-color-gray-light);border-color:var(--modus-wc-color-gray-0);border-width:var(--alert-border-width);border-left-width:var(--alert-border-left-width);border-radius:var(--alert-border-radius);color:var(--modus-wc-color-gray-10)}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:var(--modus-wc-color-blue-pale);border-color:var(--modus-wc-color-info-blue);color:var(--modus-wc-color-gray-10)}modus-wc-alert .modus-wc-alert.modus-wc-alert-error{background-color:color-mix(in sRGB, var(--modus-wc-color-red-pale) 80%, var(--modus-wc-color-gray-light));border-color:var(--modus-wc-color-red-dark);color:var(--modus-wc-color-gray-10)}modus-wc-alert .modus-wc-alert.modus-wc-alert-success{background-color:color-mix(in sRGB, var(--modus-wc-color-success-pale) 80%, var(--modus-wc-color-gray-light));border-color:var(--modus-wc-color-green-dark);color:var(--modus-wc-color-gray-10)}modus-wc-alert .modus-wc-alert.modus-wc-alert-warning{background-color:color-mix(in sRGB, var(--modus-wc-color-yellow-pale) 60%, var(--modus-wc-color-gray-light));border-color:var(--modus-wc-color-yellow-dark);color:var(--modus-wc-color-black)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert .modus-wc-alert-icon{color:var(--modus-wc-color-gray-5)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-info .modus-wc-alert-icon{color:var(--modus-wc-color-info-blue)}[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-dark)}[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-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-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=connect-dark] modus-wc-alert .modus-wc-alert,[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert,[data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert{background-color:var(--modus-wc-color-gray-10);border-color:var(--modus-wc-color-gray-9);color:var(--modus-wc-color-gray-light)}[data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-info,[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-info,[data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-info{background-color:color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 30%, transparent);border-color:var(--modus-wc-color-highlight-blue)}[data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-error,[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-error,[data-theme=modus-modern-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-light)}[data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-success,[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-success,[data-theme=modus-modern-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-light)}[data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning,[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning,[data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning{background-color:color-mix(in sRGB, var(--modus-wc-color-yellow) 50%, transparent);border-color:var(--modus-wc-color-yellow-light)}";export{t as modus_wc_alert}