@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/action-list/action-list-item.js

@@ -0,0 +1,409 @@
+import { h, } from "@stencil/core";
+import classNames from "classnames";
+import { sanitizeHref } from "../../shared/utils/url-utils";
+export class ActionListItem {
+    host;
+    /**
+     * 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 [
+            h("div", { class: "action-list-item__title" }, this.itemTitle),
+            this.description && (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 (h("div", { key: '1d08708e360da65447a9b9b596483464ed604cf8', class: 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 && (h("div", { key: 'cbf9bf0d29dbfe974a5d3a53ac54882f9d3b1e8d', class: "action-list-item__leading", onClick: this.handleLeadingClick, onKeyDown: this.handleLeadingKeyDown }, h("slot", { key: '2059fd7e9be89347b12e48e77be04b23404a1963', name: "leading" }))), this.href && !this.disabled ? (h("a", { class: "action-list-item__content", href: sanitizeHref(this.href), target: this.target, rel: this.target === "_blank" ? "noopener noreferrer" : undefined }, this.renderContent())) : (h("div", { class: "action-list-item__content" }, this.renderContent())), hasTrailingContent && (h("div", { key: '898371ef47adf85fcd8684d88da9396aab3a2d12', class: "action-list-item__trailing", onClick: this.handleTrailingClick, onKeyDown: this.handleTrailingKeyDown }, h("slot", { key: 'b8b72093c9ececfe2ffda8746a485c236a0c7ae7', name: "trailing" })))));
+    }
+    static get is() { return "ifx-action-list-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["action-list-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["action-list-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "itemTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title text displayed in the item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-title"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The description text displayed below the title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Value associated with this item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL to navigate to when item is clicked"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'_self'"
+                        }],
+                    "text": "Target for the link navigation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target",
+                "defaultValue": "\"_self\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Controls whether the item is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "itemAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria label for accessibility support"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-aria-label"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxActionListItemClick",
+                "name": "ifxActionListItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the main item area is clicked"
+                },
+                "complexType": {
+                    "original": "ActionListItemClickEvent",
+                    "resolved": "ActionListItemClickEvent",
+                    "references": {
+                        "ActionListItemClickEvent": {
+                            "location": "local",
+                            "path": "/home/fp/Dev/IFX/infineon-design-system-stencil/packages/components/src/components/action-list/action-list-item.tsx",
+                            "id": "src/components/action-list/action-list-item.tsx::ActionListItemClickEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "onDisabledChange"
+            }];
+    }
+}

package/dist/collection/components/action-list/action-list.css

@@ -0,0 +1,8 @@
+.action-list {
+  background: #ffffff;
+  border-radius: 0;
+  border: 1px solid #eeeded;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}

package/dist/collection/components/action-list/action-list.js

@@ -0,0 +1,56 @@
+import { h } from "@stencil/core";
+import { isNestedInIfxComponent } from "../../shared/utils/dom-utils";
+import { detectFramework } from "../../shared/utils/framework-detection";
+import { trackComponent } from "../../shared/utils/tracking";
+export class ActionList {
+    el;
+    /**
+     * Aria label for accessibility support
+     */
+    listAriaLabel;
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-action-list", await framework);
+        }
+    }
+    render() {
+        return (h("div", { key: '0d0878d48142a25d5523abff389e8346ef764888', class: "action-list", role: "list", "aria-label": this.listAriaLabel }, h("slot", { key: '58fb9e46d6a9a5fd0a9ac199563e990447e074e3' })));
+    }
+    static get is() { return "ifx-action-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["action-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["action-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "listAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria label for accessibility support"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "list-aria-label"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/ai-label/ai-label.css

@@ -0,0 +1,55 @@
+/* Source Sans 3 Regular */
+@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");
+}
+/* Source Sans 3 Semibold */
+@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");
+}
+/* Source Sans 3 Italic */
+@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;
+}

package/dist/collection/components/ai-label/ai-label.js

@@ -0,0 +1,68 @@
+import { h, Host } from "@stencil/core";
+export class AiLabel {
+    /** 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 (h(Host, { key: '06b72ff838f9c430cd6f5b4badb149f3a85b2653' }, showIcon && h("ifx-icon", { key: '30164c1acf4f5ec1328b7058076edbd4a3c32629', icon: "ai16" }), showLabel && (h("div", { key: '87c6a72550bcbf1bbbe7b1cb1b14a07cdb993034' }, this.divider && h("div", { key: '56a59dcd56ddf198970e1298c8fa946e4e38ab80', class: "divider" }), h("div", { key: '9127427de2a3fb4062fc202b147755d2b251b83c', class: "ai-label" }, h("p", { key: 'bb6fb3629704f836ad2a6f8443ca3ccde80d080d', class: "title" }, "Made with AI."), h("p", { key: '5aad28b537ce489a5cd9044de72dacef8bb8524c' }, "Output can be misleading or wrong."))))));
+    }
+    static get is() { return "ifx-ai-label"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ai-label.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ai-label.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "divider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether to show a divider line"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "divider",
+                "defaultValue": "true"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'label' | 'icon'",
+                    "resolved": "\"icon\" | \"label\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display variant - either label or icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'label'"
+            }
+        };
+    }
+}