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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
'use strict';

var index = require('./index-DWu-2oJc.js');

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

const PnIllustration = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    get hostElement() { return index.getElement(this); }
    /** The SVG content of the illustration you want to use. The viewBox property will be used to determine width/height */
    illustration;
    /** Set the width of the SVG element. Any valid CSS width value is allowed */
    width;
    /** Set the height of the SVG element. Any valid CSS height value is allowed */
    height;
    /** Make the SVG fill to its parent size (sets width/height 100% and `display: block` instead of `inline-block`) */
    fill = false;
    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 (index.h(index.Host, { key: '30a6824eaa6972efee63b5f893defb80bac7821c' }, index.h("span", { key: 'd27b45f1789b6c93d34ab0b1c673bda9fff60c0b', role: "presentation", class: "pn-illustration", "data-fill": this.fill, innerHTML: this.illustration })));
    }
    static get watchers() { return {
        "fill": [{
                "handleFill": 0
            }]
    }; }
};
PnIllustration.style = pnIllustrationCss();

exports.pn_illustration = PnIllustration;