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 7.14 kB
import{r as d,h as e,e as i,g as r}from"./p-C1-Dpkp7.js";import{h as o}from"./p-tWS3Egrk.js";import{i as s}from"./p-DJ2rBB6r.js";const c=class{constructor(e){d(this,e),this.inheritedAttributes={},this.color="tertiary",this.content="",this.customClass="",this.orientation="vertical",this.position="center",this.responsive=!0}componentWillLoad(){o(this.el),this.inheritedAttributes=s(this.el)}getClasses(){const d=["modus-wc-divider"],e=(({color:d,orientation:e,position:i,responsive:r})=>{let o="";if(d)switch(d){case"primary":o=`${o} modus-wc-divider-primary`;break;case"secondary":o=`${o} modus-wc-divider-secondary`;break;case"tertiary":o=`${o} modus-wc-divider-neutral`;break;case"high-contrast":o=`${o} modus-wc-divider-accent`;break;case"success":o=`${o} modus-wc-divider-success`;break;case"warning":o=`${o} modus-wc-divider-warning`;break;case"danger":o=`${o} modus-wc-divider-error`}if(e)switch(e){case"horizontal":o=`${o} modus-wc-divider-horizontal`;break;case"vertical":o=`${o} modus-wc-divider-vertical`}if(i)switch(i){case"end":o=`${o} modus-wc-divider-start`;break;case"start":o=`${o} modus-wc-divider-end`}return r&&(o=`${o} flex-grow place-items-center`),o.trim()})({color:this.color,orientation:this.orientation,position:this.position,responsive:this.responsive});return e&&d.push(e),this.customClass&&d.push(this.customClass),d.join(" ")}render(){return e(i,{key:"474cecf457882c0a5b2841cb66d6b5513e561257"},e("div",Object.assign({key:"23f987f4fc75b44987908e4611e6b72b16a0f008",class:this.getClasses(),tabindex:-1},this.inheritedAttributes),this.content))}get el(){return r(this)}};c.style="modus-wc-divider .modus-wc-divider.modus-wc-divider-primary::before,modus-wc-divider .modus-wc-divider.modus-wc-divider-primary::after{background-color:var(--modus-wc-color-primary)}modus-wc-divider .modus-wc-divider.modus-wc-divider-accent::before,modus-wc-divider .modus-wc-divider.modus-wc-divider-accent::after{background-color:var(--modus-wc-color-info-blue)}[data-theme=modus-classic-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::before,[data-theme=modus-classic-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::after,[data-theme=modus-modern-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::before,[data-theme=modus-modern-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::after,[data-theme=connect-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::before,[data-theme=connect-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::after{background-color:color-mix(in sRGB, var(--modus-wc-color-gray-10) 10%, transparent)}[data-theme=modus-classic-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::before,[data-theme=modus-classic-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::after,[data-theme=modus-modern-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::before,[data-theme=modus-modern-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::after,[data-theme=connect-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::before,[data-theme=connect-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::after{background-color:var(--modus-wc-color-green-dark)}[data-theme=modus-classic-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::before,[data-theme=modus-classic-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::after,[data-theme=modus-modern-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::before,[data-theme=modus-modern-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::after,[data-theme=connect-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::before,[data-theme=connect-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::after{background-color:var(--modus-wc-color-red-dark)}[data-theme=modus-classic-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::before,[data-theme=modus-classic-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::after,[data-theme=modus-modern-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::before,[data-theme=modus-modern-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::after,[data-theme=connect-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::before,[data-theme=connect-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::after{background-color:var(--modus-wc-color-yellow-dark)}[data-theme=modus-classic-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::before,[data-theme=modus-classic-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::after,[data-theme=modus-modern-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::before,[data-theme=modus-modern-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::after,[data-theme=connect-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::before,[data-theme=connect-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::after{background-color:color-mix(in sRGB, var(--modus-wc-color-gray-light) 10%, transparent)}[data-theme=modus-classic-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::before,[data-theme=modus-classic-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::after,[data-theme=modus-modern-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::before,[data-theme=modus-modern-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::after,[data-theme=connect-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::before,[data-theme=connect-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::after{background-color:var(--modus-wc-color-green-light)}[data-theme=modus-classic-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::before,[data-theme=modus-classic-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::after,[data-theme=modus-modern-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::before,[data-theme=modus-modern-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::after,[data-theme=connect-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::before,[data-theme=connect-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::after{background-color:var(--modus-wc-color-red-light)}[data-theme=modus-classic-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::before,[data-theme=modus-classic-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::after,[data-theme=modus-modern-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::before,[data-theme=modus-modern-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::after,[data-theme=connect-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::before,[data-theme=connect-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::after{background-color:var(--modus-wc-color-yellow-light)}";export{c as modus_wc_divider}