@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.15 kB
JavaScript
import{r as o,d as r,h as a,e as c,g as e}from"./p-C1-Dpkp7.js";import{h as s}from"./p-tWS3Egrk.js";import{i as t}from"./p-DJ2rBB6r.js";const d=class{constructor(a){o(this,a),this.dismissClick=r(this,"dismissClick",7),this.inheritedAttributes={},this.customClass="",this.disableIcon=!1,this.dismissible=!1,this.variant="info"}componentWillLoad(){s(this.el),this.el.hasAttribute("role")||this.el.setAttribute("role","status"),this.inheritedAttributes=t(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 a("modus-wc-icon",{"custom-class":"modus-wc-alert-icon",name:this.icon,variant:"outlined"});switch(this.variant){case"error":return a("modus-wc-icon",{"custom-class":"modus-wc-alert-icon",name:"alert",variant:"outlined"});case"success":return a("modus-wc-icon",{"custom-class":"modus-wc-alert-icon",name:"check_circle"});case"warning":return a("modus-wc-icon",{"custom-class":"modus-wc-alert-icon",name:"warning",variant:"outlined"});default:return a("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 a(c,{key:"8865feb566e188d4b579f6f28978ab3d9d7050f7"},a("div",Object.assign({key:"e8bf6fa2ef7ee6f69b0af258a26445ead4d075b4",class:this.getClasses()},this.inheritedAttributes),!this.disableIcon&&this.getLeadingIcon(),a("div",{key:"f49b8f05cce29150caf16e12f35adce2adb16de0",class:"modus-wc-alert-content"},a("div",{key:"468197f276bc484235068f3c855a2ddf0739d1af",class:"title"},this.alertTitle),this.alertDescription&&a("div",{key:"e81f9b673681173fcfeeb29cf001596fdc73bf1e",class:"description"},this.alertDescription),!this.alertTitle&&!this.alertDescription&&a("slot",{key:"8ae938db71cebcc0e42b2e1ded1d163ad31317cd",name:"content"})),a("slot",{key:"19a5cd5aba9d4d8eb9c64e76a8b094e03c424079",name:"button"}),this.dismissible&&a("modus-wc-button",{key:"f77d131e6b138c357c39784541df83ba22d81ef5","aria-label":"Dismiss alert",color:"tertiary",size:"sm",slot:"button",variant:"borderless",onButtonClick:()=>this.dismissElement()},a("modus-wc-icon",{key:"ee93c957b78a0eca8a7ffd4d4037df7678051a46","custom-class":"modus-wc-alert-close-icon",name:"close",variant:"outlined"}))))}get el(){return e(this)}static get watchers(){return{delay:["delayChanged"]}}};d.style="modus-wc-alert .modus-wc-alert{align-content:center;align-items:center;backdrop-filter:blur(var(--modus-wc-spacing-lg));background-color:var(--modus-wc-color-base-page);border-color:var(--modus-wc-color-base-200);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-base-content);display:flex;text-align:start}modus-wc-alert .modus-wc-alert .modus-wc-alert-content{flex:auto}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:rgba(251, 212, 215, 0.8);border-color:var(--modus-wc-color-red-dark);color:var(--modus-wc-color-gray-10)}@supports (background-color: color-mix(in sRGB, red 50%, blue)){modus-wc-alert .modus-wc-alert.modus-wc-alert-error{background-color:color-mix(in sRGB, var(--modus-wc-color-red-pale) 80%, transparent)}}modus-wc-alert .modus-wc-alert.modus-wc-alert-success{background-color:rgba(224, 236, 207, 0.8);border-color:var(--modus-wc-color-green-dark);color:var(--modus-wc-color-gray-10)}@supports (background-color: color-mix(in sRGB, red 50%, blue)){modus-wc-alert .modus-wc-alert.modus-wc-alert-success{background-color:color-mix(in sRGB, var(--modus-wc-color-success-pale) 80%, transparent)}}modus-wc-alert .modus-wc-alert.modus-wc-alert-warning{background-color:rgba(255, 245, 228, 0.6);border-color:var(--modus-wc-color-yellow-dark);color:var(--modus-wc-color-black)}@supports (background-color: color-mix(in sRGB, red 50%, blue)){modus-wc-alert .modus-wc-alert.modus-wc-alert-warning{background-color:color-mix(in sRGB, var(--modus-wc-color-yellow-pale) 60%, transparent)}}[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:rgba(1, 154, 235, 0.3);border-color:var(--modus-wc-color-highlight-blue)}@supports (background-color: color-mix(in sRGB, red 50%, blue)){[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)}}[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:rgba(218, 33, 44, 0.5);border-color:var(--modus-wc-color-red-light)}@supports (background-color: color-mix(in sRGB, red 50%, 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)}}[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:rgba(30, 138, 68, 0.5);border-color:var(--modus-wc-color-green-light)}@supports (background-color: color-mix(in sRGB, red 50%, blue)){[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)}}[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:rgba(251, 173, 38, 0.5);border-color:var(--modus-wc-color-yellow-light)}@supports (background-color: color-mix(in sRGB, red 50%, blue)){[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)}}";export{d as modus_wc_alert}