commons-shared-web-ui 0.0.51 → 0.0.53

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

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

@@ -0,0 +1,342 @@
+@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: nowrap;
+  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

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

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

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