@inera/ids-react 6.2.0 → 7.0.0

package/components/header-1177-pro/header-1177-pro-nav-menu-mobile.js

@@ -1,15 +1,35 @@
-import * as React from 'react';
-import { IDSHeader1177ProNavMenuMobile as IDSHeader1177ProNavMenuMobile$1 } from '@inera/ids-core/components/header-1177-pro/header-1177-pro-nav-menu-mobile-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import '@inera/ids-design/components/header-1177-pro/header-1177-pro-nav-menu-mobile.css';
+import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177ProNavMenuMobile = createComponent({
-    tagName: 'ids-header-1177-pro-nav-menu-mobile',
-    elementClass: IDSHeader1177ProNavMenuMobile$1,
-    react: React,
-    events: {
-        onClosed: 'closed',
-        onExpanded: 'expanded'
-    }
-});
+const IDSHeader1177ProNavMenuMobile = ({ label = "", persistent = false, children, onExpanded, onClosed }) => {
+    const headerContext = useHeaderContext();
+    const [isExpanded, setIsExpanded] = useState(false);
+    const menuRef = useRef(null);
+    useEffect(() => {
+        if (!persistent && isExpanded) {
+            const handleClick = () => {
+                setIsExpanded(false);
+                onClosed?.();
+            };
+            const links = menuRef.current?.querySelectorAll("a") || [];
+            links.forEach(link => link.addEventListener("click", handleClick));
+            return () => {
+                links.forEach(link => link.removeEventListener("click", handleClick));
+            };
+        }
+    }, [isExpanded, persistent, onClosed]);
+    const toggleExpansion = () => {
+        const newExpanded = !isExpanded;
+        setIsExpanded(newExpanded);
+        newExpanded ? onExpanded?.() : onClosed?.();
+    };
+    return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-header-1177-pro__nav-mobile__item", {
+                    "ids-header-1177-pro__nav-mobile__item--unresponsive": headerContext?.unresponsive
+                }), children: jsxs("button", { onClick: toggleExpansion, "aria-expanded": isExpanded, "aria-controls": "ids-header-1177-pro-nav-mobile-dropdown", className: "ids-header-1177-pro__nav-mobile__menu", children: [label, jsx("div", { className: "ids-hamburger", children: jsx("div", { className: "ids-hamburger__lines" }) })] }) }), isExpanded && (jsx("div", { id: "ids-header-1177-pro-nav-mobile-dropdown", className: "ids-header-1177-pro__nav-mobile__menu-items", ref: menuRef, children: children }))] }));
+};
 
 export { IDSHeader1177ProNavMenuMobile };

package/components/header-1177-pro/header-1177-pro-nav.d.ts

@@ -1,2 +1,10 @@
-import { IDSHeader1177ProNav as HeaderNav } from '@inera/ids-core/components/header-1177-pro/header-1177-pro-nav-element.js';
-export declare const IDSHeader1177ProNav: import("@lit-labs/react").ReactWebComponent<HeaderNav, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/header-1177-pro/header-1177-pro-nav.css";
+import "@inera/ids-design/components/header-1177-pro/header-1177-pro-region-picker.css";
+interface IDSHeader1177ProNavProps {
+    regionIconMobile?: ReactNode;
+    mobileMenu?: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSHeader1177ProNav: React.FC<IDSHeader1177ProNavProps>;
+export {};

package/components/header-1177-pro/header-1177-pro-nav.js

@@ -1,11 +1,30 @@
-import * as React from 'react';
-import { IDSHeader1177ProNav as IDSHeader1177ProNav$1 } from '@inera/ids-core/components/header-1177-pro/header-1177-pro-nav-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import '@inera/ids-design/components/header-1177-pro/header-1177-pro-nav.css';
+import '@inera/ids-design/components/header-1177-pro/header-1177-pro-region-picker.css';
+import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177ProNav = createComponent({
-    tagName: 'ids-header-1177-pro-nav',
-    elementClass: IDSHeader1177ProNav$1,
-    react: React,
-});
+const IDSHeader1177ProNav = ({ regionIconMobile, mobileMenu, children }) => {
+    const headerContext = useHeaderContext();
+    const [regionPickerExpanded, setRegionPickerExpanded] = useState(false);
+    const toggleRegion = () => {
+        setRegionPickerExpanded(prev => !prev);
+    };
+    const renderRegionPicker = () => {
+        if (headerContext?.hideRegionPicker)
+            return null;
+        return (jsx("button", { className: clsx("ids-header-1177-pro__region-picker-button--mobile", {
+                "ids-header-1177-pro__region-picker-button--mobile--expanded": regionPickerExpanded
+            }), "aria-label": headerContext?.regionPickerText, "aria-expanded": regionPickerExpanded, onClick: toggleRegion, children: regionIconMobile ? (regionIconMobile) : (jsxs("div", { className: "ids-header-1177-pro__region-picker__text", children: [jsx("span", { className: "ids-header-1177-pro__region-picker-icon" }), headerContext?.regionPickerText] })) }));
+    };
+    return (jsx("nav", { className: clsx("ids-header-1177-pro__nav", {
+            "ids-header-1177-pro__nav--fluid": headerContext?.fluid,
+            "ids-header-1177-pro__nav--unresponsive": headerContext?.unresponsive
+        }), children: jsxs("div", { className: clsx("ids-header-1177-pro__nav-inner", {
+                "ids-header-1177-pro__nav-inner--no-region-picker": headerContext?.hideRegionPicker
+            }), children: [renderRegionPicker(), children, mobileMenu] }) }));
+};
 
 export { IDSHeader1177ProNav };

package/components/header-1177-pro/header-1177-pro.d.ts

@@ -1,5 +1,23 @@
-import '@inera/ids-core/components/header-1177-pro/register.js';
-import { IDSHeader1177Pro as Header } from '@inera/ids-core/components/header-1177-pro/header-1177-pro-element.js';
-export declare const IDSHeader1177Pro: import("@lit-labs/react").ReactWebComponent<Header, {
-    onDidToggleRegion: string;
-}>;
+import React, { ReactNode, PropsWithChildren, AnchorHTMLAttributes } from "react";
+import "@inera/ids-design/components/header-1177-pro/header-1177-pro.css";
+import "@inera/ids-design/components/header-1177-pro/header-1177-pro-region-picker.css";
+interface IDSHeader1177ProProps extends React.HTMLAttributes<HTMLDivElement> {
+    regionPickerText?: string;
+    regionPickerExpanded?: boolean;
+    hideRegionPicker?: boolean;
+    fluid?: boolean;
+    unresponsive?: boolean;
+    logoText?: string;
+    srLogoLabel?: string;
+    logoHref?: string;
+    logoProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
+    onToggleRegion?: (isExpanded: boolean) => void;
+    avatar?: ReactNode;
+    logo?: ReactNode;
+    regionIcon?: ReactNode;
+    items?: ReactNode;
+    skipToContentLink?: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSHeader1177Pro: React.FC<PropsWithChildren<IDSHeader1177ProProps>>;
+export {};

package/components/header-1177-pro/header-1177-pro.js

@@ -1,15 +1,40 @@
-import * as React from 'react';
-import '@inera/ids-core/components/header-1177-pro/register.js';
-import { IDSHeader1177Pro as IDSHeader1177Pro$1 } from '@inera/ids-core/components/header-1177-pro/header-1177-pro-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/header-1177-pro/header-1177-pro.css';
+import '@inera/ids-design/components/header-1177-pro/header-1177-pro-region-picker.css';
+import { HeaderProvider } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177Pro = createComponent({
-    tagName: 'ids-header-1177-pro',
-    elementClass: IDSHeader1177Pro$1,
-    react: React,
-    events: {
-        onDidToggleRegion: 'didToggleRegion'
-    }
-});
+const IDSHeader1177Pro = ({ regionPickerText = "Välj region", hideRegionPicker: initialRegionPicker = false, regionPickerExpanded: initialExpanded = false, fluid = false, unresponsive = false, logoText = "för vårdpersonal", srLogoLabel = "Logotyp", logoHref = "", logoProps = {}, onToggleRegion, avatar, logo, regionIcon, items, skipToContentLink, className, children }) => {
+    const [isRegionExpanded, setIsRegionExpanded] = useState(initialExpanded);
+    const [hideRegionPicker, setHideRegionPicker] = useState(initialRegionPicker);
+    useEffect(() => {
+        if (avatar) {
+            // No region picker when avatar
+            setIsRegionExpanded(false);
+            setHideRegionPicker(true);
+        }
+        else {
+            setHideRegionPicker(initialRegionPicker);
+        }
+    }, [avatar]);
+    const toggleRegion = () => {
+        const newValue = !isRegionExpanded;
+        setIsRegionExpanded(newValue);
+        onToggleRegion?.(newValue);
+    };
+    return (jsx(HeaderProvider, { value: {
+            unresponsive,
+            fluid,
+            hideRegionPicker,
+            regionPickerText
+        }, children: jsxs("header", { className: clsx("ids-header-1177-pro", {
+                "ids-header-1177-pro--unresponsive": unresponsive,
+                "ids-header-1177-pro--fluid": fluid
+            }, className), children: [skipToContentLink && (jsx("div", { className: "ids-header-1177-pro__skip-to-content", children: skipToContentLink })), jsx("div", { className: "ids-header-1177-pro__container", children: jsxs("div", { className: "ids-header-1177-pro__inner", children: [jsxs("div", { className: "ids-header-1177-pro__logo-col", children: [jsx("div", { className: "ids-header-1177-pro__logo", children: logo ? (logo) : (jsx("a", { className: "ids-header-1177-pro__logo-link", href: logoHref, "aria-label": srLogoLabel, ...logoProps })) }), jsx("div", { className: "ids-header-1177-pro__logo-text", children: logoText }), !hideRegionPicker && !avatar && (jsx("button", { className: clsx("ids-header-1177-pro__region-picker-button", {
+                                            "ids-header-1177-pro__region-picker-button--expanded": isRegionExpanded
+                                        }), onClick: toggleRegion, "aria-label": regionPickerText, "aria-expanded": isRegionExpanded, children: regionIcon || regionPickerText }))] }), jsx("div", { className: "ids-header-1177-pro__items", children: jsxs("div", { className: "ids-header-1177-pro__items-inner", children: [items, " ", avatar] }) })] }) }), children] }) }));
+};
 
 export { IDSHeader1177Pro };

package/components/header-inera/header-inera-item.d.ts

@@ -1,2 +1,13 @@
-import { IDSHeaderIneraItem as HeaderItem } from '@inera/ids-core/components/header-inera/header-inera-item-element.js';
-export declare const IDSHeaderIneraItem: import("@lit-labs/react").ReactWebComponent<HeaderItem, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/header-inera/header-inera-item.css";
+interface IDSHeaderIneraItemProps {
+    mobile?: boolean;
+    separatorLeft?: boolean;
+    icon?: string;
+    text?: string;
+    href?: string;
+    link?: ReactNode;
+    onClick?: () => void;
+}
+export declare const IDSHeaderIneraItem: React.FC<IDSHeaderIneraItemProps>;
+export {};

package/components/header-inera/header-inera-item.js

@@ -1,11 +1,27 @@
-import * as React from 'react';
-import { IDSHeaderIneraItem as IDSHeaderIneraItem$1 } from '@inera/ids-core/components/header-inera/header-inera-item-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { isValidElement, cloneElement } from 'react';
+import '@inera/ids-design/components/header-inera/header-inera-item.css';
+import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeaderIneraItem = createComponent({
-    tagName: 'ids-header-inera-item',
-    elementClass: IDSHeaderIneraItem$1,
-    react: React,
-});
+const IDSHeaderIneraItem = ({ mobile = false, separatorLeft = false, icon = "", text = "", href = "", link, onClick, ...props }) => {
+    const headerContext = useHeaderContext();
+    const classNames = clsx("ids-header-inera-item", {
+        "ids-header-inera-item--mobile": mobile,
+        "ids-header-inera-item__separator": separatorLeft,
+        "ids-header-inera-item--unresponsive": headerContext?.unresponsive
+    });
+    const renderContent = () => (jsxs(Fragment, { children: [jsx("div", { className: "ids-header-inera-item__icon", "aria-label": text, children: icon && jsx("span", { className: `ids-icon-${icon}` }) }), jsx("div", { className: "ids-header-inera-item__text", children: text })] }));
+    if (link && isValidElement(link)) {
+        return cloneElement(link, {
+            ...props,
+            style: { textDecoration: "none" },
+            className: clsx(link.props.className, classNames),
+            children: renderContent()
+        });
+    }
+    return onClick ? (jsx("button", { className: classNames, onClick: onClick, ...props, children: renderContent() })) : (jsx("a", { className: classNames, href: href, style: { textDecoration: "none" }, ...props, children: renderContent() }));
+};
 
 export { IDSHeaderIneraItem };

package/components/header-inera/header-inera-nav-item.d.ts

@@ -1,2 +1,15 @@
-import { IDSHeaderIneraNavItem as HeaderNavItem } from '@inera/ids-core/components/header-inera/header-inera-nav-item-element.js';
-export declare const IDSHeaderIneraNavItem: import("@lit-labs/react").ReactWebComponent<HeaderNavItem, {}>;
+import React, { ReactNode, ReactElement } from "react";
+import "@inera/ids-design/components/header-inera/header-inera-nav-item.css";
+import { IDSLinkProps } from "../link/link";
+export interface IDSHeaderIneraNavItemProps {
+    label?: string;
+    active?: boolean;
+    expanded?: boolean;
+    notification?: ReactNode;
+    children?: ReactNode;
+    col1?: ReactElement<IDSLinkProps>[];
+    col2?: ReactElement<IDSLinkProps>[];
+    col3?: ReactElement<IDSLinkProps>[];
+    col4?: ReactNode;
+}
+export declare const IDSHeaderIneraNavItem: React.FC<IDSHeaderIneraNavItemProps>;

package/components/header-inera/header-inera-nav-item.js

@@ -1,11 +1,57 @@
-import * as React from 'react';
-import { IDSHeaderIneraNavItem as IDSHeaderIneraNavItem$1 } from '@inera/ids-core/components/header-inera/header-inera-nav-item-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState, useRef, useEffect } from 'react';
+import '@inera/ids-design/components/header-inera/header-inera-nav-item.css';
+import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import { useElementId } from '../utils/hooks/useElementId.js';
 
-const IDSHeaderIneraNavItem = createComponent({
-    tagName: 'ids-header-inera-nav-item',
-    elementClass: IDSHeaderIneraNavItem$1,
-    react: React,
-});
+const IDSHeaderIneraNavItem = ({ label = "", active = false, expanded = false, notification, children, col1, col2, col3, col4 }) => {
+    const headerContext = useHeaderContext();
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const containerRef = useRef(null);
+    const contentId = useElementId();
+    const handleClickOutside = (event) => {
+        if (containerRef.current && !containerRef.current.contains(event.target)) {
+            setIsExpanded(false);
+        }
+    };
+    useEffect(() => {
+        setIsExpanded(expanded);
+        document.addEventListener("click", handleClickOutside);
+        return () => {
+            document.removeEventListener("click", handleClickOutside);
+        };
+    }, [expanded]);
+    const renderNavItem = () => {
+        if (label) {
+            return (jsxs("button", { "aria-controls": contentId, "aria-expanded": isExpanded, className: clsx("ids-header-inera-nav-item__button", {
+                    "ids-header-inera-nav-item__button--expanded": isExpanded,
+                    "ids-header-inera-nav-item__button--active": active
+                }), onClick: () => setIsExpanded(prev => !prev), children: [label, " ", notification] }));
+        }
+        else {
+            return (jsxs("span", { className: clsx("ids-header-inera-nav-item__link", {
+                    "ids-header-inera-nav-item__link--active": active
+                }), children: [children, " ", notification] }));
+        }
+    };
+    const renderLink = (link) => {
+        return React__default.isValidElement(link)
+            ? React__default.cloneElement(link, { activeIcon: true, block: true, colorPreset: 2 })
+            : link;
+    };
+    const renderContent = () => {
+        if (!isExpanded)
+            return null;
+        return (jsx("div", { id: contentId, className: "ids-header-inera-nav-item__content", children: jsxs("div", { className: clsx("ids-header-inera-nav-item__content-inner", {
+                    "ids-header-inera-nav-item__content-inner--fluid": headerContext?.fluid
+                }), children: [jsx("div", { className: "ids-header-inera-nav-item__content-col", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-inera-nav-item__wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-inera-nav-item__content-col", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-inera-nav-item__wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-inera-nav-item__content-col", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-inera-nav-item__wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-inera-nav-item__content-col", children: col4 })] }) }));
+    };
+    return (jsxs("div", { ref: containerRef, className: clsx("ids-header-inera-nav-item", {
+            "ids-header-inera-nav-item--fluid": headerContext?.fluid,
+            "ids-header-inera-nav-item--unresponsive": headerContext?.unresponsive
+        }), children: [renderNavItem(), renderContent()] }));
+};
 
 export { IDSHeaderIneraNavItem };

package/components/header-inera/header-inera-nav-mobile.d.ts

@@ -1,5 +1,11 @@
-import { IDSHeaderIneraNavMobile as HeaderNavMobile } from '@inera/ids-core/components/header-inera/header-inera-nav-mobile-element.js';
-export declare const IDSHeaderIneraNavMobile: import("@lit-labs/react").ReactWebComponent<HeaderNavMobile, {
-    onClosed: string;
-    onExpanded: string;
-}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/header-inera/header-inera-nav-mobile.css";
+export interface IDSHeaderIneraNavMobileProps {
+    expanded?: boolean;
+    persistent?: boolean;
+    srLabel?: string;
+    children?: ReactNode;
+    onExpanded?: () => void;
+    onClosed?: () => void;
+}
+export declare const IDSHeaderIneraNavMobile: React.FC<IDSHeaderIneraNavMobileProps>;

package/components/header-inera/header-inera-nav-mobile.js

@@ -1,15 +1,47 @@
-import * as React from 'react';
-import { IDSHeaderIneraNavMobile as IDSHeaderIneraNavMobile$1 } from '@inera/ids-core/components/header-inera/header-inera-nav-mobile-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import '@inera/ids-design/components/header-inera/header-inera-nav-mobile.css';
+import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeaderIneraNavMobile = createComponent({
-    tagName: 'ids-header-inera-nav-mobile',
-    elementClass: IDSHeaderIneraNavMobile$1,
-    react: React,
-    events: {
-        onClosed: 'closed',
-        onExpanded: 'expanded'
-    }
-});
+const IDSHeaderIneraNavMobile = ({ expanded = false, persistent = false, srLabel = "Meny", children, onExpanded, onClosed }) => {
+    const headerContext = useHeaderContext();
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const containerRef = useRef(null);
+    const menuRef = useRef(null);
+    useEffect(() => {
+        if (!persistent) {
+            const links = menuRef.current?.querySelectorAll("a") || [];
+            links.forEach(link => {
+                link.addEventListener("click", handleCloseMenu);
+            });
+            return () => {
+                links.forEach(link => {
+                    link.removeEventListener("click", handleCloseMenu);
+                });
+            };
+        }
+    }, [isExpanded, persistent]);
+    const handleCloseMenu = () => {
+        if (isExpanded) {
+            toggleExpanded();
+        }
+    };
+    const toggleExpanded = () => {
+        const newExpanded = !isExpanded;
+        setIsExpanded(newExpanded);
+        if (newExpanded) {
+            onExpanded?.();
+        }
+        else {
+            onClosed?.();
+        }
+    };
+    return (jsxs("div", { ref: containerRef, className: clsx("ids-header-inera-nav-mobile", {
+            "ids-header-inera-nav-mobile--expanded": isExpanded,
+            "ids-header-inera-nav-mobile--unresponsive": headerContext?.unresponsive
+        }), children: [jsx("button", { "aria-label": srLabel, "aria-expanded": isExpanded, onClick: toggleExpanded, className: "ids-header-inera-nav-mobile__button", children: jsx("div", { className: "ids-hamburger", children: jsx("div", { className: "ids-hamburger__lines" }) }) }), isExpanded && (jsx("nav", { className: "ids-header-inera-nav-mobile__menu-items", ref: menuRef, children: children }))] }));
+};
 
 export { IDSHeaderIneraNavMobile };

package/components/header-inera/header-inera-nav.d.ts

@@ -1,2 +1,7 @@
-import { IDSHeaderIneraNav as HeaderNav } from '@inera/ids-core/components/header-inera/header-inera-nav-element.js';
-export declare const IDSHeaderIneraNav: import("@lit-labs/react").ReactWebComponent<HeaderNav, {}>;
+import React from "react";
+import "@inera/ids-design/components/header-inera/header-inera-nav.css";
+export interface IDSHeaderIneraNavProps {
+    srText?: string;
+    children?: React.ReactNode;
+}
+export declare const IDSHeaderIneraNav: React.FC<IDSHeaderIneraNavProps>;

package/components/header-inera/header-inera-nav.js

@@ -1,11 +1,16 @@
-import * as React from 'react';
-import { IDSHeaderIneraNav as IDSHeaderIneraNav$1 } from '@inera/ids-core/components/header-inera/header-inera-nav-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import '@inera/ids-design/components/header-inera/header-inera-nav.css';
+import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeaderIneraNav = createComponent({
-    tagName: 'ids-header-inera-nav',
-    elementClass: IDSHeaderIneraNav$1,
-    react: React,
-});
+const IDSHeaderIneraNav = ({ srText = "Huvudmeny", children }) => {
+    const headerContext = useHeaderContext();
+    const className = clsx("ids-header-inera-nav", {
+        "ids-header-inera-nav--fluid": headerContext?.fluid,
+        "ids-header-inera-nav--unresponsive": headerContext?.unresponsive
+    });
+    return (jsx("nav", { className: className, "aria-label": srText, children: jsx("div", { className: "ids-header-inera-nav__nav-items", children: children }) }));
+};
 
 export { IDSHeaderIneraNav };

package/components/header-inera/header-inera.d.ts

@@ -1,3 +1,16 @@
-import "@inera/ids-core/components/header-inera/register.js";
-import { IDSHeaderInera as Header } from "@inera/ids-core/components/header-inera/header-inera-element.js";
-export declare const IDSHeaderInera: import("@lit-labs/react").ReactWebComponent<Header, {}>;
+import React, { ReactNode, PropsWithChildren, AnchorHTMLAttributes } from "react";
+import "@inera/ids-design/components/header-inera/header-inera.css";
+interface IDSHeaderIneraProps extends React.HTMLAttributes<HTMLDivElement> {
+    logoHref?: string;
+    logoProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
+    srLogoLabel?: string;
+    fluid?: boolean;
+    unresponsive?: boolean;
+    items?: ReactNode;
+    mobileMenu?: ReactNode;
+    skipToContent?: ReactNode;
+    logo?: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSHeaderInera: React.FC<PropsWithChildren<IDSHeaderIneraProps>>;
+export {};

package/components/header-inera/header-inera.js

@@ -1,12 +1,19 @@
-import * as React from 'react';
-import '@inera/ids-core/components/header-inera/register.js';
-import { IDSHeaderInera as IDSHeaderInera$1 } from '@inera/ids-core/components/header-inera/header-inera-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import '@inera/ids-design/components/header-inera/header-inera.css';
+import { HeaderProvider } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeaderInera = createComponent({
-    tagName: "ids-header-inera",
-    elementClass: IDSHeaderInera$1,
-    react: React
-});
+const IDSHeaderInera = ({ logoHref = "", logoProps = {}, srLogoLabel = "Logotyp inera", fluid = false, unresponsive = false, items, mobileMenu, skipToContent, logo, className, children }) => {
+    return (jsx(HeaderProvider, { value: {
+            unresponsive,
+            fluid,
+            hideRegionPicker: true,
+            regionPickerText: ""
+        }, children: jsxs("header", { className: clsx("ids-header-inera", {
+                "ids-header-inera--unresponsive": unresponsive,
+                "ids-header-inera--fluid": fluid
+            }, className), children: [skipToContent && jsx("div", { className: "ids-header-inera__skip-to-content", children: skipToContent }), jsxs("div", { className: "ids-header-inera__inner", children: [logoHref ? (jsx("a", { href: logoHref, "aria-label": srLogoLabel, className: "ids-header-inera__logo", ...logoProps })) : logo ? (jsx("div", { className: "ids-header-inera__logo-custom", children: logo })) : (jsx("div", { className: "ids-header-inera__logo" })), jsxs("div", { className: "ids-header-inera__items", children: [items, " ", mobileMenu] })] }), children] }) }));
+};
 
 export { IDSHeaderInera };

package/components/header-inera-admin/header-inera-admin-avatar-mobile.d.ts

@@ -1,2 +1,9 @@
-import { IDSHeaderIneraAdminAvatarMobile as HeaderAvatarMobile } from '@inera/ids-core/components/header-inera-admin/header-inera-admin-avatar-mobile-element.js';
-export declare const IDSHeaderIneraAdminAvatarMobile: import("@lit-labs/react").ReactWebComponent<HeaderAvatarMobile, {}>;
+import React from "react";
+import "@inera/ids-design/components/header-inera-admin/header-inera-admin-avatar-mobile.css";
+interface IDSHeaderIneraAdminAvatarMobileProps {
+    username?: string;
+    unit?: string;
+    children?: React.ReactNode;
+}
+export declare const IDSHeaderIneraAdminAvatarMobile: React.FC<IDSHeaderIneraAdminAvatarMobileProps>;
+export {};

package/components/header-inera-admin/header-inera-admin-avatar-mobile.js

@@ -1,11 +1,14 @@
-import * as React from 'react';
-import { IDSHeaderIneraAdminAvatarMobile as IDSHeaderIneraAdminAvatarMobile$1 } from '@inera/ids-core/components/header-inera-admin/header-inera-admin-avatar-mobile-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import '@inera/ids-design/components/header-inera-admin/header-inera-admin-avatar-mobile.css';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import clsx from 'clsx';
 
-const IDSHeaderIneraAdminAvatarMobile = createComponent({
-    tagName: 'ids-header-inera-admin-avatar-mobile',
-    elementClass: IDSHeaderIneraAdminAvatarMobile$1,
-    react: React
-});
+const IDSHeaderIneraAdminAvatarMobile = ({ username = "", unit = "", children }) => {
+    const headerContext = useHeaderContext();
+    return (jsxs("div", { className: clsx("ids-header-inera-admin-avatar-mobile", {
+            "ids-header-inera-admin-avatar-mobile--unresponsive": headerContext?.unresponsive
+        }), children: [username && (jsx(Fragment, { children: jsxs("div", { className: "ids-header-inera-admin-avatar-mobile__user-info", children: [jsx("div", { className: "ids-header-inera-admin-avatar-mobile__username", children: username }), jsx("div", { className: "ids-header-inera-admin-avatar-mobile__unit", children: unit })] }) })), jsx("div", { className: "ids-header-inera-admin-avatar-mobile__links", children: children })] }));
+};
 
 export { IDSHeaderIneraAdminAvatarMobile };

package/components/header-inera-admin/header-inera-admin-avatar.d.ts

@@ -1,2 +1,12 @@
-import { IDSHeaderIneraAdminAvatar as HeaderAvatar } from "@inera/ids-core/components/header-inera-admin/header-inera-admin-avatar-element.js";
-export declare const IDSHeaderIneraAdminAvatar: import("@lit-labs/react").ReactWebComponent<HeaderAvatar, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/header-inera-admin/header-inera-admin-avatar.css";
+interface IDSHeaderIneraAdminAvatarProps {
+    username?: string;
+    unit?: string;
+    maxwidth?: string;
+    onExpanded?: () => void;
+    onClosed?: () => void;
+    children?: ReactNode;
+}
+export declare const IDSHeaderIneraAdminAvatar: React.FC<IDSHeaderIneraAdminAvatarProps>;
+export {};

package/components/header-inera-admin/header-inera-admin-avatar.js

@@ -1,11 +1,35 @@
-import * as React from 'react';
-import { IDSHeaderIneraAdminAvatar as IDSHeaderIneraAdminAvatar$1 } from '@inera/ids-core/components/header-inera-admin/header-inera-admin-avatar-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import '@inera/ids-design/components/header-inera-admin/header-inera-admin-avatar.css';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import clsx from 'clsx';
 
-const IDSHeaderIneraAdminAvatar = createComponent({
-    tagName: "ids-header-inera-admin-avatar",
-    elementClass: IDSHeaderIneraAdminAvatar$1,
-    react: React
-});
+const IDSHeaderIneraAdminAvatar = ({ username = "", unit = "", maxwidth = "", onExpanded, onClosed, children }) => {
+    const headerContext = useHeaderContext();
+    const [expanded, setExpanded] = useState(false);
+    const ref = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                if (expanded)
+                    toggleExpanded();
+            }
+        };
+        document.addEventListener("click", handleClickOutside);
+        return () => document.removeEventListener("click", handleClickOutside);
+    }, [expanded]);
+    const toggleExpanded = () => {
+        const newExpanded = !expanded;
+        setExpanded(newExpanded);
+        newExpanded ? onExpanded?.() : onClosed?.();
+    };
+    return (jsx("div", { ref: ref, className: clsx("ids-header-inera-admin-avatar", {
+            "ids-header-inera-admin-avatar--fluid": headerContext?.fluid,
+            "ids-header-inera-admin-avatar--unresponsive": headerContext?.unresponsive
+        }), children: jsxs("div", { className: "ids-header-inera-admin-avatar__inner", children: [jsxs("button", { "aria-expanded": expanded, onClick: toggleExpanded, className: "ids-header-inera-admin-avatar__button", children: [jsxs("div", { className: "ids-header-inera-admin-avatar__button-main", children: [jsx("div", { className: "ids-header-inera-admin-avatar__username", style: maxwidth ? { maxWidth: maxwidth } : undefined, children: username }), jsx("div", { className: "ids-header-inera-admin-avatar__unit", style: maxwidth ? { maxWidth: maxwidth } : undefined, children: unit })] }), jsx("div", { className: clsx("ids-header-inera-admin-avatar__chevron", {
+                                "ids-header-inera-admin-avatar__chevron--expanded": expanded
+                            }) })] }), expanded && jsx("div", { className: "ids-header-inera-admin-avatar__menu", children: children })] }) }));
+};
 
 export { IDSHeaderIneraAdminAvatar };

package/components/header-inera-admin/header-inera-admin-item.d.ts

@@ -1,2 +1,13 @@
-import { IDSHeaderIneraAdminItem as HeaderItem } from '@inera/ids-core/components/header-inera-admin/header-inera-admin-item-element.js';
-export declare const IDSHeaderIneraAdminItem: import("@lit-labs/react").ReactWebComponent<HeaderItem, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/header-inera-admin/header-inera-admin-item.css";
+interface IDSHeaderIneraAdminItemProps {
+    mobile?: boolean;
+    separatorLeft?: boolean;
+    icon?: string;
+    text?: string;
+    href?: string;
+    link?: ReactNode;
+    onClick?: () => void;
+}
+export declare const IDSHeaderIneraAdminItem: React.FC<IDSHeaderIneraAdminItemProps>;
+export {};