'use strict';

var index = require('./index-CpWVsZ_u.js');
var domUtils = require('./dom-utils-BdvOgC2b.js');
var tracking = require('./tracking-BPjaTlNR.js');

const cardCss = () => `:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#FFFFFF;background-clip:border-box;border:2px solid #EEEDED;border-radius:2px;width:350px;height:auto;font-family:var(--ifx-font-family)}.card:has(.card-href:focus),.card:has(.card-href:hover){outline:none;border-color:#0A8276}.card:has(.card-href:focus) ::slotted(ifx-card-headline),.card:has(.card-href:hover) ::slotted(ifx-card-headline){color:#0A8276}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#EEEDED}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card .card-href:focus{outline:none}`;

const Card = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    get el() { return index.getElement(this); }
    noBtns;
    direction = "vertical";
    alignment;
    noImg;
    href = "";
    internalHref = "";
    target = "_self";
    ariaLabel;
    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 (!domUtils.isNestedInIfxComponent(this.el)) {
            const framework = tracking.detectFramework();
            tracking.trackComponent("ifx-card", await framework);
        }
    }
    componentWillUpdate() {
        this.handleComponentAdjustment();
    }
    render() {
        return (index.h(index.Host, { key: 'bc39e464f1baae707bbcf1f0c5bf46a6736850d8' }, index.h("div", { key: '815797671f34136bad1720c80ca5b1fc34614a8b', "aria-label": this.ariaLabel, class: `card 
            ${this.noBtns ? "noBtns" : ""}
            ${this.direction} 
            ${this.alignment}`, role: "group" }, this.direction === "horizontal" && (index.h("div", { key: '29cb5772e0d455f9d44d91f203dde50f2b1f104f', class: "horizontal" }, index.h("a", { key: 'a0e62ce5e0ea6fb78219b69a458aad0bb4f788da', class: `card-img ${this.noImg ? "noImage" : ""} ${this.internalHref ? "card-href" : ""}`, href: this.internalHref }, index.h("slot", { key: '900b7277c8b35b8e30592a61c607520b8fa6d923', name: "img" })), index.h("div", { key: 'b91cb7a606b7bdab6ce41a3beb664e747bc23209', class: "lower__body-wrapper" }, index.h("a", { key: '920ae268da088aa2d19c8f5f37e88b3778e4b049', class: `upper-body ${this.internalHref ? "card-href" : ""}`, href: this.internalHref, id: "upper-body-content" }, index.h("slot", { key: '4b289a4a0b1eb1ba1d5f35c92dd3ca6c88301428' })), index.h("div", { key: '472517824772b6b0ffb0dfebcd2e97ff9c5a142a' }, index.h("slot", { key: 'f2e36bf7eaad6d9f94a9bcba6c65513aff1b26d9', name: "buttons" }))))), this.direction === "vertical" && (index.h("div", { key: '81afdc1c3e381668127d51401265254fcefa4d46', class: "vertical" }, index.h("a", { key: '876869226dd985f89603d723ea029c84bb5d7a62', class: `upper__body-wrapper ${this.internalHref ? "card-href" : ""}`, href: this.internalHref, target: this.target }, index.h("div", { key: 'bbe2947a3e960a5908e7f4dc0a375f35758b3535', class: `card-img ${this.noImg ? "noImage" : ""}` }, index.h("slot", { key: '1ebb22404fb5278a2d6bc047b9b6a20134591141', name: "img" })), index.h("div", { key: '54c23f72393d5a955c28baf7786b453504aa53f4', class: "upper-body", id: "upper-body-content" }, index.h("slot", { key: '6fb57a25333757fd915c0b2857af67356fcbe02f' }))), index.h("div", { key: 'c1aa5dcd8bae39230e0cc489a95dbb01213ec60e', class: "lower__body-wrapper", role: "group", "aria-labelledby": "upper-body-content" }, index.h("slot", { key: '7edeeb55da6d87f0fc4d02fec8b2842c13b96562', name: "buttons" })))))));
    }
};
Card.style = cardCss();

exports.ifx_card = Card;
//# sourceMappingURL=ifx-card.entry.cjs.js.map

//# sourceMappingURL=ifx-card.cjs.entry.js.map