@tedi-design-system/react 14.0.0-rc.1

package/src/community/components/layout/footer/footer.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { IconProps } from '../../icon/icon';
+export type FooterCategory = {
+    /**
+     * Category elements
+     */
+    elements?: React.ReactNode[];
+    heading: React.ReactNode;
+    icon?: string | IconProps;
+};
+export type FooterProps = {
+    /**
+     * Footer Categorys
+     */
+    categories: FooterCategory[];
+    /**
+     * Src and styles of logo to show
+     */
+    logo?: {
+        src: string;
+        alt: string;
+        style?: React.CSSProperties;
+    };
+    /**
+     * Additional classname
+     */
+    className?: string;
+    /**
+     * Additional element to display in the bottom of the footer
+     */
+    bottomElement?: React.ReactNode;
+};
+export declare const Footer: (props: FooterProps) => JSX.Element;
+export default Footer;

package/src/community/components/layout/footer/footer.es.js

@@ -0,0 +1,38 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import c from "../../../../../external/classnames/index.es.js";
+import { Print as u } from "../../../../tedi/components/misc/print/print.es.js";
+import { StretchContent as y } from "../../../../tedi/components/misc/stretch-content/stretch-content.es.js";
+import { Icon as N } from "../../icon/icon.es.js";
+import { Text as m } from "../../typography/text/text.es.js";
+import t from "./footer.module.scss.es.js";
+import { VerticalSpacing as h } from "../../../../tedi/components/layout/vertical-spacing/vertical-spacing.es.js";
+import { useLabels as v } from "../../../../tedi/providers/label-provider/use-labels.es.js";
+import { Row as b } from "../../../../tedi/components/layout/grid/row.es.js";
+import { Col as p } from "../../../../tedi/components/layout/grid/col.es.js";
+const B = (d) => {
+  const { logo: r, categories: s, className: l, bottomElement: n, ...o } = d, { getLabel: i } = v(), f = c(t.footer, l);
+  return /* @__PURE__ */ e(u, { visibility: "hide", children: /* @__PURE__ */ a("footer", { "data-name": "footer", ...o, className: f, children: [
+    /* @__PURE__ */ e(m, { className: "visually-hidden", element: "h2", children: i("footer.title") }),
+    /* @__PURE__ */ a("div", { className: t.footer__inner, children: [
+      s.map((g, _) => /* @__PURE__ */ e(y, { direction: "vertical", children: /* @__PURE__ */ e(x, { ...g }) }, _)),
+      r && /* @__PURE__ */ e("img", { className: t.footer__logo, src: r.src, alt: r.alt, style: r.style })
+    ] }),
+    n && /* @__PURE__ */ e(m, { color: "inverted", element: "div", className: t.footer__bottom, children: n })
+  ] }) });
+}, x = (d) => {
+  const { heading: r, icon: s, elements: l } = d, n = (o) => {
+    const i = { size: 16 }, f = typeof o == "string" ? { ...i, name: o } : { ...i, ...o };
+    return /* @__PURE__ */ e(N, { ...f });
+  };
+  return /* @__PURE__ */ a(b, { children: [
+    s && /* @__PURE__ */ e(p, { width: "auto", className: c("text-inverted", t["footer__category-icon"]), children: n(s) }),
+    /* @__PURE__ */ e(p, { width: "auto", children: /* @__PURE__ */ a(h, { className: c("text-small", t.footer__category), size: 0.5, children: [
+      /* @__PURE__ */ e(m, { color: "inverted", modifiers: ["bold", "normal"], element: "h3", children: r }),
+      /* @__PURE__ */ e(h, { element: "ul", size: 0.5, className: c(t["footer__category-list"]), children: l == null ? void 0 : l.map((o, i) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(m, { color: "inverted", element: "span", modifiers: "break-all", children: o }) }, i)) })
+    ] }) })
+  ] });
+};
+export {
+  B as Footer,
+  B as default
+};

package/src/community/components/layout/footer/footer.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o="footer__bottom-69eff630",t="footer__inner-6c80a8f4",e="footer__category-0e6498ad",_={footer__bottom:o,footer__inner:t,footer__category:e,"footer__category-icon":"footer__category-icon-d83eef15","footer__category-list":"footer__category-list-dbdbcc60"};exports.default=_;exports.footer__bottom=o;exports.footer__category=e;exports.footer__inner=t;

package/src/community/components/layout/footer/footer.module.scss.es.js

@@ -0,0 +1,13 @@
+const o = "footer__bottom-69eff630", t = "footer__inner-6c80a8f4", e = "footer__category-0e6498ad", _ = {
+  footer__bottom: o,
+  footer__inner: t,
+  footer__category: e,
+  "footer__category-icon": "footer__category-icon-d83eef15",
+  "footer__category-list": "footer__category-list-dbdbcc60"
+};
+export {
+  _ as default,
+  o as footer__bottom,
+  e as footer__category,
+  t as footer__inner
+};

package/src/community/components/layout/header/components/header-bottom-content/header-bottom-content.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),u=require("../../../../../../../external/classnames/index.cjs.js"),c=require("react"),d=require("../../../layout-context.cjs.js"),i=require("./header-bottom-content.module.scss.cjs.js"),l=require("../../../../card/card.cjs.js"),m=require("../../../../card/card-content/card-content.cjs.js"),o=n=>{const{children:r,cardProps:e}=n,{headerBottomElement:a}=c.useContext(d.LayoutContext),s=u.default(i.default["header__bottom-content"],e==null?void 0:e.className);return t.jsx(l.Card,{padding:.75,...e,className:s,ref:a,children:t.jsx(m.CardContent,{children:r})})};exports.HeaderBottomContent=o;exports.default=o;

package/src/community/components/layout/header/components/header-bottom-content/header-bottom-content.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CardProps } from '../../../../card';
+export interface HeaderBottomContentProps {
+    /**
+     * Content of HeaderDropdown
+     */
+    children?: React.ReactNode;
+    /**
+     * card props to pass down to card component.
+     */
+    cardProps?: CardProps;
+}
+export declare const HeaderBottomContent: (props: HeaderBottomContentProps) => import("react/jsx-runtime").JSX.Element;
+export default HeaderBottomContent;

package/src/community/components/layout/header/components/header-bottom-content/header-bottom-content.es.js

@@ -0,0 +1,15 @@
+import { jsx as o } from "react/jsx-runtime";
+import a from "../../../../../../../external/classnames/index.es.js";
+import s from "react";
+import { LayoutContext as c } from "../../../layout-context.es.js";
+import d from "./header-bottom-content.module.scss.es.js";
+import { Card as f } from "../../../../card/card.es.js";
+import { CardContent as i } from "../../../../card/card-content/card-content.es.js";
+const B = (e) => {
+  const { children: r, cardProps: t } = e, { headerBottomElement: m } = s.useContext(c), n = a(d["header__bottom-content"], t == null ? void 0 : t.className);
+  return /* @__PURE__ */ o(f, { padding: 0.75, ...t, className: n, ref: m, children: /* @__PURE__ */ o(i, { children: r }) });
+};
+export {
+  B as HeaderBottomContent,
+  B as default
+};

package/src/community/components/layout/header/components/header-bottom-content/header-bottom-content.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"header__bottom-content":"header__bottom-content-a2593618"};exports.default=e;

package/src/community/components/layout/header/components/header-bottom-content/header-bottom-content.module.scss.es.js

@@ -0,0 +1,6 @@
+const t = {
+  "header__bottom-content": "header__bottom-content-a2593618"
+};
+export {
+  t as default
+};

package/src/community/components/layout/header/components/header-content/header-content.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),e=({children:n})=>t.jsx(t.Fragment,{children:n});e.displayName="HeaderContent";exports.HeaderContent=e;exports.default=e;

package/src/community/components/layout/header/components/header-content/header-content.d.ts

@@ -0,0 +1,8 @@
+export interface HeaderContentProps {
+    /**
+     * Content of HeaderDropdown
+     */
+    children?: React.ReactNode;
+}
+export declare const HeaderContent: React.FC<HeaderContentProps>;
+export default HeaderContent;

package/src/community/components/layout/header/components/header-content/header-content.es.js

@@ -0,0 +1,7 @@
+import { jsx as t, Fragment as a } from "react/jsx-runtime";
+const n = ({ children: e }) => /* @__PURE__ */ t(a, { children: e });
+n.displayName = "HeaderContent";
+export {
+  n as HeaderContent,
+  n as default
+};

package/src/community/components/layout/header/components/header-dropdown/header-dropdown.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),j=require("../../../../../../../external/classnames/index.cjs.js"),o=require("react"),v=require("../../../../button/button.cjs.js"),P=require("../../../layout-context.cjs.js"),a=require("./header-dropdown.module.scss.cjs.js"),p=require("../../../../tooltip/tooltip-provider.cjs.js"),w=require("../../../../tooltip/tooltip-trigger.cjs.js"),C=require("../../../../tooltip/tooltip.cjs.js"),f=g=>{const{children:u,triggerProps:i,defaultOpen:T,open:d,onToggle:c,shouldAnimate:b,tooltipProps:r}=g,[h,q]=o.useState(T),[x,O]=o.useState(p.DEFAULT_TOOLTIP_OFFSET),{headerElement:t}=o.useContext(P.LayoutContext),e=o.useRef(null);o.useEffect(()=>{if(t!=null&&t.current&&(e!=null&&e.current)){const n=t.current.getBoundingClientRect(),m=e.current.getBoundingClientRect(),R=n.bottom-m.bottom;O(R)}},[t,e,u]);const l=d!==void 0?d:h,_=n=>{q(n),c==null||c(n)};return s.jsxs(p.TooltipProvider,{offset:x,openWith:"click",role:"dialog",onToggle:_,open:l,children:[s.jsx(w.TooltipTrigger,{children:s.jsx(v.Button,{...i,ref:e,className:j.default(a.default.header__dropdown,i.className,{[a.default["header__dropdown--open"]]:b&&l})})}),s.jsx(C.Tooltip,{...r,cardProps:{...r==null?void 0:r.cardProps,border:"top-primary-active-subtle",borderless:!1,background:"bg-muted"},children:u})]})};exports.HeaderDropdown=f;exports.default=f;

package/src/community/components/layout/header/components/header-dropdown/header-dropdown.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ButtonProps } from '../../../../button/button';
+import { TooltipProps } from '../../../../tooltip';
+export interface HeaderDropdownProps {
+    /**
+     * Content of tooltip
+     */
+    children: React.ReactNode;
+    /**
+     * Trigger of Dropdown
+     */
+    triggerProps: ButtonProps;
+    /**
+     * Should trigger icon animate when open
+     */
+    shouldAnimate?: boolean;
+    /**
+     * Tooltip props
+     */
+    tooltipProps?: Omit<TooltipProps, 'children'>;
+    /**
+     * Should Tooltip be initially shown. Won't work with open and onToggle.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Should the Tooltip be open or closed.
+     * Use to handle state outside of component, should use with onToggle prop.
+     */
+    open?: boolean;
+    /**
+     * Callback when Tooltip is toggled.
+     * Use to handle state outside of component, should use with open prop.
+     */
+    onToggle?: (open: boolean) => void;
+}
+export declare const HeaderDropdown: (props: HeaderDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export default HeaderDropdown;

package/src/community/components/layout/header/components/header-dropdown/header-dropdown.es.js

@@ -0,0 +1,50 @@
+import { jsxs as R, jsx as c } from "react/jsx-runtime";
+import x from "../../../../../../../external/classnames/index.es.js";
+import t from "react";
+import { Button as C } from "../../../../button/button.es.js";
+import { LayoutContext as P } from "../../../layout-context.es.js";
+import p from "./header-dropdown.module.scss.es.js";
+import { DEFAULT_TOOLTIP_OFFSET as v, TooltipProvider as w } from "../../../../tooltip/tooltip-provider.es.js";
+import { TooltipTrigger as y } from "../../../../tooltip/tooltip-trigger.es.js";
+import { Tooltip as B } from "../../../../tooltip/tooltip.es.js";
+const H = (f) => {
+  const { children: i, triggerProps: a, defaultOpen: m, open: d, onToggle: s, shouldAnimate: u, tooltipProps: r } = f, [g, T] = t.useState(m), [h, O] = t.useState(v), { headerElement: o } = t.useContext(P), e = t.useRef(null);
+  t.useEffect(() => {
+    if (o != null && o.current && (e != null && e.current)) {
+      const n = o.current.getBoundingClientRect(), _ = e.current.getBoundingClientRect(), b = n.bottom - _.bottom;
+      O(b);
+    }
+  }, [o, e, i]);
+  const l = d !== void 0 ? d : g;
+  return /* @__PURE__ */ R(w, { offset: h, openWith: "click", role: "dialog", onToggle: (n) => {
+    T(n), s == null || s(n);
+  }, open: l, children: [
+    /* @__PURE__ */ c(y, { children: /* @__PURE__ */ c(
+      C,
+      {
+        ...a,
+        ref: e,
+        className: x(p.header__dropdown, a.className, {
+          [p["header__dropdown--open"]]: u && l
+        })
+      }
+    ) }),
+    /* @__PURE__ */ c(
+      B,
+      {
+        ...r,
+        cardProps: {
+          ...r == null ? void 0 : r.cardProps,
+          border: "top-primary-active-subtle",
+          borderless: !1,
+          background: "bg-muted"
+        },
+        children: i
+      }
+    )
+  ] });
+};
+export {
+  H as HeaderDropdown,
+  H as default
+};

package/src/community/components/layout/header/components/header-dropdown/header-dropdown.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="header__dropdown-cb8faff9",d={header__dropdown:e,"header__dropdown--open":"header__dropdown--open-03680708"};exports.default=d;exports.header__dropdown=e;

package/src/community/components/layout/header/components/header-dropdown/header-dropdown.module.scss.es.js

@@ -0,0 +1,8 @@
+const d = "header__dropdown-cb8faff9", e = {
+  header__dropdown: d,
+  "header__dropdown--open": "header__dropdown--open-03680708"
+};
+export {
+  e as default,
+  d as header__dropdown
+};

package/src/community/components/layout/header/components/header-language/header-language.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),y=require("react"),g=require("../../../../../helpers/hooks/use-layout.cjs.js"),T=require("../../../../button/button.cjs.js"),v=require("../../../../typography/heading/heading.cjs.js"),L=require("../../../../typography/text/text.cjs.js"),f=require("../header-dropdown/header-dropdown.cjs.js"),w=require("../header-modal/header-modal.cjs.js"),H=require("../../../../../../tedi/components/content/list/list.cjs.js"),I=require("../../../../../../tedi/components/content/list/list-item.cjs.js"),M=require("../../../../../../tedi/providers/label-provider/use-labels.cjs.js"),P=require("../../../../card/card.cjs.js"),R=require("../../../../card/card-content/card-content.cjs.js"),S=require("../../../../../../tedi/components/layout/grid/row.cjs.js"),C=require("../../../../../../tedi/components/layout/grid/col.cjs.js"),l=u=>{const{languages:t}=u,s=g.useLayout(["desktop","tablet"]),{getLabel:i}=M.useLabels(),[n,a]=y.useState(!1),o=t==null?void 0:t.find(e=>e.isSelected),d={children:o==null?void 0:o.label,"aria-label":`${i("header.select-lang")} ${(o==null?void 0:o["aria-label"])??(o==null?void 0:o.label)}`,visualType:s?"link":"tertiary",iconRight:s?{name:"expand_more",color:"primary",size:24}:void 0},h=e=>{e==null||e({onToggle:a})},c=({isSelected:e,onClick:b,label:q,"aria-label":j},x=!0)=>r.jsx(T.Button,{visualType:x?"link":e?"primary":"tertiary","aria-current":e,"aria-label":j,onClick:()=>h(b),children:q}),p=r.jsxs("div",{children:[r.jsx(L.Text,{color:"muted",modifiers:"small",children:i("header.select-lang")}),r.jsx(f.HeaderDropdown,{shouldAnimate:!0,open:n,onToggle:a,tooltipProps:{cardProps:{padding:1}},triggerProps:d,children:r.jsx(H.List,{verticalSpacing:{size:.75},element:"ul",children:(t==null?void 0:t.map(e=>r.jsx(I.ListItem,{children:c(e)},e.label)))||[]})})]}),m=r.jsx(w.HeaderModal,{ariaLabelledby:"header-language-modal-label",open:n,onToggle:a,triggerProps:d,children:r.jsx(P.Card,{borderless:!0,children:r.jsxs(R.CardContent,{children:[r.jsx(v.Heading,{id:"header-language-modal-label",className:"sr-only",children:i("header.select-lang")}),r.jsx(S.Row,{alignItems:"center",element:"ul",children:t==null?void 0:t.map(e=>r.jsx(C.Col,{width:"auto",children:c(e,!1)},e.label))})]})})});return s?p:m};l.displayName="HeaderLanguage";exports.HeaderLanguage=l;exports.default=l;

package/src/community/components/layout/header/components/header-language/header-language.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface Language {
+    label: string;
+    onClick: (props: {
+        onToggle: (open: boolean) => void;
+    }) => void;
+    isSelected?: boolean;
+    'aria-label'?: string;
+}
+export interface HeaderLanguageProps {
+    /**
+     * Content of HeaderDropdown
+     */
+    languages?: Language[];
+}
+export declare const HeaderLanguage: React.FC<HeaderLanguageProps>;
+export default HeaderLanguage;

package/src/community/components/layout/header/components/header-language/header-language.es.js

@@ -0,0 +1,65 @@
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import v from "react";
+import { useLayout as H } from "../../../../../helpers/hooks/use-layout.es.js";
+import { Button as g } from "../../../../button/button.es.js";
+import { Heading as w } from "../../../../typography/heading/heading.es.js";
+import { Text as L } from "../../../../typography/text/text.es.js";
+import { HeaderDropdown as I } from "../header-dropdown/header-dropdown.es.js";
+import { HeaderModal as P } from "../header-modal/header-modal.es.js";
+import { List as R } from "../../../../../../tedi/components/content/list/list.es.js";
+import { ListItem as _ } from "../../../../../../tedi/components/content/list/list-item.es.js";
+import { useLabels as j } from "../../../../../../tedi/providers/label-provider/use-labels.es.js";
+import { Card as k } from "../../../../card/card.es.js";
+import { CardContent as z } from "../../../../card/card-content/card-content.es.js";
+import { Row as B } from "../../../../../../tedi/components/layout/grid/row.es.js";
+import { Col as C } from "../../../../../../tedi/components/layout/grid/col.es.js";
+const D = (p) => {
+  const { languages: e } = p, i = H(["desktop", "tablet"]), { getLabel: l } = j(), [m, a] = v.useState(!1), t = e == null ? void 0 : e.find((r) => r.isSelected), d = {
+    children: t == null ? void 0 : t.label,
+    "aria-label": `${l("header.select-lang")} ${(t == null ? void 0 : t["aria-label"]) ?? (t == null ? void 0 : t.label)}`,
+    visualType: i ? "link" : "tertiary",
+    iconRight: i ? { name: "expand_more", color: "primary", size: 24 } : void 0
+  }, c = (r) => {
+    r == null || r({ onToggle: a });
+  }, n = ({ isSelected: r, onClick: b, label: u, "aria-label": y }, T = !0) => /* @__PURE__ */ o(
+    g,
+    {
+      visualType: T ? "link" : r ? "primary" : "tertiary",
+      "aria-current": r,
+      "aria-label": y,
+      onClick: () => c(b),
+      children: u
+    }
+  ), h = /* @__PURE__ */ s("div", { children: [
+    /* @__PURE__ */ o(L, { color: "muted", modifiers: "small", children: l("header.select-lang") }),
+    /* @__PURE__ */ o(
+      I,
+      {
+        shouldAnimate: !0,
+        open: m,
+        onToggle: a,
+        tooltipProps: { cardProps: { padding: 1 } },
+        triggerProps: d,
+        children: /* @__PURE__ */ o(R, { verticalSpacing: { size: 0.75 }, element: "ul", children: (e == null ? void 0 : e.map((r) => /* @__PURE__ */ o(_, { children: n(r) }, r.label))) || [] })
+      }
+    )
+  ] }), f = /* @__PURE__ */ o(
+    P,
+    {
+      ariaLabelledby: "header-language-modal-label",
+      open: m,
+      onToggle: a,
+      triggerProps: d,
+      children: /* @__PURE__ */ o(k, { borderless: !0, children: /* @__PURE__ */ s(z, { children: [
+        /* @__PURE__ */ o(w, { id: "header-language-modal-label", className: "sr-only", children: l("header.select-lang") }),
+        /* @__PURE__ */ o(B, { alignItems: "center", element: "ul", children: e == null ? void 0 : e.map((r) => /* @__PURE__ */ o(C, { width: "auto", children: n(r, !1) }, r.label)) })
+      ] }) })
+    }
+  );
+  return i ? h : f;
+};
+D.displayName = "HeaderLanguage";
+export {
+  D as HeaderLanguage,
+  D as default
+};

package/src/community/components/layout/header/components/header-modal/header-modal.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),g=require("../../../../../../tedi/components/buttons/closing-button/closing-button.cjs.js"),h=require("../../../../button/button.cjs.js"),b=require("../../../../typography/text/text.cjs.js"),x=require("../../header/header.module.scss.cjs.js"),j=require("../../../../modal/modal-provider.cjs.js"),m=require("../../../../modal/modal-trigger.cjs.js"),C=require("../../../../modal/modal.cjs.js"),q=require("../../../../modal/modal-closer.cjs.js"),p=require("../../../../../../tedi/providers/label-provider/use-labels.cjs.js"),r=require("../../../../card/card-content/card-content.cjs.js"),o=require("../../../../card/card.cjs.js"),d=t=>{const{triggerProps:s,defaultOpen:l,open:i,onToggle:n,children:a,ariaLabelledby:u}=t,{getLabel:c}=p.useLabels();return e.jsxs(j.ModalProvider,{defaultOpen:l,open:i,onToggle:n,children:[e.jsx(m.ModalTrigger,{children:e.jsx(h.Button,{...s})}),e.jsx(C.Modal,{"aria-labelledby":u,hideCloseButton:!0,position:"right",children:e.jsxs(r.CardContent,{padding:0,children:[e.jsx(o.Card,{borderless:!0,background:"primary-highlight-subtle",padding:.5,borderRadius:!1,children:e.jsx(r.CardContent,{children:e.jsx(b.Text,{element:"div",modifiers:"right",children:e.jsx(q.ModalCloser,{children:e.jsx(g.ClosingButton,{title:c("modal.close"),size:"large",className:x.default["header-modal__close"]})})})})}),e.jsx(o.Card,{border:"top-border-default",borderRadius:!1,padding:0,children:e.jsx(r.CardContent,{children:a})})]})})]})};exports.HeaderModal=d;exports.default=d;

package/src/community/components/layout/header/components/header-modal/header-modal.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ButtonProps } from '../../../../button/button';
+export interface HeaderModalProps {
+    /**
+     * Content of Modal
+     */
+    children: React.ReactNode;
+    /**
+     * Id of aria-Labelledby element
+     */
+    ariaLabelledby: string;
+    /**
+     * Trigger of Dropdown
+     */
+    triggerProps: ButtonProps;
+    /**
+     * Should Tooltip be initially shown. Won't work with open and onToggle.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Should the Tooltip be open or closed.
+     * Use to handle state outside of component, should use with onToggle prop.
+     */
+    open?: boolean;
+    /**
+     * Callback when Tooltip is toggled.
+     * Use to handle state outside of component, should use with open prop.
+     */
+    onToggle?: (open: boolean) => void;
+}
+export declare const HeaderModal: (props: HeaderModalProps) => import("react/jsx-runtime").JSX.Element;
+export default HeaderModal;

package/src/community/components/layout/header/components/header-modal/header-modal.es.js

@@ -0,0 +1,33 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { ClosingButton as f } from "../../../../../../tedi/components/buttons/closing-button/closing-button.es.js";
+import { Button as c } from "../../../../button/button.es.js";
+import { Text as g } from "../../../../typography/text/text.es.js";
+import h from "../../header/header.module.scss.es.js";
+import { ModalProvider as u } from "../../../../modal/modal-provider.es.js";
+import { ModalTrigger as b } from "../../../../modal/modal-trigger.es.js";
+import { Modal as C } from "../../../../modal/modal.es.js";
+import { ModalCloser as M } from "../../../../modal/modal-closer.es.js";
+import { useLabels as x } from "../../../../../../tedi/providers/label-provider/use-labels.es.js";
+import { CardContent as e } from "../../../../card/card-content/card-content.es.js";
+import { Card as i } from "../../../../card/card.es.js";
+const N = (d) => {
+  const { triggerProps: l, defaultOpen: t, open: a, onToggle: m, children: n, ariaLabelledby: s } = d, { getLabel: p } = x();
+  return /* @__PURE__ */ o(u, { defaultOpen: t, open: a, onToggle: m, children: [
+    /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(c, { ...l }) }),
+    /* @__PURE__ */ r(C, { "aria-labelledby": s, hideCloseButton: !0, position: "right", children: /* @__PURE__ */ o(e, { padding: 0, children: [
+      /* @__PURE__ */ r(i, { borderless: !0, background: "primary-highlight-subtle", padding: 0.5, borderRadius: !1, children: /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(g, { element: "div", modifiers: "right", children: /* @__PURE__ */ r(M, { children: /* @__PURE__ */ r(
+        f,
+        {
+          title: p("modal.close"),
+          size: "large",
+          className: h["header-modal__close"]
+        }
+      ) }) }) }) }),
+      /* @__PURE__ */ r(i, { border: "top-border-default", borderRadius: !1, padding: 0, children: /* @__PURE__ */ r(e, { children: n }) })
+    ] }) })
+  ] });
+};
+export {
+  N as HeaderModal,
+  N as default
+};

package/src/community/components/layout/header/components/header-navigation/header-navigation.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),c=require("react"),s=require("../../../../../../tedi/components/misc/stretch-content/stretch-content.cjs.js"),u=require("../../../../anchor/anchor.cjs.js"),l=require("../../../layout-context.cjs.js"),a=require("../../../../../../tedi/components/layout/grid/row.cjs.js"),d=require("../../../../../../tedi/components/layout/grid/col.cjs.js"),r=()=>{var n;const{sideNavProps:e}=c.useContext(l.LayoutContext);return t.jsx(s.StretchContent,{direction:"horizontal",children:t.jsx(a.Row,{justifyContent:"center",alignItems:"center",gutterX:5,children:(n=e==null?void 0:e.navItems)==null?void 0:n.map((o,i)=>t.jsx(d.Col,{width:"auto",children:t.jsx(u.Anchor,{color:"text-color",as:e.linkAs,...o,icon:void 0,children:o.children})},i))})})};exports.HeaderNavigation=r;exports.default=r;

package/src/community/components/layout/header/components/header-navigation/header-navigation.d.ts

@@ -0,0 +1,2 @@
+export declare const HeaderNavigation: () => import("react/jsx-runtime").JSX.Element;
+export default HeaderNavigation;

package/src/community/components/layout/header/components/header-navigation/header-navigation.es.js

@@ -0,0 +1,16 @@
+import { jsx as o } from "react/jsx-runtime";
+import i from "react";
+import { StretchContent as m } from "../../../../../../tedi/components/misc/stretch-content/stretch-content.es.js";
+import { Anchor as c } from "../../../../anchor/anchor.es.js";
+import { LayoutContext as l } from "../../../layout-context.es.js";
+import { Row as a } from "../../../../../../tedi/components/layout/grid/row.es.js";
+import { Col as d } from "../../../../../../tedi/components/layout/grid/col.es.js";
+const g = () => {
+  var r;
+  const { sideNavProps: t } = i.useContext(l);
+  return /* @__PURE__ */ o(m, { direction: "horizontal", children: /* @__PURE__ */ o(a, { justifyContent: "center", alignItems: "center", gutterX: 5, children: (r = t == null ? void 0 : t.navItems) == null ? void 0 : r.map((e, n) => /* @__PURE__ */ o(d, { width: "auto", children: /* @__PURE__ */ o(c, { color: "text-color", as: t.linkAs, ...e, icon: void 0, children: e.children }) }, n)) }) });
+};
+export {
+  g as HeaderNavigation,
+  g as default
+};

package/src/community/components/layout/header/components/header-notification/header-notification.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),s=require("../../../../../../tedi/components/misc/print/print.cjs.js"),a=require("../../../../icon/icon.cjs.js"),d=require("./header-notification.module.scss.cjs.js"),u=require("../../../../card/card.cjs.js"),l=require("../../../../card/card-content/card-content.cjs.js"),h=require("../../../../../../tedi/components/layout/grid/row.cjs.js"),r=require("../../../../../../tedi/components/layout/grid/col.cjs.js"),i=t=>{const{children:n,icon:o="info",background:c="primary-highlight"}=t;return e.jsx(s.Print,{visibility:"hide",children:e.jsx(u.Card,{borderless:!0,background:c,borderRadius:!1,className:d.default["header-notification"],children:e.jsx(l.CardContent,{children:e.jsxs(h.Row,{justifyContent:"between",alignItems:"center",gap:1,gutter:0,children:[e.jsx(r.Col,{width:"auto",children:e.jsx(a.Icon,{name:o})}),e.jsx(r.Col,{children:n})]})})})})};exports.HeaderNotification=i;exports.default=i;

package/src/community/components/layout/header/components/header-notification/header-notification.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { CardProps } from '../../../../card';
+export interface HeaderNotificationProps {
+    /**
+     * Content of the notification
+     */
+    children?: React.ReactNode;
+    /**
+     * Name of material symbols icon
+     * https://fonts.google.com/icons?icon.set=Material+Symbols
+     * @default info
+     */
+    icon?: string;
+    /**
+     * Background color of card content
+     * @default primary-highlight
+     */
+    background?: CardProps['background'];
+}
+export declare const HeaderNotification: (props: HeaderNotificationProps) => import("react/jsx-runtime").JSX.Element;
+export default HeaderNotification;

package/src/community/components/layout/header/components/header-notification/header-notification.es.js

@@ -0,0 +1,19 @@
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { Print as a } from "../../../../../../tedi/components/misc/print/print.es.js";
+import { Icon as d } from "../../../../icon/icon.es.js";
+import s from "./header-notification.module.scss.es.js";
+import { Card as c } from "../../../../card/card.es.js";
+import { CardContent as l } from "../../../../card/card-content/card-content.es.js";
+import { Row as f } from "../../../../../../tedi/components/layout/grid/row.es.js";
+import { Col as i } from "../../../../../../tedi/components/layout/grid/col.es.js";
+const w = (o) => {
+  const { children: t, icon: e = "info", background: n = "primary-highlight" } = o;
+  return /* @__PURE__ */ r(a, { visibility: "hide", children: /* @__PURE__ */ r(c, { borderless: !0, background: n, borderRadius: !1, className: s["header-notification"], children: /* @__PURE__ */ r(l, { children: /* @__PURE__ */ m(f, { justifyContent: "between", alignItems: "center", gap: 1, gutter: 0, children: [
+    /* @__PURE__ */ r(i, { width: "auto", children: /* @__PURE__ */ r(d, { name: e }) }),
+    /* @__PURE__ */ r(i, { children: t })
+  ] }) }) }) });
+};
+export {
+  w as HeaderNotification,
+  w as default
+};

package/src/community/components/layout/header/components/header-notification/header-notification.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"header-notification":"header-notification-45a2f03b"};exports.default=e;

package/src/community/components/layout/header/components/header-notification/header-notification.module.scss.es.js

@@ -0,0 +1,6 @@
+const t = {
+  "header-notification": "header-notification-45a2f03b"
+};
+export {
+  t as default
+};

package/src/community/components/layout/header/components/header-role/header-role.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),g=require("react"),m=require("../../../../../../tedi/components/misc/scroll-fade/scroll-fade.cjs.js"),j=require("../../../../collapse/collapse.cjs.js"),b=require("../../../../tag/tag.cjs.js"),h=require("../../../../typography/text/text.cjs.js"),y=require("../header-dropdown/header-dropdown.cjs.js"),a=require("./header-role.module.scss.cjs.js"),x=require("../../../../../../tedi/providers/label-provider/use-labels.cjs.js"),T=require("../../../../card/card.cjs.js"),q=require("../../../../card/card-content/card-content.cjs.js"),p=t=>{const{renderModal:o=!1,...r}=t,[s,l]=g.useState(!1);return o?e.jsx(R,{...r,open:s,onToggle:l}):e.jsx(v,{...r,open:s,onToggle:l})};p.displayName="HeaderRole";const v=t=>{const{getLabel:o}=x.useLabels(),{children:r,open:s,onToggle:l,primaryInfo:i,secondaryInfo:d,label:n=o("header.role-label")}=t,u=()=>n===o("header.role-label")?e.jsx("div",{children:e.jsx(b.Tag,{color:"primary",type:"secondary",children:n})}):e.jsxs(h.Text,{color:"muted",modifiers:["bold","small"],children:[n,!!d&&e.jsxs(e.Fragment,{children:[" ",e.jsxs(h.Text,{element:"span",modifiers:["small","normal"],children:[e.jsx("span",{style:{color:"var(--color-border-default)"},children:"|"})," ",d]})]})]}),c=typeof r=="function"?r({onToggle:l}):r,f=e.jsx(y.HeaderDropdown,{shouldAnimate:!0,open:s,onToggle:l,tooltipProps:{cardProps:{padding:0},maxWidth:"medium"},triggerProps:{children:i,"aria-label":`${n??""} ${d??""} ${i??""}`,visualType:"link",iconRight:{name:"expand_more",color:"primary",size:24}},children:e.jsx("div",{className:a.default["header-role-wrapper"],children:e.jsx(m.ScrollFade,{fadeSize:0,children:e.jsx("div",{className:a.default["header-role-children"],children:c})})})});return e.jsxs("div",{children:[u(),c?f:i]})},R=t=>{const{getLabel:o}=x.useLabels(),{children:r,open:s,onToggle:l,primaryInfo:i,secondaryInfo:d,label:n=o("header.role-label")}=t,u=e.jsxs(h.Text,{element:"span",color:"muted",modifiers:"bold",children:[n," ",i,d&&e.jsx(h.Text,{element:"span",modifiers:"normal",children:` | ${d}`})]}),c=typeof r=="function"?r({onToggle:l}):r;return e.jsx(T.Card,{background:"bg-muted",borderRadius:!1,borderless:!0,children:e.jsx(q.CardContent,{padding:0,children:c?e.jsx(j.Collapse,{id:"role-collapse",open:s,onToggle:l,className:a.default["header-role-collapse"],hideCollapseText:!0,title:u,children:e.jsx("div",{className:a.default["header-role-wrapper"],children:e.jsx(m.ScrollFade,{fadeSize:0,children:e.jsx("div",{className:a.default["header-role-children"],children:c})})})}):e.jsx("div",{className:a.default["header-role-children"],children:u})})})};exports.HeaderRole=p;exports.default=p;

package/src/community/components/layout/header/components/header-role/header-role.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+export interface HeaderRoleProps {
+    /**
+     * Primary info of user
+     */
+    primaryInfo: string;
+    /**
+     * Secondary info of user
+     */
+    secondaryInfo?: string;
+    /**
+     * Override roleSelection label from LabelProvider
+     */
+    label?: string;
+    /**
+     * Content of HeaderDropdown if user can open dropdown.
+     * When using a function you have access to onToggle callback that can be used to close the menu
+     */
+    children?: ((props: {
+        onToggle: (open: boolean) => void;
+    }) => React.ReactNode) | React.ReactNode;
+    /**
+     * Pass true when HeaderRole is used in HeaderSettings modal
+     * @default false
+     */
+    renderModal?: boolean;
+}
+export declare const HeaderRole: React.FC<HeaderRoleProps>;
+export default HeaderRole;