@postnord/web-components/esm/pn-illustration.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { r as registerInstance, g as getElement, h, a as Host } from './index-5606614b.js';

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 = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.illustration = undefined;
        this.width = undefined;
        this.height = undefined;
        this.fill = false;
    }
    get hostElement() { return getElement(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"]
    }; }
};
PnIllustration.style = PnIllustrationStyle0;

export { PnIllustration as pn_illustration };

//# sourceMappingURL=pn-illustration.entry.js.map