agnosticui-core 2.0.0-alpha.2

package/src/components/Pagination/core/_ContentPagination.ts

@@ -0,0 +1,440 @@
+import { LitElement, html, css } from 'lit';
+import { property } from 'lit/decorators.js';
+
+/**
+ * Content item for navigation
+ */
+export interface ContentNavigationItem {
+  title: string;
+  href?: string;
+}
+
+/**
+ * Event detail for navigate event
+ */
+export interface NavigateEventDetail {
+  direction: 'previous' | 'next' | 'parent';
+  title: string;
+  href?: string;
+}
+
+/**
+ * Custom event dispatched when navigation occurs
+ */
+export type NavigateEvent = CustomEvent<NavigateEventDetail>;
+
+/**
+ * Props interface for ContentPagination component
+ */
+export interface ContentPaginationProps {
+  /**
+   * Previous content item
+   */
+  previous?: ContentNavigationItem;
+  /**
+   * Next content item
+   */
+  next?: ContentNavigationItem;
+  /**
+   * Parent/overview content item
+   */
+  parent?: ContentNavigationItem;
+  /**
+   * Alternative aria-label for the navigation
+   */
+  ariaLabel?: string;
+  /**
+   * Whether to display borders around navigation links
+   */
+  bordered?: boolean;
+  /**
+   * Event callback fired when navigation occurs (for SPA routing)
+   */
+  onNavigate?: (event: NavigateEvent) => void;
+}
+
+/**
+ * ContentPagination component for navigating between content pages
+ *
+ * @fires {NavigateEvent} navigate - Fired when a navigation link is clicked
+ * @csspart ag-content-pagination-container - The outer container element
+ * @csspart ag-content-pagination-parent - The parent navigation item
+ * @csspart ag-content-pagination-nav - The previous/next navigation container
+ * @csspart ag-content-pagination-link - Individual navigation link/button
+ *
+ * @slot previous-icon - Icon for previous navigation (default: ←)
+ * @slot next-icon - Icon for next navigation (default: →)
+ * @slot parent-icon - Icon for parent navigation (default: ↑)
+ *
+ * @example
+ * ```html
+ * <ag-content-pagination
+ *   .previous=${{ title: 'Introduction', href: '/intro' }}
+ *   .next=${{ title: 'Getting Started', href: '/getting-started' }}
+ *   .parent=${{ title: 'Documentation', href: '/docs' }}
+ * ></ag-content-pagination>
+ * ```
+ */
+export class ContentPagination extends LitElement implements ContentPaginationProps {
+  @property({ type: Object, attribute: false })
+  declare previous?: ContentNavigationItem;
+
+  @property({ type: Object, attribute: false })
+  declare next?: ContentNavigationItem;
+
+  @property({ type: Object, attribute: false })
+  declare parent?: ContentNavigationItem;
+
+  @property({ type: String, attribute: 'aria-label' })
+  declare ariaLabel: string;
+
+  @property({ type: Boolean, reflect: true })
+  declare bordered: boolean;
+
+  @property({ attribute: false })
+  declare onNavigate?: (event: NavigateEvent) => void;
+
+  @property({ type: Boolean, reflect: true, attribute: 'has-parent' })
+  private _hasParentAndChild = false;
+
+  constructor() {
+    super();
+    this.ariaLabel = 'content navigation';
+    this.bordered = false;
+  }
+
+  willUpdate(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('parent') || changedProperties.has('previous') || changedProperties.has('next')) {
+      this._hasParentAndChild = !!this.parent && (!!this.previous || !!this.next);
+    }
+  }
+
+  private _renderChevronIcon(rotationClass = '') {
+    return html`<svg aria-hidden="true" fill="none" focusable="false" height="20" role="presentation" viewBox="0 0 24 24" width="20" class="${rotationClass} text-primary"><path d="M15.5 19l-7-7 7-7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>`;
+  }
+
+  private _handleNavigate(
+    direction: 'previous' | 'next' | 'parent',
+    item: ContentNavigationItem | undefined,
+    event: MouseEvent
+  ) {
+    if (!item) return; // safeguard for TypeScript & eslint
+
+    // If href is provided and no custom handler, let browser handle it
+    if (item.href && !this.onNavigate) {
+      return;
+    }
+
+    if (this.onNavigate) {
+      event.preventDefault();
+    }
+
+    const navigateEvent = new CustomEvent<NavigateEventDetail>('navigate', {
+      detail: {
+        direction,
+        title: item.title,
+        href: item.href,
+      },
+      bubbles: true,
+      composed: true,
+    });
+
+    this.dispatchEvent(navigateEvent);
+
+    if (this.onNavigate) {
+      this.onNavigate(navigateEvent);
+    }
+  }
+
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .rotate-180 {
+        transform: rotate(180deg);
+    }
+
+    .content-pagination-container {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ag-space-1);
+    }
+
+    .content-pagination-parent {
+      display: flex;
+      align-items: center;
+      padding: var(--ag-space-2) var(--ag-space-5);
+      border-radius: var(--ag-radius-md);
+    }
+
+    .content-pagination-parent-link {
+      display: flex;
+      align-items: center;
+      gap: var(--ag-space-1);
+      color: var(--ag-text-primary);
+      text-decoration: none;
+      font-size: var(--ag-font-size-sm);
+      font-weight: 500;
+      cursor: pointer;
+      background: none;
+      border: none;
+      font-family: inherit;
+    }
+
+    .content-pagination-parent-link:hover {
+      color: var(--ag-primary);
+    }
+
+    .content-pagination-parent-link:focus-visible {
+      outline: var(--ag-focus-width) solid rgba(var(--ag-focus), 0.5);
+      outline-offset: var(--ag-focus-offset);
+      border-radius: var(--ag-radius-sm);
+    }
+
+    .content-pagination-nav {
+      display: flex;
+      justify-content: space-between;
+      gap: var(--ag-space-4);
+      padding-block-start: var(--ag-space-2);
+      border-top: 0px solid transparent;
+    }
+
+    .content-pagination-nav-with-parent {
+      border-top: 1px solid var(--ag-border);
+    }
+
+    .content-pagination-item {
+      display: flex;
+      flex: 0 1 auto;
+      min-inline-size: 0;
+      max-inline-size: 45%;
+    }
+
+    .content-pagination-item-previous {
+      justify-content: flex-start;
+    }
+
+    .content-pagination-item-next {
+      justify-content: flex-end;
+      margin-inline-start: auto;
+    }
+
+    .content-pagination-link {
+      display: flex;
+      align-items: center;
+      gap: var(--ag-space-2, 0.5rem);
+      padding: var(--ag-space-3) var(--ag-space-4);
+      border-radius: var(--ag-radius-md);
+      background-color: var(--ag-background-primary);
+      color: var(--ag-text-primary);
+      text-decoration: none;
+      font-size: var(--ag-font-size-base);
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.15s ease-in-out;
+      font-family: inherit;
+      min-width: 0;
+    }
+
+    :host([bordered]) .content-pagination-link {
+      border: 1px solid var(--ag-border);
+    }
+    
+    .content-pagination-link:hover {
+      background-color: var(--ag-background-secondary);
+      color: var(--ag-primary);
+    }
+
+    .content-pagination-link:focus-visible {
+      outline: var(--ag-focus-width) solid rgba(var(--ag-focus), 0.5);
+      outline-offset: var(--ag-focus-offset);
+    }
+
+    .content-pagination-link:active {
+      transform: translateY(1px);
+    }
+
+    button.content-pagination-link {
+      background-color: transparent;
+      border: 0;
+    }
+
+    :host([bordered]) button.content-pagination-link {
+      border: 1px solid var(--ag-border);
+    }
+
+    .content-pagination-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+    }
+
+    .content-pagination-icon {
+      flex-shrink: 0;
+      font-size: 1.25em;
+      line-height: 1;
+    }
+
+    /* Responsive: stack on very small screens */
+    @media (max-width: 640px) {
+      .content-pagination-nav {
+        flex-direction: column;
+        gap: var(--ag-space-3);
+      }
+
+      .content-pagination-item {
+        max-inline-size: 100%;
+      }
+
+      .content-pagination-item-next {
+        margin-inline-start: 0;
+      }
+    }
+
+    @media (prefers-reduced-motion) {
+      .content-pagination-link {
+        transition: none;
+      }
+
+      .content-pagination-link:active {
+        transform: none;
+      }
+    }
+  `;
+
+  render() {
+    return html`
+      <nav
+        class="content-pagination-container"
+        part="ag-content-pagination-container"
+        aria-label=${this.ariaLabel}
+      >
+        ${this.parent
+          ? html`
+              <div
+                class="content-pagination-parent"
+                part="ag-content-pagination-parent"
+              >
+                ${this.parent.href
+                  ? html`
+                      <a
+                        href=${this.parent.href}
+                        class="content-pagination-parent-link"
+                        part="ag-content-pagination-link"
+                        aria-label="Up to: ${this.parent.title}"
+                        @click=${(e: MouseEvent) =>
+                          this._handleNavigate('parent', this.parent, e)}
+                      >
+                        <span class="content-pagination-icon">
+                          <slot name="parent-icon">${String.fromCharCode(8593)}</slot>
+                        </span>
+                        <span>${this.parent.title}</span>
+                      </a>
+                    `
+                  : html`
+                      <button
+                        type="button"
+                        class="content-pagination-parent-link"
+                        part="ag-content-pagination-link"
+                        aria-label="Up to: ${this.parent.title}"
+                        @click=${(e: MouseEvent) =>
+                          this._handleNavigate('parent', this.parent, e)}
+                      >
+                        <span class="content-pagination-icon">
+                          <slot name="parent-icon">${String.fromCharCode(8593)}</slot>
+                        </span>
+                        <span>${this.parent.title}</span>
+                      </button>
+                    `}
+              </div>
+            `
+          : ''}
+
+        <div
+          class="content-pagination-nav ${this._hasParentAndChild ? 'content-pagination-nav-with-parent' : ''}"
+          part="ag-content-pagination-nav"
+        >
+          ${this.previous
+            ? html`
+                <div class="content-pagination-item content-pagination-item-previous">
+                  ${this.previous.href
+                    ? html`
+                        <a
+                          href=${this.previous.href}
+                          class="content-pagination-link"
+                          part="ag-content-pagination-link"
+                          aria-label="Previous: ${this.previous.title}"
+                          @click=${(e: MouseEvent) =>
+                            this._handleNavigate('previous', this.previous, e)}
+                        >
+                          <span class="content-pagination-icon">
+                            <slot name="previous-icon">${this._renderChevronIcon()}</slot>
+                          </span>
+                          <span class="content-pagination-title">${this.previous.title}</span>
+                        </a>
+                      `
+                    : html`
+                        <button
+                          type="button"
+                          class="content-pagination-link"
+                          part="ag-content-pagination-link"
+                          aria-label="Previous: ${this.previous.title}"
+                          @click=${(e: MouseEvent) =>
+                            this._handleNavigate('previous', this.previous, e)}
+                        >
+                          <span class="content-pagination-icon">
+                            <slot name="previous-icon">${this._renderChevronIcon()}</slot>
+                          </span>
+                          <span class="content-pagination-title">${this.previous.title}</span>
+                        </button>
+                      `}
+                </div>
+              `
+            : html`<div class="content-pagination-item"></div>`}
+
+          ${this.next
+            ? html`
+                <div class="content-pagination-item content-pagination-item-next">
+                  ${this.next.href
+                    ? html`
+                        <a
+                          href=${this.next.href}
+                          class="content-pagination-link"
+                          part="ag-content-pagination-link"
+                          aria-label="Next: ${this.next.title}"
+                          @click=${(e: MouseEvent) =>
+                            this._handleNavigate('next', this.next, e)}
+                        >
+                          <span class="content-pagination-title">${this.next.title}</span>
+                          <span class="content-pagination-icon">
+                            <slot name="next-icon">${this._renderChevronIcon('rotate-180')}</slot>
+                          </span>
+                        </a>
+                      `
+                    : html`
+                        <button
+                          type="button"
+                          class="content-pagination-link"
+                          part="ag-content-pagination-link"
+                          aria-label="Next: ${this.next.title}"
+                          @click=${(e: MouseEvent) =>
+                            this._handleNavigate('next', this.next, e)}
+                        >
+                          <span class="content-pagination-title">${this.next.title}</span>
+                          <span class="content-pagination-icon">
+                            <slot name="next-icon">${this._renderChevronIcon('rotate-180')}</slot>
+                          </span>
+                        </button>
+                      `}
+                </div>
+              `
+            : html`<div class="content-pagination-item"></div>`}
+        </div>
+      </nav>
+    `;
+  }
+}