import { Host, h } from "@stencil/core";
import { cdnAsset } from '../../utils/utils';
export class Media {
    constructor() {
        this.display = 'grid';
        this.items = [];
    }
    render() {
        if (this.display)
            return (h(Host, null,
                h("div", { class: "display-grid" }, this.items.map((item) => (h("a", { key: item.key, class: "display-grid-item", href: item.info.secure_url },
                    h("svg", { viewBox: "0 0 4 3", style: { display: 'block', width: '100%', background: 'lightblue', borderRadius: 'var(--bb-border-radius)' } }),
                    item.info.resource_type == 'image' && h("img", { class: "display-grid-image", src: cdnAsset(item.info, 'jpg', 't_small_image') })))))));
    }
    static get is() { return "bb-media"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["media.css"]
    }; }
    static get styleUrls() { return {
        "$": ["media.css"]
    }; }
    static get properties() { return {
        "display": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "display",
            "reflect": false,
            "defaultValue": "'grid'"
        },
        "items": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "any[]",
                "resolved": "any[]",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "[]"
        }
    }; }
}
