@nent/core/dist/components/n-app-theme.js

Functional elements to add routing, data-binding, dynamic HTML, declarative actions, audio, video, and so much more. Supercharge static HTML files into web apps without script or builds.

/*!
 * NENT 2022
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { s as state, o as onChange } from './state2.js';

const AppTheme = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    /**
     * Change the element that is decorated with
     * the dark-mode class
     */
    this.targetElement = 'body';
    /**
     * Change the class name that is added to the
     * target element when the theme is determined to
     * be dark.
     */
    this.darkClass = 'dark';
    /**
     * Display the user's system preference.
     */
    this.display = false;
    /**
     * This element displays the current theme,
     * unless in switch-mode, it will show the opposite.
     */
    this.switch = false;
  }
  componentWillLoad() {
    this.subscribeToSystem();
  }
  subscribeToSystem() {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
    if ((prefersDark === null || prefersDark === void 0 ? void 0 : prefersDark.addEventListener) && state.darkMode == null) {
      prefersDark.addEventListener('change', ev => {
        state.darkMode = ev.matches;
      });
      state.darkMode = prefersDark.matches;
    }
    this.stateSubscription = onChange('darkMode', () => {
      this.toggleDarkTheme();
    });
  }
  componentWillRender() {
    this.toggleDarkTheme();
  }
  toggleDarkTheme() {
    const element = this.targetElement == 'body'
      ? this.el.ownerDocument.body
      : this.el.ownerDocument.querySelector(this.targetElement);
    if (state.darkMode)
      element === null || element === void 0 ? void 0 : element.classList.toggle(this.darkClass, true);
    else
      element === null || element === void 0 ? void 0 : element.classList.remove(this.darkClass);
  }
  render() {
    if (this.display) {
      const swap = this.switch
        ? !state.darkMode
        : state.darkMode;
      return (h(Host, null, h("svg", { class: "themeIcon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, h("path", { fill: "none", d: "M0 0h24v24H0z" }), swap ? (h("path", { d: "M11.38 2.019a7.5 7.5 0 1 0 10.6 10.6C21.662 17.854 17.316 22 12.001 22 6.477 22 2 17.523 2 12c0-5.315 4.146-9.661 9.38-9.981z" })) : (h("path", { d: "M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" })))));
    }
    return null;
  }
  disconnectedCallback() {
    var _a;
    (_a = this.stateSubscription) === null || _a === void 0 ? void 0 : _a.call(this);
  }
  get el() { return this; }
}, [0, "n-app-theme", {
    "targetElement": [1, "target-element"],
    "darkClass": [1, "dark-class"],
    "display": [4],
    "switch": [4]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["n-app-theme"];
  components.forEach(tagName => { switch (tagName) {
    case "n-app-theme":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, AppTheme);
      }
      break;
  } });
}

const NAppTheme = AppTheme;
const defineCustomElement = defineCustomElement$1;

export { NAppTheme, defineCustomElement };