commons-shared-web-ui 0.0.55 → 0.0.57

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

@@ -1,56 +0,0 @@
-<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"
-          [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>

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

@@ -1,342 +0,0 @@
-@use "../../side-nav.theme" as side-nav;
-
-// ─── Host ──────────────────────────────────────────────────────────────────────
-
-:host {
-  display: block;
-  height: 100%;
-  overflow: visible; // Critical: allows toggle pill to float outside :host bounds
-  position: relative;
-  width: var(--cc-side-nav-width, 220px);
-  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-  &.cc-side-nav-host-collapsed {
-    width: var(--cc-side-nav-collapsed-width, 56px);
-  }
-
-  @include side-nav.side-nav-theme();
-}
-
-// ─── Edge Rail (hover affordance) ─────────────────────────────────────────────
-// A thin accent line on the right edge that appears on hover, hinting at the
-// interactive collapse zone (Linear/Notion-style spatial affordance).
-
-:host::after {
-  content: '';
-  position: absolute;
-  top: 10%;
-  right: 0;
-  width: 2px;
-  height: 80%;
-  background: var(--cc-side-nav-active-bg, #1e1e2d);
-  border-radius: 2px;
-  opacity: 0;
-  transition: opacity 0.25s ease;
-  pointer-events: none;
-  z-index: 4;
-}
-
-:host:hover::after {
-  opacity: 0.18;
-}
-
-:host.cc-side-nav-host-collapsed::after {
-  display: none;
-}
-
-// ─── Toggle Pill ──────────────────────────────────────────────────────────────
-// Circular button straddling the right edge (right: -12px keeps it half inside,
-// half outside). Hidden by default; spring-bounces in on :host hover.
-// When collapsed, always visible so the user can find it to re-expand.
-
-.cc-sn-toggle {
-  position: absolute;
-  bottom: 20px;
-  right: -12px;
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  border: 1.5px solid var(--cc-side-nav-toggle-border-color, rgba(0, 0, 0, 0.1));
-  background: var(--cc-side-nav-toggle-bg, #ffffff);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 20;
-  padding: 0;
-  color: var(--cc-side-nav-item-color, #5F6368);
-  box-shadow:
-    0 1px 4px rgba(0, 0, 0, 0.1),
-    0 0 0 1px rgba(0, 0, 0, 0.04);
-
-  // Hidden by default; spring easing gives a satisfying pop on reveal
-  opacity: 1;
-  transform: scale(0.65);
-  transition:
-    opacity 0.2s ease,
-    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
-    background 0.15s ease,
-    color 0.15s ease,
-    border-color 0.15s ease,
-    box-shadow 0.2s ease;
-
-  &:focus-visible {
-    outline: 2px solid var(--cc-side-nav-active-bg, #E63E30);
-    outline-offset: 2px;
-  }
-
-  // Chevron: single path, rotates 180° via :host class — no SVG swap
-  .cc-sn-chevron {
-    width: 12px;
-    height: 12px;
-    flex-shrink: 0;
-    display: block;
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-}
-
-// Reveal pill when hovering anywhere on :host
-:host:hover .cc-sn-toggle {
-  opacity: 1;
-  transform: scale(1);
-}
-
-// Brand-colored hover state — only applies when the pill is actually visible
-:host:hover .cc-sn-toggle:hover,
-:host.cc-side-nav-host-collapsed .cc-sn-toggle:hover {
-  background: var(--cc-side-nav-active-bg, #E63E30);
-  color: var(--cc-side-nav-active-color, #ffffff);
-  border-color: transparent;
-  box-shadow:
-    0 4px 14px rgba(0, 0, 0, 0.1),
-    0 1px 4px rgba(0, 0, 0, 0.1);
-  transform: scale(1.05);
-}
-
-// Collapsed: always show so user can expand; slightly elevated shadow
-:host.cc-side-nav-host-collapsed .cc-sn-toggle {
-  opacity: 1;
-  transform: scale(1);
-  box-shadow:
-    0 2px 8px rgba(0, 0, 0, 0.13),
-    0 0 0 1.5px rgba(0, 0, 0, 0.08);
-}
-
-// Chevron points right (→) when collapsed = expand action
-:host.cc-side-nav-host-collapsed .cc-sn-chevron {
-  transform: rotate(180deg);
-}
-
-// ─── Nav Container ────────────────────────────────────────────────────────────
-
-.cc-side-nav {
-  display: flex;
-  flex-direction: column;
-  gap: var(--cc-side-nav-gap-sections, 24px);
-  padding: var(--cc-side-nav-padding, 16px);
-  width: var(--cc-side-nav-width, 220px);
-  min-width: var(--cc-side-nav-width, 220px);
-  box-sizing: border-box;
-  background-color: var(--cc-side-nav-bg, #ffffff);
-  border-right: 1px solid var(--cc-side-nav-border-color, rgba(0, 0, 0, 0.08));
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  transition:
-    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-    min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-    padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-  &::-webkit-scrollbar { width: 3px; }
-  &::-webkit-scrollbar-track { background: transparent; }
-  &::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.15);
-    border-radius: 2px;
-  }
-  &::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); }
-
-  &.collapsed {
-    width: var(--cc-side-nav-collapsed-width, 56px);
-    min-width: var(--cc-side-nav-collapsed-width, 56px);
-    padding: var(--cc-side-nav-padding, 16px) 8px;
-
-    .cc-side-nav-link {
-      justify-content: center;
-      gap: 0;
-      padding: 10px;
-    }
-
-    .cc-side-nav-icon {
-      font-size: 20px;
-    }
-  }
-}
-
-// ─── Section & Heading ────────────────────────────────────────────────────────
-
-.cc-side-nav-section {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.cc-side-nav-heading-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 28px;
-}
-
-.cc-side-nav-heading {
-  margin: 0;
-  padding: 0 16px;
-  font-family: var(--cc-side-nav-font-family, 'Poppins', sans-serif);
-  font-weight: var(--cc-side-nav-heading-font-weight, 500);
-  font-style: normal;
-  font-size: var(--cc-side-nav-heading-font-size, 16px);
-  text-transform: uppercase;
-  color: var(--cc-side-nav-heading-color, #3C4043);
-  flex: 1;
-}
-
-// ─── Nav List ─────────────────────────────────────────────────────────────────
-
-.cc-side-nav-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--cc-side-nav-item-gap, 4px);
-}
-
-.cc-side-nav-list-item {
-  margin: 0;
-  padding: 0;
-}
-
-.cc-side-nav-link {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: var(--cc-side-nav-item-padding, 12px 16px);
-  text-decoration: none;
-  cursor: pointer;
-  border-radius: var(--cc-side-nav-item-border-radius, 8px);
-  transition: background-color 0.2s ease, opacity 0.2s ease;
-  font-family: var(--cc-side-nav-font-family, 'Poppins', sans-serif);
-  font-weight: var(--cc-side-nav-item-font-weight, 400);
-  font-style: normal;
-  font-size: var(--cc-side-nav-item-font-size, 14px);
-  color: var(--cc-side-nav-item-color, #5F6368);
-
-  &:hover:not(.disabled) {
-    background-color: var(--cc-side-nav-item-hover-bg, rgba(30, 30, 45, 0.08));
-    color: var(--cc-side-nav-item-hover-color, #1e1e2d);
-  }
-
-  &.active {
-    background: var(--cc-side-nav-active-bg, #1e1e2d);
-    opacity: 1;
-    border-radius: var(--cc-side-nav-item-border-radius, 8px);
-    font-weight: var(--cc-side-nav-active-font-weight, 500);
-    color: var(--cc-side-nav-active-color, #ffffff);
-
-    &:hover {
-      background-color: var(--cc-side-nav-active-hover-bg, #2a2a3d);
-      color: var(--cc-side-nav-active-color, #ffffff);
-    }
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    opacity: var(--cc-side-nav-disabled-opacity, 0.5);
-  }
-}
-
-.cc-side-nav-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  flex-shrink: 0;
-}
-
-// ─── Label Slide-fade on Collapse ─────────────────────────────────────────────
-// max-width collapses the layout space; opacity fades the text simultaneously.
-// Keeping the element in DOM (no *ngIf) allows smooth transition in both directions.
-
-.cc-side-nav-label {
-  flex: 1;
-  white-space: wrap;
-  overflow: hidden;
-  max-width: 200px;
-  opacity: 1;
-  transition:
-    opacity 0.15s ease,
-    max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.collapsed .cc-side-nav-label {
-  opacity: 0;
-  max-width: 0;
-}
-
-// ─── Arrow Slide-fade on Collapse ─────────────────────────────────────────────
-
-.cc-side-nav-arrow {
-  margin-left: auto;
-  font-size: 18px;
-  opacity: 0.7;
-  overflow: hidden;
-  max-width: 30px;
-  flex-shrink: 0;
-  white-space: nowrap;
-  transition:
-    opacity 0.15s ease,
-    max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.collapsed .cc-side-nav-arrow {
-  opacity: 0;
-  max-width: 0;
-}
-
-.cc-side-nav-link.active .cc-side-nav-arrow {
-  color: var(--cc-side-nav-active-color, #FFFFFF);
-  opacity: 1;
-}
-
-// ─── Tooltip ──────────────────────────────────────────────────────────────────
-
-::ng-deep .mat-mdc-tooltip.cc-side-nav-tooltip {
-  margin-left: var(--cc-side-nav-tooltip-offset, 20px) !important;
-  overflow: visible !important;
-
-  .mdc-tooltip__surface {
-    background-color: var(--cc-side-nav-tooltip-bg, #1e1e2d) !important;
-    color: var(--cc-side-nav-tooltip-color, #FFFFFF) !important;
-    font-family: var(--cc-side-nav-font-family, 'Poppins', sans-serif) !important;
-    font-size: var(--cc-side-nav-tooltip-font-size, 12px) !important;
-    font-weight: var(--cc-side-nav-tooltip-font-weight, 500) !important;
-    padding: var(--cc-side-nav-tooltip-padding, 8px 14px) !important;
-    border-radius: var(--cc-side-nav-tooltip-border-radius, 6px) !important;
-    box-shadow: var(--cc-side-nav-tooltip-shadow, 0 4px 12px rgba(0, 0, 0, 0.35)) !important;
-    letter-spacing: var(--cc-side-nav-tooltip-letter-spacing, 0.2px) !important;
-    position: relative !important;
-    overflow: visible !important;
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: -6px;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 0;
-      height: 0;
-      border-top: 5px solid transparent;
-      border-bottom: 5px solid transparent;
-      border-right: 6px solid var(--cc-side-nav-tooltip-bg, #1e1e2d);
-    }
-  }
-}

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

@@ -1,135 +0,0 @@
-import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges, HostBinding } from '@angular/core';
-import { TooltipPosition } from '@angular/material/tooltip';
-import { SideNavSection, SideNavItem, SideNavStyleConfig } from '../../side-nav.models';
-import { DEFAULT_SIDE_NAV_TOOLTIP_POSITION } from '../../../../utils/constants';
-
-@Component({
-  selector: 'lib-side-nav',
-  templateUrl: './side-nav.component.html',
-  styleUrls: ['./side-nav.component.scss'],
-  standalone: false
-})
-export class SideNavComponent implements OnChanges {
-  @Input() sections: SideNavSection[] = [];
-  @Input() userRoles?: string[]; // If provided, filters items automatically based on roles
-  @Input() activeId?: string;
-  @Input() styleConfig?: SideNavStyleConfig;
-
-  /** Control whether the nav is collapsed externally (two-way bindable) */
-  @Input() collapsed: boolean = false;
-  /** Width of the nav when expanded. Overrides the CSS variable default. */
-  @Input() width?: string;
-  /** Width of the nav when collapsed (icons only). Overrides the CSS variable default. */
-  @Input() collapsedWidth?: string;
-  /** Whether to show the collapse toggle button */
-  @Input() showCollapseToggle: boolean = true;
-  /** Whether to hide icons when the side nav is expanded */
-  @Input() hideIconsWhenExpanded: boolean = false;
-  /** Whether to show tooltips on nav items */
-  @Input() showTooltips: boolean = false;
-  /** Position of the tooltip */
-  @Input() tooltipPosition: TooltipPosition = DEFAULT_SIDE_NAV_TOOLTIP_POSITION as TooltipPosition;
-
-  /** Optional dictionary for label translation */
-  @Input() labels?: { [key: string]: string };
-
-  @Output() itemClicked = new EventEmitter<SideNavItem>();
-  /** Emits whenever the collapsed state changes (supports two-way binding via [(collapsed)]) */
-  @Output() collapsedChange = new EventEmitter<boolean>();
-
-  /** Applies collapsed class to :host for the width CSS transition */
-  @HostBinding('class.cc-side-nav-host-collapsed') get isHostCollapsed() {
-    return this.collapsed;
-  }
-
-  filteredSections: SideNavSection[] = [];
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['sections'] || changes['userRoles'] || changes['labels']) {
-      this.filterAndMapSections();
-    }
-  }
-
-  private filterAndMapSections() {
-    if (!this.sections) {
-      this.filteredSections = [];
-      return;
-    }
-
-    const clonedSections: SideNavSection[] = structuredClone(this.sections);
-
-    this.filteredSections = clonedSections.map(section => {
-      // Map section heading if labels are provided
-      if (this.labels && section.heading) {
-        section.heading = this.labels[section.heading] || section.heading;
-      }
-
-      // Filter and map items
-      section.items = section.items.filter(item => {
-        if (this.userRoles && this.userRoles.length > 0 && item.roles && item.roles.length > 0) {
-           const hasRole = item.roles.some(role => this.userRoles?.includes(role));
-           if (!hasRole) return false;
-        }
-        return true;
-      }).map((item: any) => {
-        // Map item labels and tooltips
-        if (this.labels) {
-           const mappedLabel = this.labels[item.labelKey || item.label] || item.labelKey || item.label;
-           return {
-             ...item,
-             label: mappedLabel,
-             tooltip: this.labels[item.tooltip || item.labelKey] || mappedLabel
-           };
-        }
-        return item;
-      });
-
-      return section;
-    }).filter(section => section.items.length > 0);
-  }
-
-  onItemClick(item: SideNavItem, event: Event) {
-    if (item.disabled) {
-      event.preventDefault();
-      return;
-    }
-    this.activeId = item.id;
-    this.itemClicked.emit(item);
-  }
-
-  toggleCollapse() {
-    this.collapsed = !this.collapsed;
-    this.collapsedChange.emit(this.collapsed);
-  }
-
-  get customStyles(): { [key: string]: string } {
-    const styles: { [key: string]: string } = {};
-
-    // Size overrides from direct inputs (take priority over styleConfig)
-    if (this.width) styles['--cc-side-nav-width'] = this.width;
-    if (this.collapsedWidth) styles['--cc-side-nav-collapsed-width'] = this.collapsedWidth;
-
-    if (!this.styleConfig) return styles;
-
-    if (this.styleConfig.bg) styles['--cc-side-nav-bg'] = this.styleConfig.bg;
-    if (this.styleConfig.width) styles['--cc-side-nav-width'] = this.styleConfig.width;
-    if (this.styleConfig.collapsedWidth) styles['--cc-side-nav-collapsed-width'] = this.styleConfig.collapsedWidth;
-    if (this.styleConfig.fontFamily) styles['--cc-side-nav-font-family'] = this.styleConfig.fontFamily;
-    if (this.styleConfig.headingColor) styles['--cc-side-nav-heading-color'] = this.styleConfig.headingColor;
-    if (this.styleConfig.itemColor) styles['--cc-side-nav-item-color'] = this.styleConfig.itemColor;
-    if (this.styleConfig.itemHoverBg) styles['--cc-side-nav-item-hover-bg'] = this.styleConfig.itemHoverBg;
-    if (this.styleConfig.activeBg) styles['--cc-side-nav-active-bg'] = this.styleConfig.activeBg;
-    if (this.styleConfig.activeColor) styles['--cc-side-nav-active-color'] = this.styleConfig.activeColor;
-    if (this.styleConfig.activeHoverBg) styles['--cc-side-nav-active-hover-bg'] = this.styleConfig.activeHoverBg;
-    if (this.styleConfig.toggleBg) styles['--cc-side-nav-toggle-bg'] = this.styleConfig.toggleBg;
-    if (this.styleConfig.toggleBorderColor) styles['--cc-side-nav-toggle-border-color'] = this.styleConfig.toggleBorderColor;
-    if (this.styleConfig.tooltipBg) styles['--cc-side-nav-tooltip-bg'] = this.styleConfig.tooltipBg;
-    if (this.styleConfig.tooltipColor) styles['--cc-side-nav-tooltip-color'] = this.styleConfig.tooltipColor;
-    if (this.styleConfig.tooltipFontWeight) styles['--cc-side-nav-tooltip-font-weight'] = this.styleConfig.tooltipFontWeight;
-    if (this.styleConfig.tooltipLetterSpacing) styles['--cc-side-nav-tooltip-letter-spacing'] = this.styleConfig.tooltipLetterSpacing;
-    if (this.styleConfig.tooltipOffset) styles['--cc-side-nav-tooltip-offset'] = this.styleConfig.tooltipOffset;
-    if (this.styleConfig.tooltipShadow) styles['--cc-side-nav-tooltip-shadow'] = this.styleConfig.tooltipShadow;
-
-    return styles;
-  }
-}

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

@@ -1,38 +0,0 @@
-export interface SideNavItem {
-  id: string;
-  label: string;
-  icon?: string;
-  route?: string; // Optional: Angular router link path
-  roles?: string[]; // Optional RBAC role checking
-  disabled?: boolean;
-  showArrow?: boolean; // Optional: Toggle to show/hide the arrow icon for this item
-  tooltip?: string; // Optional: Custom tooltip text, defaults to label if not provided
-}
-
-export interface SideNavStyleConfig {
-  bg?: string;
-  width?: string;
-  collapsedWidth?: string;
-  fontFamily?: string;
-  headingColor?: string;
-  itemColor?: string;
-  itemHoverBg?: string;
-  activeBg?: string;
-  activeColor?: string;
-  activeHoverBg?: string;
-  // Toggle pill
-  toggleBg?: string;
-  toggleBorderColor?: string;
-  // Tooltip
-  tooltipBg?: string;
-  tooltipColor?: string;
-  tooltipFontWeight?: string;
-  tooltipLetterSpacing?: string;
-  tooltipOffset?: string;
-  tooltipShadow?: string;
-}
-
-export interface SideNavSection {
-  heading?: string; // E.g., 'LEARNING CENTRE'. Optional if a section has no heading.
-  items: SideNavItem[];
-}

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

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { MaterialModule } from '../material/material.module';
-import { SideNavComponent } from './components/side-nav/side-nav.component';
-
-@NgModule({
-  declarations: [SideNavComponent],
-  imports: [
-    CommonModule,
-    RouterModule,
-    MaterialModule
-  ],
-  exports: [SideNavComponent]
-})
-export class SideNavModule { }