@inera/ids-react 6.1.0 → 7.0.0

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

@@ -1,15 +1,44 @@
-import * as React from 'react';
-import '@inera/ids-core/components/header-1177/register.js';
-import { IDSHeader1177 as IDSHeader1177$1 } from '@inera/ids-core/components/header-1177/header-1177-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/header-1177/header-1177.css';
+import { HeaderProvider } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177 = createComponent({
-    tagName: 'ids-header-1177',
-    elementClass: IDSHeader1177$1,
-    react: React,
-    events: {
-        onDidToggleRegion: 'didToggleRegion'
-    }
-});
+const IDSHeader1177 = ({ regionPickerText = "Välj region", srLogoLabel = "Logotyp", hideRegionPicker: initialRegionPicker = false, regionPickerExpanded: initialExpanded = false, fluid = false, unresponsive = false, logoHref = "", logoProps = {}, logo, regionIcon, skipToContentLink, onToggleRegion, items, avatar, mobileMenu, className, children }) => {
+    const [regionPickerExpanded, setRegionPickerExpanded] = useState(initialExpanded);
+    const [hideRegionPicker, setHideRegionPicker] = useState(initialRegionPicker);
+    const regionIconRef = useRef(null);
+    useEffect(() => {
+        if (avatar) {
+            // No region picker when avatar
+            setRegionPickerExpanded(false);
+            setHideRegionPicker(true);
+        }
+        else {
+            setHideRegionPicker(initialRegionPicker);
+        }
+    }, [avatar]);
+    const toggleRegion = () => {
+        setRegionPickerExpanded(prev => !prev);
+        onToggleRegion?.(!regionPickerExpanded);
+    };
+    const renderRegion = () => {
+        if (hideRegionPicker)
+            return null;
+        return (jsxs("div", { className: clsx("ids-header-1177__region", {
+                "ids-header-1177__region--selected": !!regionIcon
+            }), children: [jsx("span", { className: "ids-header-1177__region-icon", ref: regionIconRef, children: regionIcon }), jsx("span", { className: "ids-header-1177__region-picker", children: jsx("button", { onClick: toggleRegion, className: clsx("ids-header-1177__region-picker__button", {
+                            "ids-header-1177__region-picker__button--expanded": regionPickerExpanded
+                        }), "aria-label": regionPickerText, children: jsx("span", { className: "ids-header-1177__region-picker__text", children: regionPickerText }) }) })] }));
+    };
+    const renderLogo = () => {
+        return (jsx("div", { className: "ids-header-1177__logo-wrapper", children: jsx("div", { className: "ids-header-1177__logo", children: logo ? (jsx("span", { className: "ids-header-1177__link", children: logo })) : (jsx("a", { className: "ids-header-1177__logo-link", href: logoHref, "aria-label": srLogoLabel, ...logoProps })) }) }));
+    };
+    return (jsx(HeaderProvider, { value: { unresponsive, fluid }, children: jsxs("header", { className: clsx("ids-header-1177", {
+                "ids-header-1177--unresponsive": unresponsive,
+                "ids-header-1177--fluid": fluid
+            }, className), children: [skipToContentLink && (jsx("div", { className: "ids-header-1177__skip-to-content", children: skipToContentLink })), jsx("div", { className: "ids-header-1177__container", children: jsxs("div", { className: "ids-header-1177__inner", children: [jsxs("div", { className: "ids-header-1177__inner-left", children: [renderLogo(), renderRegion()] }), jsx("div", { className: "ids-header-1177__inner-right", children: jsxs("div", { className: "ids-header-1177__items", children: [items, " ", avatar, mobileMenu && jsx("div", { className: "ids-header-1177__mobile-menu", children: mobileMenu })] }) })] }) }), children] }) }));
+};
 
 export { IDSHeader1177 };

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

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

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

@@ -1,11 +1,9 @@
-import * as React from 'react';
-import { IDSHeader1177AdminAvatarMobile as IDSHeader1177AdminAvatarMobile$1 } from '@inera/ids-core/components/header-1177-admin/header-1177-admin-avatar-mobile-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import '@inera/ids-design/components/header-1177-admin/header-1177-admin-avatar-mobile.css';
 
-const IDSHeader1177AdminAvatarMobile = createComponent({
-    tagName: 'ids-header-1177-admin-avatar-mobile',
-    elementClass: IDSHeader1177AdminAvatarMobile$1,
-    react: React
-});
+const IDSHeader1177AdminAvatarMobile = ({ username = "", unit = "", children }) => {
+    return (jsx("div", { className: "ids-header-1177-admin__avatar-mobile", children: username || unit ? (jsxs(Fragment, { children: [jsxs("div", { className: "ids-header-1177-admin__avatar-mobile__logged-in", children: [jsx("div", { className: "ids-header-1177-admin__avatar-mobile__username", children: username }), jsx("div", { className: "ids-header-1177-admin__avatar-mobile__unit", children: unit })] }), children] })) : (jsx(Fragment, { children: children })) }));
+};
 
 export { IDSHeader1177AdminAvatarMobile };

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

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

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

@@ -1,11 +1,34 @@
-import * as React from 'react';
-import { IDSHeader1177AdminAvatar as IDSHeader1177AdminAvatar$1 } from '@inera/ids-core/components/header-1177-admin/header-1177-admin-avatar-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-1177-admin/header-1177-admin-avatar.css';
+import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177AdminAvatar = createComponent({
-    tagName: 'ids-header-1177-admin-avatar',
-    elementClass: IDSHeader1177AdminAvatar$1,
-    react: React
-});
+const IDSHeader1177AdminAvatar = ({ username = "", unit = "", persistent = false, children }) => {
+    const headerContext = useHeaderContext();
+    const [expanded, setExpanded] = useState(false);
+    const avatarRef = useRef(null);
+    const toggleExpanded = () => {
+        setExpanded(prev => !prev);
+    };
+    const handleClickOutside = (event) => {
+        if (!persistent && avatarRef.current && !avatarRef.current.contains(event.target)) {
+            setExpanded(false);
+        }
+    };
+    useEffect(() => {
+        document.addEventListener("click", handleClickOutside);
+        return () => {
+            document.removeEventListener("click", handleClickOutside);
+        };
+    }, [persistent]);
+    return (jsxs("div", { ref: avatarRef, className: clsx("ids-header-1177-admin__avatar", {
+            "ids-header-1177-admin__avatar--unresponsive": headerContext?.unresponsive,
+            "ids-header-1177-admin__avatar--expanded": expanded
+        }), children: [jsxs("button", { onClick: toggleExpanded, "aria-expanded": expanded, className: "ids-header-1177-admin__avatar-box", children: [jsx("div", { className: "ids-header-1177-admin__avatar-icon" }), jsxs("div", { className: "ids-header-1177-admin__avatar-content", children: [jsx("div", { className: "ids-header-1177-admin__avatar-content__name", title: username, children: username }), unit && (jsx("div", { className: "ids-header-1177-admin__avatar-content__unit", title: unit, children: unit }))] }), jsx("div", { className: clsx("ids-header-1177-admin__avatar-chevron", {
+                            "ids-header-1177-admin__avatar-chevron--expanded": expanded
+                        }) })] }), jsx("div", { className: "ids-header-1177-admin__avatar-dropdown", children: children })] }));
+};
 
 export { IDSHeader1177AdminAvatar };

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

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

package/components/header-1177-admin/header-1177-admin-item.js

@@ -1,11 +1,29 @@
-import * as React from 'react';
-import { IDSHeader1177AdminItem as IDSHeader1177AdminItem$1 } from '@inera/ids-core/components/header-1177-admin/header-1177-admin-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-1177-admin/header-1177-admin-item.css';
+import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177AdminItem = createComponent({
-    tagName: 'ids-header-1177-admin-item',
-    elementClass: IDSHeader1177AdminItem$1,
-    react: React,
-});
+const IDSHeader1177AdminItem = ({ mobile = false, href = "", text = "", icon, link, onClick, ...props }) => {
+    const headerContext = useHeaderContext();
+    const classNames = clsx("ids-header-1177-admin__items__item", {
+        "ids-header-1177-admin__items__item--unresponsive": headerContext?.unresponsive,
+        "ids-header-1177-admin__items__item--mobile": mobile
+    });
+    const renderContent = () => {
+        return (jsxs(Fragment, { children: [jsx("div", { className: "ids-header-1177-admin__items__item-icon", "aria-label": text, children: jsx("span", { className: `ids-icon-${icon}` }) }), jsx("div", { className: "ids-header-1177-admin__items__item-text", children: text })] }));
+    };
+    if (link && isValidElement(link)) {
+        return cloneElement(link, {
+            ...props,
+            className: clsx(link.props.className, classNames),
+            children: renderContent()
+        });
+    }
+    return onClick ? (jsx("button", { className: classNames, onClick: onClick, style: {
+            cursor: "pointer"
+        }, ...props, children: renderContent() })) : (jsx("a", { className: classNames, href: href, ...props, children: renderContent() }));
+};
 
 export { IDSHeader1177AdminItem };

package/components/header-1177-admin/header-1177-admin-nav-item.d.ts

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

package/components/header-1177-admin/header-1177-admin-nav-item.js

@@ -1,11 +1,27 @@
-import * as React from 'react';
-import { IDSHeader1177AdminNavItem as IDSHeader1177AdminNavItem$1 } from '@inera/ids-core/components/header-1177-admin/header-1177-admin-nav-item-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState } from 'react';
+import '@inera/ids-design/components/header-1177-admin/header-1177-admin-nav-item.css';
+import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177AdminNavItem = createComponent({
-    tagName: 'ids-header-1177-admin-nav-item',
-    elementClass: IDSHeader1177AdminNavItem$1,
-    react: React,
-});
+const IDSHeader1177AdminNavItem = ({ active = false, expanded = false, label = "", col1, col2, col3, col4, children }) => {
+    const headerContext = useHeaderContext();
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const toggleExpanded = () => {
+        setIsExpanded(prev => !prev);
+    };
+    const renderLink = (link) => {
+        return React__default.isValidElement(link)
+            ? React__default.cloneElement(link, { activeIcon: true, block: true, colorPreset: 1 })
+            : link;
+    };
+    const renderDropdown = () => isExpanded && (jsx("div", { style: { marginTop: "0.125rem" }, id: "ids-header-1177-admin-nav-dropdown", className: "ids-header-1177-admin__items__item-dropdown", children: jsxs("div", { className: "ids-header-1177-admin__items__item-dropdown__content", children: [jsx("div", { className: "ids-header-1177-admin__items__item-dropdown__content-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-1177-admin__items-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-admin__items__item-dropdown__content-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-1177-admin__items-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-admin__items__item-dropdown__content-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-1177-admin__items-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-admin__items__item-dropdown__content-col-4", children: col4?.map((link, idx) => (jsx("div", { className: "ids-header-1177-admin__items-wrapper", children: renderLink(link) }, idx))) })] }) }));
+    return (jsxs("div", { className: clsx("ids-header-1177-admin__nav-item", {
+            "ids-header-1177-admin__nav-item--fluid": headerContext?.fluid,
+            "ids-header-1177-admin__nav-item--unresponsive": headerContext?.unresponsive,
+            "ids-header-1177-admin__nav-item--active": active || isExpanded
+        }), children: [label ? (jsx("button", { onClick: toggleExpanded, "aria-expanded": isExpanded, "aria-controls": "ids-header-1177-admin-nav-dropdown", children: label })) : (children), renderDropdown()] }));
+};
 
 export { IDSHeader1177AdminNavItem };

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

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

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

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

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

@@ -1,3 +1,22 @@
-import '@inera/ids-core/components/header-1177-admin/register.js';
-import { IDSHeader1177Admin as Header } from '@inera/ids-core/components/header-1177-admin/header-1177-admin-element.js';
-export declare const IDSHeader1177Admin: import("@lit-labs/react").ReactWebComponent<Header, {}>;
+import React, { AnchorHTMLAttributes, ReactNode } from "react";
+import "@inera/ids-design/components/header-1177-admin/header-1177-admin.css";
+interface IDSHeader1177AdminProps extends React.HTMLAttributes<HTMLDivElement> {
+    fluid?: boolean;
+    unresponsive?: boolean;
+    srLogoLabel?: string;
+    brandTextTop?: string;
+    brandText?: string;
+    brandTextBottom?: string;
+    logoHref?: string;
+    logoProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
+    srMobileMenuLabel?: string;
+    mobileMenuExpanded?: boolean;
+    logo?: ReactNode;
+    avatar?: ReactNode;
+    mobileMenu?: ReactNode;
+    items?: ReactNode;
+    skipToContentLink?: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSHeader1177Admin: React.FC<IDSHeader1177AdminProps>;
+export {};

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

@@ -1,12 +1,29 @@
-import * as React from 'react';
-import '@inera/ids-core/components/header-1177-admin/register.js';
-import { IDSHeader1177Admin as IDSHeader1177Admin$1 } from '@inera/ids-core/components/header-1177-admin/header-1177-admin-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-admin/header-1177-admin.css';
+import clsx from 'clsx';
+import { HeaderProvider } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177Admin = createComponent({
-    tagName: 'ids-header-1177-admin',
-    elementClass: IDSHeader1177Admin$1,
-    react: React
-});
+const IDSHeader1177Admin = ({ fluid = false, unresponsive = false, srLogoLabel = "Logotyp", brandTextTop = "", brandText = "", brandTextBottom = "", logoHref = "", logoProps = {}, srMobileMenuLabel = "Meny", mobileMenuExpanded: initialExpanded = false, logo, avatar, mobileMenu, items, skipToContentLink, className, children }) => {
+    const [mobileExpanded, setMobileExpanded] = useState(initialExpanded);
+    const renderLogo = () => {
+        return logo ? (logo) : (jsx("a", { className: "ids-header-1177-admin__logo-link", href: logoHref, "aria-label": srLogoLabel, ...logoProps }));
+    };
+    const renderHamburgerButton = () => {
+        if (!mobileMenu)
+            return null;
+        return (jsx("div", { className: "ids-header-1177-admin__mobile-menu", children: jsx("button", { onClick: () => setMobileExpanded(prev => !prev), "aria-label": srMobileMenuLabel, "aria-expanded": mobileExpanded, className: "ids-header-1177-admin__mobile-menu__btn", children: jsx("div", { className: "ids-hamburger", children: jsx("div", { className: "ids-hamburger__lines" }) }) }) }));
+    };
+    const renderMobileMenuItems = () => {
+        if (!mobileExpanded || !mobileMenu)
+            return null;
+        return jsx("div", { className: "ids-header-1177-admin__nav-mobile__menu-items", children: mobileMenu });
+    };
+    return (jsx(HeaderProvider, { value: { unresponsive, fluid }, children: jsxs("header", { className: clsx("ids-header-1177-admin", {
+                "ids-header-1177-admin--unresponsive": unresponsive,
+                "ids-header-1177-admin--fluid": fluid
+            }, className), style: { position: "relative", zIndex: 3 }, children: [jsxs("div", { className: "ids-header-1177-admin__container", children: [skipToContentLink && (jsx("div", { className: "ids-header-1177-admin__skip-to-content", children: skipToContentLink })), jsxs("div", { className: "ids-header-1177-admin__inner", children: [jsxs("div", { className: "ids-header-1177-admin__logo-col", children: [jsx("div", { className: "ids-header-1177-admin__logo", children: renderLogo() }), jsxs("div", { className: "ids-header-1177-admin__brand", children: [brandTextTop && (jsx("div", { className: "ids-header-1177-admin__brand-text---supplement", children: brandTextTop })), brandText && jsx("div", { className: "ids-header-1177-admin__brand-text", children: brandText }), brandTextBottom && (jsx("div", { className: "ids-header-1177-admin__brand-text---supplement", children: brandTextBottom }))] })] }), jsx("div", { className: "ids-header-1177-admin__items", children: jsxs("div", { className: "ids-header-1177-admin__items-inner", children: [avatar, items, renderHamburgerButton()] }) })] })] }), renderMobileMenuItems(), children] }) }));
+};
 
 export { IDSHeader1177Admin };

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

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

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

@@ -1,11 +1,9 @@
-import * as React from 'react';
-import { IDSHeader1177ProAvatarMobile as IDSHeader1177ProAvatarMobile$1 } from '@inera/ids-core/components/header-1177-pro/header-1177-pro-avatar-mobile-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import '@inera/ids-design/components/header-1177-pro/header-1177-pro-avatar-mobile.css';
 
-const IDSHeader1177ProAvatarMobile = createComponent({
-    tagName: 'ids-header-1177-pro-avatar-mobile',
-    elementClass: IDSHeader1177ProAvatarMobile$1,
-    react: React
-});
+const IDSHeader1177ProAvatarMobile = ({ username = "", unit = "", children }) => {
+    return (jsx("li", { className: "ids-header-1177-pro__avatar-mobile", children: username || unit ? (jsxs(Fragment, { children: [jsxs("div", { className: "ids-header-1177-pro__avatar-mobile__user-logged-in", children: [jsx("div", { className: "ids-header-1177-pro__avatar-mobile__username", children: username }), unit && jsx("div", { className: "ids-header-1177-pro__avatar-mobile__unit", children: unit })] }), children] })) : (jsx(Fragment, { children: children })) }));
+};
 
 export { IDSHeader1177ProAvatarMobile };

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

@@ -1,2 +1,10 @@
-import { IDSHeader1177ProAvatar as HeaderAvatar } from '@inera/ids-core/components/header-1177-pro/header-1177-pro-avatar-element.js';
-export declare const IDSHeader1177ProAvatar: import("@lit-labs/react").ReactWebComponent<HeaderAvatar, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/header-1177-pro/header-1177-pro-avatar.css";
+interface IDSHeader1177ProAvatarProps {
+    username?: string;
+    unit?: string;
+    persistent?: boolean;
+    children?: ReactNode;
+}
+export declare const IDSHeader1177ProAvatar: React.FC<IDSHeader1177ProAvatarProps>;
+export {};

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

@@ -1,11 +1,34 @@
-import * as React from 'react';
-import { IDSHeader1177ProAvatar as IDSHeader1177ProAvatar$1 } from '@inera/ids-core/components/header-1177-pro/header-1177-pro-avatar-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-1177-pro/header-1177-pro-avatar.css';
+import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177ProAvatar = createComponent({
-    tagName: 'ids-header-1177-pro-avatar',
-    elementClass: IDSHeader1177ProAvatar$1,
-    react: React
-});
+const IDSHeader1177ProAvatar = ({ username = "", unit = "", persistent = false, children }) => {
+    const headerContext = useHeaderContext();
+    const [expanded, setExpanded] = useState(false);
+    const avatarRef = useRef(null);
+    const toggleExpanded = () => {
+        setExpanded(prev => !prev);
+    };
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (avatarRef.current && !avatarRef.current.contains(event.target) && !persistent) {
+                setExpanded(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [persistent]);
+    return (jsxs("div", { ref: avatarRef, className: clsx("ids-header-1177-pro__avatar", {
+            "ids-header-1177-pro__avatar--unresponsive": headerContext?.unresponsive,
+            "ids-header-1177-pro__avatar--expanded": expanded
+        }), children: [jsxs("button", { onClick: toggleExpanded, "aria-controls": "ids-header-1177-pro__dropdown", "aria-expanded": expanded, className: "ids-header-1177-pro__avatar-box", children: [jsx("div", { className: "ids-header-1177-pro__avatar-icon" }), jsxs("div", { className: "ids-header-1177-pro__avatar-content", children: [jsx("div", { className: "ids-header-1177-pro__avatar-content__name", title: username, children: username }), jsx("div", { className: "ids-header-1177-pro__avatar-content__unit", title: unit, children: unit })] }), jsx("div", { className: clsx("ids-header-1177-pro__avatar-chevron", {
+                            "ids-header-1177-pro__avatar-chevron--expanded": expanded
+                        }) })] }), jsx("div", { id: "ids-header-1177-pro__dropdown", className: "ids-header-1177-pro__avatar-dropdown", children: children })] }));
+};
 
 export { IDSHeader1177ProAvatar };

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

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

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

@@ -1,11 +1,26 @@
-import * as React from 'react';
-import { IDSHeader1177ProItem as IDSHeader1177ProItem$1 } from '@inera/ids-core/components/header-1177-pro/header-1177-pro-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-1177-pro/header-1177-pro-item.css';
+import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177ProItem = createComponent({
-    tagName: 'ids-header-1177-pro-item',
-    elementClass: IDSHeader1177ProItem$1,
-    react: React,
-});
+const IDSHeader1177ProItem = ({ mobile = false, icon = "", text = "", href = "", link, onClick, ...props }) => {
+    const headerContext = useHeaderContext();
+    const classNames = clsx("ids-header-1177-pro__items__item", {
+        "ids-header-1177-pro__items__item--unresponsive": headerContext?.unresponsive,
+        "ids-header-1177-pro__items__item--mobile": mobile
+    });
+    const renderContent = () => (jsxs(Fragment, { children: [jsx("div", { className: "ids-header-1177-pro__items__item-icon", "aria-label": text, children: icon && jsx("span", { className: `ids-icon-${icon}` }) }), jsx("div", { className: "ids-header-1177-pro__items__item-text", children: text })] }));
+    if (link && isValidElement(link)) {
+        return cloneElement(link, {
+            ...props,
+            style: { position: "relative", textDecoration: "none" },
+            className: clsx(link.props.className, classNames),
+            children: renderContent()
+        });
+    }
+    return onClick ? (jsx("button", { className: classNames, onClick: onClick, style: { cursor: "pointer", padding: 0, margin: 0 }, ...props, children: renderContent() })) : (jsx("a", { className: classNames, href: href, style: { position: "relative", textDecoration: "none" }, ...props, children: renderContent() }));
+};
 
 export { IDSHeader1177ProItem };

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

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

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

@@ -1,11 +1,36 @@
-import * as React from 'react';
-import { IDSHeader1177ProNavItem as IDSHeader1177ProNavItem$1 } from '@inera/ids-core/components/header-1177-pro/header-1177-pro-nav-item-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState } from 'react';
+import '@inera/ids-design/components/header-1177-pro/header-1177-pro-nav-item.css';
+import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177ProNavItem = createComponent({
-    tagName: 'ids-header-1177-pro-nav-item',
-    elementClass: IDSHeader1177ProNavItem$1,
-    react: React,
-});
+const IDSHeader1177ProNavItem = ({ active = false, expanded = false, label = "", col1, col2, col3, col4, children }) => {
+    const headerContext = useHeaderContext();
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const toggleExpanded = () => {
+        setIsExpanded(prev => !prev);
+    };
+    const renderItem = () => {
+        if (label) {
+            return (jsx("button", { onClick: toggleExpanded, "aria-expanded": isExpanded, "aria-controls": "ids-dropdown", children: label }));
+        }
+        return children;
+    };
+    const renderLink = (link) => {
+        return React__default.isValidElement(link)
+            ? React__default.cloneElement(link, { activeIcon: true, block: true, colorPreset: 1 })
+            : link;
+    };
+    const renderDropdown = () => {
+        if (!isExpanded)
+            return null;
+        return (jsx("div", { id: "ids-dropdown", className: "ids-header-1177-pro__items__item-dropdown", children: jsxs("div", { className: "ids-header-1177-pro__items__item-dropdown__content", children: [jsx("div", { className: "ids-header-1177-pro__items__item-dropdown__content-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro__item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-pro__items__item-dropdown__content-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro__item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-pro__items__item-dropdown__content-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro__item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-pro__items__item-dropdown__content-col-4", children: col4?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro__item-wrapper", children: renderLink(link) }, idx))) })] }) }));
+    };
+    return (jsxs("div", { className: clsx("ids-header-1177-pro__nav-item", {
+            "ids-header-1177-pro__nav-item--unresponsive": headerContext?.unresponsive,
+            "ids-header-1177-pro__nav-item--active": active || isExpanded
+        }), children: [renderItem(), renderDropdown()] }));
+};
 
 export { IDSHeader1177ProNavItem };

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

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