'use strict';

var index = require('./index-n_pDKBY2.js');
var frameworkDetection = require('./framework-detection-C_6nNXcS.js');
var domUtils = require('./dom-utils-dykhxr-_.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: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);
        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');
        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 = frameworkDetection.detectFramework();
            frameworkDetection.trackComponent('ifx-card', await framework);
        }
    }
    componentWillUpdate() {
        this.handleComponentAdjustment();
    }
    render() {
        return (index.h(index.Host, { key: 'd1342011d31f6978702f5a193191c97c40620d3a' }, index.h("div", { key: '0fad34f8282119b8a32647abaadb9c4d8c596b40', "aria-label": this.ariaLabel, class: `card 
            ${this.noBtns ? 'noBtns' : ""}
            ${this.direction} 
            ${this.alignment}`, role: "group" }, this.direction === 'horizontal' &&
            index.h("div", { key: '14bbc106ff828fc268bd5636d71ed66b85b3971e', class: "horizontal" }, index.h("a", { key: '7cd3f0f394d067ef375490fc96d71c15937b784a', class: `card-img ${this.noImg ? 'noImage' : ""} ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref }, index.h("slot", { key: 'ce3be286399a863d0535b7886be602eda1da1e3a', name: "img" })), index.h("div", { key: '19d526f169cfdfc5921b3104e642b0390d40f57c', class: 'lower__body-wrapper' }, index.h("a", { key: 'e4af1b4915b38e8f31b6e539072142c8ab85e334', class: `upper-body ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref, id: "upper-body-content" }, index.h("slot", { key: '28c6e43c2e4f4a47968c7b1054d8fe8eb2d148c6' })), index.h("div", { key: '708536495fed3c351f85823b7dfd52b56e7e7d97' }, index.h("slot", { key: '926da9864476efaa413ac167101a71ed265d8fa8', name: 'buttons' })))), this.direction === 'vertical' &&
            index.h("div", { key: '23350f711ef5cfbb298812f23d120927a67879c3', class: "vertical" }, index.h("a", { key: 'c740bb3957d400c7f0cc06a2052bbe80a1b184a7', class: `upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref, target: this.target }, index.h("div", { key: '9027ad5864dab44e18b2c9bd10c704d8329122f5', class: `card-img ${this.noImg ? 'noImage' : ""}` }, index.h("slot", { key: '509b69f84d36075351cbec657232b2c859c8cd9e', name: "img" })), index.h("div", { key: '3d7590db496cd6aaf0603ebf224a015324a86ce9', class: 'upper-body', id: "upper-body-content" }, index.h("slot", { key: '142c46ccd143f00c62e07c70b5ffcec5674666fd' }))), index.h("div", { key: '8245deceb8ff7e14408386eaeba2f5025ab75229', class: 'lower__body-wrapper', role: "group", "aria-labelledby": "upper-body-content" }, index.h("slot", { key: '0a0e0124cde655ccfddc59cbc91f2cd373e545b5', name: 'buttons' }))))));
    }
    get el() { return index.getElement(this); }
};
Card.style = cardCss;

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

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