import { h, Host } from "@stencil/core";
import { rOnLoad } from "../../../utils/helpers";
import { inheritAttributes } from "../../../utils/attributes";
import { BEM } from "../../../utils/bem";
export class StageImage {
    constructor() {
        this.imageInheritAttributes = {};
        this.isOnLoadEventDone = false;
    }
    componentDidLoad() {
        rOnLoad(() => {
            this.isOnLoadEventDone = true;
        });
    }
    componentWillLoad() {
        this.imageInheritAttributes = inheritAttributes(this.el, ['alt']);
    }
    render() {
        const block = BEM.block('stage-image');
        const imageSrc = this.fallback ? this.fallback : this.srcSet.split(',')[0];
        return (h(Host, { key: 'a328489d91f055d488a89e4e2f4297db63d2eec1', class: Object.assign({}, block.class()) }, this.isOnLoadEventDone ? (h("img", Object.assign({ src: imageSrc, srcset: this.srcSet, sizes: "100vw" }, this.imageInheritAttributes))) : ('')));
    }
    static get is() { return "bal-stage-image"; }
    static get properties() {
        return {
            "srcSet": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "set of images to be used as background image"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "src-set"
            },
            "fallback": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "optional fallback image in case the srcSet fails"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "fallback"
            }
        };
    }
    static get states() {
        return {
            "isOnLoadEventDone": {}
        };
    }
    static get elementRef() { return "el"; }
}
