@sutton-signwriting/sgnw-components/dist/cjs/sgnw-sign_2.cjs.entry.js

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

/*!
 * The Sutton SignWriting Web Components
 */
'use strict';

var index = require('./index-bYThyFO7.js');
var swu = require('./swu-BEvxNXWk.js');
var colorWatch = require('./color-watch-BMNbpkmB.js');
var swu$1 = require('./swu-DIfkoumx.js');

const sgnwSignCss = () => `:host{direction:ltr}:host{transition:color 1ms, background-color 1ms}`;

const SgnwSign = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.sgnw = window.sgnw;
    }
    connectedCallback() {
        this.colorWatch = new colorWatch.ColorWatch(this.el, this);
        if (!this.sign) {
            let sign = swu.swuExports.parse.sign(this.el.innerHTML);
            if (sign.style) {
                this.styling = colorWatch.styleExports.compose(colorWatch.styleExports.merge(colorWatch.styleExports.parse(sign.style), colorWatch.styleExports.parse(this.styling)));
            }
            sign.style = "";
            this.sign = swu.swuExports.compose.sign(sign);
        }
        if (!this.sgnw) {
            let self = this;
            function handleSgnw() {
                self.sgnw = window.sgnw;
                window.removeEventListener("sgnw", handleSgnw, false);
            }
            window.addEventListener('sgnw', handleSgnw, false);
        }
    }
    disconnectedCallback() {
        this.colorWatch.dispose();
    }
    render() {
        const styleStr = colorWatch.styleExports.compose(colorWatch.styleExports.merge(index.cssValues(this.el), colorWatch.styleExports.parse(this.styling)));
        return (index.h(index.Host, { key: 'cc1ffd2004b25f139c6c0a6fc13884f9a40ef33d', sign: this.sign, styling: this.styling, innerHTML: this.sgnw ? swu$1.swuExports.signSvg(this.sign + (styleStr)) : '' }, index.h("slot", { key: 'a02cce53502a3b97fbb13ce40d88aebdb34e2fc1' })));
    }
    get el() { return index.getElement(this); }
};
SgnwSign.style = sgnwSignCss();

const sgnwSymbolCss = () => `:host{transition:color 1ms, background-color 1ms}`;

const SgnwSymbol = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.sgnw = window.sgnw;
    }
    connectedCallback() {
        this.colorWatch = new colorWatch.ColorWatch(this.el, this);
        if (!this.symbol) {
            let symbol = swu.swuExports.parse.symbol(this.el.innerHTML);
            if (symbol.style) {
                this.styling = colorWatch.styleExports.compose(colorWatch.styleExports.merge(colorWatch.styleExports.parse(symbol.style), colorWatch.styleExports.parse(this.styling)));
            }
            symbol.style = "";
            this.symbol = swu.swuExports.compose.symbol(symbol);
        }
        if (!this.sgnw) {
            let self = this;
            function handleSgnw() {
                self.sgnw = window.sgnw;
                window.removeEventListener("sgnw", handleSgnw, false);
            }
            window.addEventListener('sgnw', handleSgnw, false);
        }
    }
    disconnectedCallback() {
        this.colorWatch.dispose();
    }
    render() {
        const styleStr = colorWatch.styleExports.compose(colorWatch.styleExports.merge(index.cssValues(this.el), colorWatch.styleExports.parse(this.styling)));
        return (index.h(index.Host, { key: 'bd85ac33f6f31f16132489252f04c981433edc78', symbol: this.symbol, styling: this.styling, innerHTML: this.sgnw ? swu$1.swuExports.symbolSvg(this.symbol + (styleStr)) : '' }, index.h("slot", { key: '082c6e15c0f121f3ba97d91b70f73979414c8b7a' })));
    }
    get el() { return index.getElement(this); }
};
SgnwSymbol.style = sgnwSymbolCss();

exports.sgnw_sign = SgnwSign;
exports.sgnw_symbol = SgnwSymbol;