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-dzXW86AR.js";import{t as d}from"./p-BloSvdvj.js";import{i as r}from"./p-B5lx0dpl.js";const a=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:"99d8c4506f6f30bb239a57af08f6f9fbe765f03a",class:this.getClasses()},this.inheritedAttributes),s("input",{key:"43fdf0d0db41dfa9500818eba20161e52bb78bf3","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:"324265fb181a0fd1080d520ff7d220d66f71c2ce","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:"3973043f5a554dac627a42249f862a09d00a50a6",cx:"12",cy:"12",r:"5"}),s("path",{key:"f6fe930618a336de90512e08bfa86ccd53fc5e67",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:"6c06d2ed4cfc9aa462069ebed3fa142739988718","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:"16768a6c465fa36a8210461d090f250b2137e0aa",d:"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"})))}get el(){return t(this)}};a.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{a as modus_wc_theme_switcher}