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

package/dist/states/loading.js

@@ -0,0 +1,155 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const Styles = require("@universityofmaryland/web-styles-library");
+const _types = require("./_types.js");
+const ID_UMD_LOADER = "umd-loader-container";
+const keyframes = `
+  @keyframes loader-first-animation {
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes loader-last-animation {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0);
+    }
+  }
+
+  @keyframes loader-middle-animation {
+    0% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate(24px, 0);
+    }
+  }
+`;
+function createLoadingElement(config = {}) {
+  const { isThemeDark = false } = config;
+  const defaultDotStyles = {
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    background: isThemeDark ? Styles.token.color.gray.light : Styles.token.color.gray.dark,
+    animationTimingFunction: "cubic-bezier(0, 1, 1, 0)"
+  };
+  const innerElmOne = new webBuilderLibrary.ElementBuilder().withClassName(`${ID_UMD_LOADER}-one`).withStyles({
+    element: {
+      ...defaultDotStyles,
+      left: "5px",
+      animation: "loader-first-animation 0.6s infinite"
+    }
+  }).build();
+  const innerElmTwo = new webBuilderLibrary.ElementBuilder().withClassName(`${ID_UMD_LOADER}-two`).withStyles({
+    element: {
+      ...defaultDotStyles,
+      left: "5px",
+      animation: "loader-middle-animation 0.6s infinite"
+    }
+  }).build();
+  const innerElmThree = new webBuilderLibrary.ElementBuilder().withClassName(`${ID_UMD_LOADER}-three`).withStyles({
+    element: {
+      ...defaultDotStyles,
+      left: "24px",
+      animation: "loader-middle-animation 0.6s infinite"
+    }
+  }).build();
+  const innerElmFour = new webBuilderLibrary.ElementBuilder().withClassName(`${ID_UMD_LOADER}-four`).withStyles({
+    element: {
+      ...defaultDotStyles,
+      left: "45px",
+      animation: "loader-last-animation 0.6s infinite"
+    }
+  }).build();
+  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName(`${ID_UMD_LOADER}-wrapper`).withChild(innerElmOne).withChild(innerElmTwo).withChild(innerElmThree).withChild(innerElmFour).withStyles({
+    element: {
+      position: "relative"
+    }
+  }).build();
+  const composite = new webBuilderLibrary.ElementBuilder().withClassName(ID_UMD_LOADER).withChild(wrapper).withStyles({
+    element: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: "10px 0",
+      minHeight: "40px",
+      position: "relative",
+      gridColumn: "1 / -1"
+    }
+  }).build();
+  composite.styles += keyframes;
+  return composite;
+}
+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(_types.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(_types.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;
+  }
+}
+exports.LoadingState = LoadingState;
+exports.createLoadingElement = createLoadingElement;
+//# 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 {\n  type LoadingStateConfig,\n  type LoaderLegacyAPI,\n  FeedStateEvent,\n} 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// =============================================================================\n// Backwards Compatible Exports (Legacy API)\n// =============================================================================\n\n/**\n * @deprecated Use LoadingState class instead\n */\nconst create = (config: LoadingStateConfig = {}): ElementModel => {\n  return createLoadingElement(config);\n};\n\n/**\n * @deprecated Use LoadingState.show() instead\n */\nconst display = ({\n  container,\n  isThemeDark,\n}: {\n  container: HTMLElement;\n  isThemeDark?: boolean;\n}): void => {\n  const loading = createLoadingElement({ isThemeDark });\n  container.appendChild(loading.element);\n};\n\n/**\n * @deprecated Use LoadingState.hide() instead\n */\nconst remove = ({ container }: { container: HTMLElement }): void => {\n  const loader = container.querySelector(`.${ID_UMD_LOADER}`) as HTMLDivElement;\n  if (loader) loader.remove();\n};\n\n/**\n * Legacy API for backwards compatibility\n * @deprecated Use LoadingState class instead\n */\nexport default {\n  create,\n  display,\n  remove,\n} as LoaderLegacyAPI;\n"],"names":["token","ElementBuilder","FeedStateEvent"],"mappings":"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"}

package/dist/states/loading.mjs

@@ -0,0 +1,155 @@
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { token } from "@universityofmaryland/web-styles-library";
+import { FeedStateEvent } from "./_types.mjs";
+const ID_UMD_LOADER = "umd-loader-container";
+const keyframes = `
+  @keyframes loader-first-animation {
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes loader-last-animation {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0);
+    }
+  }
+
+  @keyframes loader-middle-animation {
+    0% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate(24px, 0);
+    }
+  }
+`;
+function createLoadingElement(config = {}) {
+  const { isThemeDark = false } = config;
+  const defaultDotStyles = {
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    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: {
+      ...defaultDotStyles,
+      left: "5px",
+      animation: "loader-first-animation 0.6s infinite"
+    }
+  }).build();
+  const innerElmTwo = new ElementBuilder().withClassName(`${ID_UMD_LOADER}-two`).withStyles({
+    element: {
+      ...defaultDotStyles,
+      left: "5px",
+      animation: "loader-middle-animation 0.6s infinite"
+    }
+  }).build();
+  const innerElmThree = new ElementBuilder().withClassName(`${ID_UMD_LOADER}-three`).withStyles({
+    element: {
+      ...defaultDotStyles,
+      left: "24px",
+      animation: "loader-middle-animation 0.6s infinite"
+    }
+  }).build();
+  const innerElmFour = new ElementBuilder().withClassName(`${ID_UMD_LOADER}-four`).withStyles({
+    element: {
+      ...defaultDotStyles,
+      left: "45px",
+      animation: "loader-last-animation 0.6s infinite"
+    }
+  }).build();
+  const wrapper = new ElementBuilder().withClassName(`${ID_UMD_LOADER}-wrapper`).withChild(innerElmOne).withChild(innerElmTwo).withChild(innerElmThree).withChild(innerElmFour).withStyles({
+    element: {
+      position: "relative"
+    }
+  }).build();
+  const composite = new ElementBuilder().withClassName(ID_UMD_LOADER).withChild(wrapper).withStyles({
+    element: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: "10px 0",
+      minHeight: "40px",
+      position: "relative",
+      gridColumn: "1 / -1"
+    }
+  }).build();
+  composite.styles += keyframes;
+  return composite;
+}
+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 {
+  LoadingState,
+  createLoadingElement
+};
+//# sourceMappingURL=loading.mjs.map

package/dist/states/loading.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading.mjs","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 {\n  type LoadingStateConfig,\n  type LoaderLegacyAPI,\n  FeedStateEvent,\n} 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// =============================================================================\n// Backwards Compatible Exports (Legacy API)\n// =============================================================================\n\n/**\n * @deprecated Use LoadingState class instead\n */\nconst create = (config: LoadingStateConfig = {}): ElementModel => {\n  return createLoadingElement(config);\n};\n\n/**\n * @deprecated Use LoadingState.show() instead\n */\nconst display = ({\n  container,\n  isThemeDark,\n}: {\n  container: HTMLElement;\n  isThemeDark?: boolean;\n}): void => {\n  const loading = createLoadingElement({ isThemeDark });\n  container.appendChild(loading.element);\n};\n\n/**\n * @deprecated Use LoadingState.hide() instead\n */\nconst remove = ({ container }: { container: HTMLElement }): void => {\n  const loader = container.querySelector(`.${ID_UMD_LOADER}`) as HTMLDivElement;\n  if (loader) loader.remove();\n};\n\n/**\n * Legacy API for backwards compatibility\n * @deprecated Use LoadingState class instead\n */\nexport default {\n  create,\n  display,\n  remove,\n} as LoaderLegacyAPI;\n"],"names":[],"mappings":";;;AAUA,MAAM,gBAAgB;AAEtB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCX,SAAS,qBAAqB,SAA6B,IAAkB;AAClF,QAAM,EAAE,cAAc,MAAA,IAAU;AAEhC,QAAM,mBAAmB;AAAA,IACvB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,WAAW;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,YAAY,cAAc,MAAM,MAAM,KAAK,QAAQ,MAAM,MAAM,KAAK;AAAA,IACpE,yBAAyB;AAAA,EAAA;AAG3B,QAAM,cAAc,IAAI,eAAA,EACrB,cAAc,GAAG,aAAa,MAAM,EACpC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,GAAG;AAAA,MACH,MAAM;AAAA,MACN,WAAW;AAAA,IAAA;AAAA,EACb,CACD,EACA,MAAA;AAEH,QAAM,cAAc,IAAI,eAAA,EACrB,cAAc,GAAG,aAAa,MAAM,EACpC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,GAAG;AAAA,MACH,MAAM;AAAA,MACN,WAAW;AAAA,IAAA;AAAA,EACb,CACD,EACA,MAAA;AAEH,QAAM,gBAAgB,IAAI,eAAA,EACvB,cAAc,GAAG,aAAa,QAAQ,EACtC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,GAAG;AAAA,MACH,MAAM;AAAA,MACN,WAAW;AAAA,IAAA;AAAA,EACb,CACD,EACA,MAAA;AAEH,QAAM,eAAe,IAAI,eAAA,EACtB,cAAc,GAAG,aAAa,OAAO,EACrC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,GAAG;AAAA,MACH,MAAM;AAAA,MACN,WAAW;AAAA,IAAA;AAAA,EACb,CACD,EACA,MAAA;AAEH,QAAM,UAAU,IAAI,iBACjB,cAAc,GAAG,aAAa,UAAU,EACxC,UAAU,WAAW,EACrB,UAAU,WAAW,EACrB,UAAU,aAAa,EACvB,UAAU,YAAY,EACtB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,IAAA;AAAA,EACZ,CACD,EACA,MAAA;AAEH,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,aAAa,EAC3B,UAAU,OAAO,EACjB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,MACV,YAAY;AAAA,IAAA;AAAA,EACd,CACD,EACA,MAAA;AAEH,YAAU,UAAU;AAEpB,SAAO;AACT;AAeO,MAAM,aAAa;AAAA,EAKxB,YAAY,SAA6B,IAAI;AAH7C,SAAQ,YAAgC;AACxC,SAAQ,YAAqB;AAG3B,SAAK,QAAQ,qBAAqB,MAAM;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA,EAKA,KAAK,WAA8B;AACjC,QAAI,CAAC,KAAK,WAAW;AACnB,WAAK,YAAY;AACjB,gBAAU,YAAY,KAAK,MAAM,OAAO;AACxC,WAAK,YAAY;AAEjB,gBAAU;AAAA,QACR,IAAI,YAAY,eAAe,eAAe;AAAA,UAC5C,SAAS;AAAA,UACT,QAAQ,EAAE,WAAW,KAAK,MAAI;AAAA,QAAE,CACjC;AAAA,MAAA;AAAA,IAEL;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,OAAa;AACX,QAAI,KAAK,aAAa,KAAK,MAAM,QAAQ,YAAY;AACnD,WAAK,MAAM,QAAQ,OAAA;AACnB,WAAK,YAAY;AAEjB,UAAI,KAAK,WAAW;AAClB,aAAK,UAAU;AAAA,UACb,IAAI,YAAY,eAAe,aAAa;AAAA,YAC1C,SAAS;AAAA,YACT,QAAQ,EAAE,WAAW,KAAK,MAAI;AAAA,UAAE,CACjC;AAAA,QAAA;AAAA,MAEL;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,UAAgB;AACd,SAAK,KAAA;AACL,SAAK,YAAY;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,UAAuB;AACzB,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAiB;AACnB,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;"}

package/dist/states/pagination.d.ts

@@ -0,0 +1,19 @@
+import { ElementModel } from '../_types';
+import { PaginationStateConfig, PaginationLegacyAPI } 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;
+}
+declare const _default: PaginationLegacyAPI;
+export default _default;
+//# 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,EACL,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EAEzB,MAAM,UAAU,CAAC;AAsBlB,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;wBA+BI,mBAAmB;AAHxB,wBAGyB"}

package/dist/states/pagination.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Styles = require("@universityofmaryland/web-styles-library");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const _types = require("./_types.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);
+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(_types.FeedStateEvent.PAGINATION_LOADED, {
+        bubbles: true,
+        detail: {
+          offset,
+          totalEntries,
+          timestamp: Date.now()
+        }
+      })
+    );
+  });
+  const ctaButton = new webBuilderLibrary.ElementBuilder(button).styled(Styles__namespace.element.action.outline.normal).build();
+  return new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.alignment.block.center).withChild(ctaButton).withStyles({
+    element: {
+      marginTop: `${Styles__namespace.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;
+  }
+}
+exports.PaginationState = PaginationState;
+exports.createPaginationElement = 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 {\n  type PaginationStateConfig,\n  type PaginationLegacyAPI,\n  FeedStateEvent,\n} 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// =============================================================================\n// Backwards Compatible Exports (Legacy API)\n// =============================================================================\n\n/**\n * @deprecated Use PaginationState class or createPaginationElement instead\n */\nconst create = (config: PaginationStateConfig): ElementModel | undefined => {\n  return createPaginationElement(config);\n};\n\n/**\n * @deprecated Use PaginationState.remove() instead\n */\nconst remove = ({ container }: { container: HTMLElement }): void => {\n  const button = container.querySelector(\n    `.${Styles.layout.alignment.block.center.className}`\n  ) as HTMLDivElement;\n\n  if (button) button.remove();\n};\n\n/**\n * Legacy API for backwards compatibility\n * @deprecated Use PaginationState class instead\n */\nexport default {\n  remove,\n  create,\n} as PaginationLegacyAPI;\n"],"names":["FeedStateEvent","ElementBuilder","Styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8BO,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,YAAYA,OAAAA,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,IAAIC,iCAAe,MAAM,EACxC,OAAOC,kBAAO,QAAQ,OAAO,QAAQ,MAAM,EAC3C,MAAA;AAEH,SAAO,IAAID,kBAAAA,eAAA,EACR,OAAOC,kBAAO,OAAO,UAAU,MAAM,MAAM,EAC3C,UAAU,SAAS,EACnB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,WAAW,GAAGA,kBAAO,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/states/pagination.mjs

@@ -0,0 +1,102 @@
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { FeedStateEvent } from "./_types.mjs";
+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.mjs.map

package/dist/states/pagination.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.mjs","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 {\n  type PaginationStateConfig,\n  type PaginationLegacyAPI,\n  FeedStateEvent,\n} 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// =============================================================================\n// Backwards Compatible Exports (Legacy API)\n// =============================================================================\n\n/**\n * @deprecated Use PaginationState class or createPaginationElement instead\n */\nconst create = (config: PaginationStateConfig): ElementModel | undefined => {\n  return createPaginationElement(config);\n};\n\n/**\n * @deprecated Use PaginationState.remove() instead\n */\nconst remove = ({ container }: { container: HTMLElement }): void => {\n  const button = container.querySelector(\n    `.${Styles.layout.alignment.block.center.className}`\n  ) as HTMLDivElement;\n\n  if (button) button.remove();\n};\n\n/**\n * Legacy API for backwards compatibility\n * @deprecated Use PaginationState class instead\n */\nexport default {\n  remove,\n  create,\n} as PaginationLegacyAPI;\n"],"names":[],"mappings":";;;AA8BO,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"}