@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/tree-view/tree-view.js

@@ -0,0 +1,187 @@
+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 TreeView {
+    el;
+    /** Optional label displayed for the tree view. */
+    label;
+    /** If true, disables all items in the tree view. */
+    disableAllItems = false;
+    /** If true, expands all items in the tree view. */
+    expandAllItems = false;
+    /** Accessible label for the tree view container. */
+    ariaLabelText;
+    /** Fired when the “expand all items” state changes. */
+    ifxTreeViewExpandAllChange;
+    /** Fired when the “disable all items” state changes. */
+    ifxTreeViewDisableAllChange;
+    handleExpandAllItemsChange(newValue) {
+        this.ifxTreeViewExpandAllChange.emit(newValue);
+    }
+    handleDisableAllItemsChange(newValue) {
+        this.ifxTreeViewDisableAllChange.emit(newValue);
+    }
+    handleSlotRef = (el) => {
+        if (el) {
+            if (this.disableAllItems) {
+                el.setAttribute("data-disable-all-items", "true");
+            }
+            else {
+                el.removeAttribute("data-disable-all-items");
+            }
+            if (this.expandAllItems) {
+                el.setAttribute("data-expand-all-items", "true");
+            }
+            else {
+                el.removeAttribute("data-expand-all-items");
+            }
+        }
+    };
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-tree-view", await framework);
+        }
+    }
+    render() {
+        return (h("div", { key: '90c805d7b66aa0d91d6fb9af2778628d1b535f87', class: `tree-view ${this.disableAllItems ? " tree-view--disabled" : ""}`, role: "tree", "aria-label": this.ariaLabelText }, this.label && this.label.trim() !== "" && (h("div", { key: '7f52505a782ea778cca5d08566dd403d77cf117e', class: "tree-view__label" }, this.label)), h("slot", { key: '7e637d715451f90a7b65dd19192e4ad114d91716', ref: this.handleSlotRef })));
+    }
+    static get is() { return "ifx-tree-view"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tree-view.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tree-view.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional label displayed for the tree view."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "disableAllItems": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, disables all items in the tree view."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disable-all-items",
+                "defaultValue": "false"
+            },
+            "expandAllItems": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, expands all items in the tree view."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expand-all-items",
+                "defaultValue": "false"
+            },
+            "ariaLabelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the tree view container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-text"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxTreeViewExpandAllChange",
+                "name": "ifxTreeViewExpandAllChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the \u201Cexpand all items\u201D state changes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "ifxTreeViewDisableAllChange",
+                "name": "ifxTreeViewDisableAllChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the \u201Cdisable all items\u201D state changes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "expandAllItems",
+                "methodName": "handleExpandAllItemsChange"
+            }, {
+                "propName": "disableAllItems",
+                "methodName": "handleDisableAllItemsChange"
+            }];
+    }
+}

package/dist/collection/global/setup.js

@@ -0,0 +1,5 @@
+// This file is loaded once per application that uses the components.
+// This is configured via the "globalScript" property in the stencil.config.ts file.
+export default function setup() {
+    // Any global setup can be done here
+}

package/dist/collection/index.js

@@ -0,0 +1,2 @@
+export * from "./components";
+export { ifxToast, } from "./components/toast/toast-controller";

package/dist/collection/shared/utils/animation.js

@@ -0,0 +1,37 @@
+export function animationTo(element, keyframes, options) {
+    const animated = element.animate(keyframes, { ...options, fill: "both" });
+    animated.addEventListener("finish", () => {
+        animated.commitStyles();
+        animated.cancel();
+    });
+    return animated;
+}
+const keyframeDefaults = {
+    easing: "cubic-bezier(0.390, 0.575, 0.565, 1.000)",
+};
+export const KEYFRAMES = {
+    fadeIn: [
+        {
+            offset: 0,
+            ...keyframeDefaults,
+            opacity: 0,
+        },
+        {
+            offset: 1,
+            ...keyframeDefaults,
+            opacity: 1,
+        },
+    ],
+    fadeOut: [
+        {
+            offset: 0,
+            ...keyframeDefaults,
+            opacity: 1,
+        },
+        {
+            offset: 1,
+            ...keyframeDefaults,
+            opacity: 0,
+        },
+    ],
+};

package/dist/collection/shared/utils/colorNames.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/shared/utils/dom-ready.js

@@ -0,0 +1,15 @@
+export const waitForDOMReady = () => {
+    return new Promise((resolve) => {
+        if (document.readyState === "complete" ||
+            document.readyState === "interactive") {
+            resolve();
+        }
+        else {
+            const onReady = () => {
+                resolve();
+                document.removeEventListener("DOMContentLoaded", onReady);
+            };
+            document.addEventListener("DOMContentLoaded", onReady);
+        }
+    });
+};

package/dist/collection/shared/utils/dom-utils.js

@@ -0,0 +1,15 @@
+export const isNestedInIfxComponent = (el) => {
+    let parent = el.parentNode;
+    while (parent) {
+        if (parent instanceof ShadowRoot) {
+            parent = parent.host;
+            continue;
+        }
+        if (parent instanceof HTMLElement &&
+            parent.tagName.toLowerCase().startsWith("ifx")) {
+            return true;
+        }
+        parent = parent.parentNode;
+    }
+    return false;
+};

package/dist/collection/shared/utils/focus-trap.js

@@ -0,0 +1,120 @@
+/**
+ * Copy/pasted from https://github.com/andreasbm/focus-trap
+ */
+/**
+ * Traverses the slots of the open shadowroots and returns all children matching the query.
+ * We need to traverse each child-depth one at a time because if an element should be skipped
+ * (for example because it is hidden) we need to skip all of it's children. If we use querySelectorAll("*")
+ * the information of whether the children is within a hidden parent is lost.
+ * @param {ShadowRoot | HTMLElement} root
+ * @param skipNode
+ * @param isMatch
+ * @param {number} maxDepth
+ * @param {number} depth
+ * @returns {HTMLElement[]}
+ */
+export function queryShadowRoot(root, skipNode, isMatch, maxDepth = 20, depth = 0) {
+    const matches = [];
+    // If the depth is above the max depth, abort the searching here.
+    if (depth >= maxDepth) {
+        return matches;
+    }
+    // Traverses a slot element
+    const traverseSlot = ($slot) => {
+        // Only check nodes that are of the type Node.ELEMENT_NODE
+        // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
+        const assignedNodes = $slot
+            .assignedNodes()
+            .filter((node) => node.nodeType === 1);
+        if (assignedNodes.length > 0) {
+            const $slotParent = assignedNodes[0].parentElement;
+            return queryShadowRoot($slotParent, skipNode, isMatch, maxDepth, depth + 1);
+        }
+        return [];
+    };
+    // Go through each child and continue the traversing if necessary
+    // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.
+    // Therefore we fallback to an empty array if it is undefined.
+    const children = Array.from(root.children || []);
+    for (const $child of children) {
+        // Check if the element and its descendants should be skipped
+        if (skipNode($child)) {
+            // console.log('-- SKIP', $child);
+            continue;
+        }
+        // console.log('$child', $child);
+        // If the element matches we always add it
+        if (isMatch($child)) {
+            matches.push($child);
+        }
+        if ($child.shadowRoot != null) {
+            // If the element has a shadow root we need to traverse it
+            matches.push(...queryShadowRoot($child.shadowRoot, skipNode, isMatch, maxDepth, depth + 1));
+        }
+        else if ($child.tagName === "SLOT") {
+            // If the child is a slot we need to traverse each assigned node
+            matches.push(...traverseSlot($child));
+        }
+        else {
+            // Traverse the children of the element
+            matches.push(...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1));
+        }
+    }
+    return matches;
+}
+/**
+ * Returns whether the element is hidden.
+ * @param $elem
+ */
+export function isHidden($elem) {
+    return ($elem.hasAttribute("hidden") ||
+        ($elem.hasAttribute("aria-hidden") &&
+            $elem.getAttribute("aria-hidden") !== "false") ||
+        // A quick and dirty way to check whether the element is hidden.
+        // For a more fine-grained check we could use "window.getComputedStyle" but we don't because of bad performance.
+        // If the element has visibility set to "hidden" or "collapse", display set to "none" or opacity set to "0" through CSS
+        // we won't be able to catch it here. We accept it due to the huge performance benefits.
+        $elem.style.display === `none` ||
+        $elem.style.opacity === `0` ||
+        $elem.style.visibility === `hidden` ||
+        $elem.style.visibility === `collapse`);
+    // If offsetParent is null we can assume that the element is hidden
+    // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null
+    // || $elem.offsetParent == null;
+}
+/**
+ * Returns whether the element is disabled.
+ * @param $elem
+ */
+export function isDisabled($elem) {
+    return ($elem.hasAttribute("disabled") ||
+        ($elem.hasAttribute("aria-disabled") &&
+            $elem.getAttribute("aria-disabled") !== "false"));
+}
+/**
+ * Determines whether an element is focusable.
+ * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194
+ * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable
+ * @param $elem
+ */
+export function isFocusable($elem) {
+    // Discard elements that are removed from the tab order.
+    if ($elem.getAttribute("tabindex") === "-1" ||
+        isHidden($elem) ||
+        isDisabled($elem)) {
+        return false;
+    }
+    return (
+    // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists
+    $elem.hasAttribute("tabindex") ||
+        // Anchor tags or area tags with a href set
+        (($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) &&
+            $elem.hasAttribute("href")) ||
+        // Form elements which are not disabled
+        $elem instanceof HTMLButtonElement ||
+        $elem instanceof HTMLInputElement ||
+        $elem instanceof HTMLTextAreaElement ||
+        $elem instanceof HTMLSelectElement ||
+        // IFrames
+        $elem instanceof HTMLIFrameElement);
+}

package/dist/collection/shared/utils/framework-detection.js

@@ -0,0 +1,74 @@
+let frameworkCache = null;
+import { waitForDOMReady } from "./dom-ready";
+export const detectFramework = async () => {
+    if (frameworkCache)
+        return frameworkCache;
+    if (typeof window === "undefined" || typeof document === "undefined") {
+        frameworkCache = "non-browser";
+        return frameworkCache;
+    }
+    const win = window;
+    const doc = document;
+    const isJest = typeof process !== "undefined" &&
+        process.env &&
+        process.env.NODE_ENV === "test";
+    if (isJest) {
+        frameworkCache = "jest";
+        return frameworkCache;
+    }
+    const isStorybook = win.location.search.includes("viewMode") ||
+        win.location.href.includes("viewMode") ||
+        win.__STORYBOOK_ENV__;
+    if (isStorybook) {
+        frameworkCache = "Storybook";
+        return frameworkCache;
+    }
+    const isLocalhost = ["localhost", "127.0.0.1"].includes(win.location.hostname);
+    if (isLocalhost) {
+        frameworkCache = "localhost";
+        return frameworkCache;
+    }
+    try {
+        if (win.React || win.ReactDOM) {
+            frameworkCache = "React";
+            return frameworkCache;
+        }
+        if (win.ng || win.getAllAngularRootElements) {
+            frameworkCache = "Angular";
+            return frameworkCache;
+        }
+        if (win.Vue || win.__VUE__) {
+            frameworkCache = "Vue";
+            return frameworkCache;
+        }
+        await waitForDOMReady();
+        const reactRoot = doc.querySelector("[data-reactroot], [data-reactid]");
+        if (reactRoot) {
+            frameworkCache = "React";
+            return frameworkCache;
+        }
+        const rootContainers = Array.from(doc.querySelectorAll("body > div"));
+        const hasReactRoot = rootContainers.some((container) => {
+            const keys = Object.keys(container);
+            return keys.some((key) => key.startsWith("__reactContainer"));
+        });
+        if (hasReactRoot) {
+            frameworkCache = "React";
+            return frameworkCache;
+        }
+        if (doc.querySelector("[ng-version], [ng-app]")) {
+            frameworkCache = "Angular";
+            return frameworkCache;
+        }
+        if (doc.querySelector("[data-v-app]")) {
+            frameworkCache = "Vue";
+            return frameworkCache;
+        }
+        frameworkCache = "Vanilla";
+        return frameworkCache;
+    }
+    catch (e) {
+        frameworkCache = "error";
+        return frameworkCache;
+    }
+};

package/dist/collection/shared/utils/tracking.js

@@ -0,0 +1,60 @@
+const isTestEnvironment = typeof process !== "undefined" &&
+    process.env &&
+    process.env.NODE_ENV === "test";
+function initializeTracking() {
+    if (isTestEnvironment) {
+        if (!window.btnt) {
+            window.btnt = () => { };
+        }
+        return;
+    }
+    ((t, r, _kk, n, pp) => {
+        if (typeof window.btntConfig !== "object") {
+            window.btntConfig = {
+                domain: "https://ssgtm.infineon.com",
+                withCookies: true,
+                maxBatchSize: 10,
+            };
+        }
+        if (window["btnt"])
+            return;
+        window["btnt"] = (z) => {
+            if (typeof z !== "object") {
+                z = {};
+            }
+            if (typeof window.btntQueue !== "object") {
+                window.btntQueue = [];
+            }
+            window.btntQueue.push(z);
+        };
+        n = t.createElement(r);
+        // Add safety check for test environments
+        pp = t.getElementsByTagName(r)[0];
+        if (pp && pp.parentNode) {
+            n.async = 1;
+            n.src = window.btntConfig.domain + "/btnt.js";
+            pp.parentNode.insertBefore(n, pp);
+        }
+    })(document, "script");
+}
+export function trackComponent(componentName, environment) {
+    const skipEnvironments = ["jest", "localhost", "error"];
+    if (skipEnvironments.includes(environment)) {
+        return;
+    }
+    if (!window.INFINEON_TRACKED_COMPONENTS) {
+        window.INFINEON_TRACKED_COMPONENTS = new Set();
+    }
+    if (window.INFINEON_TRACKED_COMPONENTS.has(componentName)) {
+        return;
+    }
+    window.INFINEON_TRACKED_COMPONENTS.add(componentName);
+    if (!window.btnt)
+        initializeTracking();
+    window.btnt({
+        event_name: "component_initialized",
+        component_name: componentName,
+        environment: environment,
+    });
+}
+export default trackComponent;

package/dist/collection/shared/utils/url-utils.js

@@ -0,0 +1,14 @@
+const DUMMY_BASE_URL = "https://example.com/";
+const BLOCKED_PROTOCOLS = new Set(["javascript:", "vbscript:"]);
+export function sanitizeHref(href) {
+    if (href === undefined) {
+        return undefined;
+    }
+    try {
+        const protocol = new URL(href, DUMMY_BASE_URL).protocol;
+        return BLOCKED_PROTOCOLS.has(protocol) ? undefined : href;
+    }
+    catch {
+        return href;
+    }
+}

package/dist/collection/storybook/public/favicon.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="a" data-name="logo" xmlns="http://www.w3.org/2000/svg" width="100.012mm" height="43.744mm" viewBox="0 0 283.5 124">
+  <path d="M211.2,83.5c10.6,0,13.9-11.2,13.9-21.5s-5.8-21-13.9-21-13.8,11.2-13.7,21.2c0,9.9,2.9,21.4,13.7,21.4v-.1ZM206,61.9c0-4.1,0-13.7,5.2-13.7s5.4,9.5,5.4,13.9,0,14.4-5.2,14.4-5.5-10.1-5.5-14.5h0l.1-.1ZM180.4,83.5c4.3,0,8-1.7,11.5-5.4l-3.1-5.8c-2.4,2.6-4.8,4-7.7,4s-4.4-1.4-5.6-3.8c-1-2.1-1.2-4.5-1.2-7.1v-.8h18v-1.8c0-8.9-1.1-13.8-3.9-17.5-2.1-2.8-5.2-4.3-9-4.3s-7.3,1.8-9.7,5.3c-2.6,3.8-3.7,8.9-3.7,15.9,0,13.4,5.2,21.3,14.4,21.3h0ZM179.5,47.6c2,0,3.2,1.1,4,2.9.6,1.6.9,4.3.9,7.5h-10.1c.1-7.2,1.7-10.4,5.2-10.4h0ZM231.7,82.5h7.8v-30c1.9-2.3,4.1-3.6,5.7-3.6s2,.2,2.6,1c.6.9.9,2.2.9,5.3v27.3h7.8v-30.9c0-2.7-.3-5.4-1.9-7.4-1.4-1.8-3.6-2.9-6.4-2.9s-7.2,2.1-9.3,4.5c0-2.1-.8-4.1-1-4.8l-7.3,1.9c.4,2.2,1,4.9,1,9.8v29.7h0l.1.1ZM141.1,45.8c0-2.1-.8-4.1-1-4.8l-7.3,1.9c.4,2.2,1,4.9,1,9.8v29.7h7.8v-30c1.9-2.3,4.1-3.6,5.7-3.6s2,.2,2.6,1c.6.9.9,2.2.9,5.3v27.3h7.8v-30.9c0-2.7-.3-5.4-1.9-7.4-1.4-1.8-3.6-2.9-6.4-2.9s-7.2,2.1-9.3,4.5h0l.1.1ZM45.7,28.3c4.6,0,8.3-3.7,8.3-8.3s-3.7-8.3-8.3-8.3-8.3,3.7-8.3,8.3,3.7,8.3,8.3,8.3ZM84,82.5v-30.9c0-2.7-.3-5.4-1.9-7.4-1.4-1.8-3.6-2.9-6.4-2.9s-7.2,2.1-9.3,4.5c0-2.1-.8-4.1-1-4.8l-7.3,1.9c.4,2.2,1,4.9,1,9.8v29.7h7.8v-30c1.9-2.3,4.1-3.6,5.7-3.6s2,.2,2.6,1c.6.9.9,2.2.9,5.3v27.3h7.8l.1.1ZM119.9,26.1c-2.9,0-5.2,2.3-5.2,5.2s2.3,5.2,5.1,5.2,5.2-2.3,5.2-5.2-2.3-5.2-5.1-5.2ZM42,82.5h7.8v-48.7l-7.8,1v47.7ZM105.7,30.9c1.4,0,2.8.5,3.7,1.2l2.2-6.1c-2.1-1.5-4.4-2.2-7.3-2.2s-4.1.5-6,2c-1.9,1.6-3.9,4.8-3.9,10.8s.1,5.3.1,5.3h-2.7v6.9h2.7v33.6h8v-33.6h5.9l1.4-6.9h-7.3v-6.2c0-3.1,1.2-4.9,3.1-4.9h0l.1.1ZM115.9,82.5h7.9v-41.2l-7.9,1v40.2Z" fill="#005da9"/>
+  <path d="M240.5,104.5c-26.4,7.8-58.5,11.2-89.9,11.2-79.7,0-131.1-23.4-134.7-54.3-1.3-11.6,7.8-22.9,23-32.5-2.7-2-4.4-5.2-4.5-8.8C12.4,31.7,0,46.9,0,62.3c0,34.1,60.9,62.9,151.4,61.7,31.5-.4,57.8-4.9,81.6-12.7,28.3-9.2,46.1-22.4,50.4-28.2-5.2,4.6-17.3,13.9-43,21.5h0l.1-.1ZM72.6,13.7c5.3-1.8,12.8-4.1,12.8-4.1C106.4,3.8,129.7.4,151.4.6c-25-1.5-47.8,0-67.7,3.6,0,0-6.6,1.1-13.7,2.9,0,0-3.4.9-5.5,1.5s-5,1.4-5,1.4c-2,.6-4,1.3-6,2,2,2,3.2,4.6,3.3,7.6,3.4-1.6,10.1-4,15.6-5.9h.2Z" fill="#e30034"/>
+</svg>

package/dist/components/ifx-accordion-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IfxAccordionItem extends Components.IfxAccordionItem, HTMLElement {}
+export const IfxAccordionItem: {
+    prototype: IfxAccordionItem;
+    new (): IfxAccordionItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ifx-accordion-item.js

@@ -0,0 +1 @@
+import{p as e,H as o,c as n,h as i,t}from"./p-BT_2CyMS.js";import{d as c}from"./p-DMAv4MDG.js";const r=e(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.ifxOpen=n(this,"ifxOpen",7),this.ifxClose=n(this,"ifxClose",7)}get el(){return this}caption;open=!1;ariaLevelNumber=3;icon="";internalOpen=!1;ifxOpen;ifxClose;contentEl;titleEl;resizeObserver;componentWillLoad(){this.internalOpen=this.open}componentDidLoad(){this.checkSlotContent(),this.openAccordionItem(),this.contentEl=this.el.shadowRoot.querySelector("#accordion-content"),this.contentEl&&this.attachResizeObserver()}componentDidUpdate(){this.checkSlotContent(),this.openAccordionItem()}openChanged(e){this.internalOpen=e}toggleOpen(){this.internalOpen=!this.internalOpen,this.open=this.internalOpen,this.internalOpen?this.ifxOpen.emit({isOpen:this.internalOpen}):this.ifxClose.emit({isClosed:!this.internalOpen})}openAccordionItem(){this.internalOpen?(this.contentEl.style.height=this.contentEl.scrollHeight+"px",this.contentEl.style.overflow="hidden"):(this.contentEl.style.height="0",this.contentEl.style.overflow="hidden")}getInnerContentWrapper(){return this.el.shadowRoot.querySelector(".inner-content")}attachResizeObserver(){const e=this.getInnerContentWrapper();e&&(this.resizeObserver=new ResizeObserver((()=>{this.internalOpen&&this.openAccordionItem()})),this.resizeObserver.observe(e))}handleKeydown(e){if(e.composedPath().includes(this.titleEl))switch(e.key){case"Enter":case" ":e.preventDefault(),this.toggleOpen()}}checkSlotContent(){const e=this.el.shadowRoot.querySelector("slot").assignedNodes().length>0,o=this.getInnerContentWrapper();e?o.classList.contains("no-content")&&o.classList.remove("no-content"):o.classList.add("no-content")}render(){return i("div",{key:"1802db7c6036ad4243fdeab59f01d565321e6090",class:"accordion-item "+(this.internalOpen?"open":"")},i("div",{key:"6c3222c6840f2eb404eb1c11cc007a4ac9a32ed7",role:"button","aria-expanded":this.internalOpen,"aria-controls":"accordion-content",class:"accordion-title",onClick:()=>this.toggleOpen(),tabindex:"0",ref:e=>this.titleEl=e},this.icon?i("div",{class:"icon-wrapper"},i("span",{"aria-hidden":"true",role:"heading","aria-level":this.ariaLevelNumber,class:"accordion-icon"},i("ifx-icon",{icon:"chevron-down-16"})),i("span",{class:"icon-wrapper-caption"},i("ifx-icon",{icon:this.icon}),i("span",{id:"accordion-caption",class:"accordion-caption"},this.caption))):i("div",{class:"no-icon"},i("span",{"aria-hidden":"true",role:"heading","aria-level":this.ariaLevelNumber,class:"accordion-icon"},i("ifx-icon",{icon:"chevron-down-16"})),i("span",{id:"accordion-caption",class:"accordion-caption"},this.caption))),i("div",{key:"ccdbc183cd468afdaf1a2369d968dfa552142ff1",id:"accordion-content",class:"accordion-content",ref:e=>this.contentEl=e,role:"region","aria-labelledby":"accordion-caption"},i("div",{key:"859af05ce1e2d13014646e529cd8d716774b3a3d",class:"inner-content"},i("slot",{key:"ff3f49077bf17ee7fde8a06c5c45482f6d566449"}))))}static get watchers(){return{open:[{openChanged:0}]}}static get style(){return'.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}'}},[769,"ifx-accordion-item",{caption:[1],open:[1028],ariaLevelNumber:[2,"aria-level-number"],icon:[1],internalOpen:[32]},[[0,"keydown","handleKeydown"]],{open:[{openChanged:0}]}]),a=r,s=function(){"undefined"!=typeof customElements&&["ifx-accordion-item","ifx-icon"].forEach((e=>{switch(e){case"ifx-accordion-item":customElements.get(t(e))||customElements.define(t(e),r);break;case"ifx-icon":customElements.get(t(e))||c()}}))};export{a as IfxAccordionItem,s as defineCustomElement}

package/dist/components/ifx-accordion.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IfxAccordion extends Components.IfxAccordion, HTMLElement {}
+export const IfxAccordion: {
+    prototype: IfxAccordion;
+    new (): IfxAccordion;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ifx-accordion.js

@@ -0,0 +1 @@
+import{p as t,t as o,H as c,h as e}from"./p-BT_2CyMS.js";import{i as s,d as a,t as i}from"./p-94ZtGp9D.js";const n=t(class extends c{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}get el(){return this}autoCollapse=!1;async componentDidLoad(){if(!s(this.el)){const t=a();i("ifx-accordion",await t)}}async onItemOpen(t){if(this.autoCollapse){const o=Array.from(this.el.querySelectorAll("ifx-accordion-item"));for(const c of o){const o=c;o!==t.target&&await o.open&&(o.open=!1)}}}render(){return e("div",{key:"dfb7118cfc0ecf92a71bc44c7ee56cd40ca7c110",class:"accordion-wrapper"},e("slot",{key:"3bc3e63057c932cf335b6e82716548c81ce36984"}))}static get delegatesFocus(){return!0}static get style(){return":host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}"}},[785,"ifx-accordion",{autoCollapse:[4,"auto-collapse"]},[[0,"ifxOpen","onItemOpen"]]]),r=n,f=function(){"undefined"!=typeof customElements&&["ifx-accordion"].forEach((t=>{"ifx-accordion"===t&&(customElements.get(o(t))||customElements.define(o(t),n))}))};export{r as IfxAccordion,f as defineCustomElement}

package/dist/components/ifx-action-list-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IfxActionListItem extends Components.IfxActionListItem, HTMLElement {}
+export const IfxActionListItem: {
+    prototype: IfxActionListItem;
+    new (): IfxActionListItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1 @@
+import{p as t,H as i,c as e,h as s,t as n}from"./p-BT_2CyMS.js";import{c as a}from"./p-BfTCfPZ1.js";import{s as l}from"./p-QgsB_-OM.js";const o=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.ifxActionListItemClick=e(this,"ifxActionListItemClick",7)}get host(){return this}itemTitle;description;value;href;target="_self";disabled=!1;itemAriaLabel;ifxActionListItemClick;onDisabledChange(){this.updateSlotElementsDisabledState()}handleMainClick=t=>{if(this.disabled)return t.preventDefault(),void t.stopPropagation();const i=this.host.shadowRoot?.querySelector(".action-list-item__leading"),e=this.host.shadowRoot?.querySelector(".action-list-item__trailing");i?.contains(t.target)||e?.contains(t.target)||this.ifxActionListItemClick.emit({value:this.value,href:this.href,target:this.target,component:this})};handleLeadingClick=t=>{if(this.disabled)return t.preventDefault(),void t.stopPropagation();let i=t.target;for(;i&&i!==this.host;){if(this.isInteractiveElement(i))return void t.stopPropagation();i=i.parentElement}t.stopPropagation(),this.ifxActionListItemClick.emit({value:this.value,href:this.href,target:this.target,component:this})};handleTrailingClick=t=>{if(this.disabled)return t.preventDefault(),void t.stopPropagation();let i=t.target;for(;i&&i!==this.host;){if(this.isInteractiveElement(i))return void t.stopPropagation();i=i.parentElement}t.stopPropagation(),this.ifxActionListItemClick.emit({value:this.value,href:this.href,target:this.target,component:this})};isInteractiveElement=t=>{const i=t.tagName.toUpperCase();return["IFX-BUTTON","IFX-CHECKBOX","IFX-SWITCH"].includes(i)};handleMainKeyDown=t=>{this.disabled||"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleMainClick(t))};handleLeadingKeyDown=t=>{if(!this.disabled&&("Enter"===t.key||" "===t.key)){t.preventDefault();const i=this.host.shadowRoot?.querySelector('slot[name="leading"]'),e=(i?.assignedElements()||[]).find((t=>this.isInteractiveElement(t)));e&&(e.focus(),e.click())}};handleTrailingKeyDown=t=>{if(!this.disabled&&("Enter"===t.key||" "===t.key)){t.preventDefault();const i=this.host.shadowRoot?.querySelector('slot[name="trailing"]'),e=(i?.assignedElements()||[]).find((t=>this.isInteractiveElement(t)));e&&(e.focus(),e.click())}};hasSlotContent(t){return!!this.host.querySelector(`[slot="${t}"]`)}componentDidLoad(){this.updateSlotElementsDisabledState()}componentDidUpdate(){this.updateSlotElementsDisabledState()}updateSlotElementsDisabledState=()=>{const t=["ifx-checkbox","ifx-switch","ifx-button"];this.host.querySelectorAll("[slot]").forEach((i=>{t.includes(i.tagName.toLowerCase())&&this.setElementDisabledState(i),t.forEach((t=>{i.querySelectorAll(t).forEach((t=>{this.setElementDisabledState(t)}))}))}))};setElementDisabledState=t=>{this.disabled?t.setAttribute("disabled","true"):t.removeAttribute("disabled")};renderContent(){return[s("div",{class:"action-list-item__title"},this.itemTitle),this.description&&s("div",{class:"action-list-item__description"},this.description)]}render(){const t=!this.disabled&&(this.href||this.value),i=this.itemAriaLabel||`${this.itemTitle}${this.description?" - "+this.description:""}`,e=this.hasSlotContent("leading"),n=this.hasSlotContent("trailing");return s("div",{key:"1d08708e360da65447a9b9b596483464ed604cf8",class:a("action-list-item",this.disabled&&"action-list-item--disabled",t&&"action-list-item--clickable"),role:"listitem",tabIndex:t?0:-1,"aria-label":i,"aria-disabled":this.disabled?"true":void 0,onClick:this.handleMainClick,onKeyDown:this.handleMainKeyDown},e&&s("div",{key:"cbf9bf0d29dbfe974a5d3a53ac54882f9d3b1e8d",class:"action-list-item__leading",onClick:this.handleLeadingClick,onKeyDown:this.handleLeadingKeyDown},s("slot",{key:"2059fd7e9be89347b12e48e77be04b23404a1963",name:"leading"})),this.href&&!this.disabled?s("a",{class:"action-list-item__content",href:l(this.href),target:this.target,rel:"_blank"===this.target?"noopener noreferrer":void 0},this.renderContent()):s("div",{class:"action-list-item__content"},this.renderContent()),n&&s("div",{key:"898371ef47adf85fcd8684d88da9396aab3a2d12",class:"action-list-item__trailing",onClick:this.handleTrailingClick,onKeyDown:this.handleTrailingKeyDown},s("slot",{key:"b8b72093c9ececfe2ffda8746a485c236a0c7ae7",name:"trailing"})))}static get watchers(){return{disabled:[{onDisabledChange:0}]}}static get style(){return".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}"}},[769,"ifx-action-list-item",{itemTitle:[1,"item-title"],description:[1],value:[1],href:[1],target:[1],disabled:[4],itemAriaLabel:[1,"item-aria-label"]},void 0,{disabled:[{onDisabledChange:0}]}]),c=o,r=function(){"undefined"!=typeof customElements&&["ifx-action-list-item"].forEach((t=>{"ifx-action-list-item"===t&&(customElements.get(n(t))||customElements.define(n(t),o))}))};export{c as IfxActionListItem,r as defineCustomElement}

package/dist/components/ifx-action-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IfxActionList extends Components.IfxActionList, HTMLElement {}
+export const IfxActionList: {
+    prototype: IfxActionList;
+    new (): IfxActionList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1 @@
+import{p as t,H as e,h as i,t as s}from"./p-BT_2CyMS.js";import{i as a,d as o,t as l}from"./p-94ZtGp9D.js";const r=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}get el(){return this}listAriaLabel;async componentDidLoad(){if(!a(this.el)){const t=o();l("ifx-action-list",await t)}}render(){return i("div",{key:"0d0878d48142a25d5523abff389e8346ef764888",class:"action-list",role:"list","aria-label":this.listAriaLabel},i("slot",{key:"58fb9e46d6a9a5fd0a9ac199563e990447e074e3"}))}static get style(){return".action-list{background:#ffffff;border-radius:0;border:1px solid #eeeded;overflow:hidden;display:flex;flex-direction:column}"}},[769,"ifx-action-list",{listAriaLabel:[1,"list-aria-label"]}]),n=r,d=function(){"undefined"!=typeof customElements&&["ifx-action-list"].forEach((t=>{"ifx-action-list"===t&&(customElements.get(s(t))||customElements.define(s(t),r))}))};export{n as IfxActionList,d as defineCustomElement}

package/dist/components/ifx-ai-label.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IfxAiLabel extends Components.IfxAiLabel, HTMLElement {}
+export const IfxAiLabel: {
+    prototype: IfxAiLabel;
+    new (): IfxAiLabel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;