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

package/dist/feeds/news/featured.js

@@ -0,0 +1,378 @@
+"use strict";
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const composite = require("@universityofmaryland/web-elements-library/composite");
+const layout = require("@universityofmaryland/web-elements-library/layout");
+const loading = require("../../states/loading.js");
+const empty = require("../../states/empty.js");
+const pagination = require("../../states/pagination.js");
+const announcer = require("../../states/announcer.js");
+const news = require("../../strategies/fetch/news.js");
+const news$1 = require("../../strategies/display/news.js");
+const index = require("../../helpers/events/index.js");
+const shadow = require("../../helpers/styles/shadow.js");
+const INITIAL_ITEMS = 3;
+const LOAD_MORE_ITEMS = 2;
+const createFetchProps = (props, offset) => ({
+  token: props.token,
+  categories: props.categories,
+  isUnion: props.isUnion,
+  numberOfRowsToStart: offset === 0 ? INITIAL_ITEMS : LOAD_MORE_ITEMS,
+  numberOfColumnsToShow: 1,
+  getOffset: () => offset
+});
+const createImageConfig = (entry) => ({
+  imageUrl: entry.image[0]?.url,
+  altText: entry.image[0]?.altText || "News Article Image",
+  linkUrl: entry.url,
+  linkLabel: "Maryland Today Article with image"
+});
+const createAnnouncerMessage = (offset, total, isLazyLoad) => {
+  return isLazyLoad ? `Showing ${offset} of ${total} articles` : `Showing ${offset} articles`;
+};
+class FeaturedFeedState {
+  /**
+   * Initialize state with initial styles
+   *
+   * @param initialStyles - Initial CSS styles
+   */
+  constructor(initialStyles) {
+    this.stylesArray = [];
+    this.shadowRoot = null;
+    this.totalEntries = 0;
+    this.offset = 0;
+    this.hasRenderedOffset = false;
+    this.pagination = 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;
+  }
+  /**
+   * Set offset to specific value
+   *
+   * @param value - New offset value
+   */
+  setOffset(value) {
+    this.offset = value;
+  }
+  /**
+   * 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;
+  }
+  /**
+   * Check if offset layout has been rendered
+   *
+   * @returns True if offset layout rendered
+   */
+  hasOffset() {
+    return this.hasRenderedOffset;
+  }
+  /**
+   * Mark offset layout as rendered
+   */
+  markOffsetRendered() {
+    this.hasRenderedOffset = true;
+  }
+  /**
+   * Get pagination state
+   *
+   * @returns Pagination state or null
+   */
+  getPagination() {
+    return this.pagination;
+  }
+  /**
+   * Set pagination state
+   *
+   * @param pagination - Pagination state
+   */
+  setPagination(pagination2) {
+    this.pagination = pagination2;
+  }
+}
+const createOverlayCard = (entry, state, isThemeDark) => {
+  const overlayCard = news$1.newsDisplayStrategy.mapEntryToCard(entry, {
+    isOverlay: true,
+    isThemeDark,
+    imageConfig: () => createImageConfig(entry)
+  });
+  state.addStyles(`
+    ${overlayCard.styles}
+
+    .${composite.card.overlay.imageClassRef} {
+      height: inherit;
+    }
+
+    .${composite.card.overlay.imageClassRef} .umd-asset-image-wrapper-scaled {
+      position: absolute;
+    }
+  `);
+  return overlayCard;
+};
+const createBlockCards = (entries, state, options) => {
+  return entries.map((entry) => {
+    const blockCard = news$1.newsDisplayStrategy.mapEntryToCard(entry, {
+      isThemeDark: options.isThemeDark,
+      isTransparent: options.isTransparent,
+      isAligned: true,
+      imageConfig: () => createImageConfig(entry)
+    });
+    state.addStyles(blockCard.styles);
+    return blockCard;
+  });
+};
+const renderFeaturedLayout = async (container, entries, state, props, loadMore) => {
+  const {
+    isThemeDark = false,
+    isTransparent = false,
+    isLayoutReversed = false,
+    overwriteStickyPosition,
+    isLazyLoad = false
+  } = props;
+  if (entries.length < 2 || state.hasOffset()) {
+    return renderStandardGrid(container, entries, state, {
+      isThemeDark,
+      isTransparent
+    });
+  }
+  state.markOffsetRendered();
+  const offsetLayout = layout.gridOffset({
+    columns: 2,
+    isLayoutReversed,
+    stickyTopPosition: overwriteStickyPosition
+  });
+  const gridLayout = layout.gridGap({ columns: 2 });
+  gridLayout.element.setAttribute("id", "umd-featured-news-grid-container");
+  const overlayCard = createOverlayCard(entries[0], state, isThemeDark);
+  const blockCards = createBlockCards(entries.slice(1, 3), state, {
+    isThemeDark,
+    isTransparent
+  });
+  blockCards.forEach((card2) => {
+    gridLayout.element.appendChild(card2.element);
+  });
+  offsetLayout.element.appendChild(overlayCard.element);
+  offsetLayout.element.appendChild(gridLayout.element);
+  container.appendChild(offsetLayout.element);
+  state.addStyles(offsetLayout.styles);
+  state.addStyles(gridLayout.styles);
+  state.setOffset(3);
+  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);
+    state.setPagination(pagination$1);
+  }
+  const message = createAnnouncerMessage(
+    INITIAL_ITEMS,
+    state.getTotalEntries(),
+    isLazyLoad
+  );
+  const announcer$1 = new announcer.Announcer({ message });
+  container.appendChild(announcer$1.getElement());
+  await state.updateShadowStyles();
+};
+const renderStandardGrid = async (container, entries, state, options) => {
+  let gridContainer = container.querySelector(
+    "#umd-featured-news-grid-container"
+  );
+  if (!gridContainer) {
+    const gridLayout = layout.gridGap({ columns: 2 });
+    gridLayout.element.setAttribute("id", "umd-featured-news-grid-container");
+    container.appendChild(gridLayout.element);
+    state.addStyles(gridLayout.styles);
+    gridContainer = gridLayout.element;
+  }
+  const blockCards = createBlockCards(entries, state, options);
+  blockCards.forEach((card2) => {
+    gridContainer.appendChild(card2.element);
+  });
+  state.incrementOffset(entries.length);
+  await state.updateShadowStyles();
+};
+const renderError = async (container, message, state, isThemeDark) => {
+  const emptyState = new empty.EmptyState({ message, isThemeDark });
+  emptyState.render(container);
+  state.addStyles(emptyState.styles);
+  await state.updateShadowStyles();
+};
+const featured = (props) => {
+  const {
+    token,
+    categories,
+    isUnion,
+    isThemeDark = false,
+    isLazyLoad = false,
+    isTransparent = false
+  } = props;
+  const containerBuilder = new webBuilderLibrary.ElementBuilder("div").withClassName(
+    "featured-news-feed"
+  );
+  const container = containerBuilder.getElement();
+  const loading$1 = new loading.LoadingState({ isThemeDark });
+  const state = new FeaturedFeedState(loading$1.styles);
+  const loadMore = async () => {
+    const pagination2 = state.getPagination();
+    if (pagination2) {
+      pagination2.remove();
+    }
+    loading$1.show(container);
+    const fetchProps = createFetchProps(
+      { token, categories, isUnion },
+      state.getOffset()
+    );
+    const variables = news.newsFetchStrategy.composeApiVariables(fetchProps);
+    const entries = await news.newsFetchStrategy.fetchEntries(variables);
+    loading$1.hide();
+    if (!entries || entries.length === 0) return;
+    await renderStandardGrid(container, entries, state, {
+      isThemeDark,
+      isTransparent
+    });
+    if (pagination2) {
+      pagination2.updateState(state.getOffset(), state.getTotalEntries());
+      if (pagination2.styles) state.addStyles(pagination2.styles);
+      await state.updateShadowStyles();
+    }
+    const existingAnnouncer = container.querySelector(
+      '[role="status"]'
+    );
+    if (existingAnnouncer) {
+      existingAnnouncer.textContent = createAnnouncerMessage(
+        state.getOffset(),
+        state.getTotalEntries(),
+        isLazyLoad
+      );
+    }
+    index.dispatch(
+      container,
+      index.eventNames.FEED_LOADED_MORE,
+      {
+        items: entries,
+        count: entries.length,
+        total: state.getTotalEntries()
+      }
+    );
+  };
+  const initialize = async () => {
+    loading$1.show(container);
+    const fetchProps = createFetchProps({ token, categories, isUnion }, 0);
+    const variables = news.newsFetchStrategy.composeApiVariables(fetchProps);
+    const [count, entries] = await Promise.all([
+      news.newsFetchStrategy.fetchCount(variables),
+      news.newsFetchStrategy.fetchEntries(variables)
+    ]);
+    loading$1.hide();
+    if (!entries || entries.length === 0) {
+      await renderError(
+        container,
+        "No news articles found",
+        state,
+        isThemeDark
+      );
+      return;
+    }
+    state.setTotalEntries(count || entries.length);
+    index.dispatch(container, index.eventNames.FEED_LOADED, {
+      items: entries,
+      count: entries.length,
+      total: state.getTotalEntries()
+    });
+    await renderFeaturedLayout(container, entries, state, props, loadMore);
+  };
+  initialize();
+  const model = containerBuilder.build();
+  const setPosition = (position) => {
+    const overlayElement = container.querySelector(
+      `.${composite.card.overlay.imageClassRef}`
+    );
+    if (overlayElement) overlayElement.style.top = `${position}px`;
+  };
+  return {
+    element: model.element,
+    get styles() {
+      return state.getStyles();
+    },
+    events: {
+      callback: state.getShadowCallback(),
+      setPosition
+      // Custom event for sticky position control
+    }
+  };
+};
+module.exports = featured;
+//# sourceMappingURL=featured.js.map

package/dist/feeds/news/featured.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"featured.js","sources":["../../../source/feeds/news/featured.ts"],"sourcesContent":["/**\n * News Featured Feed (Refactored with Element Builder)\n *\n * Displays news articles with a featured layout:\n * - First article: Large overlay card with sticky positioning\n * - Next 2 articles: Block cards in grid layout\n * - Additional articles: Lazy-loaded block cards\n *\n * Uses Element Builder pattern for clean, declarative construction.\n *\n * @module feeds/news/featured\n */\n\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { card } from '@universityofmaryland/web-elements-library/composite';\nimport {\n  gridGap,\n  gridOffset,\n} from '@universityofmaryland/web-elements-library/layout';\nimport {\n  LoadingState,\n  PaginationState,\n  EmptyState,\n  Announcer,\n} from '../../states';\nimport { newsFetchStrategy } from '../../strategies/fetch/news';\nimport { newsDisplayStrategy } from '../../strategies/display/news';\nimport {\n  events as eventUtilities,\n  styles as styleUtilities,\n} from '../../helpers';\nimport { type FeaturedProps } from './_types';\nimport { type ElementModel } from '../../_types';\nimport { type NewsEntry } from 'types/data';\n\n// ============================================================================\n// CONSTANTS\n// ============================================================================\n\n/** Featured layout displays 3 items initially: 1 overlay + 2 block cards */\nconst INITIAL_ITEMS = 3;\n\n/** Lazy loading adds 2 items at a time to fill a row in the 2-column grid */\nconst LOAD_MORE_ITEMS = 2;\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<FeaturedProps, 'token' | 'categories' | 'isUnion'>,\n  offset: number,\n) => ({\n  token: props.token,\n  categories: props.categories,\n  isUnion: props.isUnion,\n  numberOfRowsToStart: offset === 0 ? INITIAL_ITEMS : LOAD_MORE_ITEMS,\n  numberOfColumnsToShow: 1,\n  getOffset: () => offset,\n});\n\n/**\n * Create image configuration for news entry\n *\n * @param entry - News entry\n * @returns Image config object\n */\nconst createImageConfig = (entry: NewsEntry) => ({\n  imageUrl: entry.image[0]?.url,\n  altText: entry.image[0]?.altText || 'News Article Image',\n  linkUrl: entry.url,\n  linkLabel: 'Maryland Today Article with image',\n});\n\n/**\n * Create announcer message\n *\n * @param offset - Current offset\n * @param total - Total entries\n * @param isLazyLoad - Lazy load enabled\n * @returns Announcer message\n */\nconst createAnnouncerMessage = (\n  offset: number,\n  total: number,\n  isLazyLoad: boolean,\n): string => {\n  return isLazyLoad\n    ? `Showing ${offset} of ${total} articles`\n    : `Showing ${offset} articles`;\n};\n\n// ============================================================================\n// STATE MANAGER CLASS\n// ============================================================================\n\n/**\n * Manages featured feed state and shadow DOM synchronization\n *\n * Encapsulates all mutable state including pagination, offset,\n * and shadow DOM management.\n */\nclass FeaturedFeedState {\n  private stylesArray: string[] = [];\n  private shadowRoot: ShadowRoot | null = null;\n  private totalEntries: number = 0;\n  private offset: number = 0;\n  private hasRenderedOffset: boolean = false;\n  private pagination: PaginationState | 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   * Set offset to specific value\n   *\n   * @param value - New offset value\n   */\n  setOffset(value: number): void {\n    this.offset = value;\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   * Check if offset layout has been rendered\n   *\n   * @returns True if offset layout rendered\n   */\n  hasOffset(): boolean {\n    return this.hasRenderedOffset;\n  }\n\n  /**\n   * Mark offset layout as rendered\n   */\n  markOffsetRendered(): void {\n    this.hasRenderedOffset = true;\n  }\n\n  /**\n   * Get pagination state\n   *\n   * @returns Pagination state or null\n   */\n  getPagination(): PaginationState | null {\n    return this.pagination;\n  }\n\n  /**\n   * Set pagination state\n   *\n   * @param pagination - Pagination state\n   */\n  setPagination(pagination: PaginationState | null): void {\n    this.pagination = pagination;\n  }\n}\n\n// ============================================================================\n// RENDERING FUNCTIONS\n// ============================================================================\n\n/**\n * Create overlay card for featured entry\n *\n * @param entry - News entry\n * @param state - State manager\n * @param isThemeDark - Dark theme flag\n * @returns Overlay card element model\n */\nconst createOverlayCard = (\n  entry: NewsEntry,\n  state: FeaturedFeedState,\n  isThemeDark: boolean,\n): ElementModel => {\n  const overlayCard = newsDisplayStrategy.mapEntryToCard(entry, {\n    isOverlay: true,\n    isThemeDark,\n    imageConfig: () => createImageConfig(entry),\n  });\n\n  // Add custom overlay styles\n  state.addStyles(`\n    ${overlayCard.styles}\n\n    .${card.overlay.imageClassRef} {\n      height: inherit;\n    }\n\n    .${card.overlay.imageClassRef} .umd-asset-image-wrapper-scaled {\n      position: absolute;\n    }\n  `);\n\n  return overlayCard;\n};\n\n/**\n * Create block cards for entries\n *\n * @param entries - News entries\n * @param state - State manager\n * @param options - Card options\n * @returns Array of block card element models\n */\nconst createBlockCards = (\n  entries: NewsEntry[],\n  state: FeaturedFeedState,\n  options: { isThemeDark: boolean; isTransparent: boolean },\n): ElementModel[] => {\n  return entries.map((entry) => {\n    const blockCard = newsDisplayStrategy.mapEntryToCard(entry, {\n      isThemeDark: options.isThemeDark,\n      isTransparent: options.isTransparent,\n      isAligned: true,\n      imageConfig: () => createImageConfig(entry),\n    });\n\n    state.addStyles(blockCard.styles);\n    return blockCard;\n  });\n};\n\n/**\n * Render featured layout (initial load only)\n *\n * @param container - Container element\n * @param entries - News entries\n * @param state - State manager\n * @param props - Feed props\n * @param loadMore - Load more callback\n * @returns Promise that resolves when rendering is complete\n */\nconst renderFeaturedLayout = async (\n  container: HTMLElement,\n  entries: NewsEntry[],\n  state: FeaturedFeedState,\n  props: FeaturedProps,\n  loadMore: () => Promise<void>,\n): Promise<void> => {\n  const {\n    isThemeDark = false,\n    isTransparent = false,\n    isLayoutReversed = false,\n    overwriteStickyPosition,\n    isLazyLoad = false,\n  } = props;\n\n  // Fall back to standard grid if not enough entries or already rendered\n  if (entries.length < 2 || state.hasOffset()) {\n    return renderStandardGrid(container, entries, state, {\n      isThemeDark,\n      isTransparent,\n    });\n  }\n\n  state.markOffsetRendered();\n\n  // Create offset layout\n  const offsetLayout = gridOffset({\n    columns: 2,\n    isLayoutReversed,\n    stickyTopPosition: overwriteStickyPosition,\n  });\n\n  // Create grid for remaining items\n  const gridLayout = gridGap({ columns: 2 });\n  gridLayout.element.setAttribute('id', 'umd-featured-news-grid-container');\n\n  // First item: overlay card\n  const overlayCard = createOverlayCard(entries[0], state, isThemeDark);\n\n  // Next 2 items: block cards\n  const blockCards = createBlockCards(entries.slice(1, 3), state, {\n    isThemeDark,\n    isTransparent,\n  });\n\n  // Append block cards to grid\n  blockCards.forEach((card) => {\n    gridLayout.element.appendChild(card.element);\n  });\n\n  // Assemble offset layout\n  offsetLayout.element.appendChild(overlayCard.element);\n  offsetLayout.element.appendChild(gridLayout.element);\n  container.appendChild(offsetLayout.element);\n\n  state.addStyles(offsetLayout.styles);\n  state.addStyles(gridLayout.styles);\n  state.setOffset(3); // We've shown 3 items\n\n  // Add pagination if needed\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) state.addStyles(paginationElement.styles);\n    state.setPagination(pagination);\n  }\n\n  // Announcer\n  const message = createAnnouncerMessage(\n    INITIAL_ITEMS,\n    state.getTotalEntries(),\n    isLazyLoad,\n  );\n  const announcer = new Announcer({ message });\n  container.appendChild(announcer.getElement());\n\n  await state.updateShadowStyles();\n};\n\n/**\n * Render standard grid (for lazy-loaded items or fallback)\n *\n * @param container - Container element\n * @param entries - News entries\n * @param state - State manager\n * @param options - Rendering options\n * @returns Promise that resolves when rendering is complete\n */\nconst renderStandardGrid = async (\n  container: HTMLElement,\n  entries: NewsEntry[],\n  state: FeaturedFeedState,\n  options: { isThemeDark: boolean; isTransparent: boolean },\n): Promise<void> => {\n  let gridContainer = container.querySelector(\n    '#umd-featured-news-grid-container',\n  ) as HTMLElement;\n\n  // Create grid if it doesn't exist\n  if (!gridContainer) {\n    const gridLayout = gridGap({ columns: 2 });\n    gridLayout.element.setAttribute('id', 'umd-featured-news-grid-container');\n    container.appendChild(gridLayout.element);\n    state.addStyles(gridLayout.styles);\n    gridContainer = gridLayout.element;\n  }\n\n  // Create and append block cards\n  const blockCards = createBlockCards(entries, state, options);\n  blockCards.forEach((card) => {\n    gridContainer.appendChild(card.element);\n  });\n\n  state.incrementOffset(entries.length);\n\n  await state.updateShadowStyles();\n};\n\n/**\n * Render error state\n *\n * @param container - Container element\n * @param message - Error message\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  message: string,\n  state: FeaturedFeedState,\n  isThemeDark: boolean,\n): Promise<void> => {\n  const emptyState = new EmptyState({ message, isThemeDark });\n  emptyState.render(container);\n  state.addStyles(emptyState.styles);\n  await state.updateShadowStyles();\n};\n\n// ============================================================================\n// MAIN EXPORT\n// ============================================================================\n\n/**\n * Create a featured news feed\n *\n * Displays news with featured layout: overlay card + grid.\n * Uses Element Builder pattern for clean construction.\n *\n * @param props - Feed configuration\n * @returns ElementModel with feed element, styles, and events\n *\n * @example\n * ```typescript\n * const feed = newsFeatured({\n *   token: 'my-token',\n *   isLazyLoad: true,\n * });\n * ```\n *\n * @example\n * ```typescript\n * // With custom sticky position\n * const feed = newsFeatured({\n *   token: 'my-token',\n *   overwriteStickyPosition: 100,\n *   isLayoutReversed: true,\n * });\n * ```\n */\nexport default (props: FeaturedProps): ElementModel => {\n  const {\n    token,\n    categories,\n    isUnion,\n    isThemeDark = false,\n    isLazyLoad = false,\n    isTransparent = false,\n  } = props;\n\n  // Create container using ElementBuilder\n  const containerBuilder = new ElementBuilder('div').withClassName(\n    'featured-news-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 FeaturedFeedState(loading.styles);\n\n  /**\n   * Load more articles (for lazy loading)\n   */\n  const loadMore = async (): Promise<void> => {\n    // Remove pagination button\n    const pagination = state.getPagination();\n    if (pagination) {\n      pagination.remove();\n    }\n\n    // Show loading indicator\n    loading.show(container);\n\n    // Load more items\n    const fetchProps = createFetchProps(\n      { token, categories, isUnion },\n      state.getOffset(),\n    );\n    const variables = newsFetchStrategy.composeApiVariables(fetchProps);\n\n    const entries = await newsFetchStrategy.fetchEntries(variables);\n\n    // Hide loading indicator\n    loading.hide();\n\n    if (!entries || entries.length === 0) return;\n\n    await renderStandardGrid(container, entries, state, {\n      isThemeDark,\n      isTransparent,\n    });\n\n    // Update pagination state\n    if (pagination) {\n      pagination.updateState(state.getOffset(), state.getTotalEntries());\n      if (pagination.styles) state.addStyles(pagination.styles);\n      await state.updateShadowStyles();\n    }\n\n    // Update announcer\n    const existingAnnouncer = container.querySelector(\n      '[role=\"status\"]',\n    ) as HTMLElement;\n    if (existingAnnouncer) {\n      existingAnnouncer.textContent = createAnnouncerMessage(\n        state.getOffset(),\n        state.getTotalEntries(),\n        isLazyLoad,\n      );\n    }\n\n    // Dispatch update event\n    eventUtilities.dispatch(\n      container,\n      eventUtilities.eventNames.FEED_LOADED_MORE,\n      {\n        items: entries,\n        count: entries.length,\n        total: state.getTotalEntries(),\n      },\n    );\n  };\n\n  /**\n   * Initialize feed\n   */\n  const initialize = async (): Promise<void> => {\n    loading.show(container);\n\n    // Fetch initial items\n    const fetchProps = createFetchProps({ token, categories, isUnion }, 0);\n    const variables = newsFetchStrategy.composeApiVariables(fetchProps);\n\n    const [count, entries] = await Promise.all([\n      newsFetchStrategy.fetchCount(variables),\n      newsFetchStrategy.fetchEntries(variables),\n    ]);\n\n    loading.hide();\n\n    // Handle no results\n    if (!entries || entries.length === 0) {\n      await renderError(\n        container,\n        'No news articles found',\n        state,\n        isThemeDark,\n      );\n      return;\n    }\n\n    state.setTotalEntries(count || entries.length);\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 featured layout\n    await renderFeaturedLayout(container, entries, state, props, loadMore);\n  };\n\n  // Start initialization\n  initialize();\n\n  // Build and return element model\n  const model = containerBuilder.build();\n\n  // Custom event: allow external control of sticky position\n  const setPosition = (position: number) => {\n    const overlayElement = container.querySelector(\n      `.${card.overlay.imageClassRef}`,\n    ) as HTMLElement;\n    if (overlayElement) overlayElement.style.top = `${position}px`;\n  };\n\n  return {\n    element: model.element,\n    get styles() {\n      return state.getStyles();\n    },\n    events: {\n      callback: state.getShadowCallback(),\n      setPosition, // Custom event for sticky position control\n    },\n  };\n};\n"],"names":["shadow","styleUtilities.setShadowStyles","pagination","newsDisplayStrategy","card","gridOffset","gridGap","PaginationState","announcer","Announcer","EmptyState","ElementBuilder","loading","LoadingState","newsFetchStrategy","eventUtilities.dispatch","eventUtilities.eventNames"],"mappings":";;;;;;;;;;;;AAwCA,MAAM,gBAAgB;AAGtB,MAAM,kBAAkB;AAaxB,MAAM,mBAAmB,CACvB,OACA,YACI;AAAA,EACJ,OAAO,MAAM;AAAA,EACb,YAAY,MAAM;AAAA,EAClB,SAAS,MAAM;AAAA,EACf,qBAAqB,WAAW,IAAI,gBAAgB;AAAA,EACpD,uBAAuB;AAAA,EACvB,WAAW,MAAM;AACnB;AAQA,MAAM,oBAAoB,CAAC,WAAsB;AAAA,EAC/C,UAAU,MAAM,MAAM,CAAC,GAAG;AAAA,EAC1B,SAAS,MAAM,MAAM,CAAC,GAAG,WAAW;AAAA,EACpC,SAAS,MAAM;AAAA,EACf,WAAW;AACb;AAUA,MAAM,yBAAyB,CAC7B,QACA,OACA,eACW;AACX,SAAO,aACH,WAAW,MAAM,OAAO,KAAK,cAC7B,WAAW,MAAM;AACvB;AAYA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAatB,YAAY,eAAuB;AAZnC,SAAQ,cAAwB,CAAA;AAChC,SAAQ,aAAgC;AACxC,SAAQ,eAAuB;AAC/B,SAAQ,SAAiB;AACzB,SAAQ,oBAA6B;AACrC,SAAQ,aAAqC;AAQ3C,SAAK,YAAY,KAAK,aAAa;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,UAAU,QAAsB;AAC9B,SAAK,YAAY,KAAK,MAAM;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,cAAcA,SAA0B;AACtC,SAAK,aAAaA;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAM,qBAAoC;AACxC,QAAI,CAAC,KAAK,WAAY;AACtB,UAAMC,uBAA+B;AAAA,MACnC,YAAY,KAAK;AAAA,MACjB,QAAQ,KAAK,UAAA;AAAA,IAAU,CACxB;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAoB;AAClB,WAAO,KAAK,YAAY,KAAK,IAAI;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,oBAAkD;AAChD,WAAO,CAACD,YAAW,KAAK,cAAcA,OAAM;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAoB;AAClB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,UAAU,OAAqB;AAC7B,SAAK,SAAS;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,gBAAgB,OAAqB;AACnC,SAAK,UAAU;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,kBAA0B;AACxB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,gBAAgB,OAAqB;AACnC,SAAK,eAAe;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAqB;AACnB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,qBAA2B;AACzB,SAAK,oBAAoB;AAAA,EAC3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,gBAAwC;AACtC,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,cAAcE,aAA0C;AACtD,SAAK,aAAaA;AAAA,EACpB;AACF;AAcA,MAAM,oBAAoB,CACxB,OACA,OACA,gBACiB;AACjB,QAAM,cAAcC,OAAAA,oBAAoB,eAAe,OAAO;AAAA,IAC5D,WAAW;AAAA,IACX;AAAA,IACA,aAAa,MAAM,kBAAkB,KAAK;AAAA,EAAA,CAC3C;AAGD,QAAM,UAAU;AAAA,MACZ,YAAY,MAAM;AAAA;AAAA,OAEjBC,UAAAA,KAAK,QAAQ,aAAa;AAAA;AAAA;AAAA;AAAA,OAI1BA,UAAAA,KAAK,QAAQ,aAAa;AAAA;AAAA;AAAA,GAG9B;AAED,SAAO;AACT;AAUA,MAAM,mBAAmB,CACvB,SACA,OACA,YACmB;AACnB,SAAO,QAAQ,IAAI,CAAC,UAAU;AAC5B,UAAM,YAAYD,OAAAA,oBAAoB,eAAe,OAAO;AAAA,MAC1D,aAAa,QAAQ;AAAA,MACrB,eAAe,QAAQ;AAAA,MACvB,WAAW;AAAA,MACX,aAAa,MAAM,kBAAkB,KAAK;AAAA,IAAA,CAC3C;AAED,UAAM,UAAU,UAAU,MAAM;AAChC,WAAO;AAAA,EACT,CAAC;AACH;AAYA,MAAM,uBAAuB,OAC3B,WACA,SACA,OACA,OACA,aACkB;AAClB,QAAM;AAAA,IACJ,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB;AAAA,IACA,aAAa;AAAA,EAAA,IACX;AAGJ,MAAI,QAAQ,SAAS,KAAK,MAAM,aAAa;AAC3C,WAAO,mBAAmB,WAAW,SAAS,OAAO;AAAA,MACnD;AAAA,MACA;AAAA,IAAA,CACD;AAAA,EACH;AAEA,QAAM,mBAAA;AAGN,QAAM,eAAeE,OAAAA,WAAW;AAAA,IAC9B,SAAS;AAAA,IACT;AAAA,IACA,mBAAmB;AAAA,EAAA,CACpB;AAGD,QAAM,aAAaC,OAAAA,QAAQ,EAAE,SAAS,GAAG;AACzC,aAAW,QAAQ,aAAa,MAAM,kCAAkC;AAGxE,QAAM,cAAc,kBAAkB,QAAQ,CAAC,GAAG,OAAO,WAAW;AAGpE,QAAM,aAAa,iBAAiB,QAAQ,MAAM,GAAG,CAAC,GAAG,OAAO;AAAA,IAC9D;AAAA,IACA;AAAA,EAAA,CACD;AAGD,aAAW,QAAQ,CAACF,UAAS;AAC3B,eAAW,QAAQ,YAAYA,MAAK,OAAO;AAAA,EAC7C,CAAC;AAGD,eAAa,QAAQ,YAAY,YAAY,OAAO;AACpD,eAAa,QAAQ,YAAY,WAAW,OAAO;AACnD,YAAU,YAAY,aAAa,OAAO;AAE1C,QAAM,UAAU,aAAa,MAAM;AACnC,QAAM,UAAU,WAAW,MAAM;AACjC,QAAM,UAAU,CAAC;AAGjB,MAAI,cAAc,MAAM,gBAAA,IAAoB,MAAM,aAAa;AAC7D,UAAMF,eAAa,IAAIK,2BAAgB;AAAA,MACrC,cAAc,MAAM,gBAAA;AAAA,MACpB,QAAQ,MAAM,UAAA;AAAA,MACd,YAAY;AAAA,MACZ,UAAU;AAAA,IAAA,CACX;AAED,UAAM,oBAAoBL,aAAW,OAAO,SAAS;AACrD,QAAI,kBAAmB,OAAM,UAAU,kBAAkB,MAAM;AAC/D,UAAM,cAAcA,YAAU;AAAA,EAChC;AAGA,QAAM,UAAU;AAAA,IACd;AAAA,IACA,MAAM,gBAAA;AAAA,IACN;AAAA,EAAA;AAEF,QAAMM,cAAY,IAAIC,oBAAU,EAAE,SAAS;AAC3C,YAAU,YAAYD,YAAU,YAAY;AAE5C,QAAM,MAAM,mBAAA;AACd;AAWA,MAAM,qBAAqB,OACzB,WACA,SACA,OACA,YACkB;AAClB,MAAI,gBAAgB,UAAU;AAAA,IAC5B;AAAA,EAAA;AAIF,MAAI,CAAC,eAAe;AAClB,UAAM,aAAaF,OAAAA,QAAQ,EAAE,SAAS,GAAG;AACzC,eAAW,QAAQ,aAAa,MAAM,kCAAkC;AACxE,cAAU,YAAY,WAAW,OAAO;AACxC,UAAM,UAAU,WAAW,MAAM;AACjC,oBAAgB,WAAW;AAAA,EAC7B;AAGA,QAAM,aAAa,iBAAiB,SAAS,OAAO,OAAO;AAC3D,aAAW,QAAQ,CAACF,UAAS;AAC3B,kBAAc,YAAYA,MAAK,OAAO;AAAA,EACxC,CAAC;AAED,QAAM,gBAAgB,QAAQ,MAAM;AAEpC,QAAM,MAAM,mBAAA;AACd;AAWA,MAAM,cAAc,OAClB,WACA,SACA,OACA,gBACkB;AAClB,QAAM,aAAa,IAAIM,MAAAA,WAAW,EAAE,SAAS,aAAa;AAC1D,aAAW,OAAO,SAAS;AAC3B,QAAM,UAAU,WAAW,MAAM;AACjC,QAAM,MAAM,mBAAA;AACd;AAiCA,MAAA,WAAe,CAAC,UAAuC;AACrD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,aAAa;AAAA,IACb,gBAAgB;AAAA,EAAA,IACd;AAGJ,QAAM,mBAAmB,IAAIC,iCAAe,KAAK,EAAE;AAAA,IACjD;AAAA,EAAA;AAIF,QAAM,YAAY,iBAAiB,WAAA;AAGnC,QAAMC,YAAU,IAAIC,qBAAa,EAAE,aAAa;AAChD,QAAM,QAAQ,IAAI,kBAAkBD,UAAQ,MAAM;AAKlD,QAAM,WAAW,YAA2B;AAE1C,UAAMV,cAAa,MAAM,cAAA;AACzB,QAAIA,aAAY;AACd,MAAAA,YAAW,OAAA;AAAA,IACb;AAGAU,cAAQ,KAAK,SAAS;AAGtB,UAAM,aAAa;AAAA,MACjB,EAAE,OAAO,YAAY,QAAA;AAAA,MACrB,MAAM,UAAA;AAAA,IAAU;AAElB,UAAM,YAAYE,KAAAA,kBAAkB,oBAAoB,UAAU;AAElE,UAAM,UAAU,MAAMA,uBAAkB,aAAa,SAAS;AAG9DF,cAAQ,KAAA;AAER,QAAI,CAAC,WAAW,QAAQ,WAAW,EAAG;AAEtC,UAAM,mBAAmB,WAAW,SAAS,OAAO;AAAA,MAClD;AAAA,MACA;AAAA,IAAA,CACD;AAGD,QAAIV,aAAY;AACd,MAAAA,YAAW,YAAY,MAAM,UAAA,GAAa,MAAM,iBAAiB;AACjE,UAAIA,YAAW,OAAQ,OAAM,UAAUA,YAAW,MAAM;AACxD,YAAM,MAAM,mBAAA;AAAA,IACd;AAGA,UAAM,oBAAoB,UAAU;AAAA,MAClC;AAAA,IAAA;AAEF,QAAI,mBAAmB;AACrB,wBAAkB,cAAc;AAAA,QAC9B,MAAM,UAAA;AAAA,QACN,MAAM,gBAAA;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAGAa,UAAAA;AAAAA,MACE;AAAA,MACAC,MAAAA,WAA0B;AAAA,MAC1B;AAAA,QACE,OAAO;AAAA,QACP,OAAO,QAAQ;AAAA,QACf,OAAO,MAAM,gBAAA;AAAA,MAAgB;AAAA,IAC/B;AAAA,EAEJ;AAKA,QAAM,aAAa,YAA2B;AAC5CJ,cAAQ,KAAK,SAAS;AAGtB,UAAM,aAAa,iBAAiB,EAAE,OAAO,YAAY,QAAA,GAAW,CAAC;AACrE,UAAM,YAAYE,KAAAA,kBAAkB,oBAAoB,UAAU;AAElE,UAAM,CAAC,OAAO,OAAO,IAAI,MAAM,QAAQ,IAAI;AAAA,MACzCA,KAAAA,kBAAkB,WAAW,SAAS;AAAA,MACtCA,KAAAA,kBAAkB,aAAa,SAAS;AAAA,IAAA,CACzC;AAEDF,cAAQ,KAAA;AAGR,QAAI,CAAC,WAAW,QAAQ,WAAW,GAAG;AACpC,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAEF;AAAA,IACF;AAEA,UAAM,gBAAgB,SAAS,QAAQ,MAAM;AAG7CG,mBAAwB,WAAWC,MAAAA,WAA0B,aAAa;AAAA,MACxE,OAAO;AAAA,MACP,OAAO,QAAQ;AAAA,MACf,OAAO,MAAM,gBAAA;AAAA,IAAgB,CAC9B;AAGD,UAAM,qBAAqB,WAAW,SAAS,OAAO,OAAO,QAAQ;AAAA,EACvE;AAGA,aAAA;AAGA,QAAM,QAAQ,iBAAiB,MAAA;AAG/B,QAAM,cAAc,CAAC,aAAqB;AACxC,UAAM,iBAAiB,UAAU;AAAA,MAC/B,IAAIZ,UAAAA,KAAK,QAAQ,aAAa;AAAA,IAAA;AAEhC,QAAI,eAAgB,gBAAe,MAAM,MAAM,GAAG,QAAQ;AAAA,EAC5D;AAEA,SAAO;AAAA,IACL,SAAS,MAAM;AAAA,IACf,IAAI,SAAS;AACX,aAAO,MAAM,UAAA;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,UAAU,MAAM,kBAAA;AAAA,MAChB;AAAA;AAAA,IAAA;AAAA,EACF;AAEJ;;"}