@infineon/design-system 0.0.0-stage → 41.11.0

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

@@ -0,0 +1,118 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+
+const accordionItemCss = () => `.accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:"";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0a8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #eeeded;color:#08665c}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0a8276;background-color:#ffffff;border:1px solid #eeeded;cursor:pointer;margin:4px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;overflow:hidden;height:0;transition:height 0.3s ease;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#ffffff;padding:16px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;margin:0 4px 4px;border:1px solid transparent;border-top:1px solid transparent}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665c}.accordion-item.open .accordion-content{max-height:auto}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}.accordion-item.open .inner-content{border-color:#eeeded;border-top-color:transparent;transition:border-color 0s}.accordion-item:not(.open) .inner-content{transition:border-color 0s 0.3s}.inner-content.no-content{border:none;padding:0;margin:0}.accordion-icon .with-icon{justify-content:flex-end;align-items:center}.no-icon{display:flex;align-items:center;gap:12px;flex-direction:row}.icon-wrapper{display:flex;align-items:center;justify-content:flex-start;flex-direction:row-reverse;width:100%;gap:12px;justify-content:space-between}.icon-wrapper-caption{display:flex;align-items:center;justify-content:flex-start;gap:12px}`;
+
+const AccordionItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ifxOpen = index.createEvent(this, "ifxOpen", 7);
+        this.ifxClose = index.createEvent(this, "ifxClose", 7);
+    }
+    get el() { return index.getElement(this); }
+    /** The caption of the accordion item. */
+    caption;
+    /** Set the open attribute to open the accordion item. */
+    open = false;
+    /** The aria-level attribute for the accordion item header. */
+    ariaLevelNumber = 3;
+    /** The icon to be displayed in the accordion item header. */
+    icon = "";
+    internalOpen = false;
+    /** Event emitted when accordion is opened. */
+    ifxOpen;
+    /** Event emitted when an accordion item is closed. */
+    ifxClose;
+    contentEl;
+    titleEl;
+    resizeObserver;
+    componentWillLoad() {
+        this.internalOpen = this.open;
+    }
+    componentDidLoad() {
+        this.checkSlotContent();
+        this.openAccordionItem();
+        this.contentEl = this.el.shadowRoot.querySelector("#accordion-content");
+        if (this.contentEl) {
+            this.attachResizeObserver();
+        }
+    }
+    componentDidUpdate() {
+        this.checkSlotContent();
+        this.openAccordionItem();
+    }
+    openChanged(newValue) {
+        this.internalOpen = newValue;
+    }
+    toggleOpen() {
+        this.internalOpen = !this.internalOpen;
+        this.open = this.internalOpen;
+        if (this.internalOpen) {
+            this.ifxOpen.emit({ isOpen: this.internalOpen });
+        }
+        else {
+            this.ifxClose.emit({ isClosed: !this.internalOpen });
+        }
+    }
+    openAccordionItem() {
+        if (this.internalOpen) {
+            this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;
+            this.contentEl.style.overflow = "hidden";
+        }
+        else {
+            this.contentEl.style.height = "0";
+            this.contentEl.style.overflow = "hidden";
+        }
+    }
+    getInnerContentWrapper() {
+        const innerContentEl = this.el.shadowRoot.querySelector(".inner-content");
+        return innerContentEl;
+    }
+    attachResizeObserver() {
+        const innerContentEl = this.getInnerContentWrapper();
+        if (innerContentEl) {
+            this.resizeObserver = new ResizeObserver(() => {
+                if (this.internalOpen) {
+                    this.openAccordionItem();
+                }
+            });
+            this.resizeObserver.observe(innerContentEl);
+        }
+    }
+    handleKeydown(ev) {
+        const path = ev.composedPath();
+        if (!path.includes(this.titleEl)) {
+            return;
+        }
+        switch (ev.key) {
+            case "Enter": // fallthrough
+            case " ": // space
+                ev.preventDefault();
+                this.toggleOpen();
+                break;
+        }
+    }
+    checkSlotContent() {
+        const slot = this.el.shadowRoot.querySelector("slot");
+        const hasContent = slot.assignedNodes().length > 0;
+        const innerContent = this.getInnerContentWrapper();
+        if (!hasContent) {
+            innerContent.classList.add("no-content");
+        }
+        else if (innerContent.classList.contains("no-content")) {
+            innerContent.classList.remove("no-content");
+        }
+    }
+    render() {
+        return (index.h("div", { key: '1802db7c6036ad4243fdeab59f01d565321e6090', class: `accordion-item ${this.internalOpen ? "open" : ""}` }, index.h("div", { key: '6c3222c6840f2eb404eb1c11cc007a4ac9a32ed7', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: "0", ref: (el) => (this.titleEl = el) }, this.icon ? (index.h("div", { class: "icon-wrapper" }, index.h("span", { "aria-hidden": "true", role: "heading", "aria-level": this.ariaLevelNumber, class: "accordion-icon" }, index.h("ifx-icon", { icon: "chevron-down-16" })), index.h("span", { class: "icon-wrapper-caption" }, index.h("ifx-icon", { icon: this.icon }), index.h("span", { id: "accordion-caption", class: "accordion-caption" }, this.caption)))) : (index.h("div", { class: "no-icon" }, index.h("span", { "aria-hidden": "true", role: "heading", "aria-level": this.ariaLevelNumber, class: "accordion-icon" }, index.h("ifx-icon", { icon: "chevron-down-16" })), index.h("span", { id: "accordion-caption", class: "accordion-caption" }, this.caption)))), index.h("div", { key: 'ccdbc183cd468afdaf1a2369d968dfa552142ff1', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, index.h("div", { key: '859af05ce1e2d13014646e529cd8d716774b3a3d', class: "inner-content" }, index.h("slot", { key: 'ff3f49077bf17ee7fde8a06c5c45482f6d566449' })))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "openChanged": 0
+            }]
+    }; }
+};
+AccordionItem.style = accordionItemCss();
+
+exports.ifx_accordion_item = AccordionItem;

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

@@ -0,0 +1,40 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+
+const accordionCss = () => `:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}`;
+
+const Accordion = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** Collapse the other items when one item is opened. */
+    autoCollapse = false;
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent("ifx-accordion", await framework);
+        }
+    }
+    async onItemOpen(event) {
+        if (this.autoCollapse) {
+            const items = Array.from(this.el.querySelectorAll("ifx-accordion-item"));
+            for (const item of items) {
+                const itemElement = item;
+                if (itemElement !== event.target && (await itemElement.open)) {
+                    itemElement.open = false;
+                }
+            }
+        }
+    }
+    render() {
+        return (index.h("div", { key: 'dfb7118cfc0ecf92a71bc44c7ee56cd40ca7c110', class: "accordion-wrapper" }, index.h("slot", { key: '3bc3e63057c932cf335b6e82716548c81ce36984' })));
+    }
+    static get delegatesFocus() { return true; }
+};
+Accordion.style = accordionCss();
+
+exports.ifx_accordion = Accordion;

package/dist/cjs/ifx-action-list-item.cjs.entry.js

@@ -0,0 +1,238 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var index$1 = require('./index-Bp6Dd2i1.js');
+var urlUtils = require('./url-utils-CPE59br4.js');
+
+const actionListItemCss = () => `.action-list-item{display:flex;align-items:center;padding:8px 16px;background:#ffffff;transition:background-color 0.2s ease;cursor:default}.action-list-item--clickable{cursor:pointer}.action-list-item--clickable:hover:not(.action-list-item--disabled){background:#f7f7f7}.action-list-item--clickable:focus:not(.action-list-item--disabled){outline:none;background:#f7f7f7}.action-list-item--clickable:active:not(.action-list-item--disabled){background:#eeeded}.action-list-item--disabled ::slotted(ifx-icon){color:#bfbbbb}.action-list-item--disabled ::slotted(*) ifx-icon{color:#bfbbbb}.action-list-item__leading{display:flex;align-items:center;justify-content:center;margin-right:16px;flex-shrink:0}.action-list-item__content{flex:1;min-width:0;color:inherit;text-decoration:none}.action-list-item__title{font-family:var(--ifx-font-family);font-weight:600;font-size:1rem;line-height:1.5rem;color:#1d1d1d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list-item--disabled .action-list-item__title{color:#bfbbbb}.action-list-item__description{font-family:var(--ifx-font-family);font-size:0.875rem;line-height:1.25rem;color:#575352;margin-top:2px}.action-list-item--disabled .action-list-item__description{color:#bfbbbb}.action-list-item__trailing{display:flex;align-items:center;justify-content:center;margin-left:16px;flex-shrink:0;gap:16px}`;
+
+const ActionListItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ifxActionListItemClick = index.createEvent(this, "ifxActionListItemClick", 7);
+    }
+    get host() { return index.getElement(this); }
+    /**
+     * The title text displayed in the item
+     */
+    itemTitle;
+    /**
+     * The description text displayed below the title
+     */
+    description;
+    /**
+     * Value associated with this item
+     */
+    value;
+    /**
+     * URL to navigate to when item is clicked
+     */
+    href;
+    /**
+     * Target for the link navigation
+     * @default '_self'
+     */
+    target = "_self";
+    /**
+     * Controls whether the item is disabled
+     * @default false
+     */
+    disabled = false;
+    /**
+     * Aria label for accessibility support
+     */
+    itemAriaLabel;
+    /**
+     * Event emitted when the main item area is clicked
+     */
+    ifxActionListItemClick;
+    onDisabledChange() {
+        // Update interactive elements when disabled state changes
+        this.updateSlotElementsDisabledState();
+    }
+    handleMainClick = (event) => {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        // Check if clicked element is inside leading or trailing areas
+        const leadingElement = this.host.shadowRoot?.querySelector(".action-list-item__leading");
+        const trailingElement = this.host.shadowRoot?.querySelector(".action-list-item__trailing");
+        if (leadingElement?.contains(event.target) ||
+            trailingElement?.contains(event.target)) {
+            return; // Don't trigger main click if clicking on leading/trailing areas
+        }
+        // Always emit main event when clicking on content area (text), regardless of interactive elements
+        this.ifxActionListItemClick.emit({
+            value: this.value,
+            href: this.href,
+            target: this.target,
+            component: this,
+        });
+    };
+    handleLeadingClick = (event) => {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        const target = event.target;
+        // Check if the clicked element or any of its parents is an interactive component
+        let currentElement = target;
+        while (currentElement && currentElement !== this.host) {
+            if (this.isInteractiveElement(currentElement)) {
+                // Interactive element clicked - stop propagation to prevent main event
+                event.stopPropagation();
+                return;
+            }
+            currentElement = currentElement.parentElement;
+        }
+        // Non-interactive element clicked - trigger main action
+        event.stopPropagation();
+        this.ifxActionListItemClick.emit({
+            value: this.value,
+            href: this.href,
+            target: this.target,
+            component: this,
+        });
+    };
+    handleTrailingClick = (event) => {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        const target = event.target;
+        // Check if the clicked element or any of its parents is an interactive component
+        let currentElement = target;
+        while (currentElement && currentElement !== this.host) {
+            if (this.isInteractiveElement(currentElement)) {
+                // Interactive element clicked - stop propagation to prevent main event
+                event.stopPropagation();
+                return;
+            }
+            currentElement = currentElement.parentElement;
+        }
+        // Non-interactive element clicked - trigger main action
+        event.stopPropagation();
+        this.ifxActionListItemClick.emit({
+            value: this.value,
+            href: this.href,
+            target: this.target,
+            component: this,
+        });
+    };
+    isInteractiveElement = (element) => {
+        // Get the tag name, handling both custom elements and standard HTML
+        const tagName = element.tagName.toUpperCase();
+        // List of Infineon components that should block main event
+        const interactiveInfineonComponents = [
+            "IFX-BUTTON",
+            "IFX-CHECKBOX",
+            "IFX-SWITCH",
+        ];
+        // Check if it's an interactive Infineon component
+        return interactiveInfineonComponents.includes(tagName);
+    };
+    handleMainKeyDown = (event) => {
+        if (this.disabled)
+            return;
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            // Always trigger main action via keyboard, regardless of interactive elements
+            this.handleMainClick(event);
+        }
+    };
+    handleLeadingKeyDown = (event) => {
+        if (this.disabled)
+            return;
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            const leadingSlot = this.host.shadowRoot?.querySelector('slot[name="leading"]');
+            const assignedElements = leadingSlot?.assignedElements() || [];
+            // Find first interactive element and activate it
+            const firstInteractive = assignedElements.find((el) => this.isInteractiveElement(el));
+            if (firstInteractive) {
+                firstInteractive.focus();
+                firstInteractive.click();
+            }
+        }
+    };
+    handleTrailingKeyDown = (event) => {
+        if (this.disabled)
+            return;
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            const trailingSlot = this.host.shadowRoot?.querySelector('slot[name="trailing"]');
+            const assignedElements = trailingSlot?.assignedElements() || [];
+            // Find first interactive element and activate it
+            const firstInteractive = assignedElements.find((el) => this.isInteractiveElement(el));
+            if (firstInteractive) {
+                firstInteractive.focus();
+                firstInteractive.click();
+            }
+        }
+    };
+    hasSlotContent(slotName) {
+        const slot = this.host.querySelector(`[slot="${slotName}"]`);
+        return !!slot;
+    }
+    componentDidLoad() {
+        // Apply disabled state to interactive elements in slots
+        this.updateSlotElementsDisabledState();
+    }
+    componentDidUpdate() {
+        // Apply disabled state to interactive elements in slots when disabled prop changes
+        this.updateSlotElementsDisabledState();
+    }
+    updateSlotElementsDisabledState = () => {
+        // Only handle interactive components that should be disabled
+        const interactiveComponents = ["ifx-checkbox", "ifx-switch", "ifx-button"];
+        // Get all slotted elements
+        const slots = this.host.querySelectorAll("[slot]");
+        slots.forEach((slottedElement) => {
+            // Check if the slotted element itself is an interactive component
+            if (interactiveComponents.includes(slottedElement.tagName.toLowerCase())) {
+                this.setElementDisabledState(slottedElement);
+            }
+            // Also check for nested interactive components within the slotted element
+            interactiveComponents.forEach((componentTag) => {
+                const nestedElements = slottedElement.querySelectorAll(componentTag);
+                nestedElements.forEach((nestedElement) => {
+                    this.setElementDisabledState(nestedElement);
+                });
+            });
+        });
+    };
+    setElementDisabledState = (element) => {
+        if (this.disabled) {
+            element.setAttribute("disabled", "true");
+        }
+        else {
+            element.removeAttribute("disabled");
+        }
+    };
+    renderContent() {
+        return [
+            index.h("div", { class: "action-list-item__title" }, this.itemTitle),
+            this.description && (index.h("div", { class: "action-list-item__description" }, this.description))
+        ];
+    }
+    render() {
+        const isClickable = !this.disabled && (this.href || this.value);
+        const ariaLabel = this.itemAriaLabel ||
+            `${this.itemTitle}${this.description ? ` - ${this.description}` : ""}`;
+        const hasLeadingContent = this.hasSlotContent("leading");
+        const hasTrailingContent = this.hasSlotContent("trailing");
+        return (index.h("div", { key: '1d08708e360da65447a9b9b596483464ed604cf8', class: index$1.classNames("action-list-item", this.disabled && "action-list-item--disabled", isClickable && "action-list-item--clickable"), role: "listitem", tabIndex: isClickable ? 0 : -1, "aria-label": ariaLabel, "aria-disabled": this.disabled ? "true" : undefined, onClick: this.handleMainClick, onKeyDown: this.handleMainKeyDown }, hasLeadingContent && (index.h("div", { key: 'cbf9bf0d29dbfe974a5d3a53ac54882f9d3b1e8d', class: "action-list-item__leading", onClick: this.handleLeadingClick, onKeyDown: this.handleLeadingKeyDown }, index.h("slot", { key: '2059fd7e9be89347b12e48e77be04b23404a1963', name: "leading" }))), this.href && !this.disabled ? (index.h("a", { class: "action-list-item__content", href: urlUtils.sanitizeHref(this.href), target: this.target, rel: this.target === "_blank" ? "noopener noreferrer" : undefined }, this.renderContent())) : (index.h("div", { class: "action-list-item__content" }, this.renderContent())), hasTrailingContent && (index.h("div", { key: '898371ef47adf85fcd8684d88da9396aab3a2d12', class: "action-list-item__trailing", onClick: this.handleTrailingClick, onKeyDown: this.handleTrailingKeyDown }, index.h("slot", { key: 'b8b72093c9ececfe2ffda8746a485c236a0c7ae7', name: "trailing" })))));
+    }
+    static get watchers() { return {
+        "disabled": [{
+                "onDisabledChange": 0
+            }]
+    }; }
+};
+ActionListItem.style = actionListItemCss();
+
+exports.ifx_action_list_item = ActionListItem;

package/dist/cjs/ifx-action-list.cjs.entry.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+
+const actionListCss = () => `.action-list{background:#ffffff;border-radius:0;border:1px solid #eeeded;overflow:hidden;display:flex;flex-direction:column}`;
+
+const ActionList = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Aria label for accessibility support
+     */
+    listAriaLabel;
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent("ifx-action-list", await framework);
+        }
+    }
+    render() {
+        return (index.h("div", { key: '0d0878d48142a25d5523abff389e8346ef764888', class: "action-list", role: "list", "aria-label": this.listAriaLabel }, index.h("slot", { key: '58fb9e46d6a9a5fd0a9ac199563e990447e074e3' })));
+    }
+};
+ActionList.style = actionListCss();
+
+exports.ifx_action_list = ActionList;

package/dist/cjs/ifx-ai-label.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+
+const aiLabelCss = () => `@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;src:url("https://cdn.jsdelivr.net/npm/@infineon/design-system-tokens@7.0.0/dist/fonts/source-sans-3/SourceSans3-Regular.ttf.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@infineon/design-system-tokens@7.0.0/dist/fonts/source-sans-3/SourceSans3-Regular.ttf.woff") format("woff")}@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;src:url("https://cdn.jsdelivr.net/npm/@infineon/design-system-tokens@7.0.0/dist/fonts/source-sans-3/SourceSans3-Semibold.ttf.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@infineon/design-system-tokens@7.0.0/dist/fonts/source-sans-3/SourceSans3-Semibold.ttf.woff") format("woff")}@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;src:url("https://cdn.jsdelivr.net/npm/@infineon/design-system-tokens@7.0.0/dist/fonts/source-sans-3/SourceSans3-It.ttf.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@infineon/design-system-tokens@7.0.0/dist/fonts/source-sans-3/SourceSans3-It.ttf.woff") format("woff")}:root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}ifx-icon:empty{display:none}p{font-family:var(--ifx-font-family);color:#575352;font-size:0.75rem;font-style:normal;font-weight:400;margin:16px 0px;line-height:1rem}.ai-label{display:flex;align-items:flex-start;gap:2px}.ai-label .title{font-weight:600}.divider{border-top:1px solid #eeeded;display:flex;width:auto;align-items:flex-start;margin-top:16px}`;
+
+const AiLabel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Determines whether to show a divider line */
+    divider = true;
+    /** Display variant - either label or icon */
+    variant = 'label';
+    render() {
+        const showLabel = this.variant === 'label';
+        const showIcon = this.variant === 'icon';
+        return (index.h(index.Host, { key: '06b72ff838f9c430cd6f5b4badb149f3a85b2653' }, showIcon && index.h("ifx-icon", { key: '30164c1acf4f5ec1328b7058076edbd4a3c32629', icon: "ai16" }), showLabel && (index.h("div", { key: '87c6a72550bcbf1bbbe7b1cb1b14a07cdb993034' }, this.divider && index.h("div", { key: '56a59dcd56ddf198970e1298c8fa946e4e38ab80', class: "divider" }), index.h("div", { key: '9127427de2a3fb4062fc202b147755d2b251b83c', class: "ai-label" }, index.h("p", { key: 'bb6fb3629704f836ad2a6f8443ca3ccde80d080d', class: "title" }, "Made with AI."), index.h("p", { key: '5aad28b537ce489a5cd9044de72dacef8bb8524c' }, "Output can be misleading or wrong."))))));
+    }
+};
+AiLabel.style = aiLabelCss();
+
+exports.ifx_ai_label = AiLabel;