@sutton-signwriting/sgnw-components/dist/components/fsw-palette-symbol2.js

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

/*!
 * The Sutton SignWriting Web Components
 */
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { f as fsw } from './fsw.js';
import { d as draggabilly } from './draggabilly.js';

const fswPaletteSymbolCss = "*.sc-fsw-palette-symbol,*.sc-fsw-palette-symbol::before,*.sc-fsw-palette-symbol::after{box-sizing:border-box}.sc-fsw-palette-symbol-h{--font-color:#424242;--button-color:lightgray;--button-hover:darkgray;--bg-color:#fff}[data-color-mode=\"dark\"] .sc-fsw-palette-symbol-h,[data-theme=\"dark\"] .sc-fsw-palette-symbol-h{--font-color:#e1e1ff;--button-color:gray;--button-hover:darkgray;--bg-color:#161625}.swu.sc-fsw-palette-symbol{font-family:SuttonSignWritingOneD !important}.sc-fsw-palette-symbol-h{border:1px solid var(--font-color);cursor:move;font-size:30px;color:var(--font-color);background:var(--bg-color)}.is-dragging.sc-fsw-palette-symbol-h{border:0px;z-index:1;text-align:initial;vertical-align:top;line-height:0px;font-size:0px;background:transparent}.sc-fsw-palette-symbol-s>svg{position:absolute;display:block;top:2.5%;bottom:2.5%;left:2.5%;right:2.5%;margin:auto;max-width:95%;max-height:95%;cursor:default}.sc-fsw-palette-symbol-h.is-dragging.sc-fsw-palette-symbol-s>svg{top:0;bottom:initial;left:0;right:initial;margin:0;max-width:initial;max-height:initial}.sc-fsw-palette-symbol-s>svg g text.sym-line{fill:var(--font-color) !important}.sc-fsw-palette-symbol-s>svg g text.sym-fill{fill:var(--bg-color) !important}";

const FswPaletteSymbol = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.paletteSymbolClick = createEvent(this, "paletteSymbolClick", 7);
    this.paletteSymbolDrop = createEvent(this, "paletteSymbolDrop", 7);
    this.sgnw = window.sgnw;
  }
  paletteSymbolClickHandler() {
    this.paletteSymbolClick.emit(this.symbol);
  }
  paletteSymbolDropHandler({}, pointer) {
    this.paletteSymbolDrop.emit({ encoding: "fsw", symbol: this.symbol, x: pointer.pageX, y: pointer.pageY });
    this.el.style.top = "0";
    this.el.style.left = "0";
  }
  connectedCallback() {
    if (!this.sgnw) {
      let self = this;
      function handleSgnw() {
        self.sgnw = window.sgnw;
        window.removeEventListener("sgnw", handleSgnw, false);
      }
      window.addEventListener('sgnw', handleSgnw, false);
    }
  }
  componentDidLoad() {
    this.draggie = new draggabilly(this.el);
    this.draggie.on('staticClick', this.paletteSymbolClickHandler.bind(this));
    this.draggie.on('dragEnd', this.paletteSymbolDropHandler.bind(this));
  }
  render() {
    return (h(Host, { symbol: this.symbol, innerHTML: this.sgnw ? fsw.symbolSvg(this.symbol) : '' }));
  }
  get el() { return this; }
  static get style() { return fswPaletteSymbolCss; }
}, [2, "fsw-palette-symbol", {
    "symbol": [1537],
    "sgnw": [32]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["fsw-palette-symbol"];
  components.forEach(tagName => { switch (tagName) {
    case "fsw-palette-symbol":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, FswPaletteSymbol);
      }
      break;
  } });
}

export { FswPaletteSymbol as F, defineCustomElement as d };