import { h, Host } from "@stencil/core";
const mockStringArray = '[ { "preamble": "Million parcels","formatStyle":"None", "format":"En","startValue":0, "data": 2023, "unit": null, "duration": 0 }, { "preamble": "Million parcels", "format": "En", "startValue":40, "data": 226, "unit": null, "duration": 1000 },{"preamble": "carbon dioxide emissions since 2009", "startValue":0, "format":"En", "formatStyle":"None", "data": -44, "unit": "%", "duration": 2000 }, { "preamble": "Million parcels", "startValue":100, "data": 226, "unit": null, "duration": 1000 }, {"preamble": "carbon dioxide emissions since 2009", "startValue": 30, "data": -44, "unit": "%", "duration": 2000 }, { "preamble": "Million parcels", "startValue": 20, "data": 226, "unit": null, "duration": 1000 }]';
export class PnStatsInfo {
    constructor() {
        this.heading = null;
        this.dataArray = mockStringArray;
        this.backgroundUrl = null;
        this.myParsedArray = JSON.parse(this.dataArray);
    }
    parseMyArrayProp(newValue) {
        if (newValue)
            this.myParsedArray = JSON.parse(newValue);
    }
    render() {
        return (h(Host, { key: 'c0e816e4c281e81f243b88a2ccc7cb3f82e6d2a2' }, h("div", { key: '666152f5223cde318b12d55b4175b7622be3cb23', class: "pn-stats-info__container" }, h("div", { key: '29a902e1b93a94f9428fdf341eaba640177d4f14', class: "pn-stats-info__container__map", style: { backgroundImage: `url(${this.backgroundUrl})` } }), h("div", { key: 'b25c11b6e98bc2b36ea9859fa63903b0b3df18aa', class: "pn-stats-info-image-container" }, h("slot", { key: '368b94a4c51905e322b47d3ab064021005470d82', name: "illustration" })), h("div", { key: 'cea4df0e76ca50601b32f94a9ca3a3beb2bd8b09', class: "pn-stats-info__container__content", style: { backgroundImage: `url(${this.backgroundUrl})` } }, this.heading && h("h3", { key: '1e58ffbdfe93b320aee779751f05d49f9d2d1064', class: "pn-stats-info__container__content__heading" }, this.heading), h("div", { key: 'dbc3c69b74be499f991159ebcd5eeb515a54f509', class: "pn-stats-info__container__content__data" }, this.myParsedArray &&
            this.myParsedArray.map((stats, index) => {
                return (h("pn-stats-info-data", { index: index, startValue: stats.startValue, data: stats.data, unit: stats.unit, preamble: stats.preamble, duration: stats.duration, format: stats.format, formatStyle: stats.formatStyle }));
            }))))));
    }
    static get is() { return "pn-stats-info"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-stats-info.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-stats-info.css"]
        };
    }
    static get properties() {
        return {
            "heading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "heading",
                "reflect": false,
                "defaultValue": "null"
            },
            "dataArray": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "data-array",
                "reflect": false,
                "defaultValue": "mockStringArray"
            },
            "backgroundUrl": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "background-url",
                "reflect": false,
                "defaultValue": "null"
            }
        };
    }
    static get states() {
        return {
            "myParsedArray": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "dataArray",
                "methodName": "parseMyArrayProp"
            }];
    }
}
//# sourceMappingURL=pn-stats-info.js.map
