import { h } from '../webcomponents.core.js';

import './chunk-de721f0a.js';
import { s as Css, j as DomUtil } from './chunk-f9f1602a.js';

class Iframe {
    constructor() {
        this.fullscreenClass = 'iframe-holder-fullscreen';
        this.width = '100%';
        this.height = '420px';
        this.fullscreen = false;
        this.fullscreenMargin = '0,0,0,0';
    }
    onIframeLoaded() {
        this.iframeLoaded.emit({ src: this.src });
    }
    componentDidLoad() {
        this.postRender();
    }
    componentDidUpdate() {
        this.postRender();
    }
    postRender() {
        let iframe = this.el.getElementsByClassName('ema-iframe-iframe')[0];
        let holderEl = this.el.getElementsByClassName('ema-iframe-holder')[0];
        if (!this.fullscreen) {
            Css.setVar('width', this.width, this.el);
            Css.setVar('height', this.height, this.el);
            iframe.setAttribute('width', Css.getVar('width', this.el));
            iframe.setAttribute('height', Css.getVar('height', this.el));
        }
        if (this.fullscreen) {
            let margins = this.fullscreenMargin.split(',');
            if (margins.length && margins.length === 1) {
                Css.setVar('top', margins[0], this.el);
                Css.setVar('right', margins[0], this.el);
                Css.setVar('bottom', margins[0], this.el);
                Css.setVar('left', margins[0], this.el);
            }
            if (margins.length && margins.length === 2) {
                Css.setVar('top', margins[0], this.el);
                Css.setVar('right', margins[1], this.el);
                Css.setVar('bottom', margins[0], this.el);
                Css.setVar('left', margins[1], this.el);
            }
            if (margins.length && margins.length === 3) {
                Css.setVar('top', margins[0], this.el);
                Css.setVar('right', margins[1], this.el);
                Css.setVar('bottom', margins[2], this.el);
            }
            if (margins.length && margins.length === 4) {
                Css.setVar('top', margins[0], this.el);
                Css.setVar('right', margins[1], this.el);
                Css.setVar('bottom', margins[2], this.el);
                Css.setVar('left', margins[3], this.el);
            }
            DomUtil.addClass(holderEl, this.fullscreenClass);
        }
        if (this.zIndex)
            Css.setVar('zIndex', this.zIndex, this.el);
        iframe.onload = () => {
            Css.setVar('visibility', 'visible', this.el);
            this.iframeLoaded.emit({ src: this.src, el: this.el });
        };
    }
    render() {
        return (h("div", { class: 'ema-iframe-holder ' },
            h("iframe", { src: this.src, frameborder: "0", class: "ema-iframe-iframe" })));
    }
    static get is() { return "ema-iframe"; }
    static get properties() { return {
        "el": {
            "elementRef": true
        },
        "fullscreen": {
            "type": Boolean,
            "attr": "fullscreen"
        },
        "fullscreenMargin": {
            "type": String,
            "attr": "fullscreen-margin"
        },
        "height": {
            "type": String,
            "attr": "height"
        },
        "src": {
            "type": String,
            "attr": "src"
        },
        "width": {
            "type": String,
            "attr": "width"
        },
        "zIndex": {
            "type": Number,
            "attr": "z-index"
        }
    }; }
    static get events() { return [{
            "name": "iframeLoaded",
            "method": "iframeLoaded",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
    static get style() { return "ema-iframe{--top:0;--right:0;--bottom:0;--left:0;--visibility:hidden}ema-iframe .ema-iframe-holder{z-index:var(--zIndex);width:var(--width);height:var(--height);visibility:var(--visibility,\"visible\")}ema-iframe .ema-iframe-holder iframe{height:100%;width:100%}ema-iframe .iframe-holder-fullscreen{position:fixed;top:var(--top);right:var(--right);bottom:var(--bottom);left:var(--left);-webkit-overflow-scrolling:touch;overflow-y:scroll}ema-iframe .iframe-holder-fullscreen iframe{height:100%;width:100%}"; }
}

export { Iframe as EmaIframe };
