import { h } from "@stencil/core";
export class EclFeaturedItem {
    constructor() {
        this.elId = `ecl-featured-item-${Date.now().toString(16) + Math.random().toString(16).slice(2, 10)}`;
        this.colorMode = '';
        this.verticalAlignment = 'top';
        this.position = 'left';
        this.defaultContainerClass = 'ecl-featured-item__container';
    }
    getClass() {
        const styleClasses = [
            `ecl-featured-item`,
            this.styleClass
        ];
        if (this.variant === 'highlight') {
            styleClasses.push(`ecl-featured-item--${this.variant}`);
        }
        if (this.linkType === 'highlighted') {
            styleClasses.push('ecl-featured-item--link-highlighted');
        }
        if (this.colorMode) {
            styleClasses.push(`ecl-color-mode--${this.colorMode}`);
        }
        if (this.verticalAlignment === 'center') {
            styleClasses.push('ecl-featured-item--vcenter');
        }
        if (this.mediaBehavior === 'dynamic') {
            styleClasses.push('ecl-featured-item--dynamic');
        }
        return styleClasses.join(' ');
    }
    componentWillLoad() {
        var _a;
        this.theme = (_a = document.documentElement.getAttribute('data-ecl-theme')) !== null && _a !== void 0 ? _a : (this.theme || 'ec');
    }
    componentDidLoad() {
        const picture = this.el.querySelector('.ecl-media-container__picture');
        if (picture) {
            picture.classList.add(`sc-ecl-featured-item-${this.theme}`);
            const img = picture.querySelector('.ecl-media-container__media');
            if (img) {
                img.classList.add(`sc-ecl-featured-item-${this.theme}`);
            }
        }
    }
    render() {
        const containerClasses = this.position === 'right' ? `${this.defaultContainerClass} ecl-featured-item__container--right` : this.defaultContainerClass;
        return (h("article", { key: 'f476aa17b3f9bc0098f5273a3ab3e50487e88b73', class: this.getClass() }, h("div", { key: 'c518b6a99ee0f8c734bcfe7ffd4ef85c1aa8fe11', class: containerClasses }, h("div", { key: '139e75d9fdb096e5765890dec8671533fd086556', class: "ecl-featured-item__item" }, h("div", { key: '702d0be931882b209942259c2bcc01a27e84b51d', class: "ecl-featured-item__content" }, h("div", { key: '1fc48f2ae01323ff1a4d1e9e8f76f1a04897c76e', class: "ecl-featured-item__info" }, this.itemTitle &&
            h("div", { key: 'aca8760199578a03f36db7aaf66e8fe3120f4186', class: "ecl-featured-item__title", id: this.elId + '-title' }, this.itemTitle), h("div", { key: '49a9987387a3c97126472e2e33a8ce188d59e6d6', class: "ecl-featured-item__description" }, h("slot", { key: '2fa631a215d38e93d5fa57d113eba68a52c7a026' }))), (this.linkPath && this.linkLabel) &&
            h("ecl-link", { key: '67f8bca3afc8ae3fa1fd79ff4cd634b4576e4a77', variant: `${this.linkType === 'button' ? 'primary-neutral' : 'standalone'}`, "style-class": `ecl-featured-item__link sc-ecl-featured-item-${this.theme} ${this.linkType === 'highlighted' ? 'ecl-featured-item--link-highlighted' : ''}`, path: this.linkPath, "aria-describedby": this.elId + '-title' }, this.linkLabel, h("ecl-icon", { key: 'ef3549295ccd4ebadc1872c4aa1353d79db129cb', "style-class": `sc-ecl-featured-item-${this.theme}`, slot: "icon-after", icon: "arrow-left", flip: "horizontal" })))), this.image &&
            h("div", { key: '387836d7dbff1cfa994721f92f5d08967ee4c155', class: "ecl-featured-item__item" }, h("ecl-media-container", { key: 'd6ca0d144d085817e3f68812d14fc9986711641d', styleClass: `ecl-featured-item__media_container sc-ecl-featured-item-${this.theme}`, image: this.image, hasCaption: this.mediaCaption !== '', imageAnchor: this.mediaAnchor }, this.mediaCaption)))));
    }
    static get is() { return "ecl-featured-item"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "ec": ["./build/styles/ecl-featured-item-ec.css"],
            "eu": ["./build/styles/ecl-featured-item-eu.css"]
        };
    }
    static get styleUrls() {
        return {
            "ec": ["build/styles/ecl-featured-item-ec.css"],
            "eu": ["build/styles/ecl-featured-item-eu.css"]
        };
    }
    static get properties() {
        return {
            "theme": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "theme"
            },
            "elId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "el-id",
                "defaultValue": "`ecl-featured-item-${Date.now().toString(16) + Math.random().toString(16).slice(2,10)}`"
            },
            "styleClass": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "style-class"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "variant"
            },
            "itemTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "item-title"
            },
            "image": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "image"
            },
            "colorMode": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "color-mode",
                "defaultValue": "''"
            },
            "linkType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "link-type"
            },
            "linkPath": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "link-path"
            },
            "linkLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "link-label"
            },
            "mediaCaption": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "media-caption"
            },
            "mediaBehavior": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "media-behavior"
            },
            "mediaAnchor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "media-anchor"
            },
            "verticalAlignment": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "vertical-alignment",
                "defaultValue": "'top'"
            },
            "position": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "position",
                "defaultValue": "'left'"
            },
            "defaultContainerClass": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "default-container-class",
                "defaultValue": "'ecl-featured-item__container'"
            }
        };
    }
    static get elementRef() { return "el"; }
}
