@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/dropdown/dropdown.css

@@ -0,0 +1,3 @@
+:host {
+  display: inline-block;
+}

package/dist/collection/components/dropdown/dropdown.js

@@ -0,0 +1,519 @@
+import { createPopper } from "@popperjs/core";
+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 Dropdown {
+    /** Where the dropdown menu is positioned relative to the trigger. */
+    placement = "bottom-start";
+    /** Wether the dropdown should be open initially. */
+    defaultOpen = false;
+    internalIsOpen = false;
+    /** If true, the menu is not appended to <body> (stays in place). */
+    noAppendToBody = false;
+    /** Fired when dropdown open. */
+    ifxOpen;
+    /** Fired when dropdown closed. */
+    ifxClose;
+    /** General dropdown event. */
+    ifxDropdown;
+    /** If true, dropdown is disabled and cannot be opened. */
+    disabled = false;
+    /** If true, clicking outside will not close the dropdown. */
+    noCloseOnOutsideClick = false;
+    /** Id true, clicking inside the menu will not close the dropdown. */
+    noCloseOnMenuClick = false;
+    el;
+    trigger;
+    menu;
+    // Popper instance for positioning
+    popperInstance = null;
+    handleOutsideClick(event) {
+        const target = event.target;
+        if (!this.noCloseOnOutsideClick &&
+            !this.el.contains(target) &&
+            !this.menu?.contains(target)) {
+            this.closeDropdown();
+        }
+    }
+    handleFocusOutside(event) {
+        const target = event.target;
+        if (this.internalIsOpen &&
+            !this.el.contains(target) &&
+            !this.menu?.contains(target)) {
+            this.closeDropdown();
+        }
+    }
+    handleTriggerClick = () => {
+        if (!this.internalIsOpen)
+            this.openDropdown();
+        else
+            this.closeDropdown();
+    };
+    handleTriggerKeyDown = (e) => {
+        const key = e.key;
+        if (key === "Tab" && this.internalIsOpen && !e.shiftKey) {
+            e.preventDefault();
+            this.focusFirstItem();
+        }
+    };
+    handleMenuClick = () => {
+        if (!this.noCloseOnMenuClick)
+            this.closeDropdown();
+    };
+    getItemFocusables() {
+        if (!this.menu)
+            return [];
+        const hosts = Array.from(this.menu.querySelectorAll("ifx-dropdown-item"));
+        return hosts
+            .filter((h) => {
+            const isHidden = h.hide;
+            const isDisabled = h.disabled;
+            return !isHidden && !isDisabled;
+        })
+            .map((h) => h.shadowRoot?.querySelector("a, button"))
+            .filter((el) => !!el);
+    }
+    handleMenuKeyDown = (e) => {
+        const items = this.getItemFocusables();
+        if (!items.length)
+            return;
+        const i = items.indexOf(document.activeElement);
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                items[(i + 1) % items.length].focus();
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                items[(i - 1 + items.length) % items.length].focus();
+                break;
+            case "Home":
+                e.preventDefault();
+                items[0].focus();
+                break;
+            case "End":
+                e.preventDefault();
+                items[items.length - 1].focus();
+                break;
+            case "Enter":
+            case " ":
+            case "Spacebar":
+                e.preventDefault();
+                document.activeElement?.click();
+                break;
+            case "Escape":
+                e.preventDefault();
+                this.closeDropdown();
+                this.trigger?.focus();
+                break;
+            case "Tab":
+                if (e.shiftKey && i === 0) {
+                    e.preventDefault();
+                    this.closeDropdown();
+                    this.trigger?.focus();
+                }
+                break;
+        }
+    };
+    componentWillLoad() {
+        //maybe not needed
+        this.updateSlotContent();
+        this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-dropdown", await framework);
+        }
+    }
+    watchHandlerIsOpen(newValue, oldValue) {
+        if (newValue !== oldValue && newValue !== this.internalIsOpen) {
+            if (newValue) {
+                this.openDropdown();
+            }
+            else {
+                this.closeDropdown();
+            }
+        }
+    }
+    watchHandlerDisabled(newValue) {
+        if (this.trigger) {
+            this.trigger.disabled = newValue;
+        }
+    }
+    watchHandlerSlot() {
+        this.updateSlotContent();
+    }
+    focusFirstItem() {
+        const [first] = this.getItemFocusables();
+        first?.focus();
+    }
+    updateSlotContent() {
+        const newTrigger = this.el.querySelector("ifx-dropdown-trigger-button, ifx-dropdown-trigger");
+        if (newTrigger !== this.trigger) {
+            if (this.trigger) {
+                this.trigger.removeEventListener("click", this.handleTriggerClick);
+                this.trigger.removeEventListener("keydown", this.handleTriggerKeyDown);
+            }
+            this.trigger = newTrigger ?? undefined;
+            if (this.trigger) {
+                this.trigger.disabled = this.disabled;
+                this.trigger.addEventListener("click", this.handleTriggerClick);
+                this.trigger.addEventListener("keydown", this.handleTriggerKeyDown);
+            }
+        }
+        const newMenu = this.el.querySelector("ifx-dropdown-menu");
+        if (!this.noAppendToBody) {
+            if (this.menu && this.menu !== newMenu) {
+                this.menu.removeEventListener("click", this.handleMenuClick);
+                this.menu.removeEventListener("keydown", this.handleMenuKeyDown);
+                this.menu.remove();
+            }
+            this.menu = newMenu ?? undefined;
+            if (this.menu && !document.body.contains(this.menu)) {
+                document.body.append(this.menu);
+            }
+        }
+        else {
+            this.menu = newMenu ?? undefined;
+        }
+        if (this.menu) {
+            this.menu.removeEventListener("click", this.handleMenuClick);
+            this.menu.removeEventListener("keydown", this.handleMenuKeyDown);
+            this.menu.addEventListener("click", this.handleMenuClick);
+            this.menu.addEventListener("keydown", this.handleMenuKeyDown);
+        }
+    }
+    disconnectedCallback() {
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+            this.popperInstance = null;
+        }
+        if (this.menu) {
+            this.menu.remove();
+        }
+    }
+    /** Returns wether the dropdown is currently open. */
+    async isOpen() {
+        return this.internalIsOpen;
+    }
+    /** Closes the dropdown and cleans up the popper instance. */
+    async closeDropdown() {
+        if (this.internalIsOpen) {
+            this.internalIsOpen = false;
+            if (this.trigger) {
+                this.trigger.isOpen = false;
+            }
+            if (this.menu) {
+                this.menu.isOpen = false;
+            }
+            this.ifxClose.emit();
+        }
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+            this.popperInstance = null;
+        }
+    }
+    /** Opens the dropdown and sets up the popper positioning. */
+    async openDropdown() {
+        if (!this.internalIsOpen && !this.disabled && this.menu) {
+            this.internalIsOpen = true;
+            if (this.trigger) {
+                this.trigger.isOpen = true;
+            }
+            this.menu.isOpen = true;
+            this.popperInstance = createPopper(this.el, this.menu, {
+                placement: this.placement,
+                strategy: this.noAppendToBody ? "absolute" : "fixed",
+            });
+            this.ifxOpen.emit();
+        }
+    }
+    render() {
+        return (h("div", { key: '09efa43b5f6298281004fec76d53652e14ec9770', class: "dropdown" }, h("slot", { key: '7abf17d34d55141662979edc0ddba5c78040ace8' })));
+    }
+    static get is() { return "ifx-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "local",
+                            "path": "/home/fp/Dev/IFX/infineon-design-system-stencil/packages/components/src/components/dropdown/dropdown.tsx",
+                            "id": "src/components/dropdown/dropdown.tsx::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Where the dropdown menu is positioned relative to the trigger."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "\"bottom-start\""
+            },
+            "defaultOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether the dropdown should be open initially."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-open",
+                "defaultValue": "false"
+            },
+            "noAppendToBody": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the menu is not appended to <body> (stays in place)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-append-to-body",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, dropdown is disabled and cannot be opened."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "noCloseOnOutsideClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, clicking outside will not close the dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-close-on-outside-click",
+                "defaultValue": "false"
+            },
+            "noCloseOnMenuClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Id true, clicking inside the menu will not close the dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-close-on-menu-click",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalIsOpen": {},
+            "trigger": {},
+            "menu": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxOpen",
+                "name": "ifxOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when dropdown open."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "ifxClose",
+                "name": "ifxClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when dropdown closed."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "ifxDropdown",
+                "name": "ifxDropdown",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "General dropdown event."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "isOpen": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns wether the dropdown is currently open.",
+                    "tags": []
+                }
+            },
+            "closeDropdown": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the dropdown and cleans up the popper instance.",
+                    "tags": []
+                }
+            },
+            "openDropdown": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the dropdown and sets up the popper positioning.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "defaultOpen",
+                "methodName": "watchHandlerIsOpen"
+            }, {
+                "propName": "disabled",
+                "methodName": "watchHandlerDisabled"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "mousedown",
+                "method": "handleOutsideClick",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "focusin",
+                "method": "handleFocusOutside",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "slotchange",
+                "method": "watchHandlerSlot",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/error-page/error-page.css

@@ -0,0 +1,118 @@
+/* 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;
+}
+
+.error-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 145px;
+  width: 100%;
+  height: 100%;
+}
+.error-page,
+.error-page * {
+  box-sizing: border-box;
+}
+@media (max-width: 768px) {
+  .error-page {
+    flex-direction: column;
+    gap: unset;
+  }
+}
+.error-page__image {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  max-width: 422px;
+}
+@media (max-width: 768px) {
+  .error-page__image {
+    width: 100%;
+    min-width: 263px;
+    margin-bottom: 1.5rem;
+    padding: 2rem 3.5rem 0 3.5rem;
+  }
+}
+.error-page__image img {
+  width: 100%;
+}
+.error-page__description {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  max-width: 644px;
+  overflow-wrap: anywhere;
+}
+@media (max-width: 768px) {
+  .error-page__description {
+    width: 100%;
+    max-width: 100%;
+    padding: 1rem;
+  }
+}
+.error-page__type {
+  font: 600 1rem/1.5rem "Source Sans 3";
+  margin-bottom: 2rem;
+  letter-spacing: 3.2px;
+  text-transform: uppercase;
+}
+@media (max-width: 768px) {
+  .error-page__type {
+    margin-bottom: 1.5rem;
+  }
+}
+.error-page__headline {
+  font: 600 3rem/3.75rem "Source Sans 3";
+  margin: 0 0 1rem 0;
+}
+@media (max-width: 768px) {
+  .error-page__headline {
+    margin-bottom: 0.5rem;
+  }
+}
+.error-page__body {
+  font: 400 1.375rem/1.875rem "Source Sans 3";
+  margin: 0 0 2rem 0;
+}
+@media (max-width: 768px) {
+  .error-page__body {
+    margin-bottom: 1.5rem;
+  }
+}
+.error-page__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  max-width: 100%;
+}
+@media (max-width: 768px) {
+  .error-page__actions ::slotted(*) {
+    flex: 1 1 calc(50% - 0.5rem);
+  }
+}