@sutton-signwriting/sgnw-components/dist/components/sgnw-button2.js

a javascript package of web components for use with the SignWriting script.

/*!
 * The Sutton SignWriting Web Components
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { s as style } from './style.js';
import { s as swu } from './swu.js';
import { c as cssValues } from './global.js';

const sgnwButtonCss = "*.sc-sgnw-button,*.sc-sgnw-button::before,*.sc-sgnw-button::after{box-sizing:border-box}.sc-sgnw-button-h{--font-color:#424242;--button-color:lightgray;--button-hover:darkgray;--bg-color:#fff}[data-color-mode=\"dark\"] .sc-sgnw-button-h,[data-theme=\"dark\"] .sc-sgnw-button-h{--font-color:#e1e1ff;--button-color:gray;--button-hover:darkgray;--bg-color:#161625}.swu.sc-sgnw-button{font-family:SuttonSignWritingOneD !important}.sc-sgnw-button-h{display:inline-block;position:relative;border-radius:5px;color:var(--font-color);background-color:var(--button-color);width:5rem;height:4rem}.sc-sgnw-button-h:hover{background-color:var(--button-hover)}.sc-sgnw-button-s>svg{position:absolute;top:10%;bottom:10%;left:5%;right:5%;margin:auto;max-width:90%;max-height:80%;cursor:default}.sc-sgnw-button-s>svg g text.sym-line,.sc-sgnw-button-s>svg path{fill:var(--font-color) !important}.sc-sgnw-button-s>svg g text.sym-fill{fill:var(--button-color) !important}.sc-sgnw-button-h:hover.sc-sgnw-button-s>svg g text.sym-fill{fill:var(--button-hover) !important}";

const SgnwButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.sgnw = window.sgnw;
  }
  connectedCallback() {
    if (!this.sgnw) {
      let self = this;
      function handleSgnw() {
        self.sgnw = window.sgnw;
        window.removeEventListener("sgnw", handleSgnw, false);
      }
      window.addEventListener('sgnw', handleSgnw, false);
    }
  }
  render() {
    const styleStr = style.compose(Object.assign(cssValues(this.el), { background: "transparent", zoom: "x" }));
    let svg = '';
    if (this.symbol) {
      svg = this.sgnw ? swu.symbolSvg(this.symbol + styleStr) : '';
    }
    else if (this.sign) {
      svg = this.sgnw ? swu.signSvg(this.sign + styleStr) : '';
    }
    else if (this.svg) {
      svg = this.svg;
    }
    return (h(Host, { innerHTML: svg }));
  }
  get el() { return this; }
  static get style() { return sgnwButtonCss; }
}, [2, "sgnw-button", {
    "symbol": [1537],
    "sign": [1537],
    "svg": [1537],
    "sgnw": [32]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sgnw-button"];
  components.forEach(tagName => { switch (tagName) {
    case "sgnw-button":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, SgnwButton);
      }
      break;
  } });
}

export { SgnwButton as S, defineCustomElement as d };