@cccsaurora/howler-ui 2.14.0-dev.257 → 2.14.0-dev.263

package/commons/components/leftnav/LeftNavGroup.js

@@ -0,0 +1,125 @@
+import { jsx, jsxs } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { ChevronRight, ExpandLess, ExpandMore } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+icons-material@5.18.0_@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18._b9cf98cd2d466d3b4f338d38bc895c0b/node_modules/@mui/icons-material/esm/index.js";
+import { useTheme, Tooltip, ListItemButton, ListItemIcon, ListItemText, Collapse, List, Popover } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import "../app/AppContexts.js";
+import { memo, useState, useCallback, useEffect } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useAppConfigs } from "../app/hooks/useAppConfigs.js";
+import "../../../i18n.js";
+import { useAppLeftNav } from "../app/hooks/useAppLeftNav.js";
+import "../app/hooks/useAppSitemap.js";
+import { useAppUser } from "../app/hooks/useAppUser.js";
+import LeftNavItem from "./LeftNavItem.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+const GroupListItem = memo(
+  ({
+    group,
+    leftNavOpen,
+    collapseOpen,
+    popoverOpen,
+    onClick
+  }) => {
+    const { t } = useTranslation();
+    const title = group.i18nKey ? t(group.i18nKey) : group.title;
+    const theme = useTheme();
+    return /* @__PURE__ */ jsx(Tooltip, { title: !leftNavOpen ? title : "", "aria-label": title, placement: "right", children: /* @__PURE__ */ jsxs(ListItemButton, { onClick, selected: popoverOpen, children: [
+      !leftNavOpen && /* @__PURE__ */ jsx(
+        ChevronRight,
+        {
+          sx: {
+            position: "absolute",
+            right: 0,
+            width: 16,
+            height: 16,
+            transform: popoverOpen && "rotate(180deg)",
+            transition: theme.transitions.create("transform", {
+              easing: theme.transitions.easing.sharp,
+              duration: popoverOpen ? theme.transitions.duration.leavingScreen : theme.transitions.duration.enteringScreen
+            })
+          },
+          fontSize: "inherit"
+        }
+      ),
+      /* @__PURE__ */ jsx(ListItemIcon, { children: group.icon }),
+      /* @__PURE__ */ jsx(ListItemText, { primary: title }),
+      collapseOpen ? /* @__PURE__ */ jsx(ExpandLess, { color: "action" }) : /* @__PURE__ */ jsx(ExpandMore, { color: "action" })
+    ] }, group.id) });
+  }
+);
+const LeftNavGroup = ({ group, onItemClick }) => {
+  const user = useAppUser();
+  const leftnav = useAppLeftNav();
+  const { preferences } = useAppConfigs();
+  const [popoverTarget, setPopoverTarget] = useState();
+  const [collapseOpen, setCollapseOpen] = useState(false);
+  const groupHasIcons = group.items.some((i) => !!i.icon);
+  const handleClick = useCallback(
+    (event) => {
+      if (leftnav.open) {
+        setCollapseOpen(!collapseOpen);
+      } else {
+        setPopoverTarget(event ? event.currentTarget : void 0);
+      }
+    },
+    [leftnav.open, collapseOpen]
+  );
+  const onClosePopover = useCallback(() => setPopoverTarget(void 0), []);
+  useEffect(() => {
+    if (!leftnav.open && collapseOpen) {
+      setCollapseOpen(false);
+    }
+  }, [leftnav.open, collapseOpen]);
+  return user.validateProps(group.userPropValidators) ? /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      GroupListItem,
+      {
+        group,
+        leftNavOpen: leftnav.open,
+        collapseOpen,
+        onClick: handleClick,
+        popoverOpen: !!popoverTarget
+      }
+    ),
+    /* @__PURE__ */ jsx(Collapse, { in: collapseOpen, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsx(List, { component: "div", disablePadding: true, children: group.items.map((i) => /* @__PURE__ */ jsx(
+      LeftNavItem,
+      {
+        context: "group",
+        item: i,
+        hideIcon: preferences.leftnav.hideNestedIcons,
+        onClick: onItemClick
+      },
+      i.id
+    )) }) }),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open: !!popoverTarget,
+        onClose: onClosePopover,
+        onClick: onClosePopover,
+        anchorEl: popoverTarget,
+        anchorOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        children: /* @__PURE__ */ jsx(List, { disablePadding: true, children: group.items.map((i) => /* @__PURE__ */ jsx(
+          LeftNavItem,
+          {
+            popover: true,
+            context: "group",
+            item: i,
+            hideIcon: preferences.leftnav.hideNestedIcons || !groupHasIcons,
+            onClick: onItemClick
+          },
+          i.id
+        )) })
+      }
+    )
+  ] }) : null;
+};
+const LeftNavGroup$1 = memo(LeftNavGroup);
+export {
+  LeftNavGroup$1 as default
+};

package/commons/components/leftnav/LeftNavItem.d.ts

@@ -0,0 +1,10 @@
+import { AppLeftNavItem } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
+type LeftNavItemProps = {
+    item: AppLeftNavItem;
+    popover?: boolean;
+    context?: 'item' | 'group';
+    hideIcon?: boolean;
+    onClick: () => void;
+};
+declare const _default: import('react').MemoExoticComponent<({ item, context, popover, hideIcon, onClick }: LeftNavItemProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/commons/components/leftnav/LeftNavItem.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs, Fragment } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { ListItem, Tooltip, ListItemButton, useTheme, Box, ListItemIcon, ListItemText } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import "../app/AppContexts.js";
+import { memo, useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import "../../../i18n.js";
+import { useAppLeftNav } from "../app/hooks/useAppLeftNav.js";
+import "../app/hooks/useAppSitemap.js";
+import { useAppUser } from "../app/hooks/useAppUser.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+import { Link } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-router-dom@6.30.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-router-dom/dist/index.js";
+const LeftNavItemInner = ({ item, context, popover, hideIcon, label, leftnavOpen }) => {
+  const theme = useTheme();
+  const nested = item.nested !== void 0 ? item.nested : context === "group";
+  const showIcon = useMemo(() => item.icon && !hideIcon, [item, hideIcon]);
+  const spacer = useMemo(() => {
+    const showSpacer = !popover && leftnavOpen && nested;
+    return showSpacer && /* @__PURE__ */ jsx(Box, { id: "spacer", sx: { marginLeft: theme.spacing(showIcon ? 2 : 7) } });
+  }, [nested, showIcon, theme, leftnavOpen, popover]);
+  const itemIcon = useMemo(() => {
+    const showNested = !popover && context === "group" && nested;
+    return showIcon && /* @__PURE__ */ jsx(ListItemIcon, { id: "icon", sx: { minWidth: showNested || popover ? 40 : void 0 }, children: item.icon });
+  }, [nested, showIcon, item.icon, context, popover]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    spacer,
+    itemIcon,
+    /* @__PURE__ */ jsx(ListItemText, { primary: label })
+  ] });
+};
+const LeftNavItem = ({ item, context = "item", popover = false, hideIcon = false, onClick }) => {
+  const { t } = useTranslation();
+  const user = useAppUser();
+  const leftnav = useAppLeftNav();
+  const { text, i18nKey, nested, route, render, userPropValidators } = item;
+  const label = i18nKey ? t(i18nKey) : text;
+  return user.validateProps(userPropValidators) ? render ? /* @__PURE__ */ jsx(ListItem, { disablePadding: true, children: render(leftnav.open) }) : /* @__PURE__ */ jsx(Tooltip, { title: !leftnav.open && !nested ? label : "", "aria-label": label, placement: "right", children: /* @__PURE__ */ jsx(ListItemButton, { component: route ? Link : null, to: route, onClick: onClick ? onClick : null, children: /* @__PURE__ */ jsx(
+    LeftNavItemInner,
+    {
+      hideIcon,
+      context,
+      popover,
+      item,
+      label,
+      leftnavOpen: leftnav.open
+    }
+  ) }, text) }) : null;
+};
+const LeftNavItem$1 = memo(LeftNavItem);
+export {
+  LeftNavItem$1 as default
+};

package/commons/components/notification/FeedModels.d.ts

@@ -0,0 +1,64 @@
+export type SystemMessage = {
+    user: string;
+    title: string;
+    severity: 'success' | 'info' | 'warning' | 'error';
+    message: string;
+};
+export type FeedItem = {
+    id: string;
+    url?: string;
+    external_url?: string;
+    title?: string;
+    content_html?: string;
+    content_text?: string;
+    content_md?: string;
+    summary?: string;
+    image?: string;
+    banner_image?: string;
+    date_published?: Date;
+    date_modified?: Date;
+    authors?: Array<FeedAuthor>;
+    tags?: Array<'new' | 'current' | 'dev' | 'service' | 'blog'>;
+    language?: string;
+    attachments?: Array<FeedAttachment>;
+    _isNew: boolean;
+};
+export type FeedAuthor = {
+    name?: string;
+    url?: string;
+    avatar?: string;
+};
+export type FeedAttachment = {
+    url: string;
+    mime_type: string;
+    title?: string;
+    size_in_bytes?: number;
+    duration_in_seconds?: number;
+};
+export type Feed = {
+    version: string;
+    title: string;
+    home_page_url?: string;
+    feed_url?: string;
+    description?: string;
+    user_comment?: string;
+    next_url?: string;
+    icon?: string;
+    favicon?: string;
+    authors?: Array<FeedAuthor>;
+    language?: string;
+    expired?: boolean;
+    hubs?: Array<{
+        type: string;
+        url: string;
+    }>;
+    items: Array<FeedItem>;
+};
+export declare const DEFAULT_FEED: Feed;
+export declare const DEFAULT_FEED_ITEM: FeedItem;
+export declare const DEFAULT_FEED_ATTACHMENT: FeedAttachment;
+export declare const DEFAULT_FEED_AUTHOR: any;
+export declare function parseFeedAttachments(attachments: any): FeedAttachment[];
+export declare function parseFeedAuthors(authors: any): FeedAuthor[];
+export declare function parseFeedItems(items: any): FeedItem[];
+export declare function parseFeed(feed: any): Feed;

package/commons/components/notification/FeedModels.js

@@ -0,0 +1,91 @@
+const DEFAULT_FEED = {
+  version: null,
+  title: null,
+  home_page_url: null,
+  feed_url: null,
+  description: null,
+  user_comment: null,
+  next_url: null,
+  icon: null,
+  favicon: null,
+  authors: [],
+  language: null,
+  expired: false,
+  hubs: [],
+  items: []
+};
+const DEFAULT_FEED_ITEM = {
+  id: null,
+  url: null,
+  external_url: null,
+  title: null,
+  content_html: null,
+  content_text: null,
+  summary: null,
+  image: null,
+  banner_image: null,
+  date_published: /* @__PURE__ */ new Date(0),
+  date_modified: /* @__PURE__ */ new Date(0),
+  authors: [],
+  tags: [],
+  language: null,
+  attachments: [],
+  _isNew: false
+};
+const DEFAULT_FEED_ATTACHMENT = {
+  url: null,
+  mime_type: null,
+  title: null,
+  size_in_bytes: 0,
+  duration_in_seconds: 0
+};
+const DEFAULT_FEED_AUTHOR = {
+  name: null,
+  url: null,
+  avatar: null
+};
+function decodeHTML(html) {
+  if (!html || typeof html !== "string") return "";
+  var txt = document.createElement("textarea");
+  txt.innerHTML = html;
+  return txt.value;
+}
+function parseFeedAttachments(attachments) {
+  return attachments && Array.isArray(attachments) ? attachments.map(
+    (attachment) => attachment && typeof attachment === "object" ? { ...DEFAULT_FEED_ATTACHMENT, ...attachment } : null
+  ).filter((attachment) => attachment) : [];
+}
+function parseFeedAuthors(authors) {
+  return authors && Array.isArray(authors) ? authors.map((author) => author && typeof author === "object" ? { ...DEFAULT_FEED_AUTHOR, ...author } : null).filter((author) => author) : [];
+}
+function parseFeedItems(items) {
+  return items && Array.isArray(items) ? items.map(
+    (item) => item && typeof item === "object" ? {
+      ...DEFAULT_FEED_ITEM,
+      ...item,
+      date_published: new Date(item.date_published),
+      date_modified: new Date(item.date_modified),
+      authors: parseFeedAuthors(item == null ? void 0 : item.authors),
+      attachments: parseFeedAttachments(item == null ? void 0 : item.attachments),
+      content_html: decodeHTML(item == null ? void 0 : item.content_html)
+    } : null
+  ).filter((item) => item) : [];
+}
+function parseFeed(feed) {
+  return feed && typeof feed === "object" ? {
+    ...DEFAULT_FEED,
+    ...feed,
+    items: parseFeedItems(feed == null ? void 0 : feed.items),
+    authors: parseFeedAuthors(feed == null ? void 0 : feed.authors)
+  } : null;
+}
+export {
+  DEFAULT_FEED,
+  DEFAULT_FEED_ATTACHMENT,
+  DEFAULT_FEED_AUTHOR,
+  DEFAULT_FEED_ITEM,
+  parseFeed,
+  parseFeedAttachments,
+  parseFeedAuthors,
+  parseFeedItems
+};

package/commons/components/notification/Notification.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+type Props = {
+    urls: string[];
+    notificationItem?: FC;
+    inDrawer?: boolean;
+    openIfNew?: boolean;
+    maxDrawerWidth?: string;
+};
+export declare const Notification: FC<Props>;
+export {};

package/commons/components/notification/Notification.js

@@ -0,0 +1,8 @@
+import "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import "./FeedModels.js";
+import { N } from "../../../Notification-BHyOHttL.js";
+import "./elements/NotificationTopNavButton.js";
+import "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+export {
+  N as Notification
+};

package/commons/components/notification/elements/NotificationCloseButton.d.ts

@@ -0,0 +1,3 @@
+import { NotificationProps } from '@cccsaurora/howler-ui/commons/components/notification/elements/NotificationContainer';
+import { FC } from 'react';
+export declare const NotificationCloseButton: FC<NotificationProps>;

package/commons/components/notification/elements/NotificationCloseButton.js

@@ -0,0 +1,8 @@
+import "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+icons-material@5.18.0_@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18._b9cf98cd2d466d3b4f338d38bc895c0b/node_modules/@mui/icons-material/esm/index.js";
+import "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { a } from "../../../../Notification-BHyOHttL.js";
+import "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+export {
+  a as NotificationCloseButton
+};

package/commons/components/notification/elements/NotificationContainer.d.ts

@@ -0,0 +1,16 @@
+import { ItemComponentProps } from '@cccsaurora/howler-ui/commons/components/app/AppNotificationService';
+import { FeedItem } from '@cccsaurora/howler-ui/commons/components/notification';
+import { FC } from 'react';
+export type NotificationProps = {
+    notifications: FeedItem[];
+    ItemComponent: FC<ItemComponentProps>;
+    drawer?: boolean;
+    initialPageSize?: number;
+    loadingPageDelta?: number;
+    onDrawerOpen?: () => void;
+    onDrawerClose?: () => void;
+    inDrawer?: boolean;
+    status: string;
+    maxDrawerWidth: string;
+};
+export declare const NotificationContainer: FC<NotificationProps>;

package/commons/components/notification/elements/NotificationContainer.js

@@ -0,0 +1,10 @@
+import "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+icons-material@5.18.0_@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18._b9cf98cd2d466d3b4f338d38bc895c0b/node_modules/@mui/icons-material/esm/index.js";
+import "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { c } from "../../../../Notification-BHyOHttL.js";
+import "./NotificationHeader.js";
+import "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+export {
+  c as NotificationContainer
+};

package/commons/components/notification/elements/NotificationEndOfPage.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+export declare const NotificationEndOfPage: FC<{
+    endOfPage?: boolean;
+    onLoading?: () => void;
+}>;

package/commons/components/notification/elements/NotificationEndOfPage.js

@@ -0,0 +1,41 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { NotificationSkeleton } from "./NotificationSkeleton.js";
+import { memo, useRef, useEffect, useState } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+function useOnScreen(ref, rootMargin = "0px") {
+  const [isIntersecting, setIntersecting] = useState(false);
+  useEffect(() => {
+    const observerRef = ref.current;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIntersecting(entry.isIntersecting);
+      },
+      {
+        rootMargin
+      }
+    );
+    if (observerRef) {
+      observer.observe(observerRef);
+    }
+    return () => {
+      if (observerRef) {
+        observer.unobserve(observerRef);
+      }
+    };
+  }, []);
+  return isIntersecting;
+}
+const NotificationEndOfPage = memo(
+  ({ endOfPage = true, onLoading = () => null }) => {
+    const ref = useRef();
+    const onScreen = useOnScreen(ref);
+    useEffect(() => {
+      if (onScreen) {
+        onLoading();
+      }
+    }, [onLoading, onScreen]);
+    return endOfPage ? null : /* @__PURE__ */ jsx("div", { ref, style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(NotificationSkeleton, {}) });
+  }
+);
+export {
+  NotificationEndOfPage
+};

package/commons/components/notification/elements/NotificationError.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const NotificationError: FC;

package/commons/components/notification/elements/NotificationError.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { ErrorOutline } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+icons-material@5.18.0_@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18._b9cf98cd2d466d3b4f338d38bc895c0b/node_modules/@mui/icons-material/esm/index.js";
+import { useTheme, Grid, Typography } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { memo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+const NotificationError = memo(() => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Grid,
+    {
+      container: true,
+      sx: { padding: 1, minHeight: theme.spacing(20) },
+      alignContent: "center",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: 1,
+      children: [
+        /* @__PURE__ */ jsx(ErrorOutline, { color: "error", sx: { fontSize: 40 } }),
+        /* @__PURE__ */ jsx(Typography, { color: "error", variant: "h6", children: t("details.notification.error") })
+      ]
+    }
+  );
+});
+export {
+  NotificationError
+};

package/commons/components/notification/elements/NotificationHeader.d.ts

@@ -0,0 +1,8 @@
+import { default as React, FC } from 'react';
+type NotificationHeaderProps = {
+    title: string;
+    icon: React.ReactElement;
+    children: React.ReactNode;
+};
+export declare const NotificationHeader: FC<NotificationHeaderProps>;
+export {};

package/commons/components/notification/elements/NotificationHeader.js

@@ -0,0 +1,41 @@
+import { jsxs, Fragment, jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useTheme, Icon, Typography, Divider } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { memo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+const NotificationHeader = memo(({ title = "", icon = null, children = null }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          width: "100%",
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          paddingTop: theme.spacing(2)
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              fontSize: "medium",
+              sx: {
+                color: "inherit",
+                backgroundColor: "inherit",
+                marginLeft: theme.spacing(1.5),
+                marginRight: theme.spacing(1.5)
+              },
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { variant: "h6", fontSize: "large", fontWeight: "bolder", flex: 1, children: title }),
+          children
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", flexItem: true, style: { width: "100%", marginTop: theme.spacing(0.5) } })
+  ] });
+});
+export {
+  NotificationHeader
+};

package/commons/components/notification/elements/NotificationItems.d.ts

@@ -0,0 +1,12 @@
+import { ItemComponentProps } from '@cccsaurora/howler-ui/commons/components/app/AppNotificationService';
+import { FeedItem } from '@cccsaurora/howler-ui/commons/components/notification';
+import { FC } from 'react';
+type NotificationListsProps = {
+    notifications: FeedItem[];
+    ItemComponent: FC<ItemComponentProps>;
+    pageSize?: number;
+    handleLoading: () => void;
+    status: string;
+};
+export declare const NotificationItems: FC<NotificationListsProps>;
+export {};

package/commons/components/notification/elements/NotificationItems.js

@@ -0,0 +1,10 @@
+import "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { b } from "../../../../Notification-BHyOHttL.js";
+import "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import "./NotificationEndOfPage.js";
+import "./NotificationError.js";
+import "./NotificationSkeleton.js";
+export {
+  b as NotificationItems
+};

package/commons/components/notification/elements/NotificationSkeleton.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const NotificationSkeleton: FC;

package/commons/components/notification/elements/NotificationSkeleton.js

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useTheme, Typography, Skeleton, Chip } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { memo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+const NotificationSkeleton = memo(() => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs("div", { style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", children: /* @__PURE__ */ jsx(Skeleton, { width: "30%" }) }),
+    /* @__PURE__ */ jsx(Typography, { variant: "h6", children: /* @__PURE__ */ jsx(Skeleton, { width: "50%" }) }),
+    /* @__PURE__ */ jsxs("div", { style: { marginTop: theme.spacing(0.25), marginBottom: theme.spacing(1) }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", children: /* @__PURE__ */ jsx(Skeleton, {}) })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          width: "100%",
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Chip,
+            {
+              size: "small",
+              variant: "outlined",
+              label: /* @__PURE__ */ jsx(Skeleton, { width: "30px" }),
+              style: { margin: theme.spacing(0.25) }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Chip,
+            {
+              size: "small",
+              variant: "outlined",
+              label: /* @__PURE__ */ jsx(Skeleton, { width: "30px" }),
+              style: { margin: theme.spacing(0.25) }
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 25, height: 25, style: { margin: theme.spacing(0.25) } }),
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", style: { margin: theme.spacing(0.25) }, children: /* @__PURE__ */ jsx(Skeleton, { width: 50 }) }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 25, height: 25, style: { margin: theme.spacing(0.25) } }),
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", style: { margin: theme.spacing(0.25) }, children: /* @__PURE__ */ jsx(Skeleton, { width: 50 }) })
+        ]
+      }
+    )
+  ] });
+});
+export {
+  NotificationSkeleton
+};

package/commons/components/notification/elements/NotificationTopNavButton.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+type TopNavButtonProps = {
+    newItems?: number;
+    drawer?: boolean;
+    onDrawerOpen: () => void;
+    onDrawerClose: () => void;
+};
+export declare const NotificationTopNavButton: FC<TopNavButtonProps>;
+export {};