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.82 kB
import{r as e,d as o,h as s,g as t}from"./p-C1-Dpkp7.js";import{t as r}from"./p-FIrXQR5k.js";import{h as a}from"./p-tWS3Egrk.js";import{i as d}from"./p-DJ2rBB6r.js";const c=class{constructor(s){e(this,s),this.themeChange=o(this,"themeChange",7),this.inheritedAttributes={},this.customClass="",this.isDarkMode="dark"===r.state.mode}componentWillLoad(){a(this.el),this.el.ariaLabel||(this.el.ariaLabel="Switch between light and dark theme"),this.inheritedAttributes=d(this.el)}connectedCallback(){this.modeUnsubscribe=r.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){r.setMode(e.target.checked?"dark":"light"),this.themeChange.emit(r.state)}render(){return s("label",Object.assign({key:"7a314d7f49edd370c77ececc7cedd196e28e1e6f",class:this.getClasses()},this.inheritedAttributes),s("input",{key:"c2d2bd964cdfe760da97458a60889a401d931af5","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:"4f953d356333a7b5826b3769335e13b30aeedbf3","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:"a0bc1219989132a49515e4ff73b7a8a99b275f3c",cx:"12",cy:"12",r:"5"}),s("path",{key:"9a8d9a888071920c53a0e269dfc0893774d64eb4",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:"b1cfd24ffeae078952e9d1a9aaf808ac315ec828","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:"51cf8732436e6f450bdabea0de64144d1a784f86",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="modus-wc-theme-switcher{display:grid}[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}