@record-evolution/widget-overlay 1.0.1

package/dist/widget-overlay.js

@@ -0,0 +1,650 @@
+/* @license Copyright (c) 2023 Record Evolution GmbH. All rights reserved.*/
+import { n as n$1, T, E, Z, i as i$2, _ as __decorate, a as i$3, x } from './property-v0slTy4i.js';
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function r$1(r) {
+  return n$1({
+    ...r,
+    state: !0,
+    attribute: !1
+  });
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e$3 = (e, t, c) => (c.configurable = !0, c.enumerable = !0, Reflect.decorate && "object" != typeof t && Object.defineProperty(e, t, c), c);
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function e$2(e, r) {
+  return (n, s, i) => {
+    const o = t => t.renderRoot?.querySelector(e) ?? null;
+    return e$3(n, s, {
+      get() {
+        return o(this);
+      }
+    });
+  };
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$2 = {
+    ATTRIBUTE: 1,
+    CHILD: 2,
+    PROPERTY: 3,
+    BOOLEAN_ATTRIBUTE: 4,
+    EVENT: 5,
+    ELEMENT: 6
+  },
+  e$1 = t => (...e) => ({
+    _$litDirective$: t,
+    values: e
+  });
+let i$1 = class i {
+  constructor(t) {}
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(t, e, i) {
+    this._$Ct = t, this._$AM = e, this._$Ci = i;
+  }
+  _$AS(t, e) {
+    return this.update(t, e);
+  }
+  update(t, e) {
+    return this.render(...e);
+  }
+};
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const n = "important",
+  i = " !" + n,
+  o$1 = e$1(class extends i$1 {
+    constructor(t) {
+      if (super(t), t.type !== t$2.ATTRIBUTE || "style" !== t.name || t.strings?.length > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
+    }
+    render(t) {
+      return Object.keys(t).reduce((e, r) => {
+        const s = t[r];
+        return null == s ? e : e + `${r = r.includes("-") ? r : r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${s};`;
+      }, "");
+    }
+    update(e, [r]) {
+      const {
+        style: s
+      } = e.element;
+      if (void 0 === this.ft) return this.ft = new Set(Object.keys(r)), this.render(r);
+      for (const t of this.ft) null == r[t] && (this.ft.delete(t), t.includes("-") ? s.removeProperty(t) : s[t] = null);
+      for (const t in r) {
+        const e = r[t];
+        if (null != e) {
+          this.ft.add(t);
+          const r = "string" == typeof e && e.endsWith(i);
+          t.includes("-") || r ? s.setProperty(t, r ? e.slice(0, -11) : e, r ? n : "") : s[t] = e;
+        }
+      }
+      return T;
+    }
+  });
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class e extends i$1 {
+  constructor(i) {
+    if (super(i), this.it = E, i.type !== t$2.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+  }
+  render(r) {
+    if (r === E || null == r) return this._t = void 0, this.it = r;
+    if (r === T) return r;
+    if ("string" != typeof r) throw Error(this.constructor.directiveName + "() called with a non-string value");
+    if (r === this.it) return this._t;
+    this.it = r;
+    const s = [r];
+    return s.raw = s, this._t = {
+      _$litType$: this.constructor.resultType,
+      strings: s,
+      values: []
+    };
+  }
+}
+e.directiveName = "unsafeHTML", e.resultType = 1;
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let t$1 = class t extends e {};
+t$1.directiveName = "unsafeSVG", t$1.resultType = 2;
+const o = e$1(t$1);
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const {
+    I: t
+  } = Z,
+  s = () => document.createComment(""),
+  r = (o, i, n) => {
+    const e = o._$AA.parentNode,
+      l = void 0 === i ? o._$AB : i._$AA;
+    if (void 0 === n) {
+      const i = e.insertBefore(s(), l),
+        c = e.insertBefore(s(), l);
+      n = new t(i, c, o, o.options);
+    } else {
+      const t = n._$AB.nextSibling,
+        i = n._$AM,
+        c = i !== o;
+      if (c) {
+        let t;
+        n._$AQ?.(o), n._$AM = o, void 0 !== n._$AP && (t = o._$AU) !== i._$AU && n._$AP(t);
+      }
+      if (t !== l || c) {
+        let o = n._$AA;
+        for (; o !== t;) {
+          const t = o.nextSibling;
+          e.insertBefore(o, l), o = t;
+        }
+      }
+    }
+    return n;
+  },
+  v = (o, t, i = o) => (o._$AI(t, i), o),
+  u$1 = {},
+  m = (o, t = u$1) => o._$AH = t,
+  p = o => o._$AH,
+  M = o => {
+    o._$AP?.(!1, !0);
+    let t = o._$AA;
+    const i = o._$AB.nextSibling;
+    for (; t !== i;) {
+      const o = t.nextSibling;
+      t.remove(), t = o;
+    }
+  };
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const u = (e, s, t) => {
+    const r = new Map();
+    for (let l = s; l <= t; l++) r.set(e[l], l);
+    return r;
+  },
+  c = e$1(class extends i$1 {
+    constructor(e) {
+      if (super(e), e.type !== t$2.CHILD) throw Error("repeat() can only be used in text expressions");
+    }
+    dt(e, s, t) {
+      let r;
+      void 0 === t ? t = s : void 0 !== s && (r = s);
+      const l = [],
+        o = [];
+      let i = 0;
+      for (const s of e) l[i] = r ? r(s, i) : i, o[i] = t(s, i), i++;
+      return {
+        values: o,
+        keys: l
+      };
+    }
+    render(e, s, t) {
+      return this.dt(e, s, t).values;
+    }
+    update(s, [t, r$1, c]) {
+      const d = p(s),
+        {
+          values: p$1,
+          keys: a
+        } = this.dt(t, r$1, c);
+      if (!Array.isArray(d)) return this.ut = a, p$1;
+      const h = this.ut ??= [],
+        v$1 = [];
+      let m$1,
+        y,
+        x = 0,
+        j = d.length - 1,
+        k = 0,
+        w = p$1.length - 1;
+      for (; x <= j && k <= w;) if (null === d[x]) x++;else if (null === d[j]) j--;else if (h[x] === a[k]) v$1[k] = v(d[x], p$1[k]), x++, k++;else if (h[j] === a[w]) v$1[w] = v(d[j], p$1[w]), j--, w--;else if (h[x] === a[w]) v$1[w] = v(d[x], p$1[w]), r(s, v$1[w + 1], d[x]), x++, w--;else if (h[j] === a[k]) v$1[k] = v(d[j], p$1[k]), r(s, d[x], d[j]), j--, k++;else if (void 0 === m$1 && (m$1 = u(a, k, w), y = u(h, x, j)), m$1.has(h[x])) {
+        if (m$1.has(h[j])) {
+          const e = y.get(a[k]),
+            t = void 0 !== e ? d[e] : null;
+          if (null === t) {
+            const e = r(s, d[x]);
+            v(e, p$1[k]), v$1[k] = e;
+          } else v$1[k] = v(t, p$1[k]), r(s, d[x], t), d[e] = null;
+          k++;
+        } else M(d[j]), j--;
+      } else M(d[x]), x++;
+      for (; k <= w;) {
+        const e = r(s, v$1[w + 1]);
+        v(e, p$1[k]), v$1[k++] = e;
+      }
+      for (; x <= j;) {
+        const e = d[x++];
+        null !== e && M(e);
+      }
+      return this.ut = a, m(s, v$1), T;
+    }
+  });
+
+class WidgetImage extends i$3 {
+    constructor() {
+        super();
+        this.renderMap = {
+            progress: this.renderProgress.bind(this),
+            text: this.renderText.bind(this),
+            switch: this.renderSwitch.bind(this),
+            html: this.renderHtml.bind(this)
+        };
+        this.version = '1.0.1';
+        this.getModifier = this.getModifier.bind(this);
+    }
+    update(changedProperties) {
+        if (changedProperties.has('inputData')) {
+            this.transform();
+            if (!this.modifier)
+                this.getModifier();
+        }
+        if (changedProperties.has('theme')) {
+            this.registerTheme(this.theme);
+        }
+        super.update(changedProperties);
+    }
+    firstUpdated(_changedProperties) {
+        this.registerTheme(this.theme);
+        const ro = new ResizeObserver(this.getModifier);
+        ro.observe(this);
+    }
+    registerTheme(theme) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim();
+        const cssBgColor = getComputedStyle(this).getPropertyValue('--re-tile-background-color').trim();
+        this.themeBgColor = cssBgColor || ((_b = (_a = this.theme) === null || _a === void 0 ? void 0 : _a.theme_object) === null || _b === void 0 ? void 0 : _b.backgroundColor);
+        this.themeTitleColor = cssTextColor || ((_f = (_e = (_d = (_c = this.theme) === null || _c === void 0 ? void 0 : _c.theme_object) === null || _d === void 0 ? void 0 : _d.title) === null || _e === void 0 ? void 0 : _e.textStyle) === null || _f === void 0 ? void 0 : _f.color);
+        this.themeSubtitleColor =
+            cssTextColor || ((_k = (_j = (_h = (_g = this.theme) === null || _g === void 0 ? void 0 : _g.theme_object) === null || _h === void 0 ? void 0 : _h.title) === null || _j === void 0 ? void 0 : _j.subtextStyle) === null || _k === void 0 ? void 0 : _k.color) || this.themeTitleColor;
+    }
+    handleFileChange(ev) {
+        var _a;
+        const input = ev.target;
+        const file = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (!file)
+            return;
+        // Revoke previous object URL
+        if (this.previewUrl)
+            URL.revokeObjectURL(this.previewUrl);
+        this.previewUrl = URL.createObjectURL(file);
+        this.dispatchEvent(new CustomEvent('overlay-file-selected', {
+            detail: { file, name: file.name, size: file.size, type: file.type, url: this.previewUrl },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    transform() {
+        var _a, _b, _c;
+        this.inlineSvg = undefined;
+        if (!((_a = this.inputData) === null || _a === void 0 ? void 0 : _a.image)) {
+            this.previewUrl = undefined;
+            return;
+        }
+        const raw = this.inputData.image.trim();
+        // Dynamically load progress bar element if needed
+        if ((_c = (_b = this.inputData) === null || _b === void 0 ? void 0 : _b.overlays) === null || _c === void 0 ? void 0 : _c.some((o) => o.layerType === 'progress')) {
+            import('./linear-progress.js');
+        }
+        // Inline SVG markup (optionally starting with an XML declaration or other preamble)
+        const trimmed = raw.replace(/^\uFEFF/, '').trimStart();
+        // Find the actual <svg ...>...</svg> block even if preceded by <?xml ...?> or <!DOCTYPE ...>
+        const svgBlockMatch = trimmed.match(/<svg[\s\S]*?<\/svg>/i);
+        if (svgBlockMatch) {
+            this.inlineSvg = svgBlockMatch[0].trim();
+            this.previewUrl = undefined;
+            return;
+        }
+        // Full data URL (already encoded)
+        if (/^data:image\/svg\+xml[,;]/.test(raw)) {
+            // It's an SVG data URL; we could theoretically decode, but safer to keep as src
+            this.previewUrl = raw;
+            return;
+        }
+        if (/^data:image\/[a-zA-Z.+-]+;base64,/.test(raw)) {
+            this.previewUrl = raw;
+            return;
+        }
+        // Bare base64 string (heuristic)
+        if (/^[A-Za-z0-9+/]+=*$/.test(raw) && raw.length > 100) {
+            this.previewUrl = `data:image/*;base64,${raw}`;
+            return;
+        }
+        // Absolute URL
+        try {
+            new URL(raw);
+            this.previewUrl = raw;
+            return;
+        }
+        catch (_d) {
+            // Relative path
+            if (/^([./]|\/)/.test(raw)) {
+                this.previewUrl = raw;
+                return;
+            }
+        }
+        // Fallback
+        this.previewUrl = undefined;
+    }
+    async getModifier() {
+        var _a;
+        if (!this.baseLayer)
+            return;
+        const rect = this.baseLayer.getBoundingClientRect();
+        if (!rect)
+            return;
+        const containerRect = (_a = this.baseLayer.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!containerRect)
+            return;
+        let intrinsicWidth;
+        let intrinsicHeight;
+        if (this.baseLayer instanceof HTMLImageElement) {
+            // For <img>
+            intrinsicWidth = this.baseLayer.naturalWidth;
+            intrinsicHeight = this.baseLayer.naturalHeight;
+        }
+        else {
+            const innerSvg = this.baseLayer.querySelector('svg');
+            if (innerSvg) {
+                // For <svg>
+                const viewBox = innerSvg.viewBox.baseVal;
+                console.log(viewBox);
+                if (viewBox && viewBox.width > 0 && viewBox.height > 0) {
+                    intrinsicWidth = viewBox.width;
+                    intrinsicHeight = viewBox.height;
+                }
+                else {
+                    // fallback to width/height attributes if set
+                    const widthAttr = this.baseLayer.getAttribute('width');
+                    const heightAttr = this.baseLayer.getAttribute('height');
+                    if (widthAttr && heightAttr) {
+                        intrinsicWidth = parseFloat(widthAttr);
+                        intrinsicHeight = parseFloat(heightAttr);
+                    }
+                }
+            }
+        }
+        if (!intrinsicWidth || !intrinsicHeight)
+            return;
+        // Actual visible area of the image/svg
+        const scaleX = rect.width / intrinsicWidth;
+        const scaleY = rect.height / intrinsicHeight;
+        const scale = Math.min(scaleX, scaleY);
+        const visibleWidth = intrinsicWidth * scale;
+        const visibleHeight = intrinsicHeight * scale;
+        const xOffset = (containerRect.width - visibleWidth) / 2;
+        const yOffset = (containerRect.height - visibleHeight) / 2;
+        this.modifier = { scaler: scale, xOffset, yOffset, visibleWidth, visibleHeight };
+    }
+    getOverlayItemPosition(relX, relY, modifier) {
+        return {
+            left: modifier.xOffset + relX * modifier.visibleWidth,
+            top: modifier.yOffset + relY * modifier.visibleHeight
+        };
+    }
+    renderText(_overlay, item, modifier) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const overlay = _overlay;
+        const pos = this.getOverlayItemPosition(item.relXPos, item.relYPos, modifier);
+        if (!pos)
+            return E;
+        const precision = (_b = (_a = overlay.textStyle) === null || _a === void 0 ? void 0 : _a.precision) !== null && _b !== void 0 ? _b : 1;
+        let value = item.data;
+        const numericValue = Number(value);
+        let color = '#333';
+        if (!Number.isNaN(numericValue)) {
+            if (typeof precision === 'number' && precision >= 0) {
+                value = numericValue.toFixed(precision);
+                const sectionIndex = (_d = (_c = overlay.sections) === null || _c === void 0 ? void 0 : _c.sectionLimits.findIndex((limit) => numericValue <= limit)) !== null && _d !== void 0 ? _d : -2;
+                color = (_f = (sectionIndex >= 1 ? (_e = overlay.sections) === null || _e === void 0 ? void 0 : _e.colors[sectionIndex - 1] : '#333')) !== null && _f !== void 0 ? _f : '#333';
+            }
+        }
+        const styles = {
+            'font-size': ((_g = overlay.textStyle.fontSize) !== null && _g !== void 0 ? _g : 14) * modifier.scaler + 'px',
+            color,
+            'background-color': overlay.textStyle.backgroundColor,
+            'font-weight': overlay.textStyle.fontWeight,
+            left: `${pos.left}px`,
+            top: `${pos.top}px`,
+            'border-radius': 10 * modifier.scaler + 'px',
+            'transform-origin': '50% 50%',
+            transform: `translate(-50%, -50%)`,
+            padding: `${6 * modifier.scaler}px ${12 * modifier.scaler}px`
+        };
+        return x ` <div class="overlay-item" style=${o$1(styles)}>${item.title} ${value}</div> `;
+    }
+    renderProgress(_overlay, item, modifier) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        const overlay = _overlay;
+        const pos = this.getOverlayItemPosition(item.relXPos, item.relYPos, modifier);
+        if (!pos)
+            return E;
+        const sectionIndex = (_b = (_a = overlay.sections) === null || _a === void 0 ? void 0 : _a.sectionLimits.findIndex((limit) => Number(item.data) <= limit)) !== null && _b !== void 0 ? _b : -2;
+        const sectionColor = sectionIndex >= 1 ? (_c = overlay.sections) === null || _c === void 0 ? void 0 : _c.colors[sectionIndex - 1] : undefined;
+        const styles = {
+            '--progress-color': sectionColor !== null && sectionColor !== void 0 ? sectionColor : '#333',
+            '--progress-width': ((_e = (_d = overlay.progressStyle) === null || _d === void 0 ? void 0 : _d.width) !== null && _e !== void 0 ? _e : 10) * modifier.scaler + 'px',
+            '--progress-height': ((_g = (_f = overlay.progressStyle) === null || _f === void 0 ? void 0 : _f.height) !== null && _g !== void 0 ? _g : 100) * modifier.scaler + 'px',
+            '--progress-background': (_j = (_h = overlay.progressStyle) === null || _h === void 0 ? void 0 : _h.backgroundColor) !== null && _j !== void 0 ? _j : '#fff',
+            'border-radius': 10 * modifier.scaler + 'px',
+            'transform-origin': '50% 50%',
+            transform: `translate(-50%, -50%) rotate(${(_l = (_k = overlay.progressStyle) === null || _k === void 0 ? void 0 : _k.rotate) !== null && _l !== void 0 ? _l : 0}deg)`,
+            left: `${pos.left}px`,
+            top: `${pos.top}px`
+        };
+        // Derive percentage based on item.data within overlay.sections min/max.
+        // Supports several possible property names; falls back to sectionLimits array.
+        const rawValue = Number(item.data);
+        const sections = (_m = overlay.sections) !== null && _m !== void 0 ? _m : {};
+        const min = Math.min(...sections.sectionLimits.map(Number));
+        const max = Math.max(...sections.sectionLimits.map(Number));
+        let percent = max === min ? 0 : (rawValue - min) / (max - min);
+        percent = Math.min(1, Math.max(0, percent));
+        // percent now holds the normalized 0-100 percentage for rawValue
+        return x ` <linear-progress .value=${percent} style=${o$1(styles)}></linear-progress> `;
+    }
+    renderHtml(_overlay, item, modifier) {
+        return x ` <div>${item.title}: ${item.data}</div> `;
+    }
+    renderSwitch(_overlay, item, modifier) {
+        return x ` <div>${item.title}: ${item.data}</div> `;
+    }
+    renderLayer(overlay) {
+        var _a;
+        const modifier = this.modifier;
+        if (!modifier)
+            return E;
+        return x ` ${c((_a = overlay.items) !== null && _a !== void 0 ? _a : [], (item) => item.title, (item) => {
+            return x ` ${this.renderMap[overlay.layerType](overlay, item, modifier)} `;
+        })}`;
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        const hasImage = !!this.inlineSvg || !!this.previewUrl;
+        return x `
+            <div class="wrapper" style="background-color: ${this.themeBgColor}">
+                <h3 class="paging" ?active=${(_a = this.inputData) === null || _a === void 0 ? void 0 : _a.title} style="color: ${this.themeTitleColor}">
+                    ${(_b = this.inputData) === null || _b === void 0 ? void 0 : _b.title}
+                </h3>
+                <p
+                    class="paging"
+                    ?active=${(_c = this.inputData) === null || _c === void 0 ? void 0 : _c.subTitle}
+                    style="color: ${this.themeSubtitleColor}"
+                >
+                    ${(_d = this.inputData) === null || _d === void 0 ? void 0 : _d.subTitle}
+                </p>
+
+                <div class="paging no-data" ?active=${!hasImage}>No Image</div>
+                <div class="img-container paging" ?active="${hasImage}">
+                    ${this.inlineSvg
+            ? x `<div id="base-layer" class="svg-wrapper">${o(this.inlineSvg)}</div>`
+            : this.previewUrl
+                ? x `<img
+                                id="base-layer"
+                                @load="${this.getModifier}"
+                                src="${this.previewUrl}"
+                                alt="Image Widget"
+                            />`
+                : ''}
+                    ${c((_f = (_e = this.inputData) === null || _e === void 0 ? void 0 : _e.overlays) !== null && _f !== void 0 ? _f : [], (o) => o.layerName, (o) => x `
+                            <div class="overlay" type="${o.layerType}" name="${o.layerName}">
+                                ${this.renderLayer(o)}
+                            </div>
+                        `)}
+                </div>
+            </div>
+        `;
+    }
+}
+WidgetImage.styles = i$2 `
+        :host {
+            display: block;
+            font-family: sans-serif;
+            box-sizing: border-box;
+            margin: auto;
+        }
+
+        .paging:not([active]) {
+            display: none !important;
+        }
+
+        .wrapper {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            width: 100%;
+            padding: 16px;
+            box-sizing: border-box;
+        }
+
+        .svg-wrapper {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            position: relative;
+        }
+
+        .svg-wrapper svg {
+            width: 100%;
+            height: 100%;
+            display: block;
+            /* preserveAspectRatio inside SVG handles "contain"-like scaling */
+        }
+
+        h3 {
+            margin: 0;
+            max-width: 300px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        p {
+            margin: 10px 0 0 0;
+            max-width: 300px;
+            font-size: 14px;
+            line-height: 17px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .img-container {
+            flex: 1;
+            box-sizing: border-box;
+            overflow: hidden;
+            position: relative;
+        }
+
+        img {
+            width: 100%; /* Set the width of the container */
+            height: 100%;
+            object-fit: contain;
+        }
+        .no-data {
+            font-size: 20px;
+            display: flex;
+            height: 100%;
+            width: 100%;
+            text-align: center;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            pointer-events: none;
+        }
+
+        .overlay-item {
+            position: absolute;
+            pointer-events: auto;
+        }
+    `;
+__decorate([
+    n$1({ type: Object })
+], WidgetImage.prototype, "inputData", void 0);
+__decorate([
+    n$1({ type: Object })
+], WidgetImage.prototype, "theme", void 0);
+__decorate([
+    r$1()
+], WidgetImage.prototype, "themeBgColor", void 0);
+__decorate([
+    r$1()
+], WidgetImage.prototype, "themeTitleColor", void 0);
+__decorate([
+    r$1()
+], WidgetImage.prototype, "themeSubtitleColor", void 0);
+__decorate([
+    r$1()
+], WidgetImage.prototype, "previewUrl", void 0);
+__decorate([
+    r$1()
+], WidgetImage.prototype, "inlineSvg", void 0);
+__decorate([
+    r$1()
+], WidgetImage.prototype, "modifier", void 0);
+__decorate([
+    e$2('#base-layer')
+], WidgetImage.prototype, "baseLayer", void 0);
+window.customElements.define('widget-overlay-1.0.1', WidgetImage);
+
+export { WidgetImage };
+//# sourceMappingURL=widget-overlay.js.map