@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.73 kB
JavaScript
import{r as e,c as o,h as s,g as t}from"./p-D_4hbGjA.js";import{t as c}from"./p-D080SIPT.js";import{i as d}from"./p-BLBSdonk.js";const r=class{constructor(s){e(this,s),this.themeChange=o(this,"themeChange"),this.inheritedAttributes={},this.customClass="",this.isDarkMode="dark"===c.state.mode}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel="Switch between light and dark theme"),this.inheritedAttributes=d(this.el)}connectedCallback(){this.modeUnsubscribe=c.onChange("mode",(e=>{this.isDarkMode="dark"===e}))}disconnectedCallback(){var e;null===(e=this.modeUnsubscribe)||void 0===e||e.call(this)}getClasses(){const e=["modus-wc-inline-grid modus-wc-cursor-pointer modus-wc-justify-center modus-wc-place-items-center"];return this.customClass&&e.push(this.customClass),e.join(" ")}handleModeToggle(e){c.setMode(e.target.checked?"dark":"light"),this.themeChange.emit(c.state)}render(){return s("label",Object.assign({key:"4f0ace4400cfc1bd27ebbfc4ac81bab80959decd",class:this.getClasses()},this.inheritedAttributes),s("input",{key:"b4bfd7e584ee1d7c15fbc3c67054fae6cb3b2baf","aria-checked":this.isDarkMode,"aria-label":this.isDarkMode?"Dark theme":"Light theme",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:e=>this.handleModeToggle(e),type:"checkbox",value:"default"}),s("svg",{key:"92adaeca4d53fcd5502513b8d63111dedfd7237f","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:"de680405ddde1c05248da922f597b250d5e468a9",cx:"12",cy:"12",r:"5"}),s("path",{key:"59ea7ccf1b5374f0d0cf948afa3c8acc68394f0c",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:"56b57a7f5fe57bb405464b08bfb0d57170722a65","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:"6f0e73420cd852899434e75e67f9db6dccc22e9c",d:"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"})))}get el(){return t(this)}};r.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{r as modus_wc_theme_switcher}