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

package/dist/feeds/events/grouped.js

@@ -0,0 +1,353 @@
+"use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const composite = require("@universityofmaryland/web-elements-library/composite");
+const atomic = require("@universityofmaryland/web-elements-library/atomic");
+const elements = require("@universityofmaryland/web-utilities-library/elements");
+const loading = require("../../states/loading.js");
+const empty = require("../../states/empty.js");
+const pagination = require("../../states/pagination.js");
+const announcer = require("../../states/announcer.js");
+require("@universityofmaryland/web-utilities-library/network");
+const events = require("../../strategies/fetch/events.js");
+require("../../strategies/fetch/news.js");
+require("../../strategies/fetch/experts.js");
+require("@universityofmaryland/web-elements-library/layout");
+const index = require("../../helpers/events/index.js");
+const events$1 = require("../../helpers/grouping/events.js");
+const shadow = require("../../helpers/styles/shadow.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 createFetchProps = (props, offset) => ({
+  token: props.token,
+  categories: props.categories,
+  numberOfColumnsToShow: 1,
+  numberOfRowsToStart: props.numberOfRowsToStart,
+  getOffset: () => offset
+});
+const createImageConfig = (entry) => ({
+  imageUrl: entry.image[0].url,
+  altText: entry.image[0].altText || "Event Image",
+  linkUrl: entry.url,
+  linkLabel: "University of Maryland Event"
+});
+const createAnnouncerMessage = (count, total, isLazyLoad) => {
+  return isLazyLoad ? `Showing ${count} of ${total} events` : `Showing ${count} events`;
+};
+class GroupedFeedState {
+  /**
+   * Initialize state with initial styles
+   *
+   * @param initialStyles - Initial CSS styles
+   */
+  constructor(initialStyles) {
+    this.stylesArray = [];
+    this.shadowRoot = null;
+    this.totalEntries = 0;
+    this.offset = 0;
+    this.lastDateHeadline = null;
+    this.stylesArray.push(initialStyles);
+  }
+  /**
+   * Add styles to the accumulated styles
+   *
+   * @param styles - CSS styles to add
+   */
+  addStyles(styles) {
+    this.stylesArray.push(styles);
+  }
+  /**
+   * Set shadow root reference for style updates
+   *
+   * @param shadow - Shadow root element
+   */
+  setShadowRoot(shadow2) {
+    this.shadowRoot = shadow2;
+  }
+  /**
+   * Update shadow DOM styles
+   *
+   * @returns Promise that resolves when styles are updated
+   */
+  async updateShadowStyles() {
+    if (!this.shadowRoot) return;
+    await shadow.setShadowStyles({
+      shadowRoot: this.shadowRoot,
+      styles: this.getStyles()
+    });
+  }
+  /**
+   * Get accumulated styles as single string
+   *
+   * @returns Combined CSS styles
+   */
+  getStyles() {
+    return this.stylesArray.join("\n");
+  }
+  /**
+   * Get shadow root callback for events
+   *
+   * @returns Callback function for shadow root
+   */
+  getShadowCallback() {
+    return (shadow2) => this.setShadowRoot(shadow2);
+  }
+  /**
+   * Get current offset
+   *
+   * @returns Current offset
+   */
+  getOffset() {
+    return this.offset;
+  }
+  /**
+   * Increment offset by count
+   *
+   * @param count - Number to increment by
+   */
+  incrementOffset(count) {
+    this.offset += count;
+  }
+  /**
+   * Get total entries
+   *
+   * @returns Total entries
+   */
+  getTotalEntries() {
+    return this.totalEntries;
+  }
+  /**
+   * Set total entries
+   *
+   * @param total - Total entries
+   */
+  setTotalEntries(total) {
+    this.totalEntries = total;
+  }
+  /**
+   * Get last date headline
+   *
+   * @returns Last date headline or null
+   */
+  getLastDateHeadline() {
+    return this.lastDateHeadline;
+  }
+  /**
+   * Set last date headline
+   *
+   * @param headline - Date headline
+   */
+  setLastDateHeadline(headline) {
+    this.lastDateHeadline = headline;
+  }
+}
+const createDateHeader = (date, state) => {
+  const dateHeadline = document.createElement("p");
+  dateHeadline.textContent = date;
+  const headerElement = new webBuilderLibrary.ElementBuilder(dateHeadline).styled(Styles__namespace.element.text.decoration.ribbon).withStyles({
+    element: {
+      margin: `${Styles__namespace.token.spacing.lg} 0`
+    }
+  }).build();
+  state.addStyles(headerElement.styles);
+  return headerElement;
+};
+const createEventCard = (entry, isThemeDark) => {
+  return composite.card.list({
+    headline: elements.createTextWithLink({ text: entry.title, url: entry.url }),
+    text: elements.createTextContainer({ text: entry.summary, allowHTML: true }),
+    dateSign: atomic.events.sign({
+      startMonth: entry.startMonth,
+      startDay: entry.startDay,
+      endMonth: entry.endMonth,
+      endDay: entry.endDay,
+      isThemeDark,
+      isLargeSize: true
+    }),
+    eventMeta: atomic.events.meta({
+      ...entry,
+      isThemeDark
+    }),
+    image: elements.createImageOrLinkedImage(createImageConfig(entry)),
+    isAligned: false,
+    isThemeDark
+  });
+};
+const createGroupContainer = (events2, state, isThemeDark) => {
+  const entriesBuilder = new webBuilderLibrary.ElementBuilder("div").withClassName("umd-feed-events-grouped-entries").withStyles({
+    element: {
+      [` > *:not(:last-child)`]: {
+        paddingBottom: Styles__namespace.token.spacing.md,
+        marginBottom: Styles__namespace.token.spacing.md,
+        borderBottom: `1px solid ${isThemeDark ? Styles__namespace.token.color.gray.dark : Styles__namespace.token.color.gray.light}`
+      },
+      [`+ .umd-feed-events-grouped-entries`]: {
+        paddingTop: Styles__namespace.token.spacing.md,
+        marginTop: Styles__namespace.token.spacing.md,
+        borderTop: `1px solid ${isThemeDark ? Styles__namespace.token.color.gray.dark : Styles__namespace.token.color.gray.light}`
+      }
+    }
+  });
+  events2.forEach((entry) => {
+    const eventCard = createEventCard(entry, isThemeDark);
+    entriesBuilder.withChild(eventCard);
+    state.addStyles(eventCard.styles);
+  });
+  const groupElement = entriesBuilder.build();
+  state.addStyles(groupElement.styles);
+  return groupElement;
+};
+const renderGroupedEvents = async (container, events2, state, isThemeDark, isLazyLoad, loadMore) => {
+  const grid = container.querySelector(
+    "#umd-feed-events-grouped-container"
+  );
+  if (!grid) return;
+  container.querySelector(".umd-loader-container")?.remove();
+  container.querySelector(`.${Styles__namespace.layout.alignment.block.center.className}`)?.remove();
+  const groupedEvents = events$1.groupEventsByDate(events2);
+  let actualEventCount = 0;
+  groupedEvents.forEach((group) => {
+    if (group.date !== state.getLastDateHeadline()) {
+      const headerElement = createDateHeader(group.date, state);
+      grid.appendChild(headerElement.element);
+      state.setLastDateHeadline(group.date);
+    }
+    const groupElement = createGroupContainer(group.events, state, isThemeDark);
+    grid.appendChild(groupElement.element);
+    actualEventCount += group.events.length;
+  });
+  state.incrementOffset(actualEventCount);
+  if (isLazyLoad && state.getTotalEntries() > state.getOffset()) {
+    const pagination$1 = new pagination.PaginationState({
+      totalEntries: state.getTotalEntries(),
+      offset: state.getOffset(),
+      isLazyLoad: true,
+      callback: loadMore
+    });
+    const paginationElement = pagination$1.render(container);
+    if (paginationElement) {
+      state.addStyles(paginationElement.styles);
+    }
+  }
+  await state.updateShadowStyles();
+};
+const renderError = async (container, state, isThemeDark) => {
+  const emptyState = new empty.EmptyState({
+    message: "No events found",
+    isThemeDark
+  });
+  emptyState.render(container);
+  state.addStyles(emptyState.styles);
+  const announcer$1 = new announcer.Announcer({ message: "No events found" });
+  container.appendChild(announcer$1.getElement());
+  index.dispatch(container, index.eventNames.FEED_ERROR, {
+    error: "No results found"
+  });
+  await state.updateShadowStyles();
+};
+const grouped = (props) => {
+  const {
+    token,
+    isThemeDark = false,
+    isLazyLoad = false,
+    numberOfRowsToStart,
+    categories
+  } = props;
+  const containerBuilder = new webBuilderLibrary.ElementBuilder("div").withClassName(
+    "events-grouped-feed"
+  );
+  const container = containerBuilder.getElement();
+  const loading$1 = new loading.LoadingState({ isThemeDark });
+  const state = new GroupedFeedState(loading$1.styles);
+  const layoutElement = new webBuilderLibrary.ElementBuilder("div").withClassName("umd-feed-events-grouped").build();
+  state.addStyles(layoutElement.styles);
+  const loadMore = async () => {
+    const fetchProps = createFetchProps(
+      { token, categories, numberOfRowsToStart },
+      state.getOffset()
+    );
+    const variables = events.eventsFetchStrategyRange.composeApiVariables(fetchProps);
+    const entries = await events.eventsFetchStrategyRange.fetchEntries(variables);
+    if (entries && entries.length > 0) {
+      await renderGroupedEvents(
+        container,
+        entries,
+        state,
+        isThemeDark,
+        isLazyLoad,
+        loadMore
+      );
+    }
+  };
+  const initialize = async () => {
+    loading$1.show(container);
+    const fetchProps = createFetchProps(
+      { token, categories, numberOfRowsToStart },
+      0
+    );
+    const variables = events.eventsFetchStrategyRange.composeApiVariables(fetchProps);
+    const [count, entries] = await Promise.all([
+      events.eventsFetchStrategyRange.fetchCount(variables),
+      events.eventsFetchStrategyRange.fetchEntries(variables)
+    ]);
+    loading$1.hide();
+    if (!entries || entries.length === 0) {
+      await renderError(container, state, isThemeDark);
+      return;
+    }
+    state.setTotalEntries(count || entries.length);
+    layoutElement.element.setAttribute(
+      "id",
+      "umd-feed-events-grouped-container"
+    );
+    container.appendChild(layoutElement.element);
+    index.dispatch(container, index.eventNames.FEED_LOADED, {
+      items: entries,
+      count: entries.length,
+      total: state.getTotalEntries()
+    });
+    await renderGroupedEvents(
+      container,
+      entries,
+      state,
+      isThemeDark,
+      isLazyLoad,
+      loadMore
+    );
+    const message = createAnnouncerMessage(
+      entries.length,
+      state.getTotalEntries(),
+      isLazyLoad
+    );
+    const announcer$1 = new announcer.Announcer({ message });
+    container.appendChild(announcer$1.getElement());
+  };
+  initialize();
+  const model = containerBuilder.build();
+  return {
+    element: model.element,
+    get styles() {
+      return state.getStyles();
+    },
+    events: {
+      callback: state.getShadowCallback()
+    }
+  };
+};
+module.exports = grouped;
+//# sourceMappingURL=grouped.js.map

package/dist/feeds/events/grouped.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grouped.js","sources":["../../../source/feeds/events/grouped.ts"],"sourcesContent":["/**\n * Events Grouped Feed (Refactored with Element Builder)\n *\n * Grouped layout for event entries organized by date with dynamic headers.\n * Uses Element Builder pattern with custom grouping logic for date-based organization.\n *\n * @module feeds/events/grouped\n */\n\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { card } from '@universityofmaryland/web-elements-library/composite';\nimport { events as eventElements } from '@universityofmaryland/web-elements-library/atomic';\nimport {\n  createTextWithLink,\n  createTextContainer,\n  createImageOrLinkedImage,\n} from '@universityofmaryland/web-utilities-library/elements';\nimport { LoadingState, PaginationState, EmptyState, Announcer } from 'states';\nimport { eventsFetchStrategyRange } from 'strategies';\nimport { type EventEntry } from 'types/data';\nimport {\n  grouping,\n  events as eventUtilities,\n  styles as styleUtilities,\n} from '../../helpers';\nimport { type ListProps } from './_types';\nimport { type ElementModel } from '../../_types';\n\n// ============================================================================\n// PURE HELPER FUNCTIONS\n// ============================================================================\n\n/**\n * Create base props for fetch strategy\n *\n * @param props - Feed props\n * @param offset - Current offset\n * @returns Base props object for strategy's composeApiVariables\n */\nconst createFetchProps = (\n  props: Pick<ListProps, 'token' | 'categories' | 'numberOfRowsToStart'>,\n  offset: number,\n) => ({\n  token: props.token,\n  categories: props.categories,\n  numberOfColumnsToShow: 1,\n  numberOfRowsToStart: props.numberOfRowsToStart,\n  getOffset: () => offset,\n});\n\n/**\n * Create image configuration for event entry\n *\n * @param entry - Event entry\n * @returns Image config object\n */\nconst createImageConfig = (entry: EventEntry) => ({\n  imageUrl: entry.image[0].url,\n  altText: entry.image[0].altText || 'Event Image',\n  linkUrl: entry.url,\n  linkLabel: 'University of Maryland Event',\n});\n\n/**\n * Create announcer message\n *\n * @param count - Number of events shown\n * @param total - Total events\n * @param isLazyLoad - Lazy load enabled\n * @returns Announcer message\n */\nconst createAnnouncerMessage = (\n  count: number,\n  total: number,\n  isLazyLoad: boolean,\n): string => {\n  return isLazyLoad\n    ? `Showing ${count} of ${total} events`\n    : `Showing ${count} events`;\n};\n\n// ============================================================================\n// STATE MANAGER CLASS\n// ============================================================================\n\n/**\n * Manages grouped feed state and shadow DOM synchronization\n *\n * Encapsulates all mutable state including offset, total,\n * last date headline tracking, and shadow DOM management.\n */\nclass GroupedFeedState {\n  private stylesArray: string[] = [];\n  private shadowRoot: ShadowRoot | null = null;\n  private totalEntries: number = 0;\n  private offset: number = 0;\n  private lastDateHeadline: string | null = null;\n\n  /**\n   * Initialize state with initial styles\n   *\n   * @param initialStyles - Initial CSS styles\n   */\n  constructor(initialStyles: string) {\n    this.stylesArray.push(initialStyles);\n  }\n\n  /**\n   * Add styles to the accumulated styles\n   *\n   * @param styles - CSS styles to add\n   */\n  addStyles(styles: string): void {\n    this.stylesArray.push(styles);\n  }\n\n  /**\n   * Set shadow root reference for style updates\n   *\n   * @param shadow - Shadow root element\n   */\n  setShadowRoot(shadow: ShadowRoot): void {\n    this.shadowRoot = shadow;\n  }\n\n  /**\n   * Update shadow DOM styles\n   *\n   * @returns Promise that resolves when styles are updated\n   */\n  async updateShadowStyles(): Promise<void> {\n    if (!this.shadowRoot) return;\n    await styleUtilities.setShadowStyles({\n      shadowRoot: this.shadowRoot,\n      styles: this.getStyles(),\n    });\n  }\n\n  /**\n   * Get accumulated styles as single string\n   *\n   * @returns Combined CSS styles\n   */\n  getStyles(): string {\n    return this.stylesArray.join('\\n');\n  }\n\n  /**\n   * Get shadow root callback for events\n   *\n   * @returns Callback function for shadow root\n   */\n  getShadowCallback(): (shadow: ShadowRoot) => void {\n    return (shadow) => this.setShadowRoot(shadow);\n  }\n\n  /**\n   * Get current offset\n   *\n   * @returns Current offset\n   */\n  getOffset(): number {\n    return this.offset;\n  }\n\n  /**\n   * Increment offset by count\n   *\n   * @param count - Number to increment by\n   */\n  incrementOffset(count: number): void {\n    this.offset += count;\n  }\n\n  /**\n   * Get total entries\n   *\n   * @returns Total entries\n   */\n  getTotalEntries(): number {\n    return this.totalEntries;\n  }\n\n  /**\n   * Set total entries\n   *\n   * @param total - Total entries\n   */\n  setTotalEntries(total: number): void {\n    this.totalEntries = total;\n  }\n\n  /**\n   * Get last date headline\n   *\n   * @returns Last date headline or null\n   */\n  getLastDateHeadline(): string | null {\n    return this.lastDateHeadline;\n  }\n\n  /**\n   * Set last date headline\n   *\n   * @param headline - Date headline\n   */\n  setLastDateHeadline(headline: string): void {\n    this.lastDateHeadline = headline;\n  }\n}\n\n// ============================================================================\n// RENDERING FUNCTIONS\n// ============================================================================\n\n/**\n * Create date header element\n *\n * @param date - Date string\n * @param state - State manager\n * @returns Date header element model\n */\nconst createDateHeader = (\n  date: string,\n  state: GroupedFeedState,\n): ElementModel => {\n  const dateHeadline = document.createElement('p');\n  dateHeadline.textContent = date;\n\n  const headerElement = new ElementBuilder(dateHeadline)\n    .styled(Styles.element.text.decoration.ribbon)\n    .withStyles({\n      element: {\n        margin: `${Styles.token.spacing.lg} 0`,\n      },\n    })\n    .build();\n\n  state.addStyles(headerElement.styles);\n  return headerElement;\n};\n\n/**\n * Create event card for grouped display\n *\n * @param entry - Event entry\n * @param isThemeDark - Dark theme flag\n * @returns Event card element model\n */\nconst createEventCard = (\n  entry: EventEntry,\n  isThemeDark: boolean,\n): ElementModel => {\n  return card.list({\n    headline: createTextWithLink({ text: entry.title, url: entry.url }),\n    text: createTextContainer({ text: entry.summary, allowHTML: true }),\n    dateSign: eventElements.sign({\n      startMonth: entry.startMonth,\n      startDay: entry.startDay,\n      endMonth: entry.endMonth,\n      endDay: entry.endDay,\n      isThemeDark,\n      isLargeSize: true,\n    }),\n    eventMeta: eventElements.meta({\n      ...entry,\n      isThemeDark,\n    } as any),\n    image: createImageOrLinkedImage(createImageConfig(entry)),\n    isAligned: false,\n    isThemeDark,\n  });\n};\n\n/**\n * Create group container with entries\n *\n * @param events - Event entries for this group\n * @param state - State manager\n * @param isThemeDark - Dark theme flag\n * @returns Group container element model\n */\nconst createGroupContainer = (\n  events: EventEntry[],\n  state: GroupedFeedState,\n  isThemeDark: boolean,\n): ElementModel => {\n  const entriesBuilder = new ElementBuilder('div')\n    .withClassName('umd-feed-events-grouped-entries')\n    .withStyles({\n      element: {\n        [` > *:not(:last-child)`]: {\n          paddingBottom: Styles.token.spacing.md,\n          marginBottom: Styles.token.spacing.md,\n          borderBottom: `1px solid ${\n            isThemeDark\n              ? Styles.token.color.gray.dark\n              : Styles.token.color.gray.light\n          }`,\n        },\n        [`+ .umd-feed-events-grouped-entries`]: {\n          paddingTop: Styles.token.spacing.md,\n          marginTop: Styles.token.spacing.md,\n          borderTop: `1px solid ${\n            isThemeDark\n              ? Styles.token.color.gray.dark\n              : Styles.token.color.gray.light\n          }`,\n        },\n      },\n    });\n\n  // Create cards for each event\n  events.forEach((entry) => {\n    const eventCard = createEventCard(entry, isThemeDark);\n    entriesBuilder.withChild(eventCard);\n    state.addStyles(eventCard.styles);\n  });\n\n  const groupElement = entriesBuilder.build();\n  state.addStyles(groupElement.styles);\n\n  return groupElement;\n};\n\n/**\n * Render grouped events\n *\n * @param container - Container element\n * @param events - Event entries\n * @param state - State manager\n * @param isThemeDark - Dark theme flag\n * @param isLazyLoad - Lazy load enabled\n * @param loadMore - Load more callback\n * @returns Promise that resolves when rendering is complete\n */\nconst renderGroupedEvents = async (\n  container: HTMLElement,\n  events: EventEntry[],\n  state: GroupedFeedState,\n  isThemeDark: boolean,\n  isLazyLoad: boolean,\n  loadMore: () => Promise<void>,\n): Promise<void> => {\n  const grid = container.querySelector(\n    '#umd-feed-events-grouped-container',\n  ) as HTMLElement;\n  if (!grid) return;\n\n  // Remove existing states\n  container.querySelector('.umd-loader-container')?.remove();\n  container\n    .querySelector(`.${Styles.layout.alignment.block.center.className}`)\n    ?.remove();\n\n  // Group events by date\n  const groupedEvents = grouping.groupEventsByDate(events);\n  let actualEventCount = 0;\n\n  groupedEvents.forEach((group) => {\n    // Add date header if it's a new date\n    if (group.date !== state.getLastDateHeadline()) {\n      const headerElement = createDateHeader(group.date, state);\n      grid.appendChild(headerElement.element);\n      state.setLastDateHeadline(group.date);\n    }\n\n    // Create group container with entries\n    const groupElement = createGroupContainer(group.events, state, isThemeDark);\n    grid.appendChild(groupElement.element);\n\n    actualEventCount += group.events.length;\n  });\n\n  // Update offset with actual event count\n  state.incrementOffset(actualEventCount);\n\n  // Add pagination if lazy load enabled\n  if (isLazyLoad && state.getTotalEntries() > state.getOffset()) {\n    const pagination = new PaginationState({\n      totalEntries: state.getTotalEntries(),\n      offset: state.getOffset(),\n      isLazyLoad: true,\n      callback: loadMore,\n    });\n\n    const paginationElement = pagination.render(container);\n    if (paginationElement) {\n      state.addStyles(paginationElement.styles);\n    }\n  }\n\n  // Update shadow root styles\n  await state.updateShadowStyles();\n};\n\n/**\n * Render error state\n *\n * @param container - Container element\n * @param state - State manager\n * @param isThemeDark - Dark theme flag\n * @returns Promise that resolves when rendering is complete\n */\nconst renderError = async (\n  container: HTMLElement,\n  state: GroupedFeedState,\n  isThemeDark: boolean,\n): Promise<void> => {\n  const emptyState = new EmptyState({\n    message: 'No events found',\n    isThemeDark,\n  });\n  emptyState.render(container);\n  state.addStyles(emptyState.styles);\n\n  const announcer = new Announcer({ message: 'No events found' });\n  container.appendChild(announcer.getElement());\n\n  eventUtilities.dispatch(container, eventUtilities.eventNames.FEED_ERROR, {\n    error: 'No results found',\n  });\n\n  await state.updateShadowStyles();\n};\n\n// ============================================================================\n// MAIN EXPORT\n// ============================================================================\n\n/**\n * Create a grouped events feed\n *\n * Groups events by date with dynamic date headers (Today, day names, formatted dates).\n * Events are sorted by priority within each group (multi-day events starting today first).\n * Uses Element Builder pattern for clean construction.\n *\n * @param props - Feed configuration\n * @returns ElementModel with feed element and styles\n *\n * @example\n * ```typescript\n * const feed = eventsGrouped({\n *   token: 'my-token',\n *   numberOfRowsToStart: 10,\n *   isLazyLoad: true,\n * });\n * ```\n *\n * @example\n * ```typescript\n * // With dark theme\n * const feed = eventsGrouped({\n *   token: 'my-token',\n *   numberOfRowsToStart: 20,\n *   isThemeDark: true,\n * });\n * ```\n */\nexport default (props: ListProps): ElementModel => {\n  const {\n    token,\n    isThemeDark = false,\n    isLazyLoad = false,\n    numberOfRowsToStart,\n    categories,\n  } = props;\n\n  // Create container using ElementBuilder\n  const containerBuilder = new ElementBuilder('div').withClassName(\n    'events-grouped-feed',\n  );\n\n  // Get element for manipulation (non-destructive)\n  const container = containerBuilder.getElement();\n\n  // Initialize state management\n  const loading = new LoadingState({ isThemeDark });\n  const state = new GroupedFeedState(loading.styles);\n\n  // Create layout\n  const layoutElement = new ElementBuilder('div')\n    .withClassName('umd-feed-events-grouped')\n    .build();\n  state.addStyles(layoutElement.styles);\n\n  /**\n   * Load more events (for lazy loading)\n   */\n  const loadMore = async (): Promise<void> => {\n    const fetchProps = createFetchProps(\n      { token, categories, numberOfRowsToStart },\n      state.getOffset(),\n    );\n    const variables = eventsFetchStrategyRange.composeApiVariables(fetchProps);\n\n    const entries = await eventsFetchStrategyRange.fetchEntries(variables);\n    if (entries && entries.length > 0) {\n      await renderGroupedEvents(\n        container,\n        entries,\n        state,\n        isThemeDark,\n        isLazyLoad,\n        loadMore,\n      );\n    }\n  };\n\n  /**\n   * Initialize feed\n   */\n  const initialize = async (): Promise<void> => {\n    loading.show(container);\n\n    const fetchProps = createFetchProps(\n      { token, categories, numberOfRowsToStart },\n      0,\n    );\n    const variables = eventsFetchStrategyRange.composeApiVariables(fetchProps);\n\n    // Fetch count and entries\n    const [count, entries] = await Promise.all([\n      eventsFetchStrategyRange.fetchCount(variables),\n      eventsFetchStrategyRange.fetchEntries(variables),\n    ]);\n\n    // Remove loading\n    loading.hide();\n\n    // Handle no results\n    if (!entries || entries.length === 0) {\n      await renderError(container, state, isThemeDark);\n      return;\n    }\n\n    // Set total and append layout\n    state.setTotalEntries(count || entries.length);\n    layoutElement.element.setAttribute(\n      'id',\n      'umd-feed-events-grouped-container',\n    );\n    container.appendChild(layoutElement.element);\n\n    // Dispatch loaded event\n    eventUtilities.dispatch(container, eventUtilities.eventNames.FEED_LOADED, {\n      items: entries,\n      count: entries.length,\n      total: state.getTotalEntries(),\n    });\n\n    // Render grouped events\n    await renderGroupedEvents(\n      container,\n      entries,\n      state,\n      isThemeDark,\n      isLazyLoad,\n      loadMore,\n    );\n\n    // Add announcer\n    const message = createAnnouncerMessage(\n      entries.length,\n      state.getTotalEntries(),\n      isLazyLoad,\n    );\n    const announcer = new Announcer({ message });\n    container.appendChild(announcer.getElement());\n  };\n\n  // Start initialization\n  initialize();\n\n  // Build and return element model\n  const model = containerBuilder.build();\n\n  return {\n    element: model.element,\n    get styles() {\n      return state.getStyles();\n    },\n    events: {\n      callback: state.getShadowCallback(),\n    },\n  };\n};\n"],"names":["shadow","styleUtilities.setShadowStyles","ElementBuilder","Styles","card","createTextWithLink","createTextContainer","eventElements","createImageOrLinkedImage","events","grouping.groupEventsByDate","pagination","PaginationState","EmptyState","announcer","Announcer","eventUtilities.dispatch","eventUtilities.eventNames","loading","LoadingState","eventsFetchStrategyRange"],"mappings":"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"}