@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/cjs/ifx-breadcrumb-item-label.cjs.entry.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var urlUtils = require('./url-utils-CPE59br4.js');
+
+const breadcrumbItemLabelCss = () => `.breadcrumb-item-label-container{display:flex;align-items:center;gap:8px;text-decoration:none;color:#1d1d1d}.breadcrumb-item-label-container.margin{margin-left:16px}.breadcrumb-item-label-container ifx-icon:empty{display:none}.breadcrumb-item-label-container .label-icon-wrapper{display:inline-flex}.breadcrumb-item-label-container .menu-icon-wrapper{display:flex;justify-content:center;align-items:center;width:16px;height:16px}.breadcrumb-item-label-container .menu-icon-wrapper.hide{display:none}.breadcrumb-item-label-container .menu-icon-wrapper ifx-icon{transition:0.3s}.breadcrumb-item-label-container .menu-icon-wrapper.show ifx-icon{transition:0.3s;transform:rotate(180deg)}`;
+
+const BreadcrumbItemLabel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.breadcrumbMenuIconWrapper = index.createEvent(this, "breadcrumbMenuIconWrapper", 7);
+    }
+    /** Icon displayed inside the breadcrumb item. */
+    icon;
+    /** URL the breadcrumb item links to. */
+    href;
+    /** Where to open the link. */
+    target = "_self";
+    get el() { return index.getElement(this); }
+    /** Fires with the icon wrapper element when it's ready. */
+    breadcrumbMenuIconWrapper;
+    componentDidLoad() {
+        const container = this.el.shadowRoot.querySelector(".breadcrumb-item-label-container");
+        const menuWrapper = container?.querySelector(".menu-icon-wrapper");
+        if (menuWrapper) {
+            this.breadcrumbMenuIconWrapper.emit(menuWrapper);
+        }
+    }
+    render() {
+        return (index.h("a", { key: '469c15e1f80f043cc781457277fb49ca250712cc', href: urlUtils.sanitizeHref(this.href), target: this.target, class: "breadcrumb-item-label-container", role: "link" }, index.h("ifx-icon", { key: 'd2f25b67fa417f58baac4553fa231005971eed25', icon: this.icon, "aria-hidden": "true" }), index.h("span", { key: '952ce4529313627043a590e1a6780edb7382b389', class: "label-wrapper" }, index.h("slot", { key: 'dd372efabeca69a1c05f06974cbc874a21d3f83c' })), index.h("span", { key: '685a2ccfc4f00910cf2d3fbdc27caaef9bae04b3', class: "menu-icon-wrapper", "aria-hiden": "true" }, index.h("ifx-icon", { key: '571d27872a74dff5d4084a151464fb23cbf81fcc', icon: "chevron-down-16" }))));
+    }
+};
+BreadcrumbItemLabel.style = breadcrumbItemLabelCss();
+
+exports.ifx_breadcrumb_item_label = BreadcrumbItemLabel;

package/dist/cjs/ifx-breadcrumb-item.cjs.entry.js

@@ -0,0 +1,116 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+
+const breadcrumbItemCss = () => `.breadcrumb-parent{display:flex;flex-direction:row;align-items:center;padding:0px;gap:12px;min-height:24px;justify-content:center}.breadcrumb-parent:hover{cursor:pointer}.breadcrumb-parent .breadcrumb-wrapper{display:flex;flex-direction:row;align-items:center;padding:0px;gap:8px;position:relative}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu{display:none;position:absolute;top:20px}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu.open{display:block}.breadcrumb-parent .breadcrumb-wrapper a{text-decoration:none;color:#1d1d1d;font-family:var(--ifx-font-family);font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;display:flex;align-items:center;color:#1d1d1d;flex-direction:column;justify-content:center;padding:0px;border-bottom:1px solid #1D1D1D}.breadcrumb-parent .breadcrumb-divider{width:10px;height:16px;color:#bfbbbb;line-height:13px;font-size:1.25rem;margin-right:12px}`;
+
+const BreadcrumbItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    isLastItem = false;
+    get el() { return index.getElement(this); }
+    emittedElement;
+    uniqueId;
+    hasDropdownMenu = false;
+    handleOutsideClick(event) {
+        const path = event.composedPath();
+        if (!path.includes(this.el)) {
+            this.closeDropdownMenu();
+        }
+    }
+    handleKeyDown(ev) {
+        if (ev.key === "Enter" || ev.key === " ") {
+            this.toggleDropdownMenu();
+        }
+        else if (ev.key === "Escape") {
+            this.closeDropdownMenu();
+        }
+    }
+    getDropdownMenu() {
+        const dropdownMenu = this.el.shadowRoot.querySelector(".dropdown-menu");
+        return dropdownMenu;
+    }
+    menuWrapperEventReEmitter(event) {
+        this.emittedElement = event.detail;
+    }
+    getMenuIconWrapper() {
+        return this.emittedElement;
+    }
+    handleClassList(el, type, className) {
+        el.classList[type](className);
+    }
+    closeDropdownMenu() {
+        if (this.hasDropdownMenu) {
+            const dropdownMenu = this.getDropdownMenu();
+            const menuWrapper = this.getMenuIconWrapper();
+            this.handleClassList(dropdownMenu, "remove", "open");
+            this.handleClassList(menuWrapper, "remove", "show");
+        }
+    }
+    toggleDropdownMenu() {
+        if (this.hasDropdownMenu) {
+            const dropdownMenu = this.getDropdownMenu();
+            const menuWrapper = this.getMenuIconWrapper();
+            this.handleClassList(dropdownMenu, "toggle", "open");
+            this.handleClassList(menuWrapper, "toggle", "show");
+        }
+    }
+    isDropdownMenuOpen() {
+        const dropdownMenu = this.getDropdownMenu();
+        return (this.hasDropdownMenu &&
+            dropdownMenu &&
+            dropdownMenu.classList.contains("open"));
+    }
+    handleLastItem() {
+        const breadcrumbItems = this.el
+            .closest("ifx-breadcrumb")
+            .querySelectorAll("ifx-breadcrumb-item");
+        if (this.el === breadcrumbItems[breadcrumbItems.length - 1]) {
+            this.isLastItem = true;
+        }
+        else
+            this.isLastItem = false;
+    }
+    generateUniqueId(prefix = "id") {
+        return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;
+    }
+    componentWillLoad() {
+        if (!this.uniqueId) {
+            this.uniqueId = this.generateUniqueId("breadcrumb-dropdown");
+        }
+        this.handleLastItem();
+    }
+    componentDidUpdate() {
+        this.handleLastItem();
+    }
+    componentWillRender() {
+        this.setHasDropdownMenuState();
+    }
+    setHasDropdownMenuState() {
+        const dropdownMenu = this.getIfxDropdownMenuComponent();
+        if (dropdownMenu) {
+            this.hasDropdownMenu = !!dropdownMenu;
+        }
+    }
+    getIfxDropdownMenuComponent() {
+        const dropdownMenu = this.el.querySelector("ifx-dropdown-menu");
+        return dropdownMenu;
+    }
+    componentDidLoad() {
+        const dropdownMenu = this.getIfxDropdownMenuComponent();
+        if (!this.hasDropdownMenu) {
+            const iconMenuWrapper = this.getMenuIconWrapper();
+            this.handleClassList(iconMenuWrapper, "toggle", "hide");
+        }
+        else {
+            dropdownMenu.isOpen = true;
+        }
+    }
+    render() {
+        return (index.h("li", { key: 'a6e3ced53d2a988efc7814ab096443f0c3adc889', class: "breadcrumb-parent", "aria-current": `${this.isLastItem ? "page" : ""}` }, index.h("li", { key: 'a34dba95bbfa06947c20f4cca2ea98519c510e49', role: "button", tabindex: this.hasDropdownMenu ? 0 : -1, class: "breadcrumb-wrapper", onClick: () => this.toggleDropdownMenu(), "aria-controls": this.uniqueId, "aria-haspopup": "menu", "aria-label": "Toggle dropdown menu" }, index.h("slot", { key: '29a928930c54eb5395431ef214bb799c3ad6c59b', name: "label" }), index.h("div", { key: '1fba6f650c6d9c9173cba1bfa7fcd03a7b90f7cd', id: this.uniqueId, class: "dropdown-menu", "aria-expanded": this.isDropdownMenuOpen(), "aria-label": "Dropdown menu" }, index.h("slot", { key: 'c43583bd4a2d9da175f3cdb358f87c6953682362' }))), !this.isLastItem && (index.h("span", { key: '74c85ac130502169455204850d6a6cfe07e12851', class: "breadcrumb-divider", "aria-hidden": "true" }, "/"))));
+    }
+};
+BreadcrumbItem.style = breadcrumbItemCss();
+
+exports.ifx_breadcrumb_item = BreadcrumbItem;

package/dist/cjs/ifx-breadcrumb.cjs.entry.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+
+const breadcrumbCss = () => `:host{display:flex}.breadcrumb{list-style:none;padding:0px;margin:0px;display:flex;flex-direction:row;font-family:var(--ifx-font-family);font-size:0.875rem;align-items:flex-start}`;
+
+const Breadcrumb = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent("ifx-breadcrumb", await framework);
+        }
+        const element = this.el.shadowRoot?.firstElementChild;
+        if (element instanceof HTMLElement) {
+            this.validateBreadcrumbItemStructure(element);
+        }
+    }
+    validateBreadcrumbItemStructure(element) {
+        if (!element) {
+            console.error("element not found");
+            return;
+        }
+        const slot = element.querySelector("slot");
+        if (slot) {
+            const assignedNodes = slot.assignedNodes();
+            for (let i = 0; i < assignedNodes.length; i++) {
+                const node = assignedNodes[i];
+                if (node.nodeName === "IFX-BREADCRUMB-ITEM") {
+                    const breadcrumbItem = node;
+                    const breadcrumbItemLabel = breadcrumbItem.querySelector("ifx-breadcrumb-item-label");
+                    const breadcrumbDropdown = breadcrumbItem.querySelector("ifx-dropdown-menu");
+                    if (breadcrumbItemLabel.hasAttribute("href") && breadcrumbDropdown) {
+                        throw new Error("ifx-breadcrumb-item cannot have both a href and a dropdown menu.");
+                    }
+                }
+            }
+        }
+    }
+    render() {
+        return (index.h("nav", { key: '7e61f9e82395ddb901c955a3dd2eb266cd7ad221', "aria-label": "Page navigation breadcrumb" }, index.h("ol", { key: 'a2e6222a25a25fdcf551e4f3c4fe6af3f5bb604a', class: "breadcrumb" }, index.h("slot", { key: '827978b36b42f8ddd14c20ff042a79c9eee4981f' }))));
+    }
+};
+Breadcrumb.style = breadcrumbCss();
+
+exports.ifx_breadcrumb = Breadcrumb;

package/dist/cjs/ifx-button.cjs.entry.js

@@ -0,0 +1,156 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var index$1 = require('./index-Bp6Dd2i1.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+var urlUtils = require('./url-utils-CPE59br4.js');
+
+const buttonCss = () => `:host{vertical-align:bottom;display:inline-flex;width:var(--bw, fit-content)}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0px 16px;gap:8px;color:#ffffff;font-weight:600;border-radius:1px;line-height:1.5rem;font-family:var(--ifx-font-family);font-style:normal;text-decoration:none;user-select:none;font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;width:var(--bw, fit-content)}.btn:not(.disabled){cursor:pointer}.btn.disabled{pointer-events:none}.btn-default{color:#ffffff;background-color:#0a8276}.btn-default:disabled,.btn-default.disabled{background-color:#bfbbbb;color:#ffffff;pointer-events:none}.btn-secondary-default{background-color:#ffffff;color:#0a8276;border:1px solid #0a8276}.btn-secondary-default:disabled,.btn-secondary-default.disabled{background-color:#ffffff;border:1px solid #bfbbbb;color:#bfbbbb;pointer-events:none}.btn-tertiary-default{background-color:rgba(0, 0, 0, 0);color:#0a8276}.btn-tertiary-default:disabled,.btn-tertiary-default.disabled{color:#bfbbbb;pointer-events:none}.btn-danger{color:#ffffff;background-color:#cd002f;border-color:#cd002f}.btn-danger:disabled,.btn-danger.disabled{background-color:#bfbbbb;color:#ffffff;pointer-events:none}.btn-secondary-danger{background-color:#ffffff;color:#cd002f;border:1px solid #cd002f}.btn-secondary-danger:disabled,.btn-secondary-danger.disabled{background-color:#ffffff;border:1px solid #bfbbbb;color:#bfbbbb;pointer-events:none}.btn-tertiary-danger{background-color:rgba(0, 0, 0, 0);color:#cd002f}.btn-tertiary-danger:disabled,.btn-tertiary-danger.disabled{background-color:#ffffff;color:#bfbbbb;pointer-events:none}.btn-inverse{color:#0a8276;background-color:#ffffff}.btn-inverse:disabled,.btn-inverse.disabled{opacity:1;background-color:#ffffff;color:#bfbbbb;pointer-events:none}.btn-secondary-inverse{color:#ffffff;border:1px solid #ffffff}.btn-secondary-inverse:disabled,.btn-secondary-inverse.disabled{border:1px solid #ffffff;color:#ffffff;pointer-events:none}.btn-tertiary-inverse{color:#ffffff}.btn-tertiary-inverse:disabled,.btn-tertiary-inverse.disabled{color:#ffffff;opacity:1;pointer-events:none}.btn ifx-icon:empty{display:none}.btn.btn-xs{font-size:0.875rem;height:32px;line-height:1rem}.btn.btn-s{font-size:0.875rem;height:36px;line-height:1.25rem}.btn.btn-l{font-size:1.25rem;height:48px;line-height:1.75rem}.btn.btn-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.btn.btn-default:not(:disabled,.disabled):hover{background-color:#08665c}.btn.btn-default:not(:disabled,.disabled):active,.btn.btn-default:not(:disabled,.disabled).active{background-color:#06534b}.btn.btn-secondary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.btn.btn-secondary-default:not(:disabled,.disabled):hover{color:#ffffff;background-color:#08665c}.btn.btn-secondary-default:not(:disabled,.disabled):active,.btn.btn-secondary-default:not(:disabled,.disabled).active{background-color:#06534b}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#9c216e}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#9c216e}.btn.btn-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.btn.btn-danger:not(:disabled,.disabled):hover{background-color:#a2001e}.btn.btn-danger:not(:disabled,.disabled):active,.btn.btn-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-secondary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.btn.btn-secondary-danger:not(:disabled,.disabled):hover{color:#ffffff;background-color:#a2001e}.btn.btn-secondary-danger:not(:disabled,.disabled):active,.btn.btn-secondary-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0a8276, 0 0 0 4px #ffffff}.btn.btn-inverse:not(:disabled,.disabled):hover{background-color:#eeeded}.btn.btn-inverse:not(:disabled,.disabled):active,.btn.btn-inverse:not(:disabled,.disabled).active{background-color:#bfbbbb}.btn.btn-secondary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0a8276, 0 0 0 4px #ffffff}.btn.btn-secondary-inverse:not(:disabled,.disabled):hover{color:#0a8276;background-color:#eeeded}.btn.btn-secondary-inverse:not(:disabled,.disabled):active,.btn.btn-secondary-inverse:not(:disabled,.disabled).active{color:#0a8276;background-color:#bfbbbb}.btn.btn-tertiary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #08665c}.btn.btn-tertiary-default:not(:disabled,.disabled):hover{color:#08665c}.btn.btn-tertiary-default:not(:disabled,.disabled):active,.btn.btn-tertiary-default:not(:disabled,.disabled).active{color:#06534b}.btn.btn-tertiary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #a2001e}.btn.btn-tertiary-danger:not(:disabled,.disabled):hover{color:#a2001e}.btn.btn-tertiary-danger:not(:disabled,.disabled):active,.btn.btn-tertiary-danger:not(:disabled,.disabled).active{color:#900021}.btn.btn-tertiary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0a8276, 0 0 0 4px #ffffff}.btn.btn-tertiary-inverse:not(:disabled,.disabled):hover{color:#eeeded}.btn.btn-tertiary-inverse:not(:disabled,.disabled):active,.btn.btn-tertiary-inverse:not(:disabled,.disabled).active{color:#bfbbbb}`;
+
+const Button = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Button style level (visual prominence). */
+    variant = "primary";
+    /** Color theme of the button. */
+    theme = "default";
+    /** Button size (xs, s, m, l). */
+    size = "m";
+    /** Wether the button is disabled and not clickable. */
+    disabled = false;
+    internalHref;
+    /** URL the Button should navigate to when clicked.  */
+    href;
+    /** Where to open the link. */
+    target = "_self";
+    /** Native button type. */
+    type = "button";
+    /** If true, button stretches to fill the available width. */
+    fullWidth = false;
+    /** Accessible label for screen readers when text is not enough */
+    ariaLabelText;
+    get el() { return index.getElement(this); }
+    focusableElement;
+    nativeButton;
+    setInternalHref(newValue) {
+        this.internalHref = newValue;
+    }
+    /** Move keayboard focus to the button. */
+    async setFocus() {
+        this.focusableElement.focus();
+    }
+    insertNativeButton() {
+        this.nativeButton = document.createElement("button");
+        this.nativeButton.type = this.type;
+        this.nativeButton.style.display = "none";
+        this.el.closest("form").appendChild(this.nativeButton);
+    }
+    handleFormAndInternalHref() {
+        if (this.el.closest("form")) {
+            if (this.el.href) {
+                this.internalHref = undefined;
+            }
+            this.insertNativeButton();
+        }
+        else {
+            this.internalHref = this.href;
+        }
+    }
+    handleButtonWidth() {
+        if (this.fullWidth) {
+            this.el.style.setProperty("--bw", "100%");
+        }
+        else {
+            this.el.style.setProperty("--bw", "fit-content");
+        }
+    }
+    componentWillLoad() {
+        this.handleFormAndInternalHref();
+    }
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent("ifx-button", await framework);
+        }
+    }
+    componentWillRender() {
+        this.handleButtonWidth();
+    }
+    handleClick = (ev) => {
+        if (this.el.shadowRoot) {
+            const parentForm = this.el.closest("form");
+            if (parentForm) {
+                ev.preventDefault();
+                if (this.type === "reset") {
+                    parentForm.reset();
+                    parentForm.dispatchEvent(new Event("reset"));
+                    return;
+                }
+                if (this.nativeButton) {
+                    this.nativeButton.click();
+                    return;
+                }
+                const fakeButton = document.createElement("button");
+                if (this.type) {
+                    fakeButton.type = this.type;
+                }
+                fakeButton.style.display = "none";
+                parentForm.appendChild(fakeButton);
+                fakeButton.click();
+                fakeButton.remove();
+            }
+        }
+    };
+    handleKeyDown(ev) {
+        if (ev.key === " " || (ev.key === "Enter" && !this.disabled)) {
+            this.focusableElement.click();
+        }
+    }
+    handleHostClick(event) {
+        if (this.disabled === true) {
+            event.stopImmediatePropagation();
+        }
+    }
+    handleFocus(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            this.focusableElement.blur();
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: 'e4c165461267e3877bb8eeeccbffd4210c7442ae' }, index.h("a", { key: '0a5e7131ed8cac297f08329cbd43e64d5c9f5941', role: this.href ? "link" : "button", tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? urlUtils.sanitizeHref(this.internalHref) : undefined, target: this.target, onClick: this.handleClick, rel: this.target === "_blank" ? "noopener noreferrer" : undefined, onFocus: (event) => this.handleFocus(event), "aria-disabled": this.disabled ? "true" : null, "aria-describedby": this.theme === "danger" ? "Dangerous action" : undefined, "aria-label": this.ariaLabelText || undefined }, index.h("slot", { key: 'aee88584e7ed312589f8606f2387cd7833bcac77' }))));
+    }
+    getVariantClass() {
+        return `${this.variant}` === "secondary"
+            ? `secondary-${this.theme}`
+            : `${this.variant}` === "tertiary"
+                ? `tertiary-${this.theme}`
+                : `${this.theme}`;
+    }
+    getSizeClass() {
+        if (`${this.size}` === "xs") {
+            return "xs";
+        }
+        else if (`${this.size}` === "s") {
+            return "s";
+        }
+        else if (`${this.size}` === "l") {
+            return "l";
+        }
+        else
+            return "";
+    }
+    getClassNames() {
+        return index$1.classNames("btn", this.size && `btn-${this.getSizeClass()}`, `btn-${this.getVariantClass()}`, this.disabled ? "disabled" : "");
+    }
+    static get watchers() { return {
+        "href": [{
+                "setInternalHref": 0
+            }]
+    }; }
+};
+Button.style = buttonCss();
+
+exports.ifx_button = Button;

package/dist/cjs/ifx-card-headline.cjs.entry.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+
+const cardHeadlineCss = () => `:host{pointer-events:auto}.card__headline-wrapper{padding-bottom:var(--card-headline-padding, 16px)}.card__headline-wrapper.withDesc{padding-bottom:8px}.card-headline{pointer-events:none;margin-top:0;padding-top:0;font-family:var(--ifx-font-family);font-weight:600;font-size:1.5rem;line-height:2rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.card-headline.horizontal{font-size:var(--card-headline-font, 1.25rem);line-height:var(--card-headline-line-height, 28px)}::slotted(a),::slotted(button),::slotted(ifx-link),::slotted(ifx-button){pointer-events:auto}`;
+
+const CardHeadline = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    direction;
+    hasDesc;
+    componentWillLoad() {
+        const cardElement = this.el.closest("ifx-card");
+        if (cardElement) {
+            const cardClass = cardElement.shadowRoot.querySelector(".card")?.className;
+            if (cardClass && cardClass.includes("horizontal")) {
+                this.direction = "horizontal";
+            }
+            const desc = cardElement.querySelector("ifx-card-text");
+            if (desc) {
+                this.hasDesc = true;
+            }
+        }
+    }
+    render() {
+        return (index.h("div", { key: 'b8e311b9ae6cab669ef0e0bf4761bc44498e0f4c', class: `card__headline-wrapper ${this.hasDesc ? "withDesc" : ""}` }, index.h("div", { key: '299da45fcffac2c89ad9d5056e91dc7c7adb3715', class: `card-headline ${this.direction}` }, index.h("slot", { key: 'd249ab6b2cc602502bb03ac83504b235066c09bf' }))));
+    }
+};
+CardHeadline.style = cardHeadlineCss();
+
+exports.ifx_card_headline = CardHeadline;

package/dist/cjs/ifx-card-image.cjs.entry.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+
+const cardImageCss = () => `:host{display:block;width:100%;height:100%}.card-image{width:100%;height:100%;object-fit:cover;display:block}.card-image.object-fit-contain{object-fit:contain}.card-image.object-fit-fill{object-fit:fill}.card-image.object-fit-none{object-fit:none}.card-image.object-fit-scale-down{object-fit:scale-down}`;
+
+const CardImage = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.imgPosition = index.createEvent(this, "imgPosition", 7);
+    }
+    /** Image source URL. */
+    src;
+    /** Text description of the image for screen readers. */
+    alt;
+    /** Image position. */
+    position;
+    /** CSS object-fit value applied to the image. */
+    objectFit = "cover";
+    /** Emits the image position when it changes or is set. */
+    imgPosition;
+    handlePosition(position) {
+        this.imgPosition.emit(position);
+    }
+    componentWillLoad() {
+        this.handlePosition(this.position);
+    }
+    componentDidUpdate() {
+        this.handlePosition(this.position);
+    }
+    render() {
+        return index.h("img", { key: '1b9476661390907bc3ad512dfaf64daab6f7d4fb', src: this.src, alt: this.alt, class: `card-image ${this.objectFit !== 'cover' ? `object-fit-${this.objectFit}` : ''}` });
+    }
+};
+CardImage.style = cardImageCss();
+
+exports.ifx_card_image = CardImage;

package/dist/cjs/ifx-card-links.cjs.entry.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+
+const cardLinksCss = () => `.container{display:flex;align-items:center;gap:20px;flex-wrap:wrap;text-decoration:none;color:#1d1d1d;padding:var(--card-links-padding, 0px 24px 24px 24px);padding-top:var(--card-links-padding-top, 0px);word-wrap:break-word;overflow-wrap:anywhere;}.container:hover{cursor:initial}`;
+
+const CardLinks = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    render() {
+        return (index.h("div", { key: '44c03fc2b2ea694be6394887732cfd1ff810d2ce', class: "container" }, index.h("slot", { key: '59607d594985586985328f1dd1d71c7dda4acb08' })));
+    }
+};
+CardLinks.style = cardLinksCss();
+
+exports.ifx_card_links = CardLinks;

package/dist/cjs/ifx-card-overline.cjs.entry.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+
+const cardOverlineCss = () => `:host{pointer-events:auto}.card-overline{pointer-events:none;font-family:var(--ifx-font-family);font-size:1rem;font-weight:400;color:#575352;padding-bottom:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-all}::slotted(a),::slotted(button),::slotted(ifx-link),::slotted(ifx-button){pointer-events:auto}`;
+
+const CardOverline = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("div", { key: 'b7f68e2d5249fc4f94025f0d6774ad43ecc7bd8b', class: "card-overline" }, index.h("slot", { key: '10fd6203c796c36ba7eedc56364c4f1e9a38a967' })));
+    }
+};
+CardOverline.style = cardOverlineCss();
+
+exports.ifx_card_overline = CardOverline;

package/dist/cjs/ifx-card-text.cjs.entry.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+
+const cardTextCss = () => `:host{pointer-events:auto}.card__text-wrapper{padding-bottom:0px}.card__text-wrapper.hasBtn{padding-bottom:16px}.card-text{pointer-events:none;line-height:1.5rem;font-size:1rem;font-weight:400;white-space:wrap;display:-webkit-box;-webkit-line-clamp:var(--card-text-line-clamp, 3);-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}::slotted(a),::slotted(button),::slotted(ifx-link),::slotted(ifx-button){pointer-events:auto}`;
+
+const CardText = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    hasBtn;
+    componentWillLoad() {
+        const link = this.el.closest("ifx-card").querySelector("ifx-link");
+        const button = this.el.closest("ifx-card").querySelector("ifx-button");
+        if (link || button) {
+            this.hasBtn = true;
+        }
+    }
+    render() {
+        return (index.h("div", { key: 'e6b84591ff0b42172937c23fe8ae7a7e9a54b4ec', class: `card__text-wrapper ${this.hasBtn ? "hasBtn" : ""}` }, index.h("div", { key: 'a9f34bdbacc6db245f3d0eba66caf759255af4a2', class: `card-text` }, index.h("slot", { key: '7357c67c2d27fb4fe6afe18ff57884115210054d' }))));
+    }
+};
+CardText.style = cardTextCss();
+
+exports.ifx_card_text = CardText;

package/dist/cjs/ifx-card.cjs.entry.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+var urlUtils = require('./url-utils-CPE59br4.js');
+
+const cardCss = () => `*{box-sizing:border-box}:host{display:inline-flex}:host(:not(.full-width)){--card-links-padding:0px 24px 24px 24px;align-self:flex-start}:host(.full-width){width:100%}:host(.full-width) .card{width:100%;height:100%;border-width:1px}:host(.full-width) .card.pin-buttons .vertical{display:flex;flex-direction:column;height:100%}:host(.full-width) .card.pin-buttons .vertical .upper__body-wrapper{flex:1;display:flex;flex-direction:column;min-height:0}:host(.full-width) .card.pin-buttons .vertical .lower__body-wrapper{flex:0 0 auto}:host(.full-width) .card.horizontal ::slotted(ifx-card-links){--card-links-padding:0px;--card-links-padding-top:16px}:host(.full-width) .card.horizontal ::slotted(ifx-card-headline){--card-headline-padding:0px;--card-headline-font:18px;--card-headline-line-height:26px}:host(.full-width) .card.horizontal ::slotted(ifx-card-text){--card-text-line-clamp:unset}:host(.full-width) .card.horizontal .horizontal{min-height:auto;width:100%;height:auto;justify-content:space-between}:host(.full-width) .card.horizontal .horizontal .card-img{flex:0 0 40%;min-width:0;max-width:50%;position:relative;align-self:stretch}:host(.full-width) .card.horizontal .horizontal .card-img ::slotted([slot=img]){position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}:host(.full-width) .card.horizontal .horizontal .lower__body-wrapper{flex:1;padding:16px;display:flex;flex-direction:column;min-height:0}:host(.full-width) .card.horizontal .horizontal .lower__body-wrapper .upper-body{padding:0px;min-height:0}.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.pin-buttons .horizontal .lower__body-wrapper{display:grid;grid-template-rows:1fr auto}.card.pin-buttons .horizontal .lower__body-wrapper .upper-body{flex:1;min-height:0}.card .horizontal{display:flex;flex-direction:row;min-height:218px;width:100%;gap:24px}.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%;height:100%;object-fit:cover}.card .horizontal .lower__body-wrapper{flex:1;display:flex;flex-direction:column}.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{gap:24px}.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;
+    /** 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 = "";
+    /** If true, Card stretches to fill the available width. */
+    fullWidth = false;
+    /** Controls vertical placement of the buttons slot within the card.
+    *  "default" keeps buttons inline with content height.
+    *  "bottom" pins buttons to the bottom of the card. Only takes effect when fullWidth is true. */
+    actionsPlacement = "default";
+    setImgPosition(event) {
+        this.alignment = event.detail;
+    }
+    handleImageSlotChange(event) {
+        const slot = event.target;
+        this.noImg = slot.assignedElements().length === 0;
+    }
+    handleComponentAdjustment() {
+        const image = this.el.querySelector('[slot="img"]');
+        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() {
+        const pinButtons = this.direction === "horizontal"
+            ? this.actionsPlacement === "bottom"
+            : this.fullWidth && this.actionsPlacement === "bottom";
+        return (index.h(index.Host, { key: 'b327e65252e5d37cebd9bac3aa024452fcc76fb9', class: `${this.fullWidth ? 'full-width' : ''} ${pinButtons ? 'pin-buttons' : ''}` }, index.h("div", { key: '8b6975b47c097cf0159ec3f7c03af7e1ce6d9e50', "aria-label": this.ariaLabelText || undefined, class: `card 
+            ${this.noBtns ? "noBtns" : ""}
+            ${this.direction} 
+            ${this.alignment}
+						${pinButtons ? "pin-buttons" : ""}`, role: "group" }, this.direction === "horizontal" && (index.h("div", { key: '614061a5dc130c4792f524503629e9b70e0ca643', class: "horizontal" }, index.h("a", { key: 'db03ac3ee6b6bd371348800508172e63e4bdb6e3', class: `card-img ${this.noImg ? "noImage" : ""} ${this.internalHref ? "card-href" : ""}`, href: urlUtils.sanitizeHref(this.internalHref) }, index.h("slot", { key: '378e8b9f3603edd0eceddc6726065067229bca7d', name: "img", onSlotchange: (event) => this.handleImageSlotChange(event) })), index.h("div", { key: '1aa1c14dda2780750cfb46631798321db8174a44', class: "lower__body-wrapper" }, index.h("a", { key: '684494ade8c3b3939154badf6c3a36d2d019a95f', class: `upper-body ${this.internalHref ? "card-href" : ""}`, href: urlUtils.sanitizeHref(this.internalHref), id: "upper-body-content" }, index.h("slot", { key: '9c9a573eb6f9b8d0978138046faa4dd958fdff0a' })), index.h("div", { key: 'a26ad6c93f791c91ebfc54854e0ca0e90af28d7c' }, index.h("slot", { key: '5a90771f179cd1f0762e28dc3502bf3d5881bad3', name: "actions" }))))), this.direction === "vertical" && (index.h("div", { key: '9c1a6f981610b88ed9ca6f52e46028982cfd0502', class: "vertical" }, index.h("a", { key: '6940e4c1f1a671a783a94da21038f2773adb0297', class: `upper__body-wrapper ${this.internalHref ? "card-href" : ""}`, href: urlUtils.sanitizeHref(this.internalHref), target: this.target }, index.h("div", { key: '4a2c3cfc40299adbd0217cffbc86d2da9a429a34', class: `card-img ${this.noImg ? "noImage" : ""}` }, index.h("slot", { key: '49d55285cf72082c0ac23f89b0749b53db483642', name: "img", onSlotchange: (event) => this.handleImageSlotChange(event) })), index.h("div", { key: '7640f8376eee794b46bc73f843dfee7568737172', class: "upper-body", id: "upper-body-content" }, index.h("slot", { key: '3c19fd1b0e60d5b2ee037f3346d4e8f36849f617' }))), index.h("div", { key: '2de079b0a499d155797cac0885548614e37249aa', class: "lower__body-wrapper", role: "group", "aria-labelledby": "upper-body-content" }, index.h("slot", { key: '1903d7f15838ff392e232c2de4ef2c5932ab139b', name: "actions" })))))));
+    }
+};
+Card.style = cardCss();
+
+exports.ifx_card = Card;