@sutton-signwriting/sgnw-components/dist/collection/components/sgnw-button/sgnw-button.js

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

/*!
 * The Sutton SignWriting Web Components
 */
//
import { Component, Element, Prop, State, Host, h } from '@stencil/core';
import { compose as composeStyle } from '@sutton-signwriting/core/style/style';
import { symbolSvg, signSvg } from '@sutton-signwriting/font-ttf/swu/swu';
import { cssValues } from '../../global/global';
export class SgnwButton {
  constructor() {
    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 = composeStyle(Object.assign(cssValues(this.el), { background: "transparent", zoom: "x" }));
    let svg = '';
    if (this.symbol) {
      svg = this.sgnw ? symbolSvg(this.symbol + styleStr) : '';
    }
    else if (this.sign) {
      svg = this.sgnw ? signSvg(this.sign + styleStr) : '';
    }
    else if (this.svg) {
      svg = this.svg;
    }
    return (h(Host, { innerHTML: svg }));
  }
  static get is() { return "sgnw-button"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["sgnw-button.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sgnw-button.css"]
  }; }
  static get properties() { return {
    "symbol": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "SWU character for symbol"
      },
      "attribute": "symbol",
      "reflect": true
    },
    "sign": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "SWU string for sign"
      },
      "attribute": "sign",
      "reflect": true
    },
    "svg": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "SVG icon"
      },
      "attribute": "svg",
      "reflect": true
    }
  }; }
  static get states() { return {
    "sgnw": {}
  }; }
  static get elementRef() { return "el"; }
}