commons-shared-web-ui 0.0.55 → 0.0.57

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

@@ -1,34 +0,0 @@
-<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

@@ -1,171 +0,0 @@
-.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

@@ -1,82 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,52 +0,0 @@
-<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

@@ -1,155 +0,0 @@
-.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

@@ -1,109 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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 { }