@inera/ids-react 6.2.0 → 7.0.1

package/components/carousel/carousel.js

@@ -1,18 +1,169 @@
-import * as React from 'react';
-import '@inera/ids-core/components/carousel/register.js';
-import { IDSCarousel as IDSCarousel$1 } from '@inera/ids-core/components/carousel/carousel-element.js';
-import { IDSCarouselItem as IDSCarouselItem$1 } from '@inera/ids-core/components/carousel/carousel-item/carousel-item-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useState, useRef, Children, useEffect } from 'react';
+import '@inera/ids-design/components/carousel/carousel.css';
+import clsx from 'clsx';
+import { breakPoints } from '../utils/utils.js';
 
-const IDSCarousel = createComponent({
-    tagName: 'ids-carousel',
-    elementClass: IDSCarousel$1,
-    react: React,
-});
-const IDSCarouselItem = createComponent({
-    tagName: 'ids-carousel-item',
-    elementClass: IDSCarouselItem$1,
-    react: React,
-});
+const IDSCarousel = ({ autoplay = false, autoplayDelay = 5000, srNextLabel = "Nästa slide", srPrevLabel = "Föregående slide", className, children }) => {
+    const [activeSlideIndex, setActiveSlideIndex] = useState(0);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const [isAnimatingLeft, setIsAnimatingLeft] = useState(false);
+    const [isAnimatingRight, setIsAnimatingRight] = useState(false);
+    const [buttonPosition, setButtonPosition] = useState({ top: 0, height: 0 });
+    const carouselRef = useRef(null);
+    const slideCount = Children.count(children);
+    let windowWidth = window.innerWidth;
+    // Validate slide count
+    useEffect(() => {
+        if (slideCount < 3) {
+            console.warn("Carousel requires at least 3 carousel-items.");
+        }
+    }, [slideCount]);
+    // Initial setup
+    useEffect(() => {
+        if (slideCount > 2) {
+            setActiveSlideIndex(0);
+        }
+    }, []);
+    // Recalculate window width on resize
+    useEffect(() => {
+        windowWidth = window.innerWidth;
+    }, [windowWidth]);
+    // Resize observer
+    useEffect(() => {
+        const resizeObserver = new ResizeObserver(entries => {
+            window.requestAnimationFrame(() => {
+                if (!Array.isArray(entries) || !entries.length)
+                    return;
+                setButtonLocation();
+            });
+        });
+        const carouselSlide = carouselRef.current?.querySelector(".js-carousel-slide");
+        if (carouselSlide)
+            resizeObserver.observe(carouselSlide);
+        return () => resizeObserver.disconnect();
+    }, []);
+    // Set button location and display buttons after image load
+    useEffect(() => {
+        const firstImage = carouselRef.current?.querySelector(".ids-carousel-item__image img");
+        const buttons = carouselRef.current?.querySelectorAll("button");
+        const handleImageLoad = () => {
+            setButtonLocation();
+            buttons?.forEach(btn => {
+                setTimeout(() => {
+                    btn.style.opacity = "1";
+                }, 200);
+            });
+        };
+        firstImage?.addEventListener("load", handleImageLoad);
+        return () => firstImage?.removeEventListener("load", handleImageLoad);
+    }, []);
+    // Set button location
+    const setButtonLocation = () => {
+        const imageHeight = carouselRef.current
+            ?.querySelector(".ids-carousel-item__image")
+            ?.getBoundingClientRect().height;
+        const buttonPlacement = imageHeight / 2;
+        if (imageHeight && buttonPlacement) {
+            setButtonPosition({
+                top: buttonPlacement,
+                height: imageHeight
+            });
+        }
+    };
+    useEffect(() => {
+        if (!autoplay)
+            return;
+        const delay = Math.max(autoplayDelay, 500);
+        const timer = setInterval(() => {
+            handleNext();
+        }, delay);
+        return () => clearInterval(timer);
+    }, [autoplay, autoplayDelay]);
+    // change slide
+    const handleNext = () => {
+        if (isAnimating)
+            return;
+        setIsAnimating(true);
+        setIsAnimatingRight(true);
+        setActiveSlideIndex(prev => (prev + 1) % slideCount);
+        setTimeout(() => {
+            setIsAnimating(false);
+            setIsAnimatingRight(false);
+        }, 500);
+    };
+    // Previous slide
+    const handlePrev = () => {
+        if (isAnimating)
+            return;
+        setIsAnimating(true);
+        setIsAnimatingLeft(true);
+        setActiveSlideIndex(prev => (prev - 1 + slideCount) % slideCount);
+        setTimeout(() => {
+            setIsAnimating(false);
+            setIsAnimatingLeft(false);
+        }, 500);
+    };
+    // Touch/swipe
+    const touchStartX = useRef(null);
+    const handleTouchStart = (e) => {
+        touchStartX.current = e.touches[0].clientX;
+    };
+    const handleTouchEnd = (e) => {
+        const distance = e.changedTouches[0].clientX - touchStartX.current;
+        if (distance > 100)
+            handlePrev();
+        if (distance < -100)
+            handleNext();
+        touchStartX.current = null;
+    };
+    const setTabIndexRecursively = (node, tabIndex) => {
+        if (React__default.isValidElement(node)) {
+            const props = {};
+            // Skip recursion into IDSLink — set tabIndex only at the top level if needed
+            if (node.type.displayName === "IDSLink" || node.type.name === "IDSLink") {
+                return React__default.cloneElement(node, {
+                    tabIndex
+                });
+            }
+            if (typeof node.type === "string") {
+                const focusableTags = ["a", "button", "input", "select", "textarea"];
+                if (focusableTags.includes(node.type)) {
+                    props.tabIndex = tabIndex;
+                }
+            }
+            if (node.props && node.props.children) {
+                props.children = React__default.Children.map(node.props.children, child => setTabIndexRecursively(child, tabIndex));
+            }
+            return React__default.cloneElement(node, props);
+        }
+        return node;
+    };
+    const slides = Children.map(children, (child, index) => {
+        const isActive = index === activeSlideIndex;
+        const isPrev = index === (activeSlideIndex - 1 + slideCount) % slideCount;
+        const isNext = index === (activeSlideIndex + 1) % slideCount;
+        let itemClass = "ids-carousel-item-wrapper";
+        if (isActive)
+            itemClass += " active";
+        else if (isPrev)
+            itemClass += " prev";
+        else if (isNext)
+            itemClass += " next";
+        // Disable tabbing for all elements inside inactive slides
+        const processedChild = isActive ? child : setTabIndexRecursively(child, -1);
+        return (jsx("div", { className: itemClass, "aria-hidden": !isActive, children: processedChild }, index));
+    });
+    const isMobile = windowWidth < breakPoints.medium;
+    return (jsxs("div", { className: clsx("ids-carousel", className), ref: carouselRef, children: [jsx("button", { "aria-label": srPrevLabel, className: clsx("ids-carousel__button-prev", {
+                    "ids-carousel__button-prev--mobile": isMobile
+                }), onClick: handlePrev, style: buttonPosition, children: isMobile && jsx("div", { className: "ids-carousel-btn__inner" }) }), jsx("button", { "aria-label": srNextLabel, className: clsx("ids-carousel__button-next", {
+                    "ids-carousel__button-next--mobile": isMobile
+                }), onClick: handleNext, style: buttonPosition, children: isMobile && jsx("div", { className: "ids-carousel-btn__inner" }) }), jsx("div", { className: clsx("ids-carousel-slide js-carousel-slide", {
+                    "animating-left": isAnimatingLeft,
+                    "animating-right": isAnimatingRight
+                }), onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, children: jsx("div", { "aria-live": "polite", children: slides }) })] }));
+};
 
-export { IDSCarousel, IDSCarouselItem };
+export { IDSCarousel };

package/components/date-label/date-label.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { DetailedHTMLProps, TimeHTMLAttributes } from "react";
 import "@inera/ids-design/components/date-label/date-label.css";
-interface IDSDateLabelProps {
+interface IDSDateLabelProps extends DetailedHTMLProps<TimeHTMLAttributes<HTMLTimeElement>, HTMLTimeElement> {
     date?: Date | null;
     year?: number;
     month?: number;

package/components/date-label/date-label.js

@@ -2,8 +2,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import '@inera/ids-design/components/date-label/date-label.css';
+import { getDayAsText, getMonthAsSweText } from '../utils/utils.js';
+import clsx from 'clsx';
 
-const IDSDateLabel = ({ date = null, year = 0, month = 0, monthLabel = "", day = 0 }) => {
+const IDSDateLabel = ({ date = null, year = 0, month = 0, monthLabel = "", day = 0, className, ...props }) => {
     const [presentedDate, setPresentedDate] = useState(null);
     useEffect(() => {
         if (date) {
@@ -17,45 +19,7 @@ const IDSDateLabel = ({ date = null, year = 0, month = 0, monthLabel = "", day =
         return getDayAsText(dayNumber);
     };
     const getMonthText = () => (monthLabel ? monthLabel : getMonthAsSweText(getMonth() - 1, 3));
-    const getDayAsText = (day) => {
-        if (day > 0) {
-            return day < 10 ? "0" + day : "" + day;
-        }
-        else {
-            return "";
-        }
-    };
-    const getMonthAsSweText = (date, letters) => {
-        switch (date) {
-            case 0:
-                return "Januari".substring(0, letters);
-            case 1:
-                return "Februari".substring(0, letters);
-            case 2:
-                return "Mars".substring(0, letters);
-            case 3:
-                return "April".substring(0, letters);
-            case 4:
-                return "Maj".substring(0, letters);
-            case 5:
-                return "Juni".substring(0, letters);
-            case 6:
-                return "Juli".substring(0, letters);
-            case 7:
-                return "Augusti".substring(0, letters);
-            case 8:
-                return "September".substring(0, letters);
-            case 9:
-                return "Oktober".substring(0, letters);
-            case 10:
-                return "November".substring(0, letters);
-            case 11:
-                return "December".substring(0, letters);
-            default:
-                return "";
-        }
-    };
-    return (jsxs("time", { className: "ids-date-label", dateTime: `${getDay()}-${getMonth().toString().padStart(2, "0")}-${getYear()}`, children: [jsx("span", { className: "ids-date-label__day", children: getDay() }), jsx("span", { className: "ids-date-label__month", children: getMonthText() }), jsx("span", { className: "ids-date-label__year", children: getYear() })] }));
+    return (jsxs("time", { className: clsx("ids-date-label", className), dateTime: `${getDay()}-${getMonth().toString().padStart(2, "0")}-${getYear()}`, ...props, children: [jsx("span", { className: "ids-date-label__day", children: getDay() }), jsx("span", { className: "ids-date-label__month", children: getMonthText() }), jsx("span", { className: "ids-date-label__year", children: getYear() })] }));
 };
 
 export { IDSDateLabel };

package/components/dialog/dialog.d.ts

@@ -1,6 +1,23 @@
-import '@inera/ids-core/components/dialog/register.js';
-import { IDSDialog as Dialog } from '@inera/ids-core/components/dialog/dialog-element.js';
-export declare const IDSDialog: import("@lit-labs/react").ReactWebComponent<Dialog, {
-    onClosed: string;
-    onOpen: string;
-}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/dialog/dialog.css";
+interface IDSDialogProps extends React.HTMLAttributes<HTMLDivElement> {
+    show?: boolean;
+    srClose?: string;
+    dismissible?: boolean;
+    autoFocus?: boolean;
+    noOverlay?: boolean;
+    noFocusTrap?: boolean;
+    keepScrollbar?: boolean;
+    persistent?: boolean;
+    noScrollAreaFocus?: boolean;
+    width?: string;
+    maxWidth?: string;
+    height?: string;
+    trigger?: ReactNode;
+    headline?: ReactNode;
+    actions?: ReactNode;
+    children?: ReactNode;
+    onVisibilityChange?: (value: boolean) => void;
+}
+export declare const IDSDialog: React.FC<IDSDialogProps>;
+export {};

package/components/dialog/dialog.js

@@ -1,16 +1,78 @@
-import * as React from 'react';
-import '@inera/ids-core/components/dialog/register.js';
-import { IDSDialog as IDSDialog$1 } from '@inera/ids-core/components/dialog/dialog-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useId, useEffect } from 'react';
+import '@inera/ids-design/components/dialog/dialog.css';
+import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
+import clsx from 'clsx';
 
-const IDSDialog = createComponent({
-    tagName: 'ids-dialog',
-    elementClass: IDSDialog$1,
-    react: React,
-    events: {
-        onClosed: 'closed',
-        onOpen: 'open'
-    }
-});
+const IDSDialog = ({ show = false, srClose = "Stäng", dismissible = false, autoFocus = true, noOverlay = false, noFocusTrap = false, keepScrollbar = false, persistent = false, noScrollAreaFocus = false, width = "", maxWidth = "", height = "", trigger, headline, actions, children, className, onVisibilityChange, ...props }) => {
+    const [isVisible, setIsVisible] = useState(show);
+    const dialogRef = useRef(null);
+    const bodyRef = useRef(null);
+    const headlineId = useId();
+    const contentId = useId();
+    const [hasScrollbar, setHasScrollbar] = useState(false);
+    useFocusTrap(dialogRef.current, isVisible && !noFocusTrap);
+    useEffect(() => {
+        setIsVisible(show);
+    }, [show]);
+    useEffect(() => {
+        onVisibilityChange?.(isVisible);
+    }, [isVisible]);
+    useEffect(() => {
+        const checkScrollbar = () => {
+            if (bodyRef.current) {
+                setHasScrollbar(bodyRef.current.clientHeight < bodyRef.current.scrollHeight);
+            }
+        };
+        if (isVisible) {
+            !keepScrollbar && document.body.classList.add("ids-hide-overflow");
+            checkScrollbar();
+        }
+        else {
+            document.body.classList.remove("ids-hide-overflow");
+        }
+        return () => {
+            document.body.classList.remove("ids-hide-overflow");
+        };
+    }, [isVisible, keepScrollbar]);
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === "Escape" && isVisible && !persistent) {
+                setIsVisible(false);
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isVisible, persistent, setIsVisible]);
+    useEffect(() => {
+        if (isVisible && autoFocus) {
+            setTimeout(() => {
+                const focusable = bodyRef.current?.querySelector(".ids-focus-anchor") ||
+                    bodyRef.current?.querySelector("h1, h2, h3, [tabindex]:not([tabindex='-1']), button:not([disabled]), a, input:not([disabled]), textarea:not([disabled])") ||
+                    dialogRef.current?.querySelector("button.ids-dialog__header__button");
+                focusable?.focus();
+            });
+        }
+    }, [isVisible, autoFocus]);
+    const overlayClick = () => {
+        if (!persistent) {
+            setIsVisible(false);
+        }
+    };
+    return (jsxs(Fragment, { children: [jsx("div", { className: "ids-dialog__trigger", children: trigger }), jsx("div", { className: clsx("ids-dialog-overlay", {
+                    "ids-dialog-overlay--hidden": !isVisible || noOverlay
+                }), onClick: overlayClick }), jsxs("div", { ref: dialogRef, className: clsx("ids-dialog", {
+                    "ids-dialog--hidden": !isVisible
+                }, className), role: "dialog", "aria-modal": "true", "aria-labelledby": headlineId, "aria-describedby": contentId, style: {
+                    width,
+                    maxWidth,
+                    height,
+                    maxHeight: height || undefined
+                }, ...props, children: [dismissible && (jsx("div", { className: "ids-dialog__header", children: jsx("button", { "aria-label": srClose, className: "ids-dialog__header__button", onClick: () => setIsVisible(false) }) })), jsxs("div", { ref: bodyRef, className: clsx("ids-dialog__body", {
+                            "ids-dialog__body--has-scrollbar": hasScrollbar,
+                            "ids-dialog__body--scroll-area-focus": !noScrollAreaFocus
+                        }), tabIndex: noScrollAreaFocus ? -1 : 0, children: [jsx("div", { id: headlineId, className: "ids-dialog__body__headline", children: headline }), jsx("div", { id: contentId, className: "ids-dialog__body__content", children: children }), actions && jsx("div", { className: "ids-dialog__footer", children: actions })] })] })] }));
+};
 
 export { IDSDialog };

package/components/dropdown/dropdown-content-link.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactElement, HTMLAttributes } from "react";
+import "@inera/ids-design/components/dropdown/dropdown.css";
+export interface IDSDropdownContentLinkProps extends Omit<HTMLAttributes<HTMLAnchorElement>, "children"> {
+    children: ReactElement;
+}
+export declare const IDSDropdownContentLink: React.FC<IDSDropdownContentLinkProps>;

package/components/dropdown/dropdown-content-link.js

@@ -0,0 +1,20 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { isValidElement, cloneElement } from 'react';
+import '@inera/ids-design/components/dropdown/dropdown.css';
+import clsx from 'clsx';
+
+const IDSDropdownContentLink = ({ children, className, ...props }) => {
+    if (!isValidElement(children) || children.type !== "a") {
+        console.error("IDSDropdownContentLink expects a single <a> element as its child.");
+        return null;
+    }
+    const childClassName = clsx("ids-dropdown-content-link", children.props.className, className);
+    const content = jsx(Fragment, { children: children.props.children });
+    return cloneElement(children, {
+        ...props,
+        className: childClassName,
+        children: content
+    });
+};
+
+export { IDSDropdownContentLink };

package/components/dropdown/dropdown.d.ts

@@ -1,8 +1,16 @@
-import "@inera/ids-core/components/dropdown/register.js";
-import { IDSDropdown as Dropdown } from "@inera/ids-core/components/dropdown/dropdown-element.js";
-import { IDSDropdownContent as DropdownContent } from "@inera/ids-core/components/dropdown/content/dropdown-content-element.js";
-export declare const IDSDropdown: import("@lit-labs/react").ReactWebComponent<Dropdown, {
-    onClosed: string;
-    onOpened: string;
-}>;
-export declare const IDSDropdownContent: import("@lit-labs/react").ReactWebComponent<DropdownContent, {}>;
+import React, { ReactNode, ReactElement } from "react";
+import "@inera/ids-design/components/dropdown/dropdown.css";
+type Position = "left" | "right";
+interface IDSDropdownProps extends React.HTMLAttributes<HTMLSpanElement> {
+    expanded?: boolean;
+    persistent?: boolean;
+    position?: Position;
+    sBlock?: boolean;
+    mBlock?: boolean;
+    onOpened?: () => void;
+    onClosed?: () => void;
+    button: ReactElement;
+    children: ReactNode;
+}
+export declare const IDSDropdown: React.FC<IDSDropdownProps>;
+export {};

package/components/dropdown/dropdown.js

@@ -1,22 +1,74 @@
-import * as React from 'react';
-import '@inera/ids-core/components/dropdown/register.js';
-import { IDSDropdown as IDSDropdown$1 } from '@inera/ids-core/components/dropdown/dropdown-element.js';
-import { IDSDropdownContent as IDSDropdownContent$1 } from '@inera/ids-core/components/dropdown/content/dropdown-content-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState, useRef, useEffect, isValidElement, cloneElement } from 'react';
+import '@inera/ids-design/components/dropdown/dropdown.css';
+import { useElementId } from '../utils/hooks/useElementId.js';
+import clsx from 'clsx';
 
-const IDSDropdown = createComponent({
-    tagName: "ids-dropdown",
-    elementClass: IDSDropdown$1,
-    react: React,
-    events: {
-        onClosed: "closed",
-        onOpened: "opened"
-    }
-});
-const IDSDropdownContent = createComponent({
-    tagName: "ids-dropdown-content",
-    elementClass: IDSDropdownContent$1,
-    react: React
-});
+const IDSDropdown = ({ expanded = false, persistent = false, position = "right", sBlock = false, mBlock = false, onOpened, onClosed, children, className, button, ...props }) => {
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    const buttonId = useElementId();
+    const contentId = useElementId();
+    useEffect(() => {
+        setIsExpanded(expanded);
+    }, [expanded]);
+    useEffect(() => {
+        if (!persistent && isExpanded) {
+            const handleClickOutside = (event) => {
+                if (triggerRef.current &&
+                    !triggerRef.current.contains(event.target) &&
+                    contentRef.current &&
+                    !contentRef.current.contains(event.target)) {
+                    setIsExpanded(false);
+                    onClosed?.();
+                }
+            };
+            document.addEventListener("mousedown", handleClickOutside);
+            return () => document.removeEventListener("mousedown", handleClickOutside);
+        }
+    }, [isExpanded, persistent, onClosed]);
+    const handleToggle = (e) => {
+        setIsExpanded(prev => {
+            const next = !prev;
+            if (next)
+                onOpened?.();
+            else
+                onClosed?.();
+            return next;
+        });
+    };
+    const renderTrigger = () => {
+        if (isValidElement(button)) {
+            return cloneElement(button, {
+                id: buttonId,
+                ref: triggerRef,
+                onClick: handleToggle,
+                "aria-controls": contentId,
+                "aria-expanded": isExpanded,
+                className: clsx(button.props.className)
+            });
+        }
+        return null;
+    };
+    const renderDropdownContent = () => {
+        const enhancedChildren = React__default.Children.map(children, (child, i) => {
+            if (!React__default.isValidElement(child))
+                return child;
+            return cloneElement(child, {
+                key: `dropdown-content-link-${i}`
+            });
+        });
+        return (jsx("div", { id: contentId, ref: contentRef, "aria-labelledby": buttonId, className: clsx(`ids-dropdown__content ids-dropdown__content--position-${position}`, {
+                "ids-dropdown__content--mblock": mBlock,
+                "ids-dropdown__content--sblock": sBlock
+            }), ...props, children: enhancedChildren }));
+    };
+    return (jsxs("span", { className: clsx(`ids-dropdown`, className, {
+            "ids-dropdown--mblock": mBlock,
+            "ids-dropdown--sblock": sBlock
+        }), children: [renderTrigger(), isExpanded && renderDropdownContent()] }));
+};
 
-export { IDSDropdown, IDSDropdownContent };
+export { IDSDropdown };

package/components/footer-1177/footer-1177.d.ts

@@ -1,3 +1,23 @@
-import '@inera/ids-core/components/footer-1177/register.js';
-import { IDSFooter1177 as Footer } from '@inera/ids-core/components/footer-1177/footer-1177-element.js';
-export declare const IDSFooter1177: import("@lit-labs/react").ReactWebComponent<Footer, {}>;
+import React, { ReactElement, ReactNode } from "react";
+import "@inera/ids-design/components/footer-1177/footer-1177.css";
+import { IDSLinkProps } from "../link/link";
+interface Footer1177Props extends React.HTMLAttributes<HTMLDivElement> {
+    headline?: string;
+    srHeadline?: string;
+    subHeadline?: string;
+    cols?: 1 | 2 | 3;
+    col1?: ReactElement<IDSLinkProps>[];
+    col2?: ReactElement<IDSLinkProps>[];
+    col3?: ReactElement<IDSLinkProps>[];
+    col1Size?: string;
+    col2Size?: string;
+    col3Size?: string;
+    subFooterLeft?: ReactNode;
+    subFooterRight?: ReactNode;
+    mobileMenu?: ReactNode;
+    mobileLinks?: ReactNode;
+    subFooterMobile?: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSFooter1177: React.FC<Footer1177Props>;
+export {};

package/components/footer-1177/footer-1177.js

@@ -1,12 +1,67 @@
-import * as React from 'react';
-import '@inera/ids-core/components/footer-1177/register.js';
-import { IDSFooter1177 as IDSFooter1177$1 } from '@inera/ids-core/components/footer-1177/footer-1177-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React__default, { useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/footer-1177/footer-1177.css';
 
-const IDSFooter1177 = createComponent({
-    tagName: 'ids-footer-1177',
-    elementClass: IDSFooter1177$1,
-    react: React,
-});
+const IDSFooter1177 = ({ headline = "", srHeadline = "", subHeadline = "", cols = 3, col1 = [], col2 = [], col3 = [], col1Size = "2", col2Size = "2", col3Size = "2", subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+    }, [cols, col1Size, col2Size, col3Size]);
+    const getColumnWidth = (col) => {
+        const map = { 1: col1Size, 2: col2Size, 3: col3Size };
+        return `ids-footer-1177__col-size-${map[col]}`;
+    };
+    const renderHeadline = () => {
+        if (srHeadline) {
+            return (jsxs(Fragment, { children: [jsxs("h1", { className: "ids-footer-1177__headline--sr", children: [srHeadline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] }), jsxs("h1", { "aria-hidden": "true", className: "ids-footer-1177__headline", children: [headline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] })] }));
+        }
+        return (jsxs("h1", { className: "ids-footer-1177__headline", children: [headline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] }));
+    };
+    const renderCol = (column) => {
+        return column?.map((link, idx) => {
+            if (React__default.isValidElement(link)) {
+                return React__default.cloneElement(link, {
+                    key: `footer-link-${idx}`,
+                    colorPreset: 2,
+                    block: true
+                });
+            }
+            return link;
+        });
+    };
+    const renderCols = () => {
+        if (cols === 1) {
+            return (jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--1", getColumnWidth(1)), children: renderCol(col1) }));
+        }
+        else if (cols === 2) {
+            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--2", getColumnWidth(1)), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--2", getColumnWidth(2)), children: renderCol(col2) })] }));
+        }
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177__link-col", getColumnWidth(1)), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-1177__link-col", getColumnWidth(2)), children: renderCol(col2) }), jsx("div", { className: clsx("ids-footer-1177__link-col", getColumnWidth(3)), children: renderCol(col3) })] }));
+    };
+    const renderCookieLinks = (content) => {
+        const applyProps = (node, keyPrefix = "") => {
+            if (!node)
+                return null;
+            if (Array.isArray(node)) {
+                return node.map((child, idx) => applyProps(child, `${keyPrefix}-${idx}`));
+            }
+            if (React__default.isValidElement(node)) {
+                if (node.type === React__default.Fragment) {
+                    return (jsx(React__default.Fragment, { children: applyProps(node.props.children, keyPrefix) }, keyPrefix));
+                }
+                return React__default.cloneElement(node, {
+                    key: `footer-sub-footer-right-link-${keyPrefix}`,
+                    colorPreset: 4,
+                    small: true,
+                    ...node.props
+                });
+            }
+            return node;
+        };
+        return applyProps(content, "root");
+    };
+    return (jsxs("footer", { className: clsx("ids-footer-1177", className), ref: ref, ...props, children: [jsx("div", { className: "ids-footer-1177__inner-wrapper", children: jsxs("div", { className: "ids-footer-1177__inner", children: [jsx("div", { className: "ids-footer-1177__headline-row", children: renderHeadline() }), jsxs("div", { className: "ids-footer-1177__content", children: [jsx("div", { className: "ids-footer-1177__text", children: children }), renderCols()] })] }) }), jsxs("div", { className: "ids-footer-1177__sub-footer", children: [jsx("div", { className: "ids-footer-1177__sub-footer-container", children: jsxs("div", { className: "ids-footer-1177__sub-footer-row", children: [jsx("div", { className: "ids-footer-1177__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-1177__sub-footer-right", children: renderCookieLinks(subFooterRight) }), jsx("div", { className: "ids-footer-1177__mobile-menu", children: mobileMenu }), jsx("div", { className: "ids-footer-1177__mobile-links", children: renderCookieLinks(mobileLinks) })] }) }), jsx("div", { className: "ids-footer-1177__sub-footer-mobile", children: jsx("div", { className: "ids-footer-1177__sub-footer-mobile-text", children: subFooterMobile }) })] })] }));
+};
 
 export { IDSFooter1177 };