@senx/discovery-code/dist/components/discovery-code-image-result2.js

Discovery Code Editor

import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { C as Config, U as Utils } from './config.js';
import { L as Logger } from './logger.js';
import { J as JsonLib } from './jsonLib.js';

const discoveryCodeImageResultCss = ":host,discovery-code-image-result{height:100%;display:block}:host .wrapper-result,discovery-code-image-result .wrapper-result{padding:10px}:host img,discovery-code-image-result img{border-style:solid;border-color:var(--warp-view-image-border-color, #404040);border-width:1.1px;background-color:#fff;background-image:linear-gradient(45deg, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef), linear-gradient(45deg, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef);background-position:0 0, 10px 10px;background-size:21px 21px}";
const DiscoveryCodeImageResultStyle0 = discoveryCodeImageResultCss;

const DiscoveryCodeImageResult = /*@__PURE__*/ proxyCustomElement(class DiscoveryCodeImageResult extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.theme = undefined;
        this.config = new Config();
        this.debug = false;
        this.result = undefined;
        this.loading = false;
        this.imageList = [];
        this.innerResult = undefined;
        this.innerTheme = undefined;
        this.innerConfig = undefined;
        this.LOG = new Logger(DiscoveryCodeImageResult, this.debug);
    }
    setDebug(newValue) {
        this.LOG.setDebug(newValue);
    }
    setTheme(newValue) {
        this.innerTheme = newValue;
    }
    setResult(newValue) {
        this.loading = true;
        if (typeof newValue === 'string') {
            this.innerResult = new JsonLib().parse(newValue || '[]', undefined);
        }
        else {
            this.innerResult = newValue;
        }
        this.LOG.debug(['isArray'], 'The new value of result is: ', this.innerResult);
        this.imageList = undefined;
        if (this.innerResult && Utils.isArray(this.innerResult)) {
            this.imageList = this.innerResult.filter((v) => ((typeof (v) === 'string') && (String(v).startsWith('data:image/png;base64,'))));
        }
        else {
            this.imageList = [];
        }
        this.loading = false;
        setTimeout(() => this.imageList = this.imageList.slice());
    }
    componentWillLoad() {
        this.setTheme(this.theme);
        this.setResult(this.result);
    }
    isArray(arr) {
        return Utils.isArray(arr);
    }
    render() {
        return h("div", { key: '4cadf1281ef8f9e1472c51e56b0e0231e006236d', class: 'wrapper-result ' + this.innerTheme }, this.innerResult && this.isArray(this.innerResult)
            ? h("div", { class: this.innerTheme + ' image' }, this.imageList.map((img, i) => h("div", { class: "image" }, h("h2", null, "Image ", i + 1), h("img", { src: img, alt: "Image" }))))
            : '');
    }
    static get watchers() { return {
        "debug": ["setDebug"],
        "theme": ["setTheme"],
        "result": ["setResult"]
    }; }
    static get style() { return DiscoveryCodeImageResultStyle0; }
}, [1, "discovery-code-image-result", {
        "theme": [1],
        "config": [1],
        "debug": [4],
        "result": [1],
        "loading": [32],
        "imageList": [32],
        "innerResult": [32],
        "innerTheme": [32],
        "innerConfig": [32]
    }, undefined, {
        "debug": ["setDebug"],
        "theme": ["setTheme"],
        "result": ["setResult"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["discovery-code-image-result"];
    components.forEach(tagName => { switch (tagName) {
        case "discovery-code-image-result":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, DiscoveryCodeImageResult);
            }
            break;
    } });
}

export { DiscoveryCodeImageResult as D, defineCustomElement as d };