@aqua-ds/web-components/components-build/aq-checkboard2.js

AquaDS Web Components

import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';

const aqCheckboardCss = ".vc-checkerboard{position:absolute;top:0px;right:0px;bottom:0px;left:0px;background-size:contain;border-radius:2px;background-size:auto}";

const AqCheckboard = /*@__PURE__*/ proxyCustomElement(class AqCheckboard extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.white = '#fff';
        this.grey = '#e6e6e6';
        this.size = 8;
        this.checkboardCache = {};
    }
    renderCheckboard(c1, c2, size) {
        if (typeof document === 'undefined') {
            return null;
        }
        const canvas = document.createElement('canvas');
        canvas.width = canvas.height = size * 2;
        const ctx = canvas.getContext('2d');
        if (!ctx) {
            return null;
        }
        ctx.fillStyle = c1;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = c2;
        ctx.fillRect(0, 0, size, size);
        ctx.translate(size, size);
        ctx.fillRect(0, 0, size, size);
        return canvas.toDataURL();
    }
    getCheckboard(c1, c2, size) {
        const key = `${c1},${c2},${size}`;
        if (this.checkboardCache[key]) {
            return this.checkboardCache[key];
        }
        const checkboard = this.renderCheckboard(c1, c2, size);
        this.checkboardCache[key] = checkboard;
        return checkboard;
    }
    get bgStyle() {
        return {
            'background-image': `url(${this.getCheckboard(this.white, this.grey, this.size)})`,
        };
    }
    render() {
        return (h("div", { key: '488bdf8e243aab532f20791ea355d3c78a73278b', class: "vc-checkerboard", style: this.bgStyle }));
    }
    static get style() { return aqCheckboardCss; }
}, [256, "aq-checkboard", {
        "white": [1],
        "grey": [1],
        "size": [2]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["aq-checkboard"];
    components.forEach(tagName => { switch (tagName) {
        case "aq-checkboard":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, AqCheckboard);
            }
            break;
    } });
}

export { AqCheckboard as A, defineCustomElement as d };