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 8.31 kB
import{r as d,h as o,e as s,g as c}from"./p-C1-Dpkp7.js";import{h as a}from"./p-tWS3Egrk.js";import{i as e}from"./p-DJ2rBB6r.js";const r=["success","warning","danger"],u=class{constructor(o){d(this,o),this.inheritedAttributes={},this.color="primary",this.customClass="",this.size="md",this.variant="filled"}componentWillLoad(){a(this.el),this.inheritedAttributes=e(this.el)}getClasses(){const d=["modus-wc-badge"],o=(({color:d,size:o,variant:s})=>{let c="";if(d)switch(d){case"primary":c=`${c} modus-wc-badge-primary`;break;case"secondary":c=`${c} modus-wc-badge-secondary`;break;case"tertiary":c=`${c} modus-wc-badge-neutral`;break;case"high-contrast":c=`${c} modus-wc-badge-high-contrast`;break;case"success":c=`${c} modus-wc-badge-success`;break;case"warning":c=`${c} modus-wc-badge-warning`;break;case"danger":c=`${c} modus-wc-badge-error`}if(o&&(c=`${c} modus-wc-badge-${o}`),s)switch(s){case"counter":c=`${c} modus-wc-badge-counter`;break;case"outlined":c=`${c} modus-wc-badge-outlined`;break;case"text":c=`${c} modus-wc-badge-text`}return c.trim()})({color:this.color,size:this.size,variant:this.variant});return o&&d.push(o),this.customClass&&d.push(this.customClass),d.join(" ")}render(){const d=r.includes(this.color),c="role"in this.inheritedAttributes?this.inheritedAttributes.role:d?"alert":"status";return o(s,{key:"f2ec988fa68161c5cc50c344167092bd0ed4695a"},o("span",Object.assign({key:"bab6afe22880cb6a95ce547b5248630426c411e5",class:this.getClasses()},this.inheritedAttributes,{role:c}),o("slot",{key:"6e3f8476708e14a6a790d49dc80912789c1bf2d1"})))}get el(){return c(this)}};u.style="modus-wc-badge .modus-wc-badge{display:flex;font-weight:var(--modus-wc-font-weight-semibold);height:fit-content}modus-wc-badge .modus-wc-badge.modus-wc-badge-sm{font-size:var(--modus-wc-font-size-xs);max-height:var(--modus-wc-size-xs)}modus-wc-badge .modus-wc-badge.modus-wc-badge-md{font-size:var(--modus-wc-font-size-sm)}modus-wc-badge .modus-wc-badge.modus-wc-badge-high-contrast{background-color:var(--modus-wc-color-black);border-color:var(--modus-wc-color-base-content);color:var(--modus-wc-color-white)}modus-wc-badge .modus-wc-badge.modus-wc-badge-counter{border-radius:1rem}modus-wc-badge .modus-wc-badge.modus-wc-badge-text{background-color:transparent;border:none}modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-primary{color:var(--modus-wc-color-trimble-blue)}modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-secondary{color:var(--modus-wc-color-secondary)}modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-neutral{color:var(--modus-wc-color-gray-1)}modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-high-contrast{color:var(--modus-wc-color-base-content)}modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-success{color:var(--modus-wc-color-green-dark)}modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-warning{color:var(--modus-wc-color-warning)}modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-error{color:var(--modus-wc-color-error)}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined{background-color:transparent;border-radius:1rem}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-primary{border-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary)}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-secondary{border-color:var(--modus-wc-color-secondary);color:var(--modus-wc-color-secondary)}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-neutral{border-color:var(--modus-wc-color-gray-1);color:var(--modus-wc-color-gray-1)}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-high-contrast{border-color:var(--modus-wc-color-base-content);color:var(--modus-wc-color-base-content)}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-success{border-color:var(--modus-wc-color-success);color:var(--modus-wc-color-success)}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-warning{border-color:var(--modus-wc-color-warning);color:var(--modus-wc-color-warning)}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-error{border-color:var(--modus-wc-color-error);color:var(--modus-wc-color-error)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge,[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge{border:unset;font-weight:var(--modus-wc-font-weight-bold)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-secondary,[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-secondary{color:var(--modus-wc-color-gray-6)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-secondary:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined),[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-secondary:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined){background-color:var(--modus-wc-color-gray-6);color:var(--modus-wc-color-white)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-counter),[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-counter){border-radius:var(--modus-wc-border-radius-md)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-success:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined),[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-success:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined){background-color:var(--modus-wc-color-green-dark)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-sm,[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-sm{border-radius:var(--modus-wc-border-radius-sm);font-size:var(--modus-wc-font-size-xs);height:14px;padding:var(--modus-wc-spacing-2xs) var(--modus-wc-spacing-xs)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-md,[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-md{font-size:var(--modus-wc-font-size-sm);height:20px;padding:var(--modus-wc-spacing-xs) var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-lg,[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-lg{font-size:var(--modus-wc-font-size-md);height:28px;padding:var(--modus-wc-spacing-sm) var(--modus-wc-spacing-md)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined,[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined{background-color:transparent;border:1px solid;border-radius:1rem}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-primary{background-color:var(--modus-wc-color-highlight-blue);color:var(--modus-wc-color-gray-10)}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-success{background-color:var(--modus-wc-color-success)}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-secondary{background-color:var(--modus-wc-color-gray-6);color:var(--modus-wc-color-white)}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-neutral{background-color:var(--modus-wc-color-gray-1);color:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-high-contrast{background-color:var(--modus-wc-color-gray-light);color:var(--modus-wc-color-gray-10)}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-primary{color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-high-contrast{color:var(--modus-wc-color-gray-light)}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-success{color:var(--modus-wc-color-success)}";export{u as modus_wc_badge}