@infineon/design-system 0.0.0-stage → 41.11.0

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

@@ -0,0 +1,130 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, d as Host } from './index-CY4s4b6R.js';
+import { i as isNestedInIfxComponent } from './dom-utils-CtINY9El.js';
+import { d as detectFramework, t as trackComponent } from './tracking-DNHOWgWh.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) {
+        registerInstance(this, hostRef);
+        this.ifxInput = 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 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 (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-textarea", await framework);
+        }
+    }
+    render() {
+        return (h(Host, { key: 'b6c7cad1eba99d3624fcdac0c891247cafe618d8', class: this.readOnly
+                ? "wrapper--readonly"
+                : this.error
+                    ? "wrapper--error"
+                    : this.disabled
+                        ? "wrapper--disabled"
+                        : this.success
+                            ? "wrapper--success"
+                            : "" }, h("label", { key: '56a478f753e9837e075a7aabd0a4dda993dbd68e', class: "wrapper__label", htmlFor: this.inputId }, this.label?.trim(), this.required && (h("span", { key: '2661b0ec20c1fcf2927b84a833da94cf34b0201f', class: `required ${this.error && !this.readOnly ? "error" : ""}` }, "*"))), h("div", { key: 'b908e079d6dda1ce0c59c7a68e933d915769115e', class: "wrapper__textarea" }, 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() && (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();
+
+export { TextArea as ifx_textarea };

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

@@ -0,0 +1,112 @@
+import { r as registerInstance, a as getElement, h, d as Host } from './index-CY4s4b6R.js';
+import { i as isNestedInIfxComponent } from './dom-utils-CtINY9El.js';
+import { d as detectFramework, t as trackComponent } from './tracking-DNHOWgWh.js';
+import { a as applyToastConfig } from './toast-config-CvlFl4bk.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) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return 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 (!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' }))));
+    }
+};
+ToastContainer.style = toastContainerCss();
+
+export { ToastContainer as ifx_toast_container };

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

@@ -0,0 +1,191 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, d as Host } from './index-CY4s4b6R.js';
+import { a as animationTo } from './animation-BT3Wl1wi.js';
+import { i as isNestedInIfxComponent } from './dom-utils-CtINY9El.js';
+import { d as detectFramework, t as trackComponent } from './tracking-DNHOWgWh.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) {
+        registerInstance(this, hostRef);
+        this.ifxToastOpen = createEvent(this, "ifxToastOpen", 7);
+        this.ifxToastClose = createEvent(this, "ifxToastClose", 7);
+        this.ifxToastAction = createEvent(this, "ifxToastAction", 7);
+    }
+    get el() { return 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 (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            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 = 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 = "";
+            });
+            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 = 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);
+            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 h("ifx-spinner", { variant: "default", size: "s", ariaLabelText: "Loading" });
+        }
+        return h("ifx-icon", { icon: STATUS_ICONS[this.status] });
+    }
+    render() {
+        const isDanger = this.status === "danger";
+        return (h(Host, { key: '3a6e52ddd48afc2554e3f5ff3803c3d548f2e8a5' }, 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" }, h("div", { key: '76e817d7bb75f12a38492aca20535e76bbfcd06b', class: "ifx-toast__icon" }, this.renderIcon()), h("div", { key: '1c4923943424d4d1838261c356bfe264129ba86b', class: "ifx-toast__body" }, this.message ? this.message : h("slot", null)), this.actionText && (h("div", { key: 'b1a1f57699641800d88be928bca3a51cb2a120be', class: "ifx-toast__action" }, h("button", { key: '2af106850d139ad5c4b39bccb67e4d458ed707f7', type: "button", onClick: this.handleAction }, this.actionText))))));
+    }
+    static get watchers() { return {
+        "status": [{
+                "statusChanged": 0
+            }]
+    }; }
+};
+Toast.style = toastCss();
+
+export { Toast as ifx_toast };

package/dist/esm/ifx-tooltip.entry.js

@@ -0,0 +1,226 @@
+import { r as registerInstance, a as getElement, h } from './index-CY4s4b6R.js';
+import { i as isNestedInIfxComponent } from './dom-utils-CtINY9El.js';
+import { d as detectFramework, t as trackComponent } from './tracking-DNHOWgWh.js';
+import { c as createPopper } from './popper-BfP9ezJQ.js';
+
+const tooltipCss = () => `:host{display:inline-flex}.tooltip__container{display:inline-flex;flex-direction:column;position:relative;font-family:var(--ifx-font-family)}.tooltip-extended,.tooltip-compact,.tooltip-dismissible{background-color:#1d1d1d;border:1px solid black;z-index:1080;display:none;transition:opacity 0.3s;position:absolute;font-size:14px;font-style:normal;font-weight:400;line-height:20px;color:#ffffff;width:max-content;box-sizing:border-box;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.visible.tooltip-extended,.visible.tooltip-compact,.visible.tooltip-dismissible{display:flex !important;align-items:start}.tooltip-dismissible .close-button{all:unset;cursor:pointer;position:relative;order:2;margin-top:12px;margin-right:12px;line-height:0px}.tooltip-dismissible .tooltip-dismissible-content{display:flex;flex-direction:column;gap:12px;padding:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-dismissible .tooltip-dismissible-header,.tooltip-dismissible .tooltip-dismissible-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-dismissible .tooltip-dismissible-header{font-weight:600}.tooltip-dismissible .tooltip-dismissible-body{font-weight:400}.tooltip-compact{padding:4px 8px;text-align:center;flex-grow:1}.tooltip-extended{align-items:center;padding:12px;gap:10px}.tooltip-extended .extended_icon{display:flex;align-self:flex-start;align-items:center;cursor:pointer}.tooltip-extended .tooltip-extended-content{display:flex;flex-direction:column;gap:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-extended .tooltip-extended-header,.tooltip-extended .tooltip-extended-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-extended .tooltip-extended-header{font-weight:600}.tooltip-extended .tooltip-extended-body{font-weight:400}.tooltip__container .tooltip-arrow-svg{position:absolute;width:8px;height:8px}[data-placement=top].tooltip-extended>.tooltip-arrow-svg,[data-placement=top].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:50%;transform:rotate(180deg) translateX(-50%)}[data-placement=top-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-start].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:10px;transform:rotate(180deg)}[data-placement=top-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-end].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;right:10px;transform:rotate(180deg)}[data-placement=bottom].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:50%;transform:translateX(-50%)}[data-placement=bottom-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:10px}[data-placement=bottom-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-compact>.tooltip-arrow-svg{top:-7px;right:10px}[data-placement=left].tooltip-extended>.tooltip-arrow-svg,[data-placement=left].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=left].tooltip-compact>.tooltip-arrow-svg{right:-3px;top:50%;transform:rotate(90deg) translateY(-50%) translateX(-50%)}[data-placement=right].tooltip-extended>.tooltip-arrow-svg,[data-placement=right].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=right].tooltip-compact>.tooltip-arrow-svg{left:-3px;top:50%;transform:rotate(270deg) translateY(-50%) translateX(50%)}.tooltip-compact{min-width:28px !important;max-width:145px !important}.tooltip-dismissible{min-width:145px !important;max-width:310px !important}.tooltip-extended{min-width:145px !important;max-width:310px !important}`;
+
+const Tooltip = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    tooltipVisible = false;
+    /** Header text displayed at the top of the tooltip. */
+    header = "";
+    /** Main content text displayed inside the tooltip. */
+    text = "";
+    /** Preferred position of the tooltip relative to the trigger element. */
+    position = "auto";
+    internalPosition = "auto";
+    /** Accessible label for screen readers. */
+    ariaLabelText;
+    /** Visual style variant of the tooltip. */
+    variant = "compact";
+    /** Optional icon displayed in the tooltip. */
+    icon;
+    /** If true, appends the tooltip element to document.body for positioning. */
+    appendToBody = false;
+    tooltipContainer;
+    tooltipEl;
+    referenceEl;
+    popperInstance = null;
+    getVariant() {
+        const normalizedVariant = this.variant?.toLowerCase().trim();
+        if (normalizedVariant === 'compact' ||
+            normalizedVariant === 'dismissible' ||
+            normalizedVariant === 'extended') {
+            return normalizedVariant;
+        }
+        return 'compact';
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent('ifx-tooltip', await framework);
+        }
+        const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;
+        const variant = this.getVariant();
+        if (variant === 'compact' || variant === 'extended') {
+            slotElement.addEventListener('mouseenter', this.onMouseEnter);
+            slotElement.addEventListener('mouseleave', this.onMouseLeave);
+        }
+        else {
+            slotElement.addEventListener('click', this.onClick);
+        }
+    }
+    initializePopper() {
+        if (this.popperInstance)
+            return;
+        this.referenceEl = this.el;
+        let originalTooltipEl;
+        const variant = this.getVariant();
+        if (variant === 'compact') {
+            originalTooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');
+        }
+        else if (variant === 'dismissible') {
+            originalTooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');
+        }
+        else {
+            originalTooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');
+        }
+        if (this.appendToBody && originalTooltipEl && !this.tooltipContainer) {
+            this.tooltipContainer = originalTooltipEl.cloneNode(true);
+            const computedStyle = window.getComputedStyle(originalTooltipEl);
+            Array.from(computedStyle).forEach(key => {
+                this.tooltipContainer.style.setProperty(key, computedStyle.getPropertyValue(key), computedStyle.getPropertyPriority(key));
+            });
+            document.body.appendChild(this.tooltipContainer);
+            originalTooltipEl.style.visibility = 'hidden';
+            this.tooltipEl = this.tooltipContainer;
+        }
+        else if (this.appendToBody && this.tooltipContainer) {
+            this.tooltipEl = this.tooltipContainer;
+        }
+        else {
+            this.tooltipEl = originalTooltipEl;
+        }
+        let effectivePosition;
+        if (this.position === 'auto') {
+            effectivePosition = this.determineBestPosition();
+        }
+        else {
+            effectivePosition = this.position;
+        }
+        this.internalPosition = effectivePosition;
+        if (this.tooltipEl && this.referenceEl) {
+            this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {
+                placement: this.internalPosition,
+                strategy: 'fixed',
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [0, 8],
+                        },
+                    },
+                    {
+                        name: 'preventOverflow',
+                        options: {
+                            boundary: 'clippingParents',
+                            altBoundary: false,
+                            rootBoundary: 'viewport',
+                        },
+                    },
+                    {
+                        name: 'flip',
+                        enabled: this.position === 'auto',
+                        options: {
+                            fallbackPlacements: ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'],
+                            flipVariations: false,
+                        },
+                    },
+                    {
+                        name: 'computeStyles',
+                        options: {
+                            gpuAcceleration: false,
+                            adaptive: true,
+                        },
+                    },
+                ],
+            });
+        }
+        if (this.tooltipEl) {
+            this.tooltipEl.setAttribute('data-placement', this.internalPosition);
+        }
+    }
+    determineBestPosition() {
+        const rect = this.referenceEl.getBoundingClientRect();
+        const yOffset = window.scrollY;
+        const xOffset = window.scrollX;
+        const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;
+        const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;
+        if (verticalHalfwayPoint > window.innerHeight / 2) {
+            if (horizontalHalfwayPoint > window.innerWidth / 2) {
+                return 'top-end';
+            }
+            else {
+                return 'top-start';
+            }
+        }
+        else {
+            if (horizontalHalfwayPoint > window.innerWidth / 2) {
+                return 'bottom-end';
+            }
+            else {
+                return 'bottom-start';
+            }
+        }
+    }
+    positionChanged(newVal) {
+        this.internalPosition = newVal;
+        this.popperInstance?.destroy();
+        this.popperInstance = null; // Force re-initialization on next mouse enter
+    }
+    onMouseEnter = () => {
+        this.initializePopper();
+        this.tooltipVisible = true;
+        if (this.tooltipEl) {
+            this.tooltipEl.style.display = 'block';
+        }
+        this.popperInstance?.update();
+    };
+    onMouseLeave = () => {
+        this.tooltipVisible = false;
+        if (this.tooltipEl) {
+            this.tooltipEl.style.display = 'none';
+        }
+    };
+    disconnectedCallback() {
+        const slotElement = this.el.shadowRoot?.querySelector('.tooltip__container')?.firstChild;
+        if (slotElement) {
+            slotElement.removeEventListener('mouseenter', this.onMouseEnter);
+            slotElement.removeEventListener('mouseleave', this.onMouseLeave);
+            slotElement.removeEventListener('click', this.onClick);
+        }
+        this.popperInstance?.destroy();
+        if (this.tooltipContainer && this.tooltipContainer.parentNode) {
+            document.body.removeChild(this.tooltipContainer);
+        }
+    }
+    onClick = () => {
+        if (this.getVariant() === 'dismissible') {
+            this.initializePopper();
+            this.tooltipVisible = !this.tooltipVisible;
+            this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';
+            this.popperInstance?.update();
+        }
+    };
+    onDismissClick = () => {
+        this.tooltipVisible = false;
+        this.tooltipEl.style.display = 'none';
+    };
+    render() {
+        const tooltipDismissible = {
+            "tooltip-dismissible": true,
+            visible: this.tooltipVisible,
+        };
+        const tooltipCompact = {
+            "tooltip-compact": true,
+            visible: this.tooltipVisible,
+        };
+        const tooltipExtended = {
+            "tooltip-extended": true,
+            visible: this.tooltipVisible,
+        };
+        return (h("div", { key: '9bf27bac66f598f51c1e30e27a6e10787160064c', "aria-label": this.ariaLabelText, "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: 'd20fcd749e7d35cca65a592363600080b098d46e' }), this.getVariant() === 'dismissible' && (h("div", { key: '4a38c6ac152213456b088ec84f8bb6321037c40e', class: tooltipDismissible }, h("button", { key: '8201ab5b1d650cefb90ebbdfafa75aeb5cdcd0e6', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '5f214bc9ee9a35187703ba8a520ffd146524529d', icon: "cross16" })), h("div", { key: 'f653fd795afa4888f00c5daac7911d46882a0dad', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'f1eb33d83439723b581f95134f65e5414160ca1b', class: "tooltip-dismissible-header" }, this.header), h("div", { key: '00b599eb81849359c8bef7aa27655b890c63a43c', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: 'ef44cb3e7636f3f53ad3c206167d4699cfe14805', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'c815a0a02b8e44ad3c2963bb546cc0d4ff3c7a5f', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))), this.getVariant() === 'compact' && (h("div", { key: '467347c7622a4e463eb0ab1de899bcf2e63e2871', class: tooltipCompact }, this.text, h("svg", { key: 'f38dcf83756ffb2bf5f0fdac3b9dc5178ebe445c', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '900f2b96ce647f566bbbbacfa0d8aa1b8d012f84', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))), this.getVariant() === 'extended' && (h("div", { key: '62513e32ad9418c3f5d0015431e62a8ea82699e8', class: tooltipExtended }, h("slot", { key: 'd947b84184430e4e3abfd6ac1270a2ab07c77201', name: "icon" }, this.icon ? (h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon }))) : (h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" })))), h("div", { key: '58d52b35c0eeafaa1cdceb12f8bc8cb531313ade', class: "tooltip-extended-content" }, this.header && h("div", { key: '31b8e80497c10e662ac5da50665d09c4f1b7aee7', class: "tooltip-extended-header" }, this.header), h("div", { key: '777dac006f5554c30056a91901c2027acea21186', class: "tooltip-extended-body" }, this.text)), h("svg", { key: 'b6bdfb6860f70309569f68bb2b7830090636eb69', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'cb12c1f69e4f3538f9679fcf47f470c7f142fb46', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))))));
+    }
+    static get watchers() { return {
+        "position": [{
+                "positionChanged": 0
+            }]
+    }; }
+};
+Tooltip.style = tooltipCss();
+
+export { Tooltip as ifx_tooltip };