@nent/core/dist/components/n-audio-switch.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 { g as getDataProvider } from './factory.js';
import { s as state, o as onChange } from './state3.js';
import { a as state$1, o as onChange$1 } from './state.js';

const AudioSwitch = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.storage = null;
    /**
     * Which state property this switch controls.
     */
    this.setting = 'enabled';
    /**
     * The data provider to store the audio state in.
     */
    this.dataProvider = 'storage';
  }
  get stateKey() {
    return `audio-${this.setting}`;
  }
  setValue(value) {
    switch (this.setting) {
      case 'enabled': {
        state$1.audioEnabled = value;
        break;
      }
      case 'muted': {
        state.muted = value;
        break;
      }
    }
  }
  getValue() {
    switch (this.setting) {
      case 'enabled': {
        return state$1.audioEnabled;
      }
      case 'muted': {
        return state.muted;
      }
    }
  }
  async componentWillLoad() {
    var _a;
    this.storage = (await getDataProvider(this.dataProvider));
    if (this.storage) {
      const value = await ((_a = this.storage) === null || _a === void 0 ? void 0 : _a.get(this.stateKey));
      if (value != null) {
        this.setValue(value == 'true');
      }
    }
    this.subscription =
      this.setting == 'muted'
        ? onChange('muted', async (m) => {
          var _a;
          await ((_a = this.storage) === null || _a === void 0 ? void 0 : _a.set(this.stateKey, m.toString()));
        })
        : onChange$1('audioEnabled', async (m) => {
          var _a;
          await ((_a = this.storage) === null || _a === void 0 ? void 0 : _a.set(this.stateKey, m.toString()));
        });
  }
  toggle() {
    var _a;
    this.setValue(((_a = this.checkbox) === null || _a === void 0 ? void 0 : _a.checked) || false);
  }
  disconnectedCallback() {
    var _a;
    (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.call(this);
  }
  render() {
    return (h(Host, null, h("input", { type: "checkbox", class: this.inputClass, id: this.inputId, ref: e => {
        this.checkbox = e;
      }, onChange: () => this.toggle(), checked: this.getValue() })));
  }
}, [0, "n-audio-switch", {
    "setting": [1],
    "inputClass": [1, "input-class"],
    "inputId": [1, "input-id"],
    "dataProvider": [1, "data-provider"]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["n-audio-switch"];
  components.forEach(tagName => { switch (tagName) {
    case "n-audio-switch":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, AudioSwitch);
      }
      break;
  } });
}

const NAudioSwitch = AudioSwitch;
const defineCustomElement = defineCustomElement$1;

export { NAudioSwitch, defineCustomElement };