import { r as registerInstance, h, d as Host, a as getElement } from './index-PqnYwNKt.js';
import { d as detectFramework, t as trackComponent } from './framework-detection-DcmcuUOA.js';
import { i as isNestedInIfxComponent } from './dom-utils-Bw2fh5LT.js';

const cardCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}: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:1px solid #EEEDED;border-radius:1px;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) {
        registerInstance(this, hostRef);
        this.direction = 'vertical';
        this.href = "";
        this.internalHref = "";
        this.target = "_self";
    }
    setImgPosition(event) {
        this.alignment = event.detail;
    }
    handleComponentAdjustment() {
        const image = this.el.querySelector('ifx-card-image');
        const links = this.el.querySelector('ifx-card-links');
        if (!image) {
            this.noImg = true;
        }
        else
            this.noImg = false;
        if (!links) {
            this.noBtns = true;
        }
        else
            this.noBtns = false;
        if (this.href.trim() === "") {
            this.internalHref = undefined;
        }
        else
            this.internalHref = this.href;
    }
    handleClassList(el, type, className) {
        el.classList[type](className);
    }
    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: '5ee0c06ef902ae2020d3138fc09ff85988415c9a' }, h("div", { key: '67119e3071ad08fcfbcd3bb47198fbe9e754747b', "aria-label": this.ariaLabel, class: `card 
          ${this.noBtns ? 'noBtns' : ""}
          ${this.direction} 
          ${this.alignment}`, role: "region" }, this.direction === 'horizontal' &&
            h("div", { key: '0a2f892e5d326631f96501832eb3f58c4cc71054', class: "horizontal" }, h("a", { key: 'c13a145ee6d373f1c2eb641eaf880d5fc0bd23e8', class: `card-img ${this.noImg ? 'noImage' : ""} ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref }, h("slot", { key: '20d1b3087552e07bbfe4b5f4544c9dd81ccbddda', name: "img" })), h("div", { key: 'a1c4a5170cf1d1c4deecac7163b45844553d8c61', class: 'lower__body-wrapper' }, h("a", { key: 'ff9637961d0ab245f8416f9e6ab2d3af98f883a2', class: `upper-body ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref }, h("slot", { key: 'f22051e45000c779684b661201033aedcc290d79' })), h("div", { key: '3befb043b6b132efe1fe1d256aaa3331c6811549' }, h("slot", { key: 'b5a4504efb212291013a60560985d2eff5857a07', name: 'buttons' })))), this.direction === 'vertical' &&
            h("div", { key: 'ed7a0ab33f3db9dae281c14b6c526f20bd038830', class: "vertical" }, h("a", { key: '10aee3b76006cb3534758461960c1a174fdcca37', class: `upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref, target: this.target }, h("div", { key: '446c17df97c595a1c876bad47442e9cf55f5a273', class: `card-img ${this.noImg ? 'noImage' : ""}` }, h("slot", { key: 'a359cc68256209cdb6ad68fa3aadf382e1efc7b1', name: "img" })), h("div", { key: 'ea7548afd6b844f54919b1a7a13004e635dad285', class: 'upper-body' }, h("slot", { key: '27b5ada2035f86087604362be7f91eae4654b0a9' }))), h("div", { key: '073c991a1f6134c55219806548d03750bf18bc43', class: 'lower__body-wrapper' }, h("slot", { key: '40b71192470647eea4e2e4af431891b44f70b435', name: 'buttons' }))))));
    }
    get el() { return getElement(this); }
};
Card.style = cardCss;

export { Card as ifx_card };
//# sourceMappingURL=ifx-card.entry.js.map

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