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

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

/*!
 * The Sutton SignWriting Web Components
 */
import { Component, Element, State, Prop, Host, h } from '@stencil/core';
import { parse as parseSWU, compose as composeSWU } from '@sutton-signwriting/core/swu/swu';
import { parse as parseStyle, compose as composeStyle, merge as mergeStyle } from '@sutton-signwriting/core/style/style';
import { symbolSvg } from '@sutton-signwriting/font-ttf/swu/swu';
import { cssValues } from '../../global/global';
export class SgnwSymbol {
  constructor() {
    this.sgnw = window.sgnw;
  }
  connectedCallback() {
    if (!this.symbol) {
      let symbol = parseSWU.symbol(this.el.innerHTML);
      if (symbol.style) {
        this.styling = composeStyle(mergeStyle(parseStyle(symbol.style), parseStyle(this.styling)));
      }
      symbol.style = "";
      this.symbol = composeSWU.symbol(symbol);
    }
    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(mergeStyle(cssValues(this.el), parseStyle(this.styling)));
    return (h(Host, { symbol: this.symbol, styling: this.styling, innerHTML: this.sgnw ? symbolSvg(this.symbol + (styleStr)) : '' },
      h("slot", null)));
  }
  static get is() { return "sgnw-symbol"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sgnw-symbol.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sgnw-symbol.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
    },
    "styling": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Style String for symbol"
      },
      "attribute": "styling",
      "reflect": true
    }
  }; }
  static get states() { return {
    "sgnw": {}
  }; }
  static get elementRef() { return "el"; }
}