@universityofmaryland/web-feeds-library 1.2.6 → 1.3.0-beta.1

package/dist/states/loading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading.d.ts","sourceRoot":"","sources":["../../source/states/loading.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,KAAK,kBAAkB,EAAkB,MAAM,UAAU,CAAC;AA6CnE,wBAAgB,oBAAoB,CAAC,MAAM,GAAE,kBAAuB,GAAG,YAAY,CA0FlF;AAeD,qBAAa,YAAY;IACvB,OAAO,CAAC,KAAK,CAAe;IAC5B,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,SAAS,CAAkB;gBAEvB,MAAM,GAAE,kBAAuB;IAO3C,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI;IAkBlC,IAAI,IAAI,IAAI;IAmBZ,OAAO,IAAI,IAAI;IAQf,IAAI,OAAO,IAAI,WAAW,CAEzB;IAKD,IAAI,MAAM,IAAI,MAAM,CAEnB;CACF"}

package/dist/{macros/loader.mjs → states/loading.js}

@@ -1,5 +1,6 @@
-import * as Styles from "@universityofmaryland/web-styles-library";
 import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { token } from "@universityofmaryland/web-styles-library";
+import { FeedStateEvent } from "./_types.js";
 const ID_UMD_LOADER = "umd-loader-container";
 const keyframes = `
   @keyframes loader-first-animation {
@@ -10,7 +11,7 @@ const keyframes = `
       transform: scale(1);
     }
   }
-  
+
   @keyframes loader-last-animation {
     0% {
       transform: scale(1);
@@ -19,7 +20,7 @@ const keyframes = `
       transform: scale(0);
     }
   }
-  
+
   @keyframes loader-middle-animation {
     0% {
       transform: translate(0, 0);
@@ -29,7 +30,8 @@ const keyframes = `
     }
   }
 `;
-const create = ({ isThemeDark }) => {
+function createLoadingElement(config = {}) {
+  const { isThemeDark = false } = config;
   const defaultDotStyles = {
     position: "absolute",
     top: "50%",
@@ -37,11 +39,8 @@ const create = ({ isThemeDark }) => {
     width: "8px",
     height: "8px",
     borderRadius: "50%",
-    background: `${Styles.token.color.gray.dark}`,
-    animationTimingFunction: "cubic-bezier(0, 1, 1, 0)",
-    ...isThemeDark && {
-      background: `${Styles.token.color.gray.light}`
-    }
+    background: isThemeDark ? token.color.gray.light : token.color.gray.dark,
+    animationTimingFunction: "cubic-bezier(0, 1, 1, 0)"
   };
   const innerElmOne = new ElementBuilder().withClassName(`${ID_UMD_LOADER}-one`).withStyles({
     element: {
@@ -89,24 +88,68 @@ const create = ({ isThemeDark }) => {
   }).build();
   composite.styles += keyframes;
   return composite;
-};
-const remove = ({ container }) => {
-  const loader2 = container.querySelector(`.${ID_UMD_LOADER}`);
-  if (loader2) loader2.remove();
-};
-const display = ({
-  container,
-  isThemeDark
-}) => {
-  const loader2 = create({ isThemeDark });
-  container.appendChild(loader2.element);
-};
-const loader = {
-  create,
-  display,
-  remove
-};
+}
+class LoadingState {
+  constructor(config = {}) {
+    this.container = null;
+    this.isVisible = false;
+    this.model = createLoadingElement(config);
+  }
+  /**
+   * Show the loading spinner in a container
+   */
+  show(container) {
+    if (!this.isVisible) {
+      this.container = container;
+      container.appendChild(this.model.element);
+      this.isVisible = true;
+      container.dispatchEvent(
+        new CustomEvent(FeedStateEvent.LOADING_START, {
+          bubbles: true,
+          detail: { timestamp: Date.now() }
+        })
+      );
+    }
+  }
+  /**
+   * Hide and remove the loading spinner
+   */
+  hide() {
+    if (this.isVisible && this.model.element.parentNode) {
+      this.model.element.remove();
+      this.isVisible = false;
+      if (this.container) {
+        this.container.dispatchEvent(
+          new CustomEvent(FeedStateEvent.LOADING_END, {
+            bubbles: true,
+            detail: { timestamp: Date.now() }
+          })
+        );
+      }
+    }
+  }
+  /**
+   * Cleanup and remove the loading spinner
+   */
+  destroy() {
+    this.hide();
+    this.container = null;
+  }
+  /**
+   * Get the loading spinner element
+   */
+  get element() {
+    return this.model.element;
+  }
+  /**
+   * Get the loading spinner styles
+   */
+  get styles() {
+    return this.model.styles;
+  }
+}
 export {
-  loader as default
+  LoadingState,
+  createLoadingElement
 };
-//# sourceMappingURL=loader.mjs.map
+//# sourceMappingURL=loading.js.map

package/dist/states/loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading.js","sources":["../../source/states/loading.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { token } from '@universityofmaryland/web-styles-library';\n\nimport { type ElementModel } from '../_types';\nimport { type LoadingStateConfig, FeedStateEvent } from './_types';\n\nconst ID_UMD_LOADER = 'umd-loader-container';\n\nconst keyframes = `\n  @keyframes loader-first-animation {\n    0% {\n      transform: scale(0);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n\n  @keyframes loader-last-animation {\n    0% {\n      transform: scale(1);\n    }\n    100% {\n      transform: scale(0);\n    }\n  }\n\n  @keyframes loader-middle-animation {\n    0% {\n      transform: translate(0, 0);\n    }\n    100% {\n      transform: translate(24px, 0);\n    }\n  }\n`;\n\n/**\n * Creates a loading spinner element model\n *\n * @param config - Loading state configuration\n * @returns ElementModel with loading spinner\n *\n * @example\n * ```typescript\n * const loading = createLoadingElement({ isThemeDark: false });\n * container.appendChild(loading.element);\n * ```\n */\nexport function createLoadingElement(config: LoadingStateConfig = {}): ElementModel {\n  const { isThemeDark = false } = config;\n\n  const defaultDotStyles = {\n    position: 'absolute',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    width: '8px',\n    height: '8px',\n    borderRadius: '50%',\n    background: isThemeDark ? token.color.gray.light : token.color.gray.dark,\n    animationTimingFunction: 'cubic-bezier(0, 1, 1, 0)',\n  };\n\n  const innerElmOne = new ElementBuilder()\n    .withClassName(`${ID_UMD_LOADER}-one`)\n    .withStyles({\n      element: {\n        ...defaultDotStyles,\n        left: '5px',\n        animation: 'loader-first-animation 0.6s infinite',\n      },\n    })\n    .build();\n\n  const innerElmTwo = new ElementBuilder()\n    .withClassName(`${ID_UMD_LOADER}-two`)\n    .withStyles({\n      element: {\n        ...defaultDotStyles,\n        left: '5px',\n        animation: 'loader-middle-animation 0.6s infinite',\n      },\n    })\n    .build();\n\n  const innerElmThree = new ElementBuilder()\n    .withClassName(`${ID_UMD_LOADER}-three`)\n    .withStyles({\n      element: {\n        ...defaultDotStyles,\n        left: '24px',\n        animation: 'loader-middle-animation 0.6s infinite',\n      },\n    })\n    .build();\n\n  const innerElmFour = new ElementBuilder()\n    .withClassName(`${ID_UMD_LOADER}-four`)\n    .withStyles({\n      element: {\n        ...defaultDotStyles,\n        left: '45px',\n        animation: 'loader-last-animation 0.6s infinite',\n      },\n    })\n    .build();\n\n  const wrapper = new ElementBuilder()\n    .withClassName(`${ID_UMD_LOADER}-wrapper`)\n    .withChild(innerElmOne)\n    .withChild(innerElmTwo)\n    .withChild(innerElmThree)\n    .withChild(innerElmFour)\n    .withStyles({\n      element: {\n        position: 'relative',\n      },\n    })\n    .build();\n\n  const composite = new ElementBuilder()\n    .withClassName(ID_UMD_LOADER)\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        padding: '10px 0',\n        minHeight: '40px',\n        position: 'relative',\n        gridColumn: '1 / -1',\n      },\n    })\n    .build();\n\n  composite.styles += keyframes;\n\n  return composite;\n}\n\n/**\n * Loading state manager class\n *\n * Manages the lifecycle of a loading spinner with show/hide functionality.\n *\n * @example\n * ```typescript\n * const loading = new LoadingState({ isThemeDark: false });\n * loading.show(container);\n * // ... async operation\n * loading.hide();\n * ```\n */\nexport class LoadingState {\n  private model: ElementModel;\n  private container: HTMLElement | null = null;\n  private isVisible: boolean = false;\n\n  constructor(config: LoadingStateConfig = {}) {\n    this.model = createLoadingElement(config);\n  }\n\n  /**\n   * Show the loading spinner in a container\n   */\n  show(container: HTMLElement): void {\n    if (!this.isVisible) {\n      this.container = container;\n      container.appendChild(this.model.element);\n      this.isVisible = true;\n\n      container.dispatchEvent(\n        new CustomEvent(FeedStateEvent.LOADING_START, {\n          bubbles: true,\n          detail: { timestamp: Date.now() },\n        })\n      );\n    }\n  }\n\n  /**\n   * Hide and remove the loading spinner\n   */\n  hide(): void {\n    if (this.isVisible && this.model.element.parentNode) {\n      this.model.element.remove();\n      this.isVisible = false;\n\n      if (this.container) {\n        this.container.dispatchEvent(\n          new CustomEvent(FeedStateEvent.LOADING_END, {\n            bubbles: true,\n            detail: { timestamp: Date.now() },\n          })\n        );\n      }\n    }\n  }\n\n  /**\n   * Cleanup and remove the loading spinner\n   */\n  destroy(): void {\n    this.hide();\n    this.container = null;\n  }\n\n  /**\n   * Get the loading spinner element\n   */\n  get element(): HTMLElement {\n    return this.model.element;\n  }\n\n  /**\n   * Get the loading spinner styles\n   */\n  get styles(): string {\n    return this.model.styles;\n  }\n}\n\n"],"names":[],"mappings":"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"}

package/dist/states/pagination.d.ts

@@ -0,0 +1,17 @@
+import { ElementModel } from '../_types';
+import { PaginationStateConfig } from './_types';
+export declare function createPaginationElement(config: PaginationStateConfig): ElementModel | undefined;
+export declare class PaginationState {
+    private config;
+    private model;
+    private container;
+    constructor(config: PaginationStateConfig);
+    render(container: HTMLElement): ElementModel | undefined;
+    remove(): void;
+    updateState(offset: number, totalEntries: number): void;
+    hasMore(): boolean;
+    destroy(): void;
+    get element(): HTMLElement | undefined;
+    get styles(): string | undefined;
+}
+//# sourceMappingURL=pagination.d.ts.map

package/dist/states/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../source/states/pagination.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,KAAK,qBAAqB,EAAkB,MAAM,UAAU,CAAC;AAsBtE,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,qBAAqB,GAC5B,YAAY,GAAG,SAAS,CAuC1B;AAyBD,qBAAa,eAAe;IAC1B,OAAO,CAAC,MAAM,CAAwB;IACtC,OAAO,CAAC,KAAK,CAA2B;IACxC,OAAO,CAAC,SAAS,CAA4B;gBAEjC,MAAM,EAAE,qBAAqB;IASzC,MAAM,CAAC,SAAS,EAAE,WAAW,GAAG,YAAY,GAAG,SAAS;IAWxD,MAAM,IAAI,IAAI;IAUd,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,IAAI;IAmBvD,OAAO,IAAI,OAAO;IAQlB,OAAO,IAAI,IAAI;IAQf,IAAI,OAAO,IAAI,WAAW,GAAG,SAAS,CAErC;IAKD,IAAI,MAAM,IAAI,MAAM,GAAG,SAAS,CAE/B;CACF"}

package/dist/states/pagination.js

@@ -0,0 +1,102 @@
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { FeedStateEvent } from "./_types.js";
+function createPaginationElement(config) {
+  const { callback, isLazyLoad, totalEntries, offset } = config;
+  if (!isLazyLoad) return;
+  if (!totalEntries) return;
+  if (!offset) return;
+  if (!callback) return;
+  if (offset >= totalEntries) return;
+  const button = document.createElement("button");
+  button.textContent = "Load more";
+  button.addEventListener("click", () => {
+    callback();
+    button.dispatchEvent(
+      new CustomEvent(FeedStateEvent.PAGINATION_LOADED, {
+        bubbles: true,
+        detail: {
+          offset,
+          totalEntries,
+          timestamp: Date.now()
+        }
+      })
+    );
+  });
+  const ctaButton = new ElementBuilder(button).styled(Styles.element.action.outline.normal).build();
+  return new ElementBuilder().styled(Styles.layout.alignment.block.center).withChild(ctaButton).withStyles({
+    element: {
+      marginTop: `${Styles.token.spacing.lg}`
+    }
+  }).build();
+}
+class PaginationState {
+  constructor(config) {
+    this.container = null;
+    this.config = config;
+    this.model = createPaginationElement(config);
+  }
+  /**
+   * Render the pagination button if applicable
+   * @returns ElementModel if rendered, undefined otherwise
+   */
+  render(container) {
+    if (this.model) {
+      this.container = container;
+      container.appendChild(this.model.element);
+    }
+    return this.model;
+  }
+  /**
+   * Remove the pagination button from DOM
+   */
+  remove() {
+    if (this.model && this.model.element.parentNode) {
+      this.model.element.remove();
+    }
+  }
+  /**
+   * Update pagination state with new offset and total
+   * Re-creates button if needed
+   */
+  updateState(offset, totalEntries) {
+    this.config.offset = offset;
+    this.config.totalEntries = totalEntries;
+    this.remove();
+    this.model = createPaginationElement(this.config);
+    if (this.container && this.model) {
+      this.container.appendChild(this.model.element);
+    }
+  }
+  /**
+   * Check if more items are available to load
+   */
+  hasMore() {
+    const { offset, totalEntries } = this.config;
+    return !!(totalEntries && offset < totalEntries);
+  }
+  /**
+   * Cleanup and remove pagination
+   */
+  destroy() {
+    this.remove();
+    this.container = null;
+  }
+  /**
+   * Get the pagination element if it exists
+   */
+  get element() {
+    return this.model?.element;
+  }
+  /**
+   * Get the pagination styles if element exists
+   */
+  get styles() {
+    return this.model?.styles;
+  }
+}
+export {
+  PaginationState,
+  createPaginationElement
+};
+//# sourceMappingURL=pagination.js.map

package/dist/states/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sources":["../../source/states/pagination.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\n\nimport { type ElementModel } from '../_types';\nimport { type PaginationStateConfig, FeedStateEvent } from './_types';\n\n/**\n * Creates a pagination \"Load more\" button element\n *\n * @param config - Pagination state configuration\n * @returns ElementModel with load more button, or undefined if pagination not needed\n *\n * @example\n * ```typescript\n * const pagination = createPaginationElement({\n *   callback: () => loadMoreItems(),\n *   isThemeDark: false,\n *   isLazyLoad: true,\n *   totalEntries: 50,\n *   offset: 10\n * });\n * if (pagination) {\n *   container.appendChild(pagination.element);\n * }\n * ```\n */\nexport function createPaginationElement(\n  config: PaginationStateConfig\n): ElementModel | undefined {\n  const { callback, isLazyLoad, totalEntries, offset } = config;\n\n  // Guard clauses for when pagination is not needed\n  if (!isLazyLoad) return;\n  if (!totalEntries) return;\n  if (!offset) return;\n  if (!callback) return;\n  if (offset >= totalEntries) return;\n\n  const button = document.createElement('button');\n  button.textContent = 'Load more'; // Use textContent for security\n  button.addEventListener('click', () => {\n    callback();\n    button.dispatchEvent(\n      new CustomEvent(FeedStateEvent.PAGINATION_LOADED, {\n        bubbles: true,\n        detail: {\n          offset,\n          totalEntries,\n          timestamp: Date.now(),\n        },\n      })\n    );\n  });\n\n  const ctaButton = new ElementBuilder(button)\n    .styled(Styles.element.action.outline.normal)\n    .build();\n\n  return new ElementBuilder()\n    .styled(Styles.layout.alignment.block.center)\n    .withChild(ctaButton)\n    .withStyles({\n      element: {\n        marginTop: `${Styles.token.spacing.lg}`,\n      },\n    })\n    .build();\n}\n\n/**\n * Pagination state manager class\n *\n * Manages a \"Load more\" button for paginated feed content.\n *\n * @example\n * ```typescript\n * const pagination = new PaginationState({\n *   callback: () => loadMore(),\n *   isLazyLoad: true,\n *   totalEntries: 50,\n *   offset: 10\n * });\n *\n * const button = pagination.render(container);\n * if (button) {\n *   // Pagination was rendered\n * }\n *\n * // Later, update state\n * pagination.updateState(20, 50);\n * ```\n */\nexport class PaginationState {\n  private config: PaginationStateConfig;\n  private model: ElementModel | undefined;\n  private container: HTMLElement | null = null;\n\n  constructor(config: PaginationStateConfig) {\n    this.config = config;\n    this.model = createPaginationElement(config);\n  }\n\n  /**\n   * Render the pagination button if applicable\n   * @returns ElementModel if rendered, undefined otherwise\n   */\n  render(container: HTMLElement): ElementModel | undefined {\n    if (this.model) {\n      this.container = container;\n      container.appendChild(this.model.element);\n    }\n    return this.model;\n  }\n\n  /**\n   * Remove the pagination button from DOM\n   */\n  remove(): void {\n    if (this.model && this.model.element.parentNode) {\n      this.model.element.remove();\n    }\n  }\n\n  /**\n   * Update pagination state with new offset and total\n   * Re-creates button if needed\n   */\n  updateState(offset: number, totalEntries: number): void {\n    this.config.offset = offset;\n    this.config.totalEntries = totalEntries;\n\n    // Remove old button\n    this.remove();\n\n    // Create new button if still needed\n    this.model = createPaginationElement(this.config);\n\n    // Re-render if we have a container\n    if (this.container && this.model) {\n      this.container.appendChild(this.model.element);\n    }\n  }\n\n  /**\n   * Check if more items are available to load\n   */\n  hasMore(): boolean {\n    const { offset, totalEntries } = this.config;\n    return !!(totalEntries && offset < totalEntries);\n  }\n\n  /**\n   * Cleanup and remove pagination\n   */\n  destroy(): void {\n    this.remove();\n    this.container = null;\n  }\n\n  /**\n   * Get the pagination element if it exists\n   */\n  get element(): HTMLElement | undefined {\n    return this.model?.element;\n  }\n\n  /**\n   * Get the pagination styles if element exists\n   */\n  get styles(): string | undefined {\n    return this.model?.styles;\n  }\n}\n\n"],"names":[],"mappings":";;;AA0BO,SAAS,wBACd,QAC0B;AAC1B,QAAM,EAAE,UAAU,YAAY,cAAc,WAAW;AAGvD,MAAI,CAAC,WAAY;AACjB,MAAI,CAAC,aAAc;AACnB,MAAI,CAAC,OAAQ;AACb,MAAI,CAAC,SAAU;AACf,MAAI,UAAU,aAAc;AAE5B,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,SAAO,cAAc;AACrB,SAAO,iBAAiB,SAAS,MAAM;AACrC,aAAA;AACA,WAAO;AAAA,MACL,IAAI,YAAY,eAAe,mBAAmB;AAAA,QAChD,SAAS;AAAA,QACT,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA,WAAW,KAAK,IAAA;AAAA,QAAI;AAAA,MACtB,CACD;AAAA,IAAA;AAAA,EAEL,CAAC;AAED,QAAM,YAAY,IAAI,eAAe,MAAM,EACxC,OAAO,OAAO,QAAQ,OAAO,QAAQ,MAAM,EAC3C,MAAA;AAEH,SAAO,IAAI,eAAA,EACR,OAAO,OAAO,OAAO,UAAU,MAAM,MAAM,EAC3C,UAAU,SAAS,EACnB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,WAAW,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,IAAA;AAAA,EACvC,CACD,EACA,MAAA;AACL;AAyBO,MAAM,gBAAgB;AAAA,EAK3B,YAAY,QAA+B;AAF3C,SAAQ,YAAgC;AAGtC,SAAK,SAAS;AACd,SAAK,QAAQ,wBAAwB,MAAM;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO,WAAkD;AACvD,QAAI,KAAK,OAAO;AACd,WAAK,YAAY;AACjB,gBAAU,YAAY,KAAK,MAAM,OAAO;AAAA,IAC1C;AACA,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,SAAe;AACb,QAAI,KAAK,SAAS,KAAK,MAAM,QAAQ,YAAY;AAC/C,WAAK,MAAM,QAAQ,OAAA;AAAA,IACrB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAAY,QAAgB,cAA4B;AACtD,SAAK,OAAO,SAAS;AACrB,SAAK,OAAO,eAAe;AAG3B,SAAK,OAAA;AAGL,SAAK,QAAQ,wBAAwB,KAAK,MAAM;AAGhD,QAAI,KAAK,aAAa,KAAK,OAAO;AAChC,WAAK,UAAU,YAAY,KAAK,MAAM,OAAO;AAAA,IAC/C;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,UAAmB;AACjB,UAAM,EAAE,QAAQ,aAAA,IAAiB,KAAK;AACtC,WAAO,CAAC,EAAE,gBAAgB,SAAS;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAgB;AACd,SAAK,OAAA;AACL,SAAK,YAAY;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,UAAmC;AACrC,WAAO,KAAK,OAAO;AAAA,EACrB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAA6B;AAC/B,WAAO,KAAK,OAAO;AAAA,EACrB;AACF;"}

package/dist/strategies/display/events.d.ts

@@ -0,0 +1,4 @@
+import { DisplayStrategy } from '../../factory/core/types';
+import { EventEntry } from '../../types/data';
+export declare const eventsDisplayStrategy: DisplayStrategy<EventEntry>;
+//# sourceMappingURL=events.d.ts.map

package/dist/strategies/display/events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../source/strategies/display/events.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,eAAe,EAAsB,MAAM,0BAA0B,CAAC;AAE/E,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAqBxC,eAAO,MAAM,qBAAqB,EAAE,eAAe,CAAC,UAAU,CA4E7D,CAAC"}

package/dist/strategies/display/events.js

@@ -0,0 +1,60 @@
+import { card } from "@universityofmaryland/web-elements-library/composite";
+import { events } from "@universityofmaryland/web-elements-library/atomic";
+import { createTextWithLink, createTextContainer, createImageOrLinkedImage } from "@universityofmaryland/web-utilities-library/elements";
+const eventsDisplayStrategy = {
+  layoutType: "grid",
+  mapEntryToCard: (entry, options) => {
+    const {
+      isThemeDark = false,
+      isTransparent = false,
+      isAligned = false,
+      imageConfig,
+      cardType = "block"
+    } = options;
+    const headline = createTextWithLink({
+      text: entry.title,
+      url: entry.url
+    });
+    const text = createTextContainer({
+      text: entry.summary,
+      allowHTML: true
+    });
+    const eventMeta = events.meta({
+      ...entry,
+      isThemeDark
+    });
+    const image = imageConfig ? createImageOrLinkedImage(imageConfig(entry)) : void 0;
+    const dateSign = cardType === "list" ? events.sign({
+      startMonth: entry.startMonth,
+      startDay: entry.startDay,
+      endMonth: entry.endMonth,
+      endDay: entry.endDay,
+      isThemeDark,
+      isLargeSize: true
+    }) : void 0;
+    if (cardType === "list") {
+      return card.list({
+        headline,
+        text,
+        eventMeta,
+        dateSign,
+        image,
+        isAligned,
+        isThemeDark
+      });
+    }
+    return card.block({
+      headline,
+      text,
+      eventMeta,
+      image,
+      isAligned,
+      isTransparent,
+      isThemeDark
+    });
+  }
+};
+export {
+  eventsDisplayStrategy
+};
+//# sourceMappingURL=events.js.map

package/dist/strategies/display/events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.js","sources":["../../../source/strategies/display/events.ts"],"sourcesContent":["/**\n * Events Display Strategy\n *\n * Strategy for displaying event entries as cards.\n * Maps event data to card elements with event-specific metadata.\n *\n * @module strategies/display/events\n */\n\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 { DisplayStrategy, CardMappingOptions } from '../../factory/core/types';\nimport { ElementModel } from '../../_types';\nimport { EventEntry } from 'types/data';\n\n/**\n * Events display strategy\n *\n * Maps event entries to card elements with event metadata.\n * Supports both block and list card layouts.\n *\n * @example\n * ```typescript\n * const feed = createBaseFeed({\n *   displayStrategy: eventsDisplayStrategy,\n *   imageConfig: (entry) => ({\n *     imageUrl: entry.image[0].url,\n *     altText: entry.image[0].altText || 'Event Image',\n *     linkUrl: entry.url,\n *   }),\n *   // ...\n * });\n * ```\n */\nexport const eventsDisplayStrategy: DisplayStrategy<EventEntry> = {\n  layoutType: 'grid',\n\n  mapEntryToCard: (\n    entry: EventEntry,\n    options: CardMappingOptions,\n  ): ElementModel => {\n    const {\n      isThemeDark = false,\n      isTransparent = false,\n      isAligned = false,\n      imageConfig,\n      cardType = 'block',\n    } = options;\n\n    // Create headline\n    const headline = createTextWithLink({\n      text: entry.title,\n      url: entry.url,\n    });\n\n    // Create summary text\n    const text = createTextContainer({\n      text: entry.summary,\n      allowHTML: true,\n    });\n\n    // Create event metadata\n    // Pass all entry data to events.meta() - it will handle missing fields gracefully\n    const eventMeta = eventElements.meta({\n      ...entry,\n      isThemeDark,\n    } as any);\n\n    // Create image (if imageConfig provided)\n    const image = imageConfig\n      ? createImageOrLinkedImage(imageConfig(entry))\n      : undefined;\n\n    // Create date sign for list layout\n    const dateSign =\n      cardType === 'list'\n        ? 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        : undefined;\n\n    // Create card based on type\n    if (cardType === 'list') {\n      return card.list({\n        headline,\n        text,\n        eventMeta,\n        dateSign,\n        image,\n        isAligned,\n        isThemeDark,\n      });\n    }\n\n    // Default to block card\n    return card.block({\n      headline,\n      text,\n      eventMeta,\n      image,\n      isAligned,\n      isTransparent,\n      isThemeDark,\n    });\n  },\n};\n"],"names":["eventElements"],"mappings":";;;AAuCO,MAAM,wBAAqD;AAAA,EAChE,YAAY;AAAA,EAEZ,gBAAgB,CACd,OACA,YACiB;AACjB,UAAM;AAAA,MACJ,cAAc;AAAA,MACd,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ;AAAA,MACA,WAAW;AAAA,IAAA,IACT;AAGJ,UAAM,WAAW,mBAAmB;AAAA,MAClC,MAAM,MAAM;AAAA,MACZ,KAAK,MAAM;AAAA,IAAA,CACZ;AAGD,UAAM,OAAO,oBAAoB;AAAA,MAC/B,MAAM,MAAM;AAAA,MACZ,WAAW;AAAA,IAAA,CACZ;AAID,UAAM,YAAYA,OAAc,KAAK;AAAA,MACnC,GAAG;AAAA,MACH;AAAA,IAAA,CACM;AAGR,UAAM,QAAQ,cACV,yBAAyB,YAAY,KAAK,CAAC,IAC3C;AAGJ,UAAM,WACJ,aAAa,SACTA,OAAc,KAAK;AAAA,MACjB,YAAY,MAAM;AAAA,MAClB,UAAU,MAAM;AAAA,MAChB,UAAU,MAAM;AAAA,MAChB,QAAQ,MAAM;AAAA,MACd;AAAA,MACA,aAAa;AAAA,IAAA,CACd,IACD;AAGN,QAAI,aAAa,QAAQ;AACvB,aAAO,KAAK,KAAK;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IACH;AAGA,WAAO,KAAK,MAAM;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAAA,EACH;AACF;"}

package/dist/strategies/display/experts.d.ts

@@ -0,0 +1,19 @@
+import { DisplayStrategy } from '../../factory/core/types';
+import { ExpertEntry } from '../../types/data';
+export declare const buildFullName: (entry: ExpertEntry) => string;
+export declare const mapExpertToBioProps: (entry: ExpertEntry, displayType: "small" | "full", isThemeDark?: boolean) => {
+    name: HTMLElement | null;
+    pronouns: HTMLElement | null;
+    job: HTMLElement | null;
+    association: HTMLElement | null;
+    email: HTMLElement | null;
+    linkedin: HTMLElement | null;
+    phone: null;
+    address: null;
+    additionalContact: null;
+    image: HTMLAnchorElement | HTMLImageElement | null;
+    description: HTMLElement | null;
+    isThemeDark: boolean;
+};
+export declare const expertsDisplayStrategy: DisplayStrategy<ExpertEntry>;
+//# sourceMappingURL=experts.d.ts.map

package/dist/strategies/display/experts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"experts.d.ts","sourceRoot":"","sources":["../../../source/strategies/display/experts.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,eAAe,EAAsB,MAAM,0BAA0B,CAAC;AAE/E,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAqFzC,eAAO,MAAM,aAAa,GAAI,OAAO,WAAW,KAAG,MAUlD,CAAC;AAqZF,eAAO,MAAM,mBAAmB,GAC9B,OAAO,WAAW,EAClB,aAAa,OAAO,GAAG,MAAM,EAC7B,cAAa,OAAe;;;;;;;;;;;;;CAmC7B,CAAC;AAqBF,eAAO,MAAM,sBAAsB,EAAE,eAAe,CAAC,WAAW,CAwB/D,CAAC"}

package/dist/strategies/display/experts.js

@@ -0,0 +1,266 @@
+import { card, person } from "@universityofmaryland/web-elements-library/composite";
+import { createTextWithLink, createTextContainer, createImageOrLinkedImage } from "@universityofmaryland/web-utilities-library/elements";
+const CONTACT_CONFIGS = [
+  {
+    key: "email",
+    label: () => "Email",
+    url: (value) => `mailto:${value}`
+  },
+  {
+    key: "website",
+    label: (value) => value,
+    url: (value) => value
+  },
+  {
+    key: "linkedin",
+    label: (value) => value,
+    url: (value) => value
+  },
+  {
+    key: "twitter",
+    label: (value) => value,
+    url: (value) => value
+  }
+];
+const buildFullName = (entry) => {
+  const parts = [
+    entry.prefix,
+    entry.firstName,
+    entry.middleName,
+    entry.lastName,
+    entry.suffix
+  ].filter(Boolean);
+  return parts.join(" ");
+};
+const buildProfileUrl = (entry) => {
+  return `https://umdrightnow.umd.edu/expert/${entry.slug}`;
+};
+const extractPrimaryJobTitle = (entry) => {
+  return entry.organizations?.[0]?.jobs?.[0]?.title || null;
+};
+const extractPrimaryAssociation = (entry) => {
+  const campusUnit = entry.organizations?.[0]?.jobs?.[0]?.campusUnits?.[0];
+  if (!campusUnit) return null;
+  return {
+    title: campusUnit.title,
+    url: campusUnit.link?.url
+  };
+};
+const extractImageData = (entry, fullName) => {
+  const headshotUrl = entry.headshot?.[0]?.url;
+  if (!headshotUrl) return null;
+  return {
+    url: headshotUrl,
+    altText: fullName
+  };
+};
+const extractContactData = (entry) => {
+  return {
+    email: entry.email || null,
+    website: entry.website || null,
+    linkedin: entry.linkedin || null,
+    twitter: entry.twitter || null
+  };
+};
+const extractDescription = (entry, displayType) => {
+  return entry.summary?.html || null;
+};
+const extractPronouns = (entry) => {
+  return entry.pronouns || null;
+};
+const createNameElement = (fullName, url, containerTag) => {
+  return createTextWithLink({
+    text: fullName,
+    url,
+    containerTag
+  });
+};
+const createJobElement = (jobTitle) => {
+  if (!jobTitle) return null;
+  return createTextContainer({ text: jobTitle });
+};
+const createAssociationElement = (association) => {
+  if (!association) return null;
+  if (association.url) {
+    return createTextWithLink({
+      text: association.title,
+      url: association.url
+    });
+  }
+  return createTextContainer({ text: association.title });
+};
+const createImageElement = (imageData, linkUrl, linkLabel) => {
+  if (!imageData) return null;
+  return createImageOrLinkedImage({
+    imageUrl: imageData.url,
+    altText: imageData.altText,
+    linkUrl,
+    linkLabel
+  });
+};
+const createDescriptionElement = (description) => {
+  if (!description) return null;
+  return createTextContainer({ text: description, allowHTML: true });
+};
+const createPronounsElement = (pronouns) => {
+  if (!pronouns) return null;
+  return createTextContainer({ text: pronouns });
+};
+const createContactElements = (contactData) => {
+  return CONTACT_CONFIGS.reduce(
+    (elements, config) => {
+      const value = contactData[config.key];
+      if (!value) return elements;
+      const element = createTextWithLink({
+        text: config.label(value),
+        url: config.url(value)
+      });
+      elements[config.key] = element;
+      return elements;
+    },
+    {}
+  );
+};
+const createBlockCardProps = (entry, options) => {
+  const { isThemeDark = false } = options;
+  const fullName = buildFullName(entry);
+  const profileUrl = buildProfileUrl(entry);
+  const jobTitle = extractPrimaryJobTitle(entry);
+  const association = extractPrimaryAssociation(entry);
+  const imageData = extractImageData(entry, fullName);
+  const pronouns = extractPronouns(entry);
+  const name = createNameElement(fullName, profileUrl);
+  const job = createJobElement(jobTitle);
+  const associationElement = createAssociationElement(association);
+  const image = createImageElement(imageData, profileUrl, `View profile for ${fullName}`);
+  const pronounsElement = createPronounsElement(pronouns);
+  return person.block({
+    name,
+    pronouns: pronounsElement,
+    job,
+    association: associationElement,
+    image,
+    isThemeDark
+  });
+};
+const createListCardProps = (entry, options) => {
+  const { isThemeDark = false } = options;
+  const fullName = buildFullName(entry);
+  const profileUrl = buildProfileUrl(entry);
+  const jobTitle = extractPrimaryJobTitle(entry);
+  const association = extractPrimaryAssociation(entry);
+  const imageData = extractImageData(entry, fullName);
+  const pronouns = extractPronouns(entry);
+  const name = createNameElement(fullName, profileUrl);
+  const job = createJobElement(jobTitle);
+  const associationElement = createAssociationElement(association);
+  const image = createImageElement(imageData, profileUrl, `View profile for ${fullName}`);
+  const pronounsElement = createPronounsElement(pronouns);
+  return person.list({
+    name,
+    pronouns: pronounsElement,
+    job,
+    association: associationElement,
+    image,
+    isThemeDark
+  });
+};
+const createTabularCardProps = (entry, options) => {
+  const { isThemeDark = false } = options;
+  const fullName = buildFullName(entry);
+  const profileUrl = buildProfileUrl(entry);
+  const jobTitle = extractPrimaryJobTitle(entry);
+  const association = extractPrimaryAssociation(entry);
+  const imageData = extractImageData(entry, fullName);
+  const contactData = extractContactData(entry);
+  const pronouns = extractPronouns(entry);
+  const name = createNameElement(fullName, profileUrl);
+  const job = createJobElement(jobTitle);
+  const associationElement = createAssociationElement(association);
+  const image = createImageElement(imageData, profileUrl, `View profile for ${fullName}`);
+  const contactElements = createContactElements(contactData);
+  const pronounsElement = createPronounsElement(pronouns);
+  return person.tabular({
+    name,
+    pronouns: pronounsElement,
+    job,
+    association: associationElement,
+    image,
+    ...contactElements,
+    isThemeDark
+  });
+};
+const createOverlayCardProps = (entry, options) => {
+  const { isThemeDark = false } = options;
+  const fullName = buildFullName(entry);
+  const profileUrl = buildProfileUrl(entry);
+  const jobTitle = extractPrimaryJobTitle(entry);
+  const imageData = extractImageData(entry, fullName);
+  const headline = createNameElement(fullName, profileUrl);
+  const text = createJobElement(jobTitle);
+  const backgroundImage = createImageElement(
+    imageData,
+    profileUrl,
+    `View profile for ${fullName}`
+  );
+  return card.overlay.image({
+    headline,
+    text,
+    backgroundImage,
+    isThemeDark
+  });
+};
+const mapExpertToBioProps = (entry, displayType, isThemeDark = false) => {
+  const fullName = buildFullName(entry);
+  const profileUrl = buildProfileUrl(entry);
+  const jobTitle = extractPrimaryJobTitle(entry);
+  const association = extractPrimaryAssociation(entry);
+  const imageData = extractImageData(entry, fullName);
+  const contactData = extractContactData(entry);
+  const description = extractDescription(entry);
+  const pronouns = extractPronouns(entry);
+  const name = createNameElement(fullName, profileUrl, "h1");
+  const job = createJobElement(jobTitle);
+  const associationElement = createAssociationElement(association);
+  const image = createImageElement(imageData);
+  const descriptionElement = createDescriptionElement(description);
+  const contactElements = createContactElements(contactData);
+  const pronounsElement = createPronounsElement(pronouns);
+  return {
+    name,
+    pronouns: pronounsElement,
+    job,
+    association: associationElement,
+    email: contactElements.email || null,
+    linkedin: contactElements.linkedin || null,
+    phone: null,
+    address: null,
+    additionalContact: null,
+    image,
+    description: descriptionElement,
+    isThemeDark
+  };
+};
+const expertsDisplayStrategy = {
+  layoutType: "list",
+  mapEntryToCard: (entry, options) => {
+    const { isOverlay = false, cardType = "block" } = options;
+    if (isOverlay && entry.headshot?.[0]?.url) {
+      return createOverlayCardProps(entry, options);
+    }
+    switch (cardType) {
+      case "list":
+        return createListCardProps(entry, options);
+      case "tabular":
+        return createTabularCardProps(entry, options);
+      default:
+        return createBlockCardProps(entry, options);
+    }
+  }
+};
+export {
+  buildFullName,
+  expertsDisplayStrategy,
+  mapExpertToBioProps
+};
+//# sourceMappingURL=experts.js.map