import { Host, h, } from "@stencil/core";
import { isNestedInIfxComponent } from "../..//shared/utils/dom-utils";
import { detectFramework } from "../..//shared/utils/framework-detection";
import { trackComponent } from "../../shared/utils/tracking";
export class Card {
    el;
    noBtns;
    /** Layout direction of the card. */
    direction = "vertical";
    alignment;
    noImg;
    /** Link the card should navigate to when clicked. */
    href = "";
    internalHref = "";
    /** Where to open the link. */
    target = "_self";
    /** Accessible label for screen readers. */
    ariaLabelText;
    setImgPosition(event) {
        this.alignment = event.detail;
    }
    handleComponentAdjustment() {
        const image = this.el.querySelector("ifx-card-image");
        const links = this.el.querySelector("ifx-card-links");
        this.noImg = !image;
        this.noBtns = !links;
        if (this.href.trim() === "") {
            this.internalHref = undefined;
        }
        else {
            this.internalHref = this.href;
        }
    }
    componentWillLoad() {
        this.handleComponentAdjustment();
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent("ifx-card", await framework);
        }
    }
    componentWillUpdate() {
        this.handleComponentAdjustment();
    }
    render() {
        return (h(Host, { key: '287c7825bc85bd912363bf8fbba1943a5921b8da' }, h("div", { key: '8b201581f1f8c22454a06db017fe391cf15584f9', "aria-label": this.ariaLabelText, class: `card 
            ${this.noBtns ? "noBtns" : ""}
            ${this.direction} 
            ${this.alignment}`, role: "group" }, this.direction === "horizontal" && (h("div", { key: '0ce06ed6a84d25a6b5e66730c293a165b6b98471', class: "horizontal" }, h("a", { key: '87467383fe396ed66036d2531c7a6b261d64d683', class: `card-img ${this.noImg ? "noImage" : ""} ${this.internalHref ? "card-href" : ""}`, href: this.internalHref }, h("slot", { key: '20bf5ddce543ff6c6bd45f81275c3f1d1b972b83', name: "img" })), h("div", { key: 'ae70b486866c39597b5b1f29113a99074e5cec3e', class: "lower__body-wrapper" }, h("a", { key: '591ad844101c4761df16747ff9517caa3dd5cffc', class: `upper-body ${this.internalHref ? "card-href" : ""}`, href: this.internalHref, id: "upper-body-content" }, h("slot", { key: '877a3ae9e1e552fcd6df50e3a92c22a7fcafd016' })), h("div", { key: '7d0f7fc0c56e5a72e1b5d7d172d3a43f38fbe291' }, h("slot", { key: 'ade3b9567218a92bf48de6d5a1e7bf164f637949', name: "buttons" }))))), this.direction === "vertical" && (h("div", { key: 'ac76ceee673d8037e7d3134cfe03c60dd11df876', class: "vertical" }, h("a", { key: '8eb41549bcf01963df0593a949808f28ec7c46ef', class: `upper__body-wrapper ${this.internalHref ? "card-href" : ""}`, href: this.internalHref, target: this.target }, h("div", { key: 'dbf65b6919d28a900d2e43dac93b1875cc0fa89b', class: `card-img ${this.noImg ? "noImage" : ""}` }, h("slot", { key: '1732763e7c36478ebbda74919dc75ad05c052a7a', name: "img" })), h("div", { key: '13ae88e5f45b2ecbde57f03a63e6a760851c4eca', class: "upper-body", id: "upper-body-content" }, h("slot", { key: 'e7fb8ee2a6f6871572fa14b5a993060ace5f0569' }))), h("div", { key: '07f3c65b714d1dcd70990df94216fd390c7fea6e', class: "lower__body-wrapper", role: "group", "aria-labelledby": "upper-body-content" }, h("slot", { key: '69a7e7953158799d39ac17dc39c77b7efe9e89a1', name: "buttons" })))))));
    }
    static get is() { return "ifx-card"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["card.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["card.css"]
        };
    }
    static get properties() {
        return {
            "direction": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "\"horizontal\" | \"vertical\"",
                    "resolved": "\"horizontal\" | \"vertical\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Layout direction of the card."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "direction",
                "defaultValue": "\"vertical\""
            },
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Link the card should navigate to when clicked."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "href",
                "defaultValue": "\"\""
            },
            "target": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Where to open the link."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "target",
                "defaultValue": "\"_self\""
            },
            "ariaLabelText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | null",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Accessible label for screen readers."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "aria-label-text"
            }
        };
    }
    static get states() {
        return {
            "noBtns": {},
            "alignment": {},
            "noImg": {},
            "internalHref": {}
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "imgPosition",
                "method": "setImgPosition",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
