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

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

/*!
 * The Sutton SignWriting Web Components
 */
import { r as registerInstance, f as cssValues, d as h, H as Host, e as getElement } from './index-BAJUTSOF.js';
import { f as fswExports } from './fsw-CsiwdcpL.js';
import { C as ColorWatch, s as styleExports } from './color-watch-DoznaU7s.js';
import { f as fswExports$1 } from './fsw-CexNLLwH.js';

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

const FswSign = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.sgnw = window.sgnw;
    }
    connectedCallback() {
        this.colorWatch = new ColorWatch(this.el, this);
        if (!this.sign) {
            let sign = fswExports.parse.sign(this.el.innerHTML);
            if (sign.style) {
                this.styling = styleExports.compose(styleExports.merge(styleExports.parse(sign.style), styleExports.parse(this.styling)));
            }
            sign.style = "";
            this.sign = fswExports.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 = styleExports.compose(styleExports.merge(cssValues(this.el), styleExports.parse(this.styling)));
        return (h(Host, { key: '569666a6b261005ca3f9219e6320b6729824c420', sign: this.sign, styling: this.styling, innerHTML: this.sgnw ? fswExports$1.signSvg(this.sign + (styleStr)) : '' }, h("slot", { key: 'b53feac3a744d011833be0e65e3927c92ca6f63f' })));
    }
    get el() { return getElement(this); }
};
FswSign.style = fswSignCss();

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

const FswSymbol = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.sgnw = window.sgnw;
    }
    connectedCallback() {
        this.colorWatch = new ColorWatch(this.el, this);
        if (!this.symbol) {
            let symbol = fswExports.parse.symbol(this.el.innerHTML);
            if (symbol.style) {
                this.styling = styleExports.compose(styleExports.merge(styleExports.parse(symbol.style), styleExports.parse(this.styling)));
            }
            this.symbol = 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 = styleExports.compose(styleExports.merge(cssValues(this.el), styleExports.parse(this.styling)));
        return (h(Host, { key: '86f20d62b1a9c98b90474a9ec054a76ee3a2d1b9', symbol: this.symbol, styling: this.styling, innerHTML: this.sgnw ? fswExports$1.symbolSvg(this.symbol + (styleStr)) : '' }, h("slot", { key: '526c8016004ba63407640a123475c6a9e3b48041' })));
    }
    get el() { return getElement(this); }
};
FswSymbol.style = fswSymbolCss();

export { FswSign as fsw_sign, FswSymbol as fsw_symbol };