/*!
 * Built with Stencil
 * By PostNord.
 */
import { h, Host } from "@stencil/core";
export class PnIllustration {
    hostElement;
    /** 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 h(Host, { key: '3f2e44ec10a5a2fc9fd9a69f94963ab4e79fb877', role: "presentation", innerHTML: this.illustration, "data-fill": this.fill });
    }
    static get is() { return "pn-illustration"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-illustration.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-illustration.css"]
        };
    }
    static get properties() {
        return {
            "illustration": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The SVG content of the illustration you want to use. The viewBox property will be used to determine width/height"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "illustration"
            },
            "width": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set the width of the SVG element. Any valid CSS width value is allowed"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "width"
            },
            "height": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set the height of the SVG element. Any valid CSS height value is allowed"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "height"
            },
            "fill": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Make the SVG fill to its parent size (sets width/height 100% and `display: block` instead of `inline-block`)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "fill",
                "defaultValue": "false"
            }
        };
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "fill",
                "methodName": "handleFill"
            }];
    }
}
