@sutton-signwriting/sgnw-components/dist/collection/components/fsw-sign/fsw-sign.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 parseFSW, compose as composeFSW } from '@sutton-signwriting/core/fsw/fsw';
import { parse as parseStyle, compose as composeStyle, merge as mergeStyle } from '@sutton-signwriting/core/style/style';
import { signSvg } from '@sutton-signwriting/font-ttf/fsw/fsw';
import { cssValues } from '../../global/global';
export class FswSign {
  constructor() {
    this.sgnw = window.sgnw;
  }
  connectedCallback() {
    if (!this.sign) {
      let sign = parseFSW.sign(this.el.innerHTML);
      if (sign.style) {
        this.styling = composeStyle(mergeStyle(parseStyle(sign.style), parseStyle(this.styling)));
      }
      sign.style = "";
      this.sign = composeFSW.sign(sign);
    }
    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, { sign: this.sign, styling: this.styling, innerHTML: this.sgnw ? signSvg(this.sign + (styleStr)) : '' },
      h("slot", null)));
  }
  static get is() { return "fsw-sign"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["fsw-sign.css"]
  }; }
  static get styleUrls() { return {
    "$": ["fsw-sign.css"]
  }; }
  static get properties() { return {
    "sign": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "FSW string for sign"
      },
      "attribute": "sign",
      "reflect": true
    },
    "styling": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Style String for sign"
      },
      "attribute": "styling",
      "reflect": true
    }
  }; }
  static get states() { return {
    "sgnw": {}
  }; }
  static get elementRef() { return "el"; }
}