platformcommons-web-lib 1.0.0

package/src/lib/modules/pagination/components/pagination/pagination.component.scss

@@ -0,0 +1,155 @@
+.cc-pagination {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  font-family: var(--cc-pagination-font-family);
+  color: var(--cc-pagination-text-color);
+  font-size: var(--cc-pagination-font-size);
+  flex-wrap: wrap;
+  gap: 1rem;
+  width: 100%;
+  box-sizing: border-box;
+
+  /* Left Side: Items Info & Per Page */
+  .pagination-left {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+
+    .items-info {
+      white-space: nowrap;
+    }
+
+    .per-page-selector {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+
+      .select-wrapper {
+        position: relative;
+        display: inline-block;
+
+        select {
+          appearance: none;
+          background-color: var(--cc-pagination-select-bg);
+          border: var(--cc-pagination-select-border);
+          border-radius: var(--cc-pagination-select-radius);
+          padding: var(--cc-pagination-select-padding);
+          padding-right: 2rem; /* Space for arrow */
+          color: var(--cc-pagination-select-text-color);
+          font-family: inherit;
+          font-size: inherit;
+          cursor: pointer;
+          min-width: 60px;
+          
+          &:focus {
+            outline: none;
+            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+          }
+        }
+
+        /* Custom Arrow */
+        &::after {
+          content: '▼';
+          position: absolute;
+          right: 10px;
+          top: 50%;
+          transform: translateY(-50%);
+          font-size: 0.7em;
+          color: var(--cc-pagination-select-arrow-color);
+          pointer-events: none;
+        }
+      }
+
+      .per-page-label {
+        white-space: nowrap;
+      }
+    }
+  }
+
+  /* Right Side: Page Controls */
+  .pagination-right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+
+    .page-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: var(--cc-pagination-btn-size);
+      height: var(--cc-pagination-btn-size);
+      background-color: var(--cc-pagination-btn-bg);
+      border: var(--cc-pagination-btn-border);
+      border-radius: var(--cc-pagination-btn-radius);
+      color: var(--cc-pagination-btn-text-color);
+      font-family: inherit;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      padding: 0 0.5rem;
+      user-select: none;
+
+      &:hover:not(:disabled) {
+        background-color: var(--cc-pagination-btn-hover-bg);
+      }
+
+      &:disabled {
+        opacity: var(--cc-pagination-disabled-opacity);
+        background-color: var(--cc-pagination-disabled-bg);
+        cursor: not-allowed;
+      }
+
+      &.active {
+        background-color: var(--cc-pagination-btn-active-bg);
+        border: var(--cc-pagination-btn-active-border);
+        color: var(--cc-pagination-btn-active-text);
+        font-weight: bold;
+      }
+
+      .icon {
+        font-size: 1.2em;
+        line-height: 1;
+      }
+    }
+
+    .page-numbers {
+        display: flex;
+        gap: 0.5rem;
+        flex-wrap: wrap; // Allow numbers to wrap on very small screens if needed
+    }
+
+    .ellipsis {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--cc-pagination-text-color);
+      width: 20px;
+    }
+  }
+
+  /* Mobile Responsiveness */
+  @media (max-width: 600px) {
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+
+    .pagination-left {
+      width: 100%;
+      justify-content: space-between;
+      order: 2; // Move controls below numbers on mobile if desired, or keep generic flow
+    }
+
+    .pagination-right {
+      width: 100%;
+      justify-content: center;
+      order: 1; // Show page numbers first on mobile? Usually keep order or stack.
+
+      .page-numbers {
+          justify-content: center;
+      }
+    }
+  }
+}

package/src/lib/modules/pagination/components/pagination/pagination.component.ts

@@ -0,0 +1,109 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, PAGINATION_THEME_DEFAULT } from '../../../../utils/constants';
+
+export interface PaginationLabels {
+  items: string;
+  of: string;
+  perPage: string;
+}
+
+@Component({
+  selector: 'lib-pagination',
+  templateUrl: './pagination.component.html',
+  styleUrls: ['./pagination.component.scss'],
+  standalone: false
+})
+export class PaginationComponent implements OnInit, OnChanges {
+  @Input() totalItems: number = 0;
+  @Input() itemsPerPage: number = DEFAULT_ITEMS_PER_PAGE;
+  @Input() currentPage: number = 1;
+  @Input() pageSizeOptions: number[] = DEFAULT_PAGE_SIZE_OPTIONS;
+  @Input() theme: 'theme-1' | 'theme-2' = PAGINATION_THEME_DEFAULT;
+  @Input() labels: PaginationLabels = {
+    items: 'items',
+    of: 'of',
+    perPage: 'Per Page'
+  };
+
+  @Output() pageChange = new EventEmitter<number>();
+  @Output() itemsPerPageChange = new EventEmitter<number>();
+
+  totalPages: number = 0;
+  pages: (number | string)[] = [];
+  startItem: number = 0;
+  endItem: number = 0;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.calculatePagination();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['totalItems'] || changes['itemsPerPage'] || changes['currentPage']) {
+      this.calculatePagination();
+    }
+  }
+
+  calculatePagination(): void {
+    this.totalPages = Math.ceil(this.totalItems / this.itemsPerPage);
+
+    // Ensure current page is valid
+    if (this.currentPage < 1) {
+      this.currentPage = 1;
+    } else if (this.currentPage > this.totalPages && this.totalPages > 0) {
+      this.currentPage = this.totalPages;
+    }
+
+    this.startItem = (this.currentPage - 1) * this.itemsPerPage + 1;
+    this.endItem = Math.min(this.currentPage * this.itemsPerPage, this.totalItems);
+
+    if (this.totalItems === 0) {
+      this.startItem = 0;
+      this.endItem = 0;
+    }
+
+    this.pages = this.getVisiblePages(this.currentPage, this.totalPages);
+  }
+
+  getVisiblePages(current: number, total: number): (number | string)[] {
+    if (total <= 7) {
+      return Array.from({ length: total }, (_, i) => i + 1);
+    }
+
+    if (current <= 4) {
+      return [1, 2, 3, 4, 5, '...', total];
+    }
+
+    if (current >= total - 3) {
+      return [1, '...', total - 4, total - 3, total - 2, total - 1, total];
+    }
+
+    return [1, '...', current - 1, current, current + 1, '...', total];
+  }
+
+  onPageChange(page: number | string): void {
+    if (typeof page === 'string') return;
+    if (page < 1 || page > this.totalPages || page === this.currentPage) return;
+    
+    this.pageChange.emit(page);
+  }
+
+  onItemsPerPageChange(event: Event): void {
+    const target = event.target as HTMLSelectElement;
+    const newSize = Number(target.value);
+    this.itemsPerPageChange.emit(newSize);
+  }
+
+  nextPage(): void {
+    if (this.currentPage < this.totalPages) {
+      this.onPageChange(this.currentPage + 1);
+    }
+  }
+
+  prevPage(): void {
+    if (this.currentPage > 1) {
+      this.onPageChange(this.currentPage - 1);
+    }
+  }
+}

package/src/lib/modules/pagination/pagination.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PaginationComponent } from './components/pagination/pagination.component';
+
+
+@NgModule({
+  declarations: [
+    PaginationComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    PaginationComponent
+  ]
+})
+export class PaginationModule { }

package/src/lib/modules/pagination/pagination.theme.scss

@@ -0,0 +1,66 @@
+@use 'sass:map';
+
+// Default configuration for the pagination theme
+$default-pagination-config: (
+  // Font & Text
+  font-family: ('Roboto', sans-serif),
+  text-color: #757575,
+  font-size: 14px,
+
+  // Select Dropdown
+  select-bg: #f5f5f5,
+  select-border: none,
+  select-radius: 4px,
+  select-padding: 6px 12px,
+  select-text-color: #333,
+  select-arrow-color: #f44336, // Red arrow
+
+  // Buttons
+  btn-size: 32px,
+  btn-bg: #ffffff,
+  btn-border: 1px solid #e0e0e0,
+  btn-radius: 4px,
+  btn-text-color: #333,
+  
+  // States
+  btn-hover-bg: #f5f5f5,
+  btn-active-bg: #fff,
+  btn-active-border: 1px solid #ff4081, // Pinkish red
+  btn-active-text: #ff4081,
+  
+  // Disabled
+  disabled-opacity: 0.5,
+  disabled-bg: #f9f9f9
+);
+
+// Mixin to generate CSS variables for the pagination component
+@mixin pagination-theme($user-config: ()) {
+  // Merge user config with defaults
+  $config: map.merge($default-pagination-config, $user-config);
+
+  // Generate CSS Variables
+  --cc-pagination-font-family: #{map.get($config, font-family)};
+  --cc-pagination-text-color: #{map.get($config, text-color)};
+  --cc-pagination-font-size: #{map.get($config, font-size)};
+
+  --cc-pagination-select-bg: #{map.get($config, select-bg)};
+  --cc-pagination-select-border: #{map.get($config, select-border)};
+  --cc-pagination-select-radius: #{map.get($config, select-radius)};
+  --cc-pagination-select-padding: #{map.get($config, select-padding)};
+  --cc-pagination-select-text-color: #{map.get($config, select-text-color)};
+  --cc-pagination-select-arrow-color: #{map.get($config, select-arrow-color)};
+
+  --cc-pagination-btn-size: #{map.get($config, btn-size)};
+  --cc-pagination-btn-bg: #{map.get($config, btn-bg)};
+  --cc-pagination-btn-border: #{map.get($config, btn-border)};
+  --cc-pagination-btn-radius: #{map.get($config, btn-radius)};
+  --cc-pagination-btn-text-color: #{map.get($config, btn-text-color)};
+  
+  --cc-pagination-btn-hover-bg: #{map.get($config, btn-hover-bg)};
+  --cc-pagination-btn-active-bg: #{map.get($config, btn-active-bg)};
+  --cc-pagination-btn-active-border: #{map.get($config, btn-active-border)};
+  --cc-pagination-btn-active-text: #{map.get($config, btn-active-text)};
+  
+  --cc-pagination-disabled-opacity: #{map.get($config, disabled-opacity)};
+  --cc-pagination-disabled-bg: #{map.get($config, disabled-bg)};
+}

package/src/lib/modules/side-nav/components/side-nav/side-nav.component.html

@@ -0,0 +1,56 @@
+<nav class="cc-side-nav" [class.collapsed]="collapsed" role="navigation" [ngStyle]="customStyles">
+
+  <div class="cc-side-nav-section" *ngFor="let section of filteredSections; let i = index">
+
+    <div class="cc-side-nav-heading-row" *ngIf="section.heading && !collapsed">
+      <h3 class="cc-side-nav-heading">{{ section.heading }}</h3>
+    </div>
+
+    <ul class="cc-side-nav-list">
+      <li *ngFor="let item of section.items" class="cc-side-nav-list-item">
+        <a (click)="onItemClick(item, $event)" class="cc-side-nav-link" [class.active]="item.id === activeId"
+          [class.disabled]="item.disabled" [matTooltip]="item.tooltip || item.label"
+          [matTooltipDisabled]="collapsed ? false : !showTooltips" [matTooltipPosition]="tooltipPosition"
+          [matTooltipClass]="'cc-side-nav-tooltip'" [attr.aria-current]="(item.id === activeId) ? 'page' : null"
+          [attr.aria-disabled]="item.disabled ? true : null">
+          <span *ngIf="item.icon && (collapsed || !hideIconsWhenExpanded)" class="cc-side-nav-icon">
+            <span *ngIf="!item.icon.includes('fa') && !item.icon.includes('bi')" class="material-icons">
+              {{ item.icon }}
+            </span>
+            <i *ngIf="item.icon.includes('fa') || item.icon.includes('bi')" [class]="item.icon"></i>
+          </span>
+          <!-- Label: always in DOM, CSS transitions handle fade on collapse -->
+          <span class="cc-side-nav-label">{{ item.label }}</span>
+          <!-- Arrow: rendered for active items regardless of collapse state; CSS hides it -->
+          <span class="cc-side-nav-arrow material-icons"
+            *ngIf="(item.id === activeId) && item.showArrow !== false">chevron_right</span>
+        </a>
+      </li>
+    </ul>
+
+  </div>
+
+</nav>
+
+<!--
+  Toggle pill — always straddles the right edge of :host (right: -12px).
+  Hidden via opacity/scale until :host is hovered; always visible when collapsed.
+  Single chevron SVG rotates 180° via CSS — no icon swap needed.
+-->
+<button *ngIf="showCollapseToggle"
+        class="cc-sn-toggle"
+        (click)="toggleCollapse()"
+        type="button"
+        [attr.aria-label]="collapsed ? 'Expand navigation' : 'Collapse navigation'">
+  <svg class="cc-sn-chevron"
+       xmlns="http://www.w3.org/2000/svg"
+       viewBox="0 0 16 16"
+       fill="none"
+       aria-hidden="true">
+    <path d="M10 3L5 8L10 13"
+          stroke="currentColor"
+          stroke-width="1.75"
+          stroke-linecap="round"
+          stroke-linejoin="round"/>
+  </svg>
+</button>