@postnord/web-components/components/pn-illustration2.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';

const pnIllustrationCss = "pn-illustration{display:inline-block}pn-illustration[data-fill]{display:block}pn-illustration>svg{width:var(--pn-width);height:var(--pn-height);display:block}";
const PnIllustrationStyle0 = pnIllustrationCss;

const PnIllustration = /*@__PURE__*/ proxyCustomElement(class PnIllustration extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.illustration = undefined;
        this.width = undefined;
        this.height = undefined;
        this.fill = false;
    }
    get hostElement() { return this; }
    handleFill() {
        if (this.fill) {
            this.width = '100%';
            this.height = '100%';
        }
    }
    componentWillRender() {
        this.handleFill();
        if (this.width || this.height)
            return this.setSizes();
        this.getSizeFromSvg();
    }
    componentDidRender() {
        this.hostElement.querySelector('svg')?.setAttribute('width', this.width);
        this.hostElement.querySelector('svg')?.setAttribute('height', this.height);
    }
    getSizeFromSvg() {
        const viewBox = this.illustration?.match(/<svg[^>]*?viewBox=(["\'])?((?:.(?!\1|>))*.?)\1?/)?.[2];
        if (!viewBox)
            return;
        const [, , width = '', height = ''] = viewBox?.split(' ') || [];
        if (!width || !height)
            return;
        this.width = `${Number(width)}px`;
        this.height = `${Number(height)}px`;
        this.setSizes();
    }
    setSizes() {
        this.hostElement.style.setProperty('--pn-width', this.width);
        this.hostElement.style.setProperty('--pn-height', this.height);
    }
    render() {
        return h(Host, { key: 'c1677d05f7d693f70e591659a89510f6f01062fe', role: "presentation", innerHTML: this.illustration, "data-fill": this.fill });
    }
    static get watchers() { return {
        "fill": ["handleFill"]
    }; }
    static get style() { return PnIllustrationStyle0; }
}, [0, "pn-illustration", {
        "illustration": [1],
        "width": [1025],
        "height": [1025],
        "fill": [4]
    }, undefined, {
        "fill": ["handleFill"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-illustration"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-illustration":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnIllustration);
            }
            break;
    } });
}

export { PnIllustration as P, defineCustomElement as d };

//# sourceMappingURL=pn-illustration2.js.map