commons-shared-web-ui 0.0.50 → 0.0.51

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

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

@@ -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;
-      }
-    }
-  }
-}