@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/toast/toast-container/toast-container.js

@@ -0,0 +1,280 @@
+import { Host, h, } from "@stencil/core";
+import { isNestedInIfxComponent } from "../../../shared/utils/dom-utils";
+import { detectFramework } from "../../../shared/utils/framework-detection";
+import { trackComponent } from "../../../shared/utils/tracking";
+import { applyToastConfig } from "../toast-config";
+export class ToastContainer {
+    el;
+    /** Placement of the container on desktop. Collapses to top/bottom on mobile. */
+    placement = "bottom-right";
+    /** Distance in px from the viewport edge. Added on top of the navbar clearance for top placements. */
+    offset = 16;
+    /** CSS selector of the navbar/header to keep clear of on top placements. Empty disables measuring. */
+    navbarSelector = "ifx-navbar";
+    /** Maximum number of simultaneously visible toasts. `0` means unlimited. */
+    max = 0;
+    navbarClearance = 0;
+    resizeRaf;
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-toast-container", await framework);
+        }
+        this.updateNavbarClearance();
+        if (typeof window !== "undefined") {
+            window.addEventListener("resize", this.handleResize);
+        }
+    }
+    disconnectedCallback() {
+        if (typeof window !== "undefined") {
+            window.removeEventListener("resize", this.handleResize);
+            if (this.resizeRaf) {
+                cancelAnimationFrame(this.resizeRaf);
+            }
+        }
+    }
+    /**
+     * Creates an `ifx-toast`, appends it to the container, and removes it once dismissed.
+     * Returns the created element so callers can update or dismiss it.
+     */
+    async addToast(config = {}) {
+        this.updateNavbarClearance();
+        const toast = document.createElement("ifx-toast");
+        applyToastConfig(toast, config);
+        toast.addEventListener("ifxToastClose", () => toast.remove(), { once: true });
+        this.el.appendChild(toast);
+        this.enforceMax();
+        return toast;
+    }
+    /** Dismisses every toast currently in the container. */
+    async dismissAll() {
+        await Promise.all(this.getToasts().map((toast) => toast.dismiss?.()));
+    }
+    /**
+     * Dismisses the oldest toasts until at most `max` remain (`max <= 0` disables the
+     * limit). Public so the `ifxToast` controller can enforce the cap after appending a
+     * toast directly, not only via `addToast`.
+     */
+    async enforceMax() {
+        if (this.max <= 0) {
+            return;
+        }
+        const toasts = this.getToasts();
+        const excess = toasts.length - this.max;
+        // Oldest toasts come first in DOM order; dismiss them until within the limit.
+        for (let i = 0; i < excess; i++) {
+            toasts[i].dismiss?.();
+        }
+    }
+    getToasts() {
+        return Array.from(this.el.querySelectorAll("ifx-toast"));
+    }
+    measureNavbar() {
+        if (typeof document === "undefined") {
+            return 0;
+        }
+        const selector = this.navbarSelector?.trim();
+        if (!selector) {
+            return 0;
+        }
+        const navbar = document.querySelector(selector);
+        if (!navbar) {
+            return 0;
+        }
+        return Math.max(0, navbar.getBoundingClientRect().bottom);
+    }
+    updateNavbarClearance = () => {
+        this.navbarClearance = this.measureNavbar();
+    };
+    handleResize = () => {
+        if (typeof window === "undefined") {
+            return;
+        }
+        if (this.resizeRaf) {
+            cancelAnimationFrame(this.resizeRaf);
+        }
+        this.resizeRaf = requestAnimationFrame(this.updateNavbarClearance);
+    };
+    render() {
+        return (h(Host, { key: '4e373126ba9cbbf9ea572ce265a313a27aca50ff', style: {
+                "--ifx-toast-offset": `${this.offset}px`,
+                "--ifx-toast-navbar": `${this.navbarClearance}px`,
+            } }, h("section", { key: '71de9e47286848cd2f97f95364b0f7d6059f95db', class: `ifx-toast-container ifx-toast-container--${this.placement}`, "aria-label": "Notifications" }, h("slot", { key: '481b080e786201eadb5a6e6d41ad8bcb145b9640' }))));
+    }
+    static get is() { return "ifx-toast-container"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["toast-container.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["toast-container.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToastPlacement",
+                    "resolved": "\"bottom-center\" | \"bottom-left\" | \"bottom-right\" | \"top-center\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "ToastPlacement": {
+                            "location": "local",
+                            "path": "/home/fp/Dev/IFX/infineon-design-system-stencil/packages/components/src/components/toast/toast-container/toast-container.tsx",
+                            "id": "src/components/toast/toast-container/toast-container.tsx::ToastPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placement of the container on desktop. Collapses to top/bottom on mobile."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placement",
+                "defaultValue": "\"bottom-right\""
+            },
+            "offset": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Distance in px from the viewport edge. Added on top of the navbar clearance for top placements."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "offset",
+                "defaultValue": "16"
+            },
+            "navbarSelector": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS selector of the navbar/header to keep clear of on top placements. Empty disables measuring."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "navbar-selector",
+                "defaultValue": "\"ifx-navbar\""
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of simultaneously visible toasts. `0` means unlimited."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "navbarClearance": {}
+        };
+    }
+    static get methods() {
+        return {
+            "addToast": {
+                "complexType": {
+                    "signature": "(config?: ToastConfig) => Promise<HTMLIfxToastElement>",
+                    "parameters": [{
+                            "name": "config",
+                            "type": "ToastConfig",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLIfxToastElement": {
+                            "location": "global",
+                            "id": "global::HTMLIfxToastElement"
+                        },
+                        "ToastConfig": {
+                            "location": "local",
+                            "path": "/home/fp/Dev/IFX/infineon-design-system-stencil/packages/components/src/components/toast/toast-container/toast-container.tsx",
+                            "id": "src/components/toast/toast-container/toast-container.tsx::ToastConfig"
+                        }
+                    },
+                    "return": "Promise<HTMLIfxToastElement>"
+                },
+                "docs": {
+                    "text": "Creates an `ifx-toast`, appends it to the container, and removes it once dismissed.\nReturns the created element so callers can update or dismiss it.",
+                    "tags": []
+                }
+            },
+            "dismissAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Dismisses every toast currently in the container.",
+                    "tags": []
+                }
+            },
+            "enforceMax": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Dismisses the oldest toasts until at most `max` remain (`max <= 0` disables the\nlimit). Public so the `ifxToast` controller can enforce the cap after appending a\ntoast directly, not only via `addToast`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/toast/toast-controller.js

@@ -0,0 +1,116 @@
+import { applyToastConfig } from "./toast-config";
+const DEFAULT_PLACEMENT = "bottom-right";
+/** One singleton container per placement, mounted lazily to `document.body`. */
+const containers = new Map();
+const NOOP_HANDLE = {
+    el: null,
+    update() { },
+    dismiss() { },
+};
+function isBrowser() {
+    return (typeof document !== "undefined" &&
+        typeof document.createElement === "function");
+}
+function getContainer(placement) {
+    const existing = containers.get(placement);
+    if (existing && document.body.contains(existing)) {
+        return existing;
+    }
+    const container = document.createElement("ifx-toast-container");
+    container.placement = placement;
+    document.body.appendChild(container);
+    containers.set(placement, container);
+    return container;
+}
+/**
+ * Enforces the container's `max` once it is upgraded. The controller appends toasts
+ * directly (not via `addToast`), so it must trigger the cap itself; awaiting
+ * `componentOnReady` covers the freshly-created, not-yet-hydrated container.
+ */
+function enforceContainerMax(container) {
+    const run = () => container.enforceMax?.();
+    const ready = container.componentOnReady?.();
+    if (ready && typeof ready.then === "function") {
+        ready.then(run);
+    }
+    else {
+        run();
+    }
+}
+function dismissToast(el) {
+    if (typeof el.dismiss === "function") {
+        el.dismiss();
+    }
+    else {
+        // Not upgraded yet (e.g. SSR fallback): just remove it.
+        el.remove();
+    }
+}
+function createHandle(el) {
+    return {
+        el,
+        update(options) {
+            applyToastConfig(el, options);
+        },
+        dismiss() {
+            dismissToast(el);
+        },
+    };
+}
+function show(options = {}) {
+    if (!isBrowser()) {
+        // SSR / non-DOM environment: no-op so imperative calls never throw.
+        return NOOP_HANDLE;
+    }
+    const { placement = DEFAULT_PLACEMENT, max, ...config } = options;
+    const container = getContainer(placement);
+    if (max !== undefined) {
+        container.max = max;
+    }
+    const toast = document.createElement("ifx-toast");
+    applyToastConfig(toast, config);
+    // Remove the toast from the DOM once it finishes dismissing.
+    toast.addEventListener("ifxToastClose", () => toast.remove(), { once: true });
+    container.appendChild(toast);
+    // Cap the stack after the newest toast is in the DOM (controller bypasses addToast).
+    enforceContainerMax(container);
+    return createHandle(toast);
+}
+function showWithStatus(status, message, options) {
+    return show({ ...options, status, message });
+}
+function dismissAll(placement) {
+    if (!isBrowser()) {
+        return;
+    }
+    const targets = placement
+        ? [containers.get(placement)]
+        : Array.from(containers.values());
+    for (const container of targets) {
+        if (!container) {
+            continue;
+        }
+        const toasts = Array.from(container.querySelectorAll("ifx-toast"));
+        for (const toast of toasts) {
+            dismissToast(toast);
+        }
+    }
+}
+/**
+ * Imperative helper for showing toasts from anywhere — the recommended way for
+ * event/status-driven notifications. Lazily mounts a singleton `ifx-toast-container`
+ * per placement to `document.body` and returns a handle to update or dismiss the toast.
+ *
+ * @example
+ * const t = ifxToast.loading("Saving…");
+ * await save();
+ * t.update({ status: "success", message: "Saved" });
+ */
+export const ifxToast = {
+    show,
+    success: (message, options) => showWithStatus("success", message, options),
+    warning: (message, options) => showWithStatus("warning", message, options),
+    danger: (message, options) => showWithStatus("danger", message, options),
+    loading: (message, options) => showWithStatus("loading", message, options),
+    dismissAll,
+};

package/dist/collection/components/toast/toast.css

@@ -0,0 +1,68 @@
+:host {
+  display: inline-block;
+}
+
+.ifx-toast {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
+  width: 320px;
+  min-height: 48px;
+  padding: 13px 16px;
+  background-color: #ffffff;
+  color: #1d1d1d;
+  font-family: var(--ifx-font-family);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  border: 1px solid #eeeded;
+  border-radius: 1px;
+  box-shadow: 0 1px 1px 0 rgba(29, 29, 29, 0.12), 0 0 1px 0 rgba(29, 29, 29, 0.12);
+}
+.ifx-toast .ifx-toast__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 1.25rem;
+}
+.ifx-toast .ifx-toast__icon ifx-spinner {
+  transform: scale(0.667);
+}
+.ifx-toast.ifx-toast--success .ifx-toast__icon {
+  color: #4ca460;
+}
+.ifx-toast.ifx-toast--warning .ifx-toast__icon {
+  color: #e16b25;
+}
+.ifx-toast.ifx-toast--danger .ifx-toast__icon {
+  color: #cd002f;
+}
+.ifx-toast.ifx-toast--loading .ifx-toast__icon {
+  color: #0a8276;
+}
+.ifx-toast .ifx-toast__body {
+  flex-grow: 1;
+  word-break: break-word;
+}
+.ifx-toast .ifx-toast__action {
+  flex-shrink: 0;
+}
+.ifx-toast .ifx-toast__action button {
+  all: unset;
+  cursor: pointer;
+  color: #0a8276;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+.ifx-toast .ifx-toast__action button:focus-visible {
+  outline: 2px solid #0a8276;
+  outline-offset: 2px;
+}
+@media (max-width: 375px) {
+  .ifx-toast {
+    width: 100%;
+  }
+}