platformcommons-web-lib 1.0.0

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

@@ -0,0 +1,94 @@
+import { NgModule } from "@angular/core";
+import { MatCardModule } from '@angular/material/card';
+import { MatSnackBarModule } from "@angular/material/snack-bar";
+import { MatCheckboxModule } from '@angular/material/checkbox'
+import { MatDividerModule } from '@angular/material/divider';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatDialogModule } from "@angular/material/dialog";
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from "@angular/material/button";
+import { MatMenuModule } from '@angular/material/menu';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatNativeDateModule } from "@angular/material/core";
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import {MatSliderModule} from '@angular/material/slider';
+import {MatListModule} from '@angular/material/list';
+import {MatChipsModule} from '@angular/material/chips';
+import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatTableModule} from '@angular/material/table';
+import {MatExpansionModule} from '@angular/material/expansion';
+import {CdkAccordionModule} from '@angular/cdk/accordion';
+import { MatSortModule } from "@angular/material/sort";
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+
+@NgModule({
+  imports: [
+    MatCardModule,
+    MatSnackBarModule,
+    MatCheckboxModule,
+    MatDividerModule,
+    MatSelectModule,
+    MatRadioModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    MatInputModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatTabsModule,
+    MatButtonModule,
+    MatMenuModule,
+    MatTabsModule,
+    MatProgressBarModule,
+    MatTooltipModule,
+    MatSliderModule,
+    MatListModule,
+    MatChipsModule,
+    MatSortModule,
+    MatAutocompleteModule,
+    MatSlideToggleModule,
+    MatButtonToggleModule
+  ],
+  exports: [
+    MatCardModule,
+    MatSnackBarModule,
+    MatCheckboxModule,
+    MatDividerModule,
+    MatSelectModule,
+    MatRadioModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    MatInputModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatTabsModule,
+    MatButtonModule,
+    MatMenuModule,
+    MatTabsModule,
+    MatProgressBarModule,
+    MatTooltipModule,
+    MatSliderModule,
+    MatListModule,
+    MatChipsModule,
+    MatPaginatorModule,
+    MatTableModule,
+    MatExpansionModule,
+    CdkAccordionModule,
+    MatSortModule,
+    MatAutocompleteModule,
+    MatSlideToggleModule,
+    MatButtonToggleModule
+  ]
+})
+export class MaterialModule { }

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/nav/nav.theme.scss

@@ -0,0 +1,86 @@
+@use 'sass:map';
+
+// Default configuration for the nav theme
+$default-nav-config: (
+  // Container
+  container-bg: #f5f5f5,
+  container-padding: 4px,
+  container-radius: 6px,
+  container-border: none,
+  container-gap: 4px,
+
+  // Item - Font & Text
+  font-family: ('Roboto', sans-serif),
+  font-size: 14px,
+  font-weight: 500,
+  item-color: #666666,
+  item-bg: transparent,
+  item-padding: 8px 16px,
+  item-radius: 4px,
+  item-border: none,
+
+  // Item - Active State
+  item-active-bg: #ffffff,
+  item-active-color: #1a1a1a,
+  item-active-font-weight: 600,
+  item-active-border-color: transparent,
+  item-active-border-width: 2px,
+  item-active-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),
+
+  // Item - Hover State
+  item-hover-bg: #eeeeee,
+  item-hover-color: #333333,
+
+  // Item - Disabled State
+  disabled-opacity: 0.5,
+
+  // Badge
+  badge-bg: #e74c3c,
+  badge-color: #ffffff,
+  badge-size: 18px,
+  badge-font-size: 10px
+);
+
+// Mixin to generate CSS variables for the nav component
+@mixin nav-theme($user-config: ()) {
+  // Merge user config with defaults
+  $config: map.merge($default-nav-config, $user-config);
+
+  // Container
+  --cc-nav-container-bg: #{map.get($config, container-bg)};
+  --cc-nav-container-padding: #{map.get($config, container-padding)};
+  --cc-nav-container-radius: #{map.get($config, container-radius)};
+  --cc-nav-container-border: #{map.get($config, container-border)};
+  --cc-nav-container-gap: #{map.get($config, container-gap)};
+
+  // Item - Font & Text
+  --cc-nav-font-family: #{map.get($config, font-family)};
+  --cc-nav-font-size: #{map.get($config, font-size)};
+  --cc-nav-font-weight: #{map.get($config, font-weight)};
+  --cc-nav-item-color: #{map.get($config, item-color)};
+  --cc-nav-item-bg: #{map.get($config, item-bg)};
+  --cc-nav-item-padding: #{map.get($config, item-padding)};
+  --cc-nav-item-radius: #{map.get($config, item-radius)};
+  --cc-nav-item-border: #{map.get($config, item-border)};
+
+  // Item - Active State
+  --cc-nav-item-active-bg: #{map.get($config, item-active-bg)};
+  --cc-nav-item-active-color: #{map.get($config, item-active-color)};
+  --cc-nav-item-active-font-weight: #{map.get($config, item-active-font-weight)};
+  --cc-nav-item-active-border-color: #{map.get($config, item-active-border-color)};
+  --cc-nav-item-active-border-width: #{map.get($config, item-active-border-width)};
+  --cc-nav-item-active-shadow: #{map.get($config, item-active-shadow)};
+
+  // Item - Hover State
+  --cc-nav-item-hover-bg: #{map.get($config, item-hover-bg)};
+  --cc-nav-item-hover-color: #{map.get($config, item-hover-color)};
+
+  // Item - Disabled State
+  --cc-nav-disabled-opacity: #{map.get($config, disabled-opacity)};
+
+  // Badge
+  --cc-nav-badge-bg: #{map.get($config, badge-bg)};
+  --cc-nav-badge-color: #{map.get($config, badge-color)};
+  --cc-nav-badge-size: #{map.get($config, badge-size)};
+  --cc-nav-badge-font-size: #{map.get($config, badge-font-size)};
+}

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>