@infineon/design-system 0.0.0-stage → 41.11.0

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

@@ -0,0 +1,132 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+
+const textareaCss = () => `:host{display:flex;flex-direction:column;width:100%}.wrapper__label{color:#1d1d1d;font:400 1rem/1.5rem "Source Sans 3";font-family:var(--ifx-font-family)}.wrapper__label .required{margin-left:4px}.wrapper__label .required.error{color:#CD002F}:host(.wrapper--disabled) .wrapper__label{color:#bfbbbb}.wrapper__textarea{width:100%}.wrapper__textarea.fullWidth{width:100%}.wrapper__textarea.fullWidth textarea{width:100%;box-sizing:border-box}.wrapper__textarea textarea{border:1px solid #8d8786;border-radius:1px;padding:8px 16px;background-color:#ffffff;color:#1d1d1d;font:400 1rem/1.5rem "Source Sans 3";font-family:var(--ifx-font-family);transition:all 100ms ease;transition-property:border-color}.wrapper__textarea textarea:hover{border:1px solid #575352}.wrapper__textarea textarea:focus-within{outline:none;border:1px solid #0a8276}:host(.wrapper--error) .wrapper__textarea textarea{border:1px solid #cd002f}:host(.wrapper--success) .wrapper__textarea textarea{border:1px solid #4ca460}:host(.wrapper--success) .wrapper__textarea textarea:focus-within{outline:none}:host(.wrapper--disabled) .wrapper__textarea textarea{border:1px solid #bfbbbb;background-color:#bfbbbb;color:#ffffff}:host(.wrapper--disabled) .wrapper__textarea textarea::placeholder{color:#ffffff}.wrapper__caption{color:#1d1d1d;font:400 0.75rem/1rem "Source Sans 3";font-family:var(--ifx-font-family)}:host(.wrapper--error) .wrapper__caption{color:#cd002f}:host(.wrapper--disabled) .wrapper__caption{color:#bfbbbb}:host(.wrapper--readonly) .wrapper__textarea textarea{border:none;border-bottom:1px solid var(--color-engineering-300, #BFBBBB);padding-left:0}:host(.wrapper--readonly) .wrapper__textarea textarea::placeholder{color:#1d1d1d}:host(.wrapper--readonly) .wrapper__textarea textarea:focus-within{outline:none}`;
+
+const TextArea = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ifxInput = index.createEvent(this, "ifxInput", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    inputId = `ifx-textarea-${++textareaId}`;
+    textareaElement;
+    initialValue = "";
+    internals;
+    /** Fired when the textarea value changes. */
+    ifxInput;
+    get el() { return index.getElement(this); }
+    /** Helper text shown below the textarea. */
+    caption;
+    /** Number of visible text columns. */
+    cols;
+    /** If true, the textarea is disabled and not interactive. */
+    disabled = false;
+    /** If true, shows the textarea in an error state. */
+    error = false;
+    /** Label text shown above the textarea. */
+    label;
+    /** Maximum number of characters allowed. */
+    maxlength;
+    /** Name attribute used when submitting the textarea in a form. */
+    name;
+    /** Placeholder text shown when the textarea is empty. */
+    placeholder;
+    /** Whether a value is required (used for validation). */
+    required = false;
+    /** If true, the textarea is read-only but focusable. */
+    readOnly = false;
+    /** How the textarea can be resized by the user. */
+    resize = "both";
+    /** Number of visible text rows. */
+    rows;
+    /** Current value of the textarea (can be updated programmatically). */
+    value = "";
+    /** How text wrapping is handled in the textarea. */
+    wrap = "soft";
+    /** If 'true', the textarea stretches to fill the available width. */
+    fullWidth = "false";
+    /** If true, shows the textarea in a success/valid state. */
+    success = false;
+    valueWatcher(newValue) {
+        const normalizedValue = newValue ?? "";
+        if (this.textareaElement && normalizedValue !== this.textareaElement.value) {
+            this.textareaElement.value = normalizedValue;
+        }
+        this.syncFormValue(normalizedValue);
+    }
+    syncFormValue(value = this.value ?? "") {
+        this.internals.setFormValue(value);
+    }
+    /** Resets the textarea value to its initial state. */
+    async reset() {
+        this.resetTextarea();
+    }
+    handleComponentWidth() {
+        const textareaWrapper = this.el.shadowRoot.querySelector(".wrapper__textarea");
+        const isFullWidth = this.fullWidth.toLowerCase() === "true";
+        if (isFullWidth) {
+            textareaWrapper.classList.add("fullWidth");
+        }
+        else if (textareaWrapper.classList.contains("fullWidth")) {
+            textareaWrapper.classList.remove("fullWidth");
+        }
+    }
+    componentDidRender() {
+        this.handleComponentWidth();
+    }
+    componentWillLoad() {
+        this.initialValue = this.value ?? "";
+        this.syncFormValue(this.initialValue);
+    }
+    formResetCallback() {
+        this.resetTextarea(this.initialValue);
+    }
+    handleOnInput(e) {
+        this.value = e.target.value;
+        this.ifxInput.emit(this.value);
+    }
+    resetTextarea(value = "") {
+        this.value = value;
+        if (this.textareaElement) {
+            this.textareaElement.value = value;
+        }
+        this.syncFormValue(value);
+    }
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent("ifx-textarea", await framework);
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: 'b6c7cad1eba99d3624fcdac0c891247cafe618d8', class: this.readOnly
+                ? "wrapper--readonly"
+                : this.error
+                    ? "wrapper--error"
+                    : this.disabled
+                        ? "wrapper--disabled"
+                        : this.success
+                            ? "wrapper--success"
+                            : "" }, index.h("label", { key: '56a478f753e9837e075a7aabd0a4dda993dbd68e', class: "wrapper__label", htmlFor: this.inputId }, this.label?.trim(), this.required && (index.h("span", { key: '2661b0ec20c1fcf2927b84a833da94cf34b0201f', class: `required ${this.error && !this.readOnly ? "error" : ""}` }, "*"))), index.h("div", { key: 'b908e079d6dda1ce0c59c7a68e933d915769115e', class: "wrapper__textarea" }, index.h("textarea", { key: '92cf1a6195b38a801bb1c1f4118d3bb282480948', ref: (el) => (this.textareaElement = el), "aria-label": "a textarea", "aria-value": this.value, "aria-disabled": this.disabled && !this.error && !this.readOnly, id: this.inputId, style: { resize: this.resize }, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled && !this.error && !this.readOnly, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), this.caption?.trim() && (index.h("div", { key: 'dec155275bcd3f15d0791099328074458d4abbbc', class: "wrapper__caption" }, this.caption.trim()))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "valueWatcher": 0
+            }]
+    }; }
+};
+let textareaId = 0;
+TextArea.style = textareaCss();
+
+exports.ifx_textarea = TextArea;

package/dist/cjs/ifx-toast-container.cjs.entry.js

@@ -0,0 +1,114 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+var toastConfig = require('./toast-config-D0RjnbKw.js');
+
+const toastContainerCss = () => `:host{--_nav:var(--ifx-toast-navbar, 0px);--_edge:var(--ifx-toast-offset, 16px)}.ifx-toast-container{position:fixed;z-index:1040;display:flex;pointer-events:none}.ifx-toast-container ::slotted(ifx-toast){pointer-events:auto}.ifx-toast-container ::slotted(ifx-toast:not(:first-child)){margin-top:4px}.ifx-toast-container--top-left,.ifx-toast-container--top-center,.ifx-toast-container--top-right{top:calc(var(--_nav) + var(--_edge));flex-direction:column}.ifx-toast-container--bottom-left,.ifx-toast-container--bottom-center,.ifx-toast-container--bottom-right{bottom:var(--_edge);flex-direction:column}.ifx-toast-container--top-left,.ifx-toast-container--bottom-left{left:var(--_edge);align-items:flex-start}.ifx-toast-container--top-right,.ifx-toast-container--bottom-right{right:var(--_edge);align-items:flex-end}.ifx-toast-container--top-center,.ifx-toast-container--bottom-center{left:50%;transform:translateX(-50%);align-items:center}@media (max-width: 375px){.ifx-toast-container{left:32px;right:32px;transform:none;align-items:stretch}.ifx-toast-container ::slotted(ifx-toast){width:100%}.ifx-toast-container--top-left,.ifx-toast-container--top-center,.ifx-toast-container--top-right{top:calc(var(--_nav) + var(--_edge));bottom:auto}.ifx-toast-container--bottom-left,.ifx-toast-container--bottom-center,.ifx-toast-container--bottom-right{bottom:var(--_edge);top:auto}}`;
+
+const ToastContainer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** 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 (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.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");
+        toastConfig.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 (index.h(index.Host, { key: '4e373126ba9cbbf9ea572ce265a313a27aca50ff', style: {
+                "--ifx-toast-offset": `${this.offset}px`,
+                "--ifx-toast-navbar": `${this.navbarClearance}px`,
+            } }, index.h("section", { key: '71de9e47286848cd2f97f95364b0f7d6059f95db', class: `ifx-toast-container ifx-toast-container--${this.placement}`, "aria-label": "Notifications" }, index.h("slot", { key: '481b080e786201eadb5a6e6d41ad8bcb145b9640' }))));
+    }
+};
+ToastContainer.style = toastContainerCss();
+
+exports.ifx_toast_container = ToastContainer;

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

@@ -0,0 +1,193 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var animation = require('./animation-DvEMST7j.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+
+const toastCss = () => `: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%}}`;
+
+/** Vertical gap between stacked toasts; must match `margin-top` in toast-container.scss ($ifxSpace50). */
+const STACK_GAP_PX = 4;
+/** Inner content fade + slight upward slide, paired with the host height animation. */
+const FADE_IN = [
+    {
+        opacity: 0,
+        transform: "translateY(8px)",
+        easing: "cubic-bezier(0.16, 1, 0.3, 1)",
+    },
+    { opacity: 1, transform: "translateY(0)" },
+];
+const FADE_OUT = [
+    { opacity: 1, transform: "translateY(0)" },
+    { opacity: 0, transform: "translateY(8px)" },
+];
+/** Maps the non-loading status values to their filled status icon. */
+const STATUS_ICONS = {
+    success: "c-check-f-16",
+    warning: "c-warning-f-16",
+    danger: "c-remove-f-16",
+};
+const Toast = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ifxToastOpen = index.createEvent(this, "ifxToastOpen", 7);
+        this.ifxToastClose = index.createEvent(this, "ifxToastClose", 7);
+        this.ifxToastAction = index.createEvent(this, "ifxToastAction", 7);
+    }
+    get el() { return index.getElement(this); }
+    /** Stable id emitted with every toast event. Auto-generated when not set. */
+    toastId;
+    /** Status variant controlling the status icon and accent color. */
+    status = "success";
+    /** Message text. Falls back to the default slot when empty. */
+    message;
+    /** Text for the trailing action button that dismisses the toast. Hidden when empty. */
+    actionText;
+    /** Auto-dismiss delay in ms. `0` disables auto-dismiss. The `loading` status never auto-dismisses. */
+    duration = 5000;
+    /** Emitted once the toast has been shown (mounted and rendered). */
+    ifxToastOpen;
+    /** Emitted after the toast finished dismissing (animation complete). */
+    ifxToastClose;
+    /** Emitted when the action is activated (before the toast dismisses). */
+    ifxToastAction;
+    toastEl;
+    dismissTimer;
+    dismissing = false;
+    internalId;
+    componentWillLoad() {
+        this.internalId = `toast-${Math.random().toString(36).substring(2, 9)}`;
+    }
+    /** The id surfaced in events: the `toastId` prop, or the generated fallback. */
+    get resolvedId() {
+        return this.toastId || this.internalId;
+    }
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent("ifx-toast", await framework);
+        }
+        this.runEnterAnimation();
+        this.startTimer();
+        this.ifxToastOpen.emit({ id: this.resolvedId });
+    }
+    disconnectedCallback() {
+        this.clearTimer();
+    }
+    /**
+     * Restart the auto-dismiss timer when the status changes (e.g. `loading` → `success`):
+     * leaving `loading` (re)starts the timer, entering `loading` clears it.
+     */
+    statusChanged(newStatus, oldStatus) {
+        if (newStatus === oldStatus) {
+            return;
+        }
+        this.clearTimer();
+        this.startTimer();
+    }
+    /**
+     * Programmatically dismisses the toast. Runs the exit animation and then emits `ifxToastClose`.
+     */
+    async dismiss(reason = "programmatic") {
+        if (this.dismissing) {
+            return;
+        }
+        this.dismissing = true;
+        this.clearTimer();
+        this.emitCloseAfterExit(reason);
+    }
+    startTimer() {
+        if (this.duration > 0 && this.status !== "loading" && !this.dismissing) {
+            this.dismissTimer = setTimeout(() => {
+                this.dismiss("timeout");
+            }, this.duration);
+        }
+    }
+    clearTimer() {
+        if (this.dismissTimer) {
+            clearTimeout(this.dismissTimer);
+            this.dismissTimer = undefined;
+        }
+    }
+    skipAnimation() {
+        return !this.toastEl || this.prefersReducedMotion();
+    }
+    prefersReducedMotion() {
+        return (typeof window !== "undefined" &&
+            typeof window.matchMedia === "function" &&
+            window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+    }
+    runEnterAnimation() {
+        if (this.skipAnimation()) {
+            return;
+        }
+        const host = this.el;
+        try {
+            // Grow host height + margin from 0 so the toast rises in and pushes the stack up.
+            const fullHeight = host.offsetHeight;
+            const isFirst = host.parentElement?.firstElementChild === host;
+            const endMargin = isFirst ? 0 : STACK_GAP_PX;
+            const grow = animation.animationTo(host, [
+                { height: "0px", marginTop: "0px" },
+                { height: `${fullHeight}px`, marginTop: `${endMargin}px` },
+            ], { duration: 250, easing: "cubic-bezier(0.16, 1, 0.3, 1)" });
+            grow.addEventListener("finish", () => {
+                host.style.height = "";
+                host.style.marginTop = "";
+            });
+            animation.animationTo(this.toastEl, FADE_IN, { duration: 250 });
+        }
+        catch (_err) {
+            // Web Animations API unavailable (e.g. SSR / jsdom); render statically.
+            host.style.height = "";
+            host.style.marginTop = "";
+        }
+    }
+    emitCloseAfterExit(reason) {
+        const emit = () => this.ifxToastClose.emit({ id: this.resolvedId, reason });
+        if (this.skipAnimation()) {
+            emit();
+            return;
+        }
+        const host = this.el;
+        try {
+            // Collapse host height + margin to 0 so the stack closes up as the toast leaves.
+            const startHeight = host.offsetHeight;
+            const startMargin = parseFloat(getComputedStyle(host).marginTop) || 0;
+            const collapse = animation.animationTo(host, [
+                { height: `${startHeight}px`, marginTop: `${startMargin}px` },
+                { height: "0px", marginTop: "0px" },
+            ], { duration: 200, easing: "cubic-bezier(0.4, 0, 1, 1)" });
+            collapse.addEventListener("finish", emit);
+            animation.animationTo(this.toastEl, FADE_OUT, { duration: 200 });
+        }
+        catch (_err) {
+            emit();
+        }
+    }
+    handleAction = () => {
+        this.ifxToastAction.emit({ id: this.resolvedId });
+        this.dismiss("action");
+    };
+    renderIcon() {
+        if (this.status === "loading") {
+            return index.h("ifx-spinner", { variant: "default", size: "s", ariaLabelText: "Loading" });
+        }
+        return index.h("ifx-icon", { icon: STATUS_ICONS[this.status] });
+    }
+    render() {
+        const isDanger = this.status === "danger";
+        return (index.h(index.Host, { key: '3a6e52ddd48afc2554e3f5ff3803c3d548f2e8a5' }, index.h("div", { key: 'd4020732d65ac929bf43df414f45757cbb35aed2', ref: (el) => {
+                this.toastEl = el;
+            }, class: `ifx-toast ifx-toast--${this.status}`, role: isDanger ? "alert" : "status", "aria-live": isDanger ? "assertive" : "polite" }, index.h("div", { key: '76e817d7bb75f12a38492aca20535e76bbfcd06b', class: "ifx-toast__icon" }, this.renderIcon()), index.h("div", { key: '1c4923943424d4d1838261c356bfe264129ba86b', class: "ifx-toast__body" }, this.message ? this.message : index.h("slot", null)), this.actionText && (index.h("div", { key: 'b1a1f57699641800d88be928bca3a51cb2a120be', class: "ifx-toast__action" }, index.h("button", { key: '2af106850d139ad5c4b39bccb67e4d458ed707f7', type: "button", onClick: this.handleAction }, this.actionText))))));
+    }
+    static get watchers() { return {
+        "status": [{
+                "statusChanged": 0
+            }]
+    }; }
+};
+Toast.style = toastCss();
+
+exports.ifx_toast = Toast;