@trimble-oss/moduswebcomponents/esm/modus-wc-theme-switcher.entry.js

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

import { r as registerInstance, c as createEvent, h, g as getElement } from './index-D_4hbGjA.js';
import { t as themeStore } from './theme.store-DoBfuPKG.js';
import { i as inheritAriaAttributes } from './utils-DQvnWXRl.js';

const modusWcThemeSwitcherCss = "[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)}";

const ModusWcThemeSwitcher = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.themeChange = createEvent(this, "themeChange");
        this.inheritedAttributes = {};
        /** Custom CSS class to apply to the theme switcher element. */
        this.customClass = '';
        this.isDarkMode = themeStore.state.mode === 'dark';
    }
    componentWillLoad() {
        if (!this.el.ariaLabel) {
            this.el.ariaLabel = 'Switch between light and dark theme';
        }
        this.inheritedAttributes = inheritAriaAttributes(this.el);
    }
    connectedCallback() {
        this.modeUnsubscribe = themeStore.onChange('mode', (mode) => {
            this.isDarkMode = mode === 'dark';
        });
    }
    disconnectedCallback() {
        var _a;
        (_a = this.modeUnsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
    }
    getClasses() {
        const classList = [
            'modus-wc-inline-grid modus-wc-cursor-pointer modus-wc-justify-center modus-wc-place-items-center',
        ];
        if (this.customClass)
            classList.push(this.customClass);
        return classList.join(' ');
    }
    handleModeToggle(event) {
        const checkbox = event.target;
        const newMode = checkbox.checked ? 'dark' : 'light';
        themeStore.setMode(newMode);
        this.themeChange.emit(themeStore.state);
    }
    render() {
        return (h("label", Object.assign({ key: '4f0ace4400cfc1bd27ebbfc4ac81bab80959decd', class: this.getClasses() }, this.inheritedAttributes), h("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: (event) => this.handleModeToggle(event), type: "checkbox", value: "default" }), h("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" }, h("circle", { key: 'de680405ddde1c05248da922f597b250d5e468a9', cx: "12", cy: "12", r: "5" }), h("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" })), h("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" }, h("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 getElement(this); }
};
ModusWcThemeSwitcher.style = modusWcThemeSwitcherCss;

export { ModusWcThemeSwitcher as modus_wc_theme_switcher };