commons-shared-web-ui 0.0.60 → 0.0.62

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

@@ -0,0 +1,34 @@
+<nav
+  class="cc-nav"
+  [ngClass]="[variant, orientation]"
+  [ngStyle]="computedStyles"
+  role="tablist"
+  [attr.aria-orientation]="orientation">
+
+  <button
+    *ngFor="let item of items; trackBy: trackById"
+    class="cc-nav-item"
+    [class.active]="item.id === activeId"
+    [class.disabled]="item.disabled"
+    [disabled]="item.disabled"
+    role="tab"
+    [attr.aria-selected]="item.id === activeId"
+    [attr.aria-disabled]="item.disabled || null"
+    (click)="onItemClick(item)">
+
+    <!-- Icon (optional) -->
+    <span *ngIf="item.icon" class="cc-nav-item-icon">
+      <i [ngClass]="item.icon"></i>
+    </span>
+
+    <!-- Label -->
+    <span class="cc-nav-item-label">{{ item.label }}</span>
+
+    <!-- Badge (optional) -->
+    <span *ngIf="item.badge != null" class="cc-nav-item-badge">
+      {{ item.badge }}
+    </span>
+
+  </button>
+
+</nav>

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

@@ -0,0 +1,171 @@
+.cc-nav {
+  display: flex;
+  align-items: center;
+  background-color: var(--cc-nav-container-bg);
+  padding: var(--cc-nav-container-padding);
+  border-radius: var(--cc-nav-container-radius);
+  border: var(--cc-nav-container-border);
+  gap: var(--cc-nav-container-gap);
+  font-family: var(--cc-nav-font-family);
+  font-size: var(--cc-nav-font-size);
+  box-sizing: border-box;
+  width: 100%;
+
+  /* ========================
+     Orientation
+     ======================== */
+  &.horizontal {
+    flex-direction: row;
+    overflow-x: auto;
+
+    /* Hide scrollbar but keep scroll functionality */
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &.vertical {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  /* ========================
+     Nav Item (Default State)
+     ======================== */
+  .cc-nav-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: var(--cc-nav-item-padding);
+    border-radius: var(--cc-nav-item-radius);
+    border: var(--cc-nav-item-border);
+    background-color: var(--cc-nav-item-bg);
+    color: var(--cc-nav-item-color);
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: var(--cc-nav-font-weight);
+    cursor: pointer;
+    white-space: nowrap;
+    user-select: none;
+    transition: all 0.2s ease;
+    position: relative;
+    outline: none;
+    margin-right: 0.3rem;
+
+    /* Hover */
+    &:hover:not(:disabled):not(.active) {
+      background-color: var(--cc-nav-item-hover-bg);
+      color: var(--cc-nav-item-hover-color);
+    }
+
+    /* Active */
+    &.active {
+      background-color: var(--cc-nav-item-active-bg);
+      color: var(--cc-nav-item-active-color);
+      font-weight: var(--cc-nav-item-active-font-weight);
+      box-shadow: var(--cc-nav-item-active-shadow);
+    }
+
+    /* Disabled */
+    &:disabled,
+    &.disabled {
+      opacity: var(--cc-nav-disabled-opacity);
+      cursor: not-allowed;
+    }
+
+    /* Icon */
+    .cc-nav-item-icon {
+      display: inline-flex;
+      align-items: center;
+      font-size: 1.1em;
+      line-height: 1;
+    }
+
+    /* Badge */
+    .cc-nav-item-badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: var(--cc-nav-badge-size);
+      height: var(--cc-nav-badge-size);
+      border-radius: 50%;
+      background-color: var(--cc-nav-badge-bg);
+      color: var(--cc-nav-badge-color);
+      font-size: var(--cc-nav-badge-font-size);
+      font-weight: var(--cc-nav-badge-font-weight, 600);
+      padding: 0 4px;
+      line-height: 1;
+    }
+  }
+
+  /* ========================
+     Variant: filled (default)
+     ======================== */
+  &.filled {
+    .cc-nav-item.active {
+      border-bottom: var(--cc-nav-item-active-border-width) solid var(--cc-nav-item-active-border-color);
+    }
+  }
+
+  /* ========================
+     Variant: underline
+     ======================== */
+  &.underline {
+    background-color: transparent;
+    border-radius: 0;
+    padding: 0;
+    border-bottom: 1px solid #e0e0e0;
+
+    .cc-nav-item {
+      background-color: transparent;
+      border-radius: 0;
+      border: none;
+      border-bottom: var(--cc-nav-item-active-border-width) solid transparent;
+      box-shadow: none;
+
+      &:hover:not(:disabled):not(.active) {
+        background-color: transparent;
+        border-bottom-color: #ccc;
+      }
+
+      &.active {
+        background-color: transparent;
+        border-bottom-color: var(--cc-nav-item-active-border-color);
+        box-shadow: none;
+      }
+    }
+  }
+
+  /* ========================
+     Variant: pills
+     ======================== */
+  &.pills {
+    background-color: transparent;
+    padding: 0;
+
+    .cc-nav-item {
+      border-radius: 999px;
+
+      &.active {
+        border-radius: 999px;
+      }
+    }
+  }
+
+  /* ========================
+     Mobile Responsiveness
+     ======================== */
+  @media (max-width: 600px) {
+    &.horizontal {
+      gap: 2px;
+
+      .cc-nav-item {
+        padding: 6px 12px;
+        font-size: 13px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,82 @@
+import { Component, EventEmitter, Input, Output, OnChanges, SimpleChanges } from '@angular/core';
+import { NAV_VARIANT_DEFAULT, NAV_ORIENTATION_DEFAULT } from '../../../../utils/constants';
+import { NavStyleConfig } from '../../nav.models';
+
+export interface NavItem {
+  id: string | number;
+  label: string;
+  icon?: string;
+  badge?: string | number;
+  disabled?: boolean;
+}
+
+@Component({
+  selector: 'lib-nav',
+  templateUrl: './nav.component.html',
+  styleUrls: ['./nav.component.scss'],
+  standalone: false
+})
+export class NavComponent implements OnChanges {
+  @Input() items: NavItem[] = [];
+  @Input() activeId: string | number | null = null;
+  @Input() variant: 'filled' | 'underline' | 'pills' = NAV_VARIANT_DEFAULT;
+  @Input() orientation: 'horizontal' | 'vertical' = NAV_ORIENTATION_DEFAULT;
+  @Input() styleConfig: NavStyleConfig = {};
+
+  @Output() selectionChange = new EventEmitter<NavItem>();
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['styleConfig']) {
+      console.log(' [NavComponent] styleConfig changed:', this.styleConfig);
+      console.log(' [NavComponent] computedStyles:', this.computedStyles);
+    }
+  }
+
+  get computedStyles(): { [key: string]: string | undefined } {
+    const c = this.styleConfig;
+    return {
+      // Container (direct CSS)
+      'width': c.width,
+      'box-shadow': c.boxShadow,
+
+      // Container (CSS Variables)
+      '--cc-nav-container-bg': c.backgroundColor,
+      '--cc-nav-container-radius': c.borderRadius,
+      '--cc-nav-container-border': c.border,
+      '--cc-nav-container-padding': c.padding,
+      '--cc-nav-container-gap': c.gap,
+
+      // Item (CSS Variables)
+      '--cc-nav-font-size': c.fontSize,
+      '--cc-nav-font-weight': c.fontWeight,
+      '--cc-nav-item-color': c.itemColor,
+      '--cc-nav-item-radius': c.itemRadius,
+      '--cc-nav-item-padding': c.itemPadding,
+
+      // Active Item (CSS Variables)
+      '--cc-nav-item-active-bg': c.activeItemBg,
+      '--cc-nav-item-active-color': c.activeItemColor,
+      '--cc-nav-item-active-font-weight': c.activeItemFontWeight,
+      '--cc-nav-item-active-border-color': c.activeItemBorderColor,
+
+      // Hover Item (CSS Variables)
+      '--cc-nav-item-hover-bg': c.hoverItemBg,
+      '--cc-nav-item-hover-color': c.hoverItemColor,
+
+      // Badge (CSS Variables)
+      '--cc-nav-badge-bg': c.badgeBg,
+      '--cc-nav-badge-color': c.badgeColor,
+    };
+  }
+
+  onItemClick(item: NavItem): void {
+    if (item.disabled) return;
+    if (item.id === this.activeId) return;
+
+    this.selectionChange.emit(item);
+  }
+
+  trackById(index: number, item: NavItem): string | number {
+    return item.id;
+  }
+}

package/src/lib/modules/nav/nav.models.ts

@@ -0,0 +1,31 @@
+export interface NavStyleConfig {
+  // Container
+  width?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  border?: string;
+  padding?: string;
+  gap?: string;
+  boxShadow?: string;
+
+  // Item
+  itemColor?: string;
+  itemRadius?: string;
+  itemPadding?: string;
+  fontSize?: string;
+  fontWeight?: string;
+
+  // Active Item
+  activeItemBg?: string;
+  activeItemColor?: string;
+  activeItemFontWeight?: string;
+  activeItemBorderColor?: string;
+
+  // Hover Item
+  hoverItemBg?: string;
+  hoverItemColor?: string;
+
+  // Badge
+  badgeBg?: string;
+  badgeColor?: string;
+}

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

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

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

@@ -0,0 +1,52 @@
+<div class="cc-pagination" [ngClass]="theme">
+  <!-- Left Side: Items Info & Per Page -->
+  <div class="pagination-left" *ngIf="pageSizeOptions.length > 1 || totalItems > 0">
+    <span class="items-info">
+      {{ startItem }}-{{ endItem }} {{ labels.of }} {{ totalItems }} {{ labels.items }}
+    </span>
+
+    <div class="per-page-selector" *ngIf="pageSizeOptions.length > 1">
+      <div class="select-wrapper">
+        <select (change)="onItemsPerPageChange($event)">
+          <option *ngFor="let option of pageSizeOptions" [value]="option" [selected]="option === itemsPerPage">
+            {{ option }}
+          </option>
+        </select>
+        <span class="select-arrow"></span>
+      </div>
+      <span class="per-page-label">{{ labels.perPage }}</span>
+    </div>
+  </div>
+
+  <!-- Right Side: Page Controls -->
+  <div class="pagination-right">
+    <button 
+      class="page-btn prev-btn" 
+      [disabled]="currentPage === 1" 
+      (click)="prevPage()"
+      aria-label="Previous Page">
+      <span class="icon">&lsaquo;</span>
+    </button>
+
+    <div class="page-numbers">
+      <ng-container *ngFor="let page of pages">
+        <button 
+          *ngIf="page !== '...'"
+          class="page-btn number-btn" 
+          [class.active]="page === currentPage"
+          (click)="onPageChange(page)">
+          {{ page }}
+        </button>
+        <span *ngIf="page === '...'" class="ellipsis">...</span>
+      </ng-container>
+    </div>
+
+    <button 
+      class="page-btn next-btn" 
+      [disabled]="currentPage === totalPages || totalPages === 0" 
+      (click)="nextPage()"
+      aria-label="Next Page">
+      <span class="icon">&rsaquo;</span>
+    </button>
+  </div>
+</div>

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 { }