SghCarousel

A secure Angular carousel/dialog component for displaying content with navigation controls.

Features

• Modal-based carousel display
• Keyboard navigation (Arrow keys)
• Previous/Next navigation buttons
• Customizable content display
• Security hardened (v0.1.0+)

Installation

npm install sgh-carousel

Usage

Basic Usage

import { MatDialog } from '@angular/material/dialog';
import { SghCarouselComponent, SghCarouselData } from 'sgh-carousel';

@Component({...})
export class MyComponent {
  constructor(private dialog: MatDialog) {}

  openCarousel(): void {
    const carouselData: SghCarouselData = {
      title: 'My Carousel',
      content: '<div>Your HTML content here</div>',
      totalRecords: 5,
      selectedRecord: 1,
      navigateStatus: true,
      prevCallBack: () => this.onPrevious(),
      afterCallBack: () => this.onNext()
    };

    this.dialog.open(SghCarouselComponent, {
      data: { sghCarouselData: carouselData }
    });
  }

  onPrevious(): void {
    // Handle previous navigation
  }

  onNext(): void {
    // Handle next navigation
  }
}

Interfaces

// Carousel data configuration
interface SghCarouselData {
  prevCallBack: () => void;      // Previous navigation callback
  afterCallBack: () => void;     // Next navigation callback
  title: string;                 // Carousel title
  totalRecords: number;          // Total items count
  selectedRecord: number;        // Current item index (1-based)
  content: string;               // HTML content (sanitized automatically)
  navigateStatus: boolean;       // Enable keyboard navigation
}

// Dialog data wrapper
interface SghCarouselDialogData {
  sghCarouselData: SghCarouselData;
}

Security Features (v0.1.0+)

This library includes comprehensive security hardening:

• XSS Prevention: All HTML content is sanitized using Angular's DomSanitizer with SecurityContext.HTML
• Safe Event Handling: Uses Angular's @HostListener instead of global document event handlers
• Input Validation: Dialog data is validated before use
• Type Safety: Replaced any types with proper TypeScript interfaces
• Callback Protection: Callbacks are wrapped in try-catch with validation
• Proper Cleanup: Implements OnDestroy for proper lifecycle management

Build

Run ng build sgh-carousel to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build sgh-carousel, go to the dist folder cd dist/sgh-carousel and run npm publish.

Running unit tests

Run ng test sgh-carousel to execute the unit tests via Karma.

Version History

| Angular Version | Library Version | Description | |-----------------|-----------------|-------------| | 16 | 0.0.5 | Initial release | | 17 | 0.0.6 | Angular 17 support | | 18 | 0.0.7 | Angular 18 support | | 19 | 0.0.8 | Angular 19 support | | 19 | 0.1.0 | Security Hardening - XSS prevention, safe event handling, type safety |

Changelog v0.1.0 - Security Hardening

• Fixed: XSS vulnerability via innerHTML - Content now sanitized with DomSanitizer
• Fixed: Global event handler pollution - Replaced document.onkeydown with @HostListener
• Fixed: Unsafe any type usage - Added proper TypeScript interfaces
• Fixed: Uncontrolled function execution - Callbacks wrapped with validation and try-catch
• Added: OnDestroy lifecycle hook for proper cleanup
• Added: Input validation for dialog data
• Added: ARIA labels for accessibility
• Added: ngDevMode checks for development-only logging
• Improved: Type exports in public API

License

MIT