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 3.68 kB
import{r as o,c as e,h as s,g as t}from"./p-D5XAQERj.js";import{t as d}from"./p-DXyMFOeb.js";import{i as r}from"./p-DlW2F98o.js";const c=class{constructor(s){o(this,s),this.themeChange=e(this,"themeChange"),this.inheritedAttributes={},this.customClass="",this.isDarkMode="dark"===d.state.mode}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel="Switch between light and dark theme"),this.inheritedAttributes=r(this.el)}connectedCallback(){this.modeUnsubscribe=d.onChange("mode",(o=>{this.isDarkMode="dark"===o}))}disconnectedCallback(){var o;null===(o=this.modeUnsubscribe)||void 0===o||o.call(this)}getClasses(){const o=["modus-wc-inline-grid modus-wc-cursor-pointer modus-wc-justify-center modus-wc-place-items-center"];return this.customClass&&o.push(this.customClass),o.join(" ")}handleModeToggle(o){d.setMode(o.target.checked?"dark":"light"),this.themeChange.emit(d.state)}render(){return s("label",Object.assign({key:"d76e34621caf3aa0afedbc760b00deabf52fe318",class:this.getClasses()},this.inheritedAttributes),s("input",{key:"05b657c0cbb042dcbd0d8646f82af2e5207c4dfe","aria-checked":this.isDarkMode,checked:this.isDarkMode,class:"modus-wc-toggle modus-wc-theme-controller modus-wc-bg-base-content modus-wc-col-span-2 modus-wc-col-start-1 modus-wc-row-start-1",onChange:o=>this.handleModeToggle(o),type:"checkbox",value:"default"}),s("svg",{key:"982b0e39f3fa3d020553d15546f3ab6d793bf24d","aria-hidden":"true",class:"modus-wc-stroke-base-100 modus-wc-fill-base-100 modus-wc-col-start-1 modus-wc-row-start-1",fill:"none",height:"14",role:"presentation",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",viewBox:"0 0 24 24",width:"14",xmlns:"http://www.w3.org/2000/svg"},s("circle",{key:"646fd48d35662e38a5c4991fe41ee47410592b7d",cx:"12",cy:"12",r:"5"}),s("path",{key:"b7de240d98edbd5ae00ed437bde892760c9337f9",d:"M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"})),s("svg",{key:"464559a7d3f115c14777499081ecffd12f180495","aria-hidden":"true",class:"modus-wc-stroke-base-100 modus-wc-fill-base-100 modus-wc-col-start-2 modus-wc-row-start-1",fill:"none",height:"14",role:"presentation",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",viewBox:"0 0 24 24",width:"14",xmlns:"http://www.w3.org/2000/svg"},s("path",{key:"c6729cbdfe04fd781d01193d272af6592c6e5740",d:"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"})))}get el(){return t(this)}};c.style="[data-theme=modus-modern-dark] .modus-wc-toggle{--tglbg:var(--modus-wc-color-gray-9);border-color:var(--modus-wc-color-black)}[data-theme=modus-modern-dark] .modus-wc-stroke-base-100{stroke:var(--modus-wc-color-white)}[data-theme=modus-modern-dark] .modus-wc-fill-base-100{fill:var(--modus-wc-color-gray-9)}[data-theme=modus-modern-dark] .modus-wc-bg-base-content{background-color:var(--modus-wc-color-black)}[data-theme=modus-modern-light] .modus-wc-toggle{--tglbg:var(--modus-wc-color-gray-0);border-color:var(--modus-wc-white)}[data-theme=modus-modern-light] .modus-wc-stroke-base-100{stroke:var(--modus-wc-color-black)}[data-theme=modus-modern-light] .modus-wc-fill-base-100{fill:var(--modus-wc-color-gray-0)}[data-theme=modus-modern-light] .modus-wc-bg-base-content{background-color:var(--modus-wc-color-white)}.modus-wc-toggle.modus-wc-stroke-base-100{stroke:var(--modus-wc-color-base-300)}.modus-wc-toggle.modus-wc-fill-base-100{fill:var(--modus-wc-color-base-300)}.modus-wc-toggle:checked.modus-wc-stroke-base-100{stroke:var(--modus-wc-color-base-100)}.modus-wc-toggle:checked.modus-wc-fill-base-100{fill:var(--modus-wc-color-base-100)}";export{c as modus_wc_theme_switcher}