@universityofmaryland/web-feeds-library 1.2.3 → 1.3.0-beta.0

package/dist/factory/helpers/displayHandler.js

@@ -0,0 +1,187 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const Styles = require("@universityofmaryland/web-styles-library");
+const typography = require("@universityofmaryland/web-styles-library/typography");
+const theme = require("@universityofmaryland/web-utilities-library/theme");
+const empty = require("../../states/empty.js");
+const pagination = require("../../states/pagination.js");
+const announcer = require("../../states/announcer.js");
+const index = require("../../helpers/events/index.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
+async function setShadowStyles({
+  shadowRoot,
+  styles
+}) {
+  const styleElement = document.createElement("style");
+  const optimizedCss = await Styles__namespace.utilities.transform.css.removeDuplicates(
+    styles
+  );
+  styleElement.textContent = optimizedCss;
+  shadowRoot.appendChild(styleElement);
+}
+function createFallbackMessage(categoryNames, isThemeDark = false) {
+  const formattedNames = categoryNames.join(", ");
+  const message = `No events found for "${formattedNames}" <span> Other upcoming events:</span>`;
+  const messageElement = new webBuilderLibrary.ElementBuilder(document.createElement("p")).styled(
+    typography__namespace.sans.compose("extralarge", {
+      theme: theme.theme.fontColor(isThemeDark)
+    })
+  ).withStyles({
+    textAlign: "center",
+    margin: "0 auto",
+    ["& span"]: {
+      display: "block"
+    }
+  }).withHTML(message);
+  const container = new webBuilderLibrary.ElementBuilder(document.createElement("div")).withClassName("feed-events-fallback-message").withChild(messageElement).withStyles({
+    element: {
+      marginBottom: Styles__namespace.token.spacing.lg,
+      padding: `${Styles__namespace.token.spacing.md} ${Styles__namespace.token.spacing.lg}`
+    }
+  }).build();
+  return container;
+}
+function createDisplayHandlers(config) {
+  const {
+    displayStrategy,
+    layoutStrategy,
+    helpers,
+    cardMappingOptions,
+    isLazyLoad,
+    numberOfColumnsToShow = 1,
+    numberOfRowsToStart,
+    noResultsConfig = {},
+    lazyLoadCallback
+  } = config;
+  const displayNoResults = (props) => {
+    const container = helpers.getContainer();
+    const shadowRoot = helpers.getShadowRoot();
+    const { message, linkUrl, linkText, isThemeDark } = {
+      ...noResultsConfig,
+      ...props
+    };
+    const emptyState = new empty.EmptyState({
+      message,
+      linkUrl,
+      linkText,
+      isThemeDark
+    });
+    const announcer$1 = new announcer.Announcer({ message: message || "No results found" });
+    container.innerHTML = "";
+    emptyState.render(container);
+    container.appendChild(announcer$1.getElement());
+    helpers.setStyles(emptyState.styles);
+    index.dispatch(container, index.eventNames.FEED_ERROR, {
+      error: "No results found",
+      message,
+      isThemeDark
+    });
+    setTimeout(() => {
+      const styles = helpers.getStyles();
+      if (shadowRoot) {
+        setShadowStyles({ shadowRoot, styles });
+      }
+    }, 100);
+  };
+  const displayResults = async (props) => {
+    const { feedData } = props;
+    const container = helpers.getContainer();
+    const grid = container.querySelector(
+      `#${layoutStrategy.getId()}`
+    );
+    const existingLoader = container.querySelector(".umd-loader-container");
+    existingLoader?.remove();
+    const existingPagination = container.querySelector(
+      `.${Styles__namespace.layout.alignment.block.center.className}`
+    );
+    existingPagination?.remove();
+    helpers.setOffset(feedData.length);
+    const entries = feedData.map(
+      (entry) => displayStrategy.mapEntryToCard(entry, cardMappingOptions)
+    );
+    entries.forEach((entry) => {
+      grid.appendChild(entry.element);
+      helpers.setStyles(entry.styles);
+    });
+    if (isLazyLoad && lazyLoadCallback) {
+      const pagination$1 = new pagination.PaginationState({
+        totalEntries: helpers.getTotalEntries(),
+        offset: helpers.getOffset(),
+        isLazyLoad: true,
+        callback: lazyLoadCallback
+      });
+      const paginationElement = pagination$1.render(container);
+      if (paginationElement) {
+        helpers.setStyles(paginationElement.styles);
+      }
+    }
+    const shadowRoot = helpers.getShadowRoot();
+    if (shadowRoot) {
+      await setShadowStyles({
+        shadowRoot,
+        styles: helpers.getStyles()
+      });
+    }
+  };
+  const displayResultStart = async (props) => {
+    const { feedData, layoutElement, isFallback, categoryNames } = props;
+    const container = helpers.getContainer();
+    const totalEntries = helpers.getTotalEntries();
+    const showAmount = numberOfColumnsToShow * numberOfRowsToStart;
+    const message = isLazyLoad ? `Showing ${showAmount} of ${totalEntries} articles` : `Showing ${showAmount} articles`;
+    if (isFallback && categoryNames && categoryNames.length > 0) {
+      const fallbackMessage = createFallbackMessage(
+        categoryNames,
+        cardMappingOptions.isThemeDark || false
+      );
+      container.appendChild(fallbackMessage.element);
+      helpers.setStyles(fallbackMessage.styles);
+      const shadowRoot = helpers.getShadowRoot();
+      if (shadowRoot) {
+        await setShadowStyles({
+          shadowRoot,
+          styles: helpers.getStyles()
+        });
+      }
+    }
+    layoutElement.element.setAttribute("id", layoutStrategy.getId());
+    container.appendChild(layoutElement.element);
+    helpers.setStyles(layoutElement.styles);
+    index.dispatch(container, index.eventNames.FEED_LOADED, {
+      items: feedData,
+      count: feedData.length,
+      total: totalEntries || feedData.length,
+      isFallback,
+      categoryNames
+    });
+    await displayResults({ feedData });
+    const announcer$1 = new announcer.Announcer({ message });
+    container.appendChild(announcer$1.getElement());
+  };
+  return {
+    displayNoResults,
+    displayResults,
+    displayResultStart
+  };
+}
+exports.createDisplayHandlers = createDisplayHandlers;
+exports.setShadowStyles = setShadowStyles;
+//# sourceMappingURL=displayHandler.js.map

package/dist/factory/helpers/displayHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"displayHandler.js","sources":["../../../source/factory/helpers/displayHandler.ts"],"sourcesContent":["/**\n * Display Handler Utilities\n *\n * Creates handlers for displaying feed results using a display strategy.\n * Handles both initial display and lazy-loaded results.\n *\n * @module factory/helpers/displayHandler\n */\n\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { PaginationState, EmptyState, Announcer } from '../../states';\nimport { events } from '../../helpers';\nimport {\n  DisplayStrategy,\n  FeedHelpers,\n  LayoutStrategy,\n  CardMappingOptions,\n  DisplayResultsProps,\n  NoResultsConfig,\n} from '../core/types';\nimport { ElementModel } from '../../_types';\n\n/**\n * Configuration for creating display handlers\n */\ninterface DisplayHandlerConfig<TData> {\n  /** Strategy for displaying entries */\n  displayStrategy: DisplayStrategy<TData>;\n  /** Strategy for creating layout */\n  layoutStrategy: LayoutStrategy;\n  /** Feed helper functions */\n  helpers: FeedHelpers;\n  /** Options for card mapping */\n  cardMappingOptions: CardMappingOptions;\n  /** Whether lazy loading is enabled */\n  isLazyLoad?: boolean;\n  /** Number of columns to show */\n  numberOfColumnsToShow?: number;\n  /** Number of rows to start with */\n  numberOfRowsToStart: number;\n  /** Configuration for no results state */\n  noResultsConfig?: NoResultsConfig;\n  /** Callback for lazy load */\n  lazyLoadCallback?: () => Promise<void>;\n}\n\n/**\n * Set shadow root styles with CSS optimization\n */\nexport async function setShadowStyles({\n  shadowRoot,\n  styles,\n}: {\n  shadowRoot: ShadowRoot;\n  styles: string;\n}): Promise<void> {\n  const styleElement = document.createElement('style');\n  const optimizedCss = await Styles.utilities.transform.css.removeDuplicates(\n    styles,\n  );\n  styleElement.textContent = optimizedCss;\n  shadowRoot.appendChild(styleElement);\n}\n\n/**\n * Create fallback message for category-filtered feeds with no results\n */\nfunction createFallbackMessage(\n  categoryNames: string[],\n  isThemeDark: boolean = false,\n): ElementModel {\n  const formattedNames = categoryNames.join(', ');\n  const message = `No events found for \"${formattedNames}\" <span> Other upcoming events:</span>`;\n\n  const messageElement = new ElementBuilder(document.createElement('p'))\n    .styled(\n      typography.sans.compose('extralarge', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      textAlign: 'center',\n      margin: '0 auto',\n\n      ['& span']: {\n        display: 'block',\n      },\n    })\n    .withHTML(message);\n\n  const container = new ElementBuilder(document.createElement('div'))\n    .withClassName('feed-events-fallback-message')\n    .withChild(messageElement)\n    .withStyles({\n      element: {\n        marginBottom: Styles.token.spacing.lg,\n        padding: `${Styles.token.spacing.md} ${Styles.token.spacing.lg}`,\n      },\n    })\n    .build();\n\n  return container;\n}\n\n/**\n * Create display handlers for a feed\n *\n * Returns handlers for:\n * - Displaying initial results\n * - Displaying lazy-loaded results\n * - Displaying no results state\n *\n * @param config - Configuration for the display handlers\n * @returns Display handler functions\n *\n * @example\n * ```typescript\n * const handlers = createDisplayHandlers({\n *   displayStrategy: eventsDisplayStrategy,\n *   layoutStrategy: gridGapLayout,\n *   helpers: feedHelpers,\n *   cardMappingOptions: { isThemeDark: false },\n *   isLazyLoad: true,\n *   numberOfColumnsToShow: 3,\n *   numberOfRowsToStart: 2,\n * });\n *\n * // Use handlers\n * handlers.displayResultStart({ feedData, layoutElement });\n * await handlers.displayResults({ feedData });\n * ```\n */\nexport function createDisplayHandlers<TData>(\n  config: DisplayHandlerConfig<TData>,\n) {\n  const {\n    displayStrategy,\n    layoutStrategy,\n    helpers,\n    cardMappingOptions,\n    isLazyLoad,\n    numberOfColumnsToShow = 1,\n    numberOfRowsToStart,\n    noResultsConfig = {},\n    lazyLoadCallback,\n  } = config;\n\n  /**\n   * Handle displaying no results\n   */\n  const displayNoResults = (props: any) => {\n    const container = helpers.getContainer();\n    const shadowRoot = helpers.getShadowRoot();\n    const { message, linkUrl, linkText, isThemeDark } = {\n      ...noResultsConfig,\n      ...props,\n    };\n\n    const emptyState = new EmptyState({\n      message,\n      linkUrl,\n      linkText,\n      isThemeDark,\n    });\n\n    const announcer = new Announcer({ message: message || 'No results found' });\n\n    container.innerHTML = '';\n    emptyState.render(container);\n    container.appendChild(announcer.getElement());\n    helpers.setStyles(emptyState.styles);\n\n    events.dispatch(container, events.eventNames.FEED_ERROR, {\n      error: 'No results found',\n      message,\n      isThemeDark,\n    });\n\n    setTimeout(() => {\n      const styles = helpers.getStyles();\n      if (shadowRoot) {\n        setShadowStyles({ shadowRoot, styles });\n      }\n    }, 100);\n  };\n\n  /**\n   * Handle displaying lazy-loaded results\n   */\n  const displayResults = async (\n    props: DisplayResultsProps<TData>,\n  ): Promise<void> => {\n    const { feedData } = props;\n    const container = helpers.getContainer();\n    const grid = container.querySelector(\n      `#${layoutStrategy.getId()}`,\n    ) as HTMLDivElement;\n\n    // Remove existing loading and pagination states\n    const existingLoader = container.querySelector('.umd-loader-container');\n    existingLoader?.remove();\n\n    const existingPagination = container.querySelector(\n      `.${Styles.layout.alignment.block.center.className}`,\n    );\n    existingPagination?.remove();\n\n    helpers.setOffset(feedData.length);\n\n    // Map entries to cards using display strategy\n    const entries = feedData.map((entry) =>\n      displayStrategy.mapEntryToCard(entry, cardMappingOptions),\n    );\n\n    // Append entries to grid\n    entries.forEach((entry) => {\n      grid.appendChild(entry.element);\n      helpers.setStyles(entry.styles);\n    });\n\n    // Add pagination if lazy load is enabled\n    if (isLazyLoad && lazyLoadCallback) {\n      const pagination = new PaginationState({\n        totalEntries: helpers.getTotalEntries(),\n        offset: helpers.getOffset(),\n        isLazyLoad: true,\n        callback: lazyLoadCallback,\n      });\n\n      const paginationElement = pagination.render(container);\n      if (paginationElement) {\n        helpers.setStyles(paginationElement.styles);\n      }\n    }\n\n    // Update shadow root styles if needed\n    const shadowRoot = helpers.getShadowRoot();\n    if (shadowRoot) {\n      await setShadowStyles({\n        shadowRoot,\n        styles: helpers.getStyles(),\n      });\n    }\n  };\n\n  /**\n   * Handle displaying initial results\n   */\n  const displayResultStart = async (props: {\n    feedData: TData[];\n    layoutElement: ElementModel;\n    isFallback?: boolean;\n    categoryNames?: string[];\n  }): Promise<void> => {\n    const { feedData, layoutElement, isFallback, categoryNames } = props;\n    const container = helpers.getContainer();\n    const totalEntries = helpers.getTotalEntries();\n    const showAmount = numberOfColumnsToShow * numberOfRowsToStart;\n    const message = isLazyLoad\n      ? `Showing ${showAmount} of ${totalEntries} articles`\n      : `Showing ${showAmount} articles`;\n\n    // If this is a fallback, add a message about the category FIRST\n    if (isFallback && categoryNames && categoryNames.length > 0) {\n      const fallbackMessage = createFallbackMessage(\n        categoryNames,\n        cardMappingOptions.isThemeDark || false,\n      );\n      container.appendChild(fallbackMessage.element);\n      helpers.setStyles(fallbackMessage.styles);\n\n      // Inject fallback message styles into shadow DOM immediately\n      const shadowRoot = helpers.getShadowRoot();\n      if (shadowRoot) {\n        await setShadowStyles({\n          shadowRoot,\n          styles: helpers.getStyles(),\n        });\n      }\n    }\n\n    // Set layout ID and append to container\n    layoutElement.element.setAttribute('id', layoutStrategy.getId());\n    container.appendChild(layoutElement.element);\n    helpers.setStyles(layoutElement.styles);\n\n    // Dispatch feed loaded event\n    events.dispatch(container, events.eventNames.FEED_LOADED, {\n      items: feedData,\n      count: feedData.length,\n      total: totalEntries || feedData.length,\n      isFallback,\n      categoryNames,\n    });\n\n    // Display the results\n    await displayResults({ feedData });\n\n    // Add announcer\n    const announcer = new Announcer({ message });\n    container.appendChild(announcer.getElement());\n  };\n\n  return {\n    displayNoResults,\n    displayResults,\n    displayResultStart,\n  };\n}\n"],"names":["Styles","ElementBuilder","typography","theme","EmptyState","announcer","Announcer","events.dispatch","events.eventNames","pagination","PaginationState"],"mappings":"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"}

package/dist/factory/helpers/displayHandler.mjs

@@ -0,0 +1,169 @@
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as Styles from "@universityofmaryland/web-styles-library";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
+import { EmptyState } from "../../states/empty.mjs";
+import { PaginationState } from "../../states/pagination.mjs";
+import { Announcer } from "../../states/announcer.mjs";
+import { dispatch, eventNames } from "../../helpers/events/index.mjs";
+async function setShadowStyles({
+  shadowRoot,
+  styles
+}) {
+  const styleElement = document.createElement("style");
+  const optimizedCss = await Styles.utilities.transform.css.removeDuplicates(
+    styles
+  );
+  styleElement.textContent = optimizedCss;
+  shadowRoot.appendChild(styleElement);
+}
+function createFallbackMessage(categoryNames, isThemeDark = false) {
+  const formattedNames = categoryNames.join(", ");
+  const message = `No events found for "${formattedNames}" <span> Other upcoming events:</span>`;
+  const messageElement = new ElementBuilder(document.createElement("p")).styled(
+    typography.sans.compose("extralarge", {
+      theme: theme.fontColor(isThemeDark)
+    })
+  ).withStyles({
+    textAlign: "center",
+    margin: "0 auto",
+    ["& span"]: {
+      display: "block"
+    }
+  }).withHTML(message);
+  const container = new ElementBuilder(document.createElement("div")).withClassName("feed-events-fallback-message").withChild(messageElement).withStyles({
+    element: {
+      marginBottom: Styles.token.spacing.lg,
+      padding: `${Styles.token.spacing.md} ${Styles.token.spacing.lg}`
+    }
+  }).build();
+  return container;
+}
+function createDisplayHandlers(config) {
+  const {
+    displayStrategy,
+    layoutStrategy,
+    helpers,
+    cardMappingOptions,
+    isLazyLoad,
+    numberOfColumnsToShow = 1,
+    numberOfRowsToStart,
+    noResultsConfig = {},
+    lazyLoadCallback
+  } = config;
+  const displayNoResults = (props) => {
+    const container = helpers.getContainer();
+    const shadowRoot = helpers.getShadowRoot();
+    const { message, linkUrl, linkText, isThemeDark } = {
+      ...noResultsConfig,
+      ...props
+    };
+    const emptyState = new EmptyState({
+      message,
+      linkUrl,
+      linkText,
+      isThemeDark
+    });
+    const announcer = new Announcer({ message: message || "No results found" });
+    container.innerHTML = "";
+    emptyState.render(container);
+    container.appendChild(announcer.getElement());
+    helpers.setStyles(emptyState.styles);
+    dispatch(container, eventNames.FEED_ERROR, {
+      error: "No results found",
+      message,
+      isThemeDark
+    });
+    setTimeout(() => {
+      const styles = helpers.getStyles();
+      if (shadowRoot) {
+        setShadowStyles({ shadowRoot, styles });
+      }
+    }, 100);
+  };
+  const displayResults = async (props) => {
+    const { feedData } = props;
+    const container = helpers.getContainer();
+    const grid = container.querySelector(
+      `#${layoutStrategy.getId()}`
+    );
+    const existingLoader = container.querySelector(".umd-loader-container");
+    existingLoader?.remove();
+    const existingPagination = container.querySelector(
+      `.${Styles.layout.alignment.block.center.className}`
+    );
+    existingPagination?.remove();
+    helpers.setOffset(feedData.length);
+    const entries = feedData.map(
+      (entry) => displayStrategy.mapEntryToCard(entry, cardMappingOptions)
+    );
+    entries.forEach((entry) => {
+      grid.appendChild(entry.element);
+      helpers.setStyles(entry.styles);
+    });
+    if (isLazyLoad && lazyLoadCallback) {
+      const pagination = new PaginationState({
+        totalEntries: helpers.getTotalEntries(),
+        offset: helpers.getOffset(),
+        isLazyLoad: true,
+        callback: lazyLoadCallback
+      });
+      const paginationElement = pagination.render(container);
+      if (paginationElement) {
+        helpers.setStyles(paginationElement.styles);
+      }
+    }
+    const shadowRoot = helpers.getShadowRoot();
+    if (shadowRoot) {
+      await setShadowStyles({
+        shadowRoot,
+        styles: helpers.getStyles()
+      });
+    }
+  };
+  const displayResultStart = async (props) => {
+    const { feedData, layoutElement, isFallback, categoryNames } = props;
+    const container = helpers.getContainer();
+    const totalEntries = helpers.getTotalEntries();
+    const showAmount = numberOfColumnsToShow * numberOfRowsToStart;
+    const message = isLazyLoad ? `Showing ${showAmount} of ${totalEntries} articles` : `Showing ${showAmount} articles`;
+    if (isFallback && categoryNames && categoryNames.length > 0) {
+      const fallbackMessage = createFallbackMessage(
+        categoryNames,
+        cardMappingOptions.isThemeDark || false
+      );
+      container.appendChild(fallbackMessage.element);
+      helpers.setStyles(fallbackMessage.styles);
+      const shadowRoot = helpers.getShadowRoot();
+      if (shadowRoot) {
+        await setShadowStyles({
+          shadowRoot,
+          styles: helpers.getStyles()
+        });
+      }
+    }
+    layoutElement.element.setAttribute("id", layoutStrategy.getId());
+    container.appendChild(layoutElement.element);
+    helpers.setStyles(layoutElement.styles);
+    dispatch(container, eventNames.FEED_LOADED, {
+      items: feedData,
+      count: feedData.length,
+      total: totalEntries || feedData.length,
+      isFallback,
+      categoryNames
+    });
+    await displayResults({ feedData });
+    const announcer = new Announcer({ message });
+    container.appendChild(announcer.getElement());
+  };
+  return {
+    displayNoResults,
+    displayResults,
+    displayResultStart
+  };
+}
+export {
+  createDisplayHandlers,
+  setShadowStyles
+};
+//# sourceMappingURL=displayHandler.mjs.map

package/dist/factory/helpers/displayHandler.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"displayHandler.mjs","sources":["../../../source/factory/helpers/displayHandler.ts"],"sourcesContent":["/**\n * Display Handler Utilities\n *\n * Creates handlers for displaying feed results using a display strategy.\n * Handles both initial display and lazy-loaded results.\n *\n * @module factory/helpers/displayHandler\n */\n\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { PaginationState, EmptyState, Announcer } from '../../states';\nimport { events } from '../../helpers';\nimport {\n  DisplayStrategy,\n  FeedHelpers,\n  LayoutStrategy,\n  CardMappingOptions,\n  DisplayResultsProps,\n  NoResultsConfig,\n} from '../core/types';\nimport { ElementModel } from '../../_types';\n\n/**\n * Configuration for creating display handlers\n */\ninterface DisplayHandlerConfig<TData> {\n  /** Strategy for displaying entries */\n  displayStrategy: DisplayStrategy<TData>;\n  /** Strategy for creating layout */\n  layoutStrategy: LayoutStrategy;\n  /** Feed helper functions */\n  helpers: FeedHelpers;\n  /** Options for card mapping */\n  cardMappingOptions: CardMappingOptions;\n  /** Whether lazy loading is enabled */\n  isLazyLoad?: boolean;\n  /** Number of columns to show */\n  numberOfColumnsToShow?: number;\n  /** Number of rows to start with */\n  numberOfRowsToStart: number;\n  /** Configuration for no results state */\n  noResultsConfig?: NoResultsConfig;\n  /** Callback for lazy load */\n  lazyLoadCallback?: () => Promise<void>;\n}\n\n/**\n * Set shadow root styles with CSS optimization\n */\nexport async function setShadowStyles({\n  shadowRoot,\n  styles,\n}: {\n  shadowRoot: ShadowRoot;\n  styles: string;\n}): Promise<void> {\n  const styleElement = document.createElement('style');\n  const optimizedCss = await Styles.utilities.transform.css.removeDuplicates(\n    styles,\n  );\n  styleElement.textContent = optimizedCss;\n  shadowRoot.appendChild(styleElement);\n}\n\n/**\n * Create fallback message for category-filtered feeds with no results\n */\nfunction createFallbackMessage(\n  categoryNames: string[],\n  isThemeDark: boolean = false,\n): ElementModel {\n  const formattedNames = categoryNames.join(', ');\n  const message = `No events found for \"${formattedNames}\" <span> Other upcoming events:</span>`;\n\n  const messageElement = new ElementBuilder(document.createElement('p'))\n    .styled(\n      typography.sans.compose('extralarge', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      textAlign: 'center',\n      margin: '0 auto',\n\n      ['& span']: {\n        display: 'block',\n      },\n    })\n    .withHTML(message);\n\n  const container = new ElementBuilder(document.createElement('div'))\n    .withClassName('feed-events-fallback-message')\n    .withChild(messageElement)\n    .withStyles({\n      element: {\n        marginBottom: Styles.token.spacing.lg,\n        padding: `${Styles.token.spacing.md} ${Styles.token.spacing.lg}`,\n      },\n    })\n    .build();\n\n  return container;\n}\n\n/**\n * Create display handlers for a feed\n *\n * Returns handlers for:\n * - Displaying initial results\n * - Displaying lazy-loaded results\n * - Displaying no results state\n *\n * @param config - Configuration for the display handlers\n * @returns Display handler functions\n *\n * @example\n * ```typescript\n * const handlers = createDisplayHandlers({\n *   displayStrategy: eventsDisplayStrategy,\n *   layoutStrategy: gridGapLayout,\n *   helpers: feedHelpers,\n *   cardMappingOptions: { isThemeDark: false },\n *   isLazyLoad: true,\n *   numberOfColumnsToShow: 3,\n *   numberOfRowsToStart: 2,\n * });\n *\n * // Use handlers\n * handlers.displayResultStart({ feedData, layoutElement });\n * await handlers.displayResults({ feedData });\n * ```\n */\nexport function createDisplayHandlers<TData>(\n  config: DisplayHandlerConfig<TData>,\n) {\n  const {\n    displayStrategy,\n    layoutStrategy,\n    helpers,\n    cardMappingOptions,\n    isLazyLoad,\n    numberOfColumnsToShow = 1,\n    numberOfRowsToStart,\n    noResultsConfig = {},\n    lazyLoadCallback,\n  } = config;\n\n  /**\n   * Handle displaying no results\n   */\n  const displayNoResults = (props: any) => {\n    const container = helpers.getContainer();\n    const shadowRoot = helpers.getShadowRoot();\n    const { message, linkUrl, linkText, isThemeDark } = {\n      ...noResultsConfig,\n      ...props,\n    };\n\n    const emptyState = new EmptyState({\n      message,\n      linkUrl,\n      linkText,\n      isThemeDark,\n    });\n\n    const announcer = new Announcer({ message: message || 'No results found' });\n\n    container.innerHTML = '';\n    emptyState.render(container);\n    container.appendChild(announcer.getElement());\n    helpers.setStyles(emptyState.styles);\n\n    events.dispatch(container, events.eventNames.FEED_ERROR, {\n      error: 'No results found',\n      message,\n      isThemeDark,\n    });\n\n    setTimeout(() => {\n      const styles = helpers.getStyles();\n      if (shadowRoot) {\n        setShadowStyles({ shadowRoot, styles });\n      }\n    }, 100);\n  };\n\n  /**\n   * Handle displaying lazy-loaded results\n   */\n  const displayResults = async (\n    props: DisplayResultsProps<TData>,\n  ): Promise<void> => {\n    const { feedData } = props;\n    const container = helpers.getContainer();\n    const grid = container.querySelector(\n      `#${layoutStrategy.getId()}`,\n    ) as HTMLDivElement;\n\n    // Remove existing loading and pagination states\n    const existingLoader = container.querySelector('.umd-loader-container');\n    existingLoader?.remove();\n\n    const existingPagination = container.querySelector(\n      `.${Styles.layout.alignment.block.center.className}`,\n    );\n    existingPagination?.remove();\n\n    helpers.setOffset(feedData.length);\n\n    // Map entries to cards using display strategy\n    const entries = feedData.map((entry) =>\n      displayStrategy.mapEntryToCard(entry, cardMappingOptions),\n    );\n\n    // Append entries to grid\n    entries.forEach((entry) => {\n      grid.appendChild(entry.element);\n      helpers.setStyles(entry.styles);\n    });\n\n    // Add pagination if lazy load is enabled\n    if (isLazyLoad && lazyLoadCallback) {\n      const pagination = new PaginationState({\n        totalEntries: helpers.getTotalEntries(),\n        offset: helpers.getOffset(),\n        isLazyLoad: true,\n        callback: lazyLoadCallback,\n      });\n\n      const paginationElement = pagination.render(container);\n      if (paginationElement) {\n        helpers.setStyles(paginationElement.styles);\n      }\n    }\n\n    // Update shadow root styles if needed\n    const shadowRoot = helpers.getShadowRoot();\n    if (shadowRoot) {\n      await setShadowStyles({\n        shadowRoot,\n        styles: helpers.getStyles(),\n      });\n    }\n  };\n\n  /**\n   * Handle displaying initial results\n   */\n  const displayResultStart = async (props: {\n    feedData: TData[];\n    layoutElement: ElementModel;\n    isFallback?: boolean;\n    categoryNames?: string[];\n  }): Promise<void> => {\n    const { feedData, layoutElement, isFallback, categoryNames } = props;\n    const container = helpers.getContainer();\n    const totalEntries = helpers.getTotalEntries();\n    const showAmount = numberOfColumnsToShow * numberOfRowsToStart;\n    const message = isLazyLoad\n      ? `Showing ${showAmount} of ${totalEntries} articles`\n      : `Showing ${showAmount} articles`;\n\n    // If this is a fallback, add a message about the category FIRST\n    if (isFallback && categoryNames && categoryNames.length > 0) {\n      const fallbackMessage = createFallbackMessage(\n        categoryNames,\n        cardMappingOptions.isThemeDark || false,\n      );\n      container.appendChild(fallbackMessage.element);\n      helpers.setStyles(fallbackMessage.styles);\n\n      // Inject fallback message styles into shadow DOM immediately\n      const shadowRoot = helpers.getShadowRoot();\n      if (shadowRoot) {\n        await setShadowStyles({\n          shadowRoot,\n          styles: helpers.getStyles(),\n        });\n      }\n    }\n\n    // Set layout ID and append to container\n    layoutElement.element.setAttribute('id', layoutStrategy.getId());\n    container.appendChild(layoutElement.element);\n    helpers.setStyles(layoutElement.styles);\n\n    // Dispatch feed loaded event\n    events.dispatch(container, events.eventNames.FEED_LOADED, {\n      items: feedData,\n      count: feedData.length,\n      total: totalEntries || feedData.length,\n      isFallback,\n      categoryNames,\n    });\n\n    // Display the results\n    await displayResults({ feedData });\n\n    // Add announcer\n    const announcer = new Announcer({ message });\n    container.appendChild(announcer.getElement());\n  };\n\n  return {\n    displayNoResults,\n    displayResults,\n    displayResultStart,\n  };\n}\n"],"names":["events.dispatch","events.eventNames"],"mappings":";;;;;;;;AAoDA,eAAsB,gBAAgB;AAAA,EACpC;AAAA,EACA;AACF,GAGkB;AAChB,QAAM,eAAe,SAAS,cAAc,OAAO;AACnD,QAAM,eAAe,MAAM,OAAO,UAAU,UAAU,IAAI;AAAA,IACxD;AAAA,EAAA;AAEF,eAAa,cAAc;AAC3B,aAAW,YAAY,YAAY;AACrC;AAKA,SAAS,sBACP,eACA,cAAuB,OACT;AACd,QAAM,iBAAiB,cAAc,KAAK,IAAI;AAC9C,QAAM,UAAU,wBAAwB,cAAc;AAEtD,QAAM,iBAAiB,IAAI,eAAe,SAAS,cAAc,GAAG,CAAC,EAClE;AAAA,IACC,WAAW,KAAK,QAAQ,cAAc;AAAA,MACpC,OAAO,MAAM,UAAU,WAAW;AAAA,IAAA,CACnC;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,WAAW;AAAA,IACX,QAAQ;AAAA,IAER,CAAC,QAAQ,GAAG;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EACX,CACD,EACA,SAAS,OAAO;AAEnB,QAAM,YAAY,IAAI,eAAe,SAAS,cAAc,KAAK,CAAC,EAC/D,cAAc,8BAA8B,EAC5C,UAAU,cAAc,EACxB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,cAAc,OAAO,MAAM,QAAQ;AAAA,MACnC,SAAS,GAAG,OAAO,MAAM,QAAQ,EAAE,IAAI,OAAO,MAAM,QAAQ,EAAE;AAAA,IAAA;AAAA,EAChE,CACD,EACA,MAAA;AAEH,SAAO;AACT;AA8BO,SAAS,sBACd,QACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,wBAAwB;AAAA,IACxB;AAAA,IACA,kBAAkB,CAAA;AAAA,IAClB;AAAA,EAAA,IACE;AAKJ,QAAM,mBAAmB,CAAC,UAAe;AACvC,UAAM,YAAY,QAAQ,aAAA;AAC1B,UAAM,aAAa,QAAQ,cAAA;AAC3B,UAAM,EAAE,SAAS,SAAS,UAAU,gBAAgB;AAAA,MAClD,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAGL,UAAM,aAAa,IAAI,WAAW;AAAA,MAChC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAED,UAAM,YAAY,IAAI,UAAU,EAAE,SAAS,WAAW,oBAAoB;AAE1E,cAAU,YAAY;AACtB,eAAW,OAAO,SAAS;AAC3B,cAAU,YAAY,UAAU,YAAY;AAC5C,YAAQ,UAAU,WAAW,MAAM;AAEnCA,aAAgB,WAAWC,WAAkB,YAAY;AAAA,MACvD,OAAO;AAAA,MACP;AAAA,MACA;AAAA,IAAA,CACD;AAED,eAAW,MAAM;AACf,YAAM,SAAS,QAAQ,UAAA;AACvB,UAAI,YAAY;AACd,wBAAgB,EAAE,YAAY,QAAQ;AAAA,MACxC;AAAA,IACF,GAAG,GAAG;AAAA,EACR;AAKA,QAAM,iBAAiB,OACrB,UACkB;AAClB,UAAM,EAAE,aAAa;AACrB,UAAM,YAAY,QAAQ,aAAA;AAC1B,UAAM,OAAO,UAAU;AAAA,MACrB,IAAI,eAAe,OAAO;AAAA,IAAA;AAI5B,UAAM,iBAAiB,UAAU,cAAc,uBAAuB;AACtE,oBAAgB,OAAA;AAEhB,UAAM,qBAAqB,UAAU;AAAA,MACnC,IAAI,OAAO,OAAO,UAAU,MAAM,OAAO,SAAS;AAAA,IAAA;AAEpD,wBAAoB,OAAA;AAEpB,YAAQ,UAAU,SAAS,MAAM;AAGjC,UAAM,UAAU,SAAS;AAAA,MAAI,CAAC,UAC5B,gBAAgB,eAAe,OAAO,kBAAkB;AAAA,IAAA;AAI1D,YAAQ,QAAQ,CAAC,UAAU;AACzB,WAAK,YAAY,MAAM,OAAO;AAC9B,cAAQ,UAAU,MAAM,MAAM;AAAA,IAChC,CAAC;AAGD,QAAI,cAAc,kBAAkB;AAClC,YAAM,aAAa,IAAI,gBAAgB;AAAA,QACrC,cAAc,QAAQ,gBAAA;AAAA,QACtB,QAAQ,QAAQ,UAAA;AAAA,QAChB,YAAY;AAAA,QACZ,UAAU;AAAA,MAAA,CACX;AAED,YAAM,oBAAoB,WAAW,OAAO,SAAS;AACrD,UAAI,mBAAmB;AACrB,gBAAQ,UAAU,kBAAkB,MAAM;AAAA,MAC5C;AAAA,IACF;AAGA,UAAM,aAAa,QAAQ,cAAA;AAC3B,QAAI,YAAY;AACd,YAAM,gBAAgB;AAAA,QACpB;AAAA,QACA,QAAQ,QAAQ,UAAA;AAAA,MAAU,CAC3B;AAAA,IACH;AAAA,EACF;AAKA,QAAM,qBAAqB,OAAO,UAKb;AACnB,UAAM,EAAE,UAAU,eAAe,YAAY,kBAAkB;AAC/D,UAAM,YAAY,QAAQ,aAAA;AAC1B,UAAM,eAAe,QAAQ,gBAAA;AAC7B,UAAM,aAAa,wBAAwB;AAC3C,UAAM,UAAU,aACZ,WAAW,UAAU,OAAO,YAAY,cACxC,WAAW,UAAU;AAGzB,QAAI,cAAc,iBAAiB,cAAc,SAAS,GAAG;AAC3D,YAAM,kBAAkB;AAAA,QACtB;AAAA,QACA,mBAAmB,eAAe;AAAA,MAAA;AAEpC,gBAAU,YAAY,gBAAgB,OAAO;AAC7C,cAAQ,UAAU,gBAAgB,MAAM;AAGxC,YAAM,aAAa,QAAQ,cAAA;AAC3B,UAAI,YAAY;AACd,cAAM,gBAAgB;AAAA,UACpB;AAAA,UACA,QAAQ,QAAQ,UAAA;AAAA,QAAU,CAC3B;AAAA,MACH;AAAA,IACF;AAGA,kBAAc,QAAQ,aAAa,MAAM,eAAe,OAAO;AAC/D,cAAU,YAAY,cAAc,OAAO;AAC3C,YAAQ,UAAU,cAAc,MAAM;AAGtCD,aAAgB,WAAWC,WAAkB,aAAa;AAAA,MACxD,OAAO;AAAA,MACP,OAAO,SAAS;AAAA,MAChB,OAAO,gBAAgB,SAAS;AAAA,MAChC;AAAA,MACA;AAAA,IAAA,CACD;AAGD,UAAM,eAAe,EAAE,UAAU;AAGjC,UAAM,YAAY,IAAI,UAAU,EAAE,SAAS;AAC3C,cAAU,YAAY,UAAU,YAAY;AAAA,EAC9C;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/factory/helpers/feedHelpers.d.ts

@@ -0,0 +1,10 @@
+import { FeedHelpers } from '../core/types';
+interface FeedHelpersConfig {
+    container: HTMLElement;
+    initialStyles?: string;
+    shadowRoot?: ShadowRoot | null;
+}
+export declare function createFeedHelpers(config: FeedHelpersConfig): FeedHelpers;
+export declare function updateShadowRoot(helpers: FeedHelpers, shadowRoot: ShadowRoot): void;
+export {};
+//# sourceMappingURL=feedHelpers.d.ts.map

package/dist/factory/helpers/feedHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedHelpers.d.ts","sourceRoot":"","sources":["../../../source/factory/helpers/feedHelpers.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK5C,UAAU,iBAAiB;IAEzB,SAAS,EAAE,WAAW,CAAC;IAEvB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,UAAU,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;CAChC;AAgCD,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,iBAAiB,GAAG,WAAW,CAsCxE;AAaD,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,UAAU,GACrB,IAAI,CAKN"}

package/dist/factory/helpers/feedHelpers.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function createFeedHelpers(config) {
+  const { container, initialStyles = "", shadowRoot: initialShadowRoot = null } = config;
+  const state = {
+    totalEntries: 0,
+    offset: 0,
+    styles: initialStyles,
+    shadowRoot: initialShadowRoot
+  };
+  return {
+    setTotalEntries: (count) => {
+      state.totalEntries = count;
+    },
+    setOffset: (count) => {
+      state.offset = state.offset + count;
+    },
+    setStyles: (additionalStyles) => {
+      state.styles += additionalStyles;
+    },
+    setShadowRoot: (shadow) => {
+      state.shadowRoot = shadow;
+    },
+    getContainer: () => container,
+    getOffset: () => state.offset,
+    getTotalEntries: () => state.totalEntries,
+    getStyles: () => state.styles,
+    getShadowRoot: () => state.shadowRoot
+  };
+}
+exports.createFeedHelpers = createFeedHelpers;
+//# sourceMappingURL=feedHelpers.js.map

package/dist/factory/helpers/feedHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedHelpers.js","sources":["../../../source/factory/helpers/feedHelpers.ts"],"sourcesContent":["/**\n * Feed Helper Utilities\n *\n * Creates standard helper functions for managing feed state.\n * These helpers are passed to all strategies and lifecycle handlers.\n *\n * @module factory/helpers/feedHelpers\n */\n\nimport { FeedHelpers } from '../core/types';\n\n/**\n * Configuration for creating feed helpers\n */\ninterface FeedHelpersConfig {\n  /** The feed container element */\n  container: HTMLElement;\n  /** Initial styles */\n  initialStyles?: string;\n  /** Shadow root if available */\n  shadowRoot?: ShadowRoot | null;\n}\n\n/**\n * Internal state managed by the helpers\n */\ninterface FeedState {\n  totalEntries: number;\n  offset: number;\n  styles: string;\n  shadowRoot: ShadowRoot | null;\n}\n\n/**\n * Create feed helper functions\n *\n * These helpers provide a consistent API for managing feed state\n * across different feed types and layouts.\n *\n * @param config - Configuration for the helpers\n * @returns Feed helper functions\n *\n * @example\n * ```typescript\n * const container = document.createElement('div');\n * const helpers = createFeedHelpers({ container });\n *\n * helpers.setTotalEntries(100);\n * helpers.setOffset(10);\n * console.log(helpers.getTotalEntries()); // 100\n * console.log(helpers.getOffset()); // 10\n * ```\n */\nexport function createFeedHelpers(config: FeedHelpersConfig): FeedHelpers {\n  const { container, initialStyles = '', shadowRoot: initialShadowRoot = null } = config;\n\n  // Internal state\n  const state: FeedState = {\n    totalEntries: 0,\n    offset: 0,\n    styles: initialStyles,\n    shadowRoot: initialShadowRoot,\n  };\n\n  return {\n    setTotalEntries: (count: number) => {\n      state.totalEntries = count;\n    },\n\n    setOffset: (count: number) => {\n      state.offset = state.offset + count;\n    },\n\n    setStyles: (additionalStyles: string) => {\n      state.styles += additionalStyles;\n    },\n\n    setShadowRoot: (shadow: ShadowRoot) => {\n      state.shadowRoot = shadow;\n    },\n\n    getContainer: () => container,\n\n    getOffset: () => state.offset,\n\n    getTotalEntries: () => state.totalEntries,\n\n    getStyles: () => state.styles,\n\n    getShadowRoot: () => state.shadowRoot,\n  };\n}\n\n/**\n * Update the shadow root reference in helpers\n *\n * This is called when a shadow root becomes available\n * (typically from a web component callback)\n *\n * @param helpers - The feed helpers\n * @param shadowRoot - The shadow root to set\n *\n * @internal\n */\nexport function updateShadowRoot(\n  helpers: FeedHelpers,\n  shadowRoot: ShadowRoot\n): void {\n  // We need to mutate the internal state\n  // This is safe because helpers is always created fresh per feed instance\n  const state = (helpers as any).state || {};\n  state.shadowRoot = shadowRoot;\n}\n"],"names":[],"mappings":";;AAqDO,SAAS,kBAAkB,QAAwC;AACxE,QAAM,EAAE,WAAW,gBAAgB,IAAI,YAAY,oBAAoB,SAAS;AAGhF,QAAM,QAAmB;AAAA,IACvB,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,EAAA;AAGd,SAAO;AAAA,IACL,iBAAiB,CAAC,UAAkB;AAClC,YAAM,eAAe;AAAA,IACvB;AAAA,IAEA,WAAW,CAAC,UAAkB;AAC5B,YAAM,SAAS,MAAM,SAAS;AAAA,IAChC;AAAA,IAEA,WAAW,CAAC,qBAA6B;AACvC,YAAM,UAAU;AAAA,IAClB;AAAA,IAEA,eAAe,CAAC,WAAuB;AACrC,YAAM,aAAa;AAAA,IACrB;AAAA,IAEA,cAAc,MAAM;AAAA,IAEpB,WAAW,MAAM,MAAM;AAAA,IAEvB,iBAAiB,MAAM,MAAM;AAAA,IAE7B,WAAW,MAAM,MAAM;AAAA,IAEvB,eAAe,MAAM,MAAM;AAAA,EAAA;AAE/B;;"}

package/dist/factory/helpers/feedHelpers.mjs

@@ -0,0 +1,32 @@
+function createFeedHelpers(config) {
+  const { container, initialStyles = "", shadowRoot: initialShadowRoot = null } = config;
+  const state = {
+    totalEntries: 0,
+    offset: 0,
+    styles: initialStyles,
+    shadowRoot: initialShadowRoot
+  };
+  return {
+    setTotalEntries: (count) => {
+      state.totalEntries = count;
+    },
+    setOffset: (count) => {
+      state.offset = state.offset + count;
+    },
+    setStyles: (additionalStyles) => {
+      state.styles += additionalStyles;
+    },
+    setShadowRoot: (shadow) => {
+      state.shadowRoot = shadow;
+    },
+    getContainer: () => container,
+    getOffset: () => state.offset,
+    getTotalEntries: () => state.totalEntries,
+    getStyles: () => state.styles,
+    getShadowRoot: () => state.shadowRoot
+  };
+}
+export {
+  createFeedHelpers
+};
+//# sourceMappingURL=feedHelpers.mjs.map

package/dist/factory/helpers/feedHelpers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedHelpers.mjs","sources":["../../../source/factory/helpers/feedHelpers.ts"],"sourcesContent":["/**\n * Feed Helper Utilities\n *\n * Creates standard helper functions for managing feed state.\n * These helpers are passed to all strategies and lifecycle handlers.\n *\n * @module factory/helpers/feedHelpers\n */\n\nimport { FeedHelpers } from '../core/types';\n\n/**\n * Configuration for creating feed helpers\n */\ninterface FeedHelpersConfig {\n  /** The feed container element */\n  container: HTMLElement;\n  /** Initial styles */\n  initialStyles?: string;\n  /** Shadow root if available */\n  shadowRoot?: ShadowRoot | null;\n}\n\n/**\n * Internal state managed by the helpers\n */\ninterface FeedState {\n  totalEntries: number;\n  offset: number;\n  styles: string;\n  shadowRoot: ShadowRoot | null;\n}\n\n/**\n * Create feed helper functions\n *\n * These helpers provide a consistent API for managing feed state\n * across different feed types and layouts.\n *\n * @param config - Configuration for the helpers\n * @returns Feed helper functions\n *\n * @example\n * ```typescript\n * const container = document.createElement('div');\n * const helpers = createFeedHelpers({ container });\n *\n * helpers.setTotalEntries(100);\n * helpers.setOffset(10);\n * console.log(helpers.getTotalEntries()); // 100\n * console.log(helpers.getOffset()); // 10\n * ```\n */\nexport function createFeedHelpers(config: FeedHelpersConfig): FeedHelpers {\n  const { container, initialStyles = '', shadowRoot: initialShadowRoot = null } = config;\n\n  // Internal state\n  const state: FeedState = {\n    totalEntries: 0,\n    offset: 0,\n    styles: initialStyles,\n    shadowRoot: initialShadowRoot,\n  };\n\n  return {\n    setTotalEntries: (count: number) => {\n      state.totalEntries = count;\n    },\n\n    setOffset: (count: number) => {\n      state.offset = state.offset + count;\n    },\n\n    setStyles: (additionalStyles: string) => {\n      state.styles += additionalStyles;\n    },\n\n    setShadowRoot: (shadow: ShadowRoot) => {\n      state.shadowRoot = shadow;\n    },\n\n    getContainer: () => container,\n\n    getOffset: () => state.offset,\n\n    getTotalEntries: () => state.totalEntries,\n\n    getStyles: () => state.styles,\n\n    getShadowRoot: () => state.shadowRoot,\n  };\n}\n\n/**\n * Update the shadow root reference in helpers\n *\n * This is called when a shadow root becomes available\n * (typically from a web component callback)\n *\n * @param helpers - The feed helpers\n * @param shadowRoot - The shadow root to set\n *\n * @internal\n */\nexport function updateShadowRoot(\n  helpers: FeedHelpers,\n  shadowRoot: ShadowRoot\n): void {\n  // We need to mutate the internal state\n  // This is safe because helpers is always created fresh per feed instance\n  const state = (helpers as any).state || {};\n  state.shadowRoot = shadowRoot;\n}\n"],"names":[],"mappings":"AAqDO,SAAS,kBAAkB,QAAwC;AACxE,QAAM,EAAE,WAAW,gBAAgB,IAAI,YAAY,oBAAoB,SAAS;AAGhF,QAAM,QAAmB;AAAA,IACvB,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,EAAA;AAGd,SAAO;AAAA,IACL,iBAAiB,CAAC,UAAkB;AAClC,YAAM,eAAe;AAAA,IACvB;AAAA,IAEA,WAAW,CAAC,UAAkB;AAC5B,YAAM,SAAS,MAAM,SAAS;AAAA,IAChC;AAAA,IAEA,WAAW,CAAC,qBAA6B;AACvC,YAAM,UAAU;AAAA,IAClB;AAAA,IAEA,eAAe,CAAC,WAAuB;AACrC,YAAM,aAAa;AAAA,IACrB;AAAA,IAEA,cAAc,MAAM;AAAA,IAEpB,WAAW,MAAM,MAAM;AAAA,IAEvB,iBAAiB,MAAM,MAAM;AAAA,IAE7B,WAAW,MAAM,MAAM;AAAA,IAEvB,eAAe,MAAM,MAAM;AAAA,EAAA;AAE/B;"}

package/dist/factory/helpers/fetchHandler.d.ts

@@ -0,0 +1,22 @@
+import { FetchStrategy, FeedHelpers } from '../core/types';
+interface FetchHandlerConfig<TData, TVariables> {
+    fetchStrategy: FetchStrategy<TData, TVariables>;
+    helpers: FeedHelpers;
+    baseProps: any;
+    displayHandlers: {
+        displayResultStart: (props: any) => Promise<void>;
+        displayResults: (props: {
+            feedData: TData[];
+        }) => Promise<void>;
+        displayNoResults: (props: any) => void;
+    };
+    layoutElement: any;
+    isThemeDark?: boolean;
+    enableCategoryFallback?: boolean;
+}
+export declare function createFetchHandlers<TData, TVariables>(config: FetchHandlerConfig<TData, TVariables>): {
+    start: () => Promise<void>;
+    loadMore: () => Promise<void>;
+};
+export {};
+//# sourceMappingURL=fetchHandler.d.ts.map

package/dist/factory/helpers/fetchHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fetchHandler.d.ts","sourceRoot":"","sources":["../../../source/factory/helpers/fetchHandler.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK3D,UAAU,kBAAkB,CAAC,KAAK,EAAE,UAAU;IAE5C,aAAa,EAAE,aAAa,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IAEhD,OAAO,EAAE,WAAW,CAAC;IAErB,SAAS,EAAE,GAAG,CAAC;IAEf,eAAe,EAAE;QACf,kBAAkB,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;QAClD,cAAc,EAAE,CAAC,KAAK,EAAE;YAAE,QAAQ,EAAE,KAAK,EAAE,CAAA;SAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;QAChE,gBAAgB,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;KACxC,CAAC;IAEF,aAAa,EAAE,GAAG,CAAC;IAEnB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AA8BD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,UAAU,EACnD,MAAM,EAAE,kBAAkB,CAAC,KAAK,EAAE,UAAU,CAAC;iBAoErB,OAAO,CAAC,IAAI,CAAC;oBArDV,OAAO,CAAC,IAAI,CAAC;EA6IzC"}