Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/HectorDNC/galactic-tournament-front/llms.txt

Use this file to discover all available pages before exploring further.

Galactic Tournament’s shared component library lives entirely under src/app/shared/. Every component is standalone — each declares its own imports array rather than belonging to a shared NgModule. This makes them individually tree-shakeable and easy to pull into both eager and lazy-loaded contexts. The sections below group components by their role in the application.

​
Layout Components

The layout components form the persistent shell that surrounds every in-app page. They are composed inside AppLayoutComponent, which is the root shell mounted by the router.

AppLayoutComponent

Selector: app-layoutPath: shared/layout/app-layout/Root shell component. Renders AppSidebarComponent, AppHeaderComponent, BackdropComponent, and AlertToastComponent around a <router-outlet>. Injects SidebarService and exposes isExpanded$, isHovered$, and isMobileOpen$ to the template so the content area can shift its left margin between xl:ml-[290px] (expanded) and xl:ml-[90px] (collapsed) with a CSS transition.

AppSidebarComponent

Selector: app-sidebarPath: shared/layout/app-sidebar/Primary navigation sidebar. Declares a navItems array with four entries — Dashboard (/), Especies (/species), Combates (/battles), and Ranking (/battle-statistics/ranking) — each carrying an inline SVG icon string rendered through SafeHtmlPipe. Supports nested sub-items with animated height transitions via subMenuHeights. Reacts to SidebarService streams for expanded, mobile-open, and hovered states, and subscribes to Router.events to highlight the active route.

AppHeaderComponent

Selector: app-headerPath: shared/layout/app-header/Top navigation bar. Embeds ThemeToggleButtonComponent, NotificationDropdownComponent, and UserDropdownComponent. The hamburger/toggle button calls SidebarService.toggleExpanded() on desktop (window.innerWidth >= 1280) and SidebarService.toggleMobileOpen() on smaller viewports.

SidebarWidgetComponent

Selector: app-sidebar-widgetPath: shared/layout/app-sidebar/Optional widget slot rendered at the bottom of the sidebar. Use it to embed quick-action cards or upgrade prompts without modifying the sidebar’s navigation list.

​
UI Components

Primitive building blocks used throughout feature modules and pages.

BadgeComponent

Selector: app-badgePath: shared/components/ui/badge/Inline status chip that accepts three inputs — color, variant, and size — and optionally renders startIcon / endIcon HTML strings via SafeHtmlPipe.
type BadgeColor   = 'primary' | 'success' | 'error'
                  | 'warning' | 'info' | 'light' | 'dark';
type BadgeVariant = 'light' | 'solid';
type BadgeSize    = 'sm' | 'md';

@Input() color:   BadgeColor   = 'primary';
@Input() variant: BadgeVariant = 'light';
@Input() size:    BadgeSize    = 'md';
@Input() startIcon?: string;   // SVG / HTML string
@Input() endIcon?:   string;   // SVG / HTML string
Color tokens in light variant:
colorBackgroundText
primarybg-brand-50text-brand-500
successbg-success-50text-success-600
errorbg-error-50text-error-600
warningbg-warning-50text-warning-600
infobg-blue-light-50text-blue-light-500
lightbg-gray-100text-gray-700
darkbg-gray-500text-white

ModalComponent

Selector: app-modalPath: shared/components/ui/modal/Generic overlay modal. Controlled externally via @Input() isOpen: boolean and emits @Output() close: EventEmitter<void> when the user clicks the backdrop or presses Escape.
@Input()  isOpen:          boolean = false;
@Input()  className:       string  = '';
@Input()  showCloseButton: boolean = true;
@Input()  isFullscreen:    boolean = false;
@Output() close = new EventEmitter<void>();
Setting isFullscreen = true disables backdrop-click dismissal. The component manages document.body.style.overflow to prevent scroll bleed while the modal is open.

AlertToastComponent

Selector: app-alert-toastPath: shared/components/common/alert-toast/Renders the live queue of notifications emitted by AlertService. On ngOnInit it subscribes to AlertService.alerts$ and stores the array in alerts: Alert[]. The template iterates over that array, maps each Alert.type to a border/background colour class, and plays a slideIn CSS animation when a new toast appears.Calling dismiss(id) delegates to AlertService.dismiss(id), which removes the alert from the BehaviorSubject and causes the component to re-render automatically.
// Subscription pattern inside the component
ngOnInit(): void {
  this.sub = this._alertService.alerts$.subscribe(alerts => {
    this.alerts = alerts;
  });
}

ngOnDestroy(): void {
  this.sub.unsubscribe();
}

dismiss(id: string): void {
  this._alertService.dismiss(id);
}

ButtonComponent

Selector: app-buttonPath: shared/components/ui/button/Styled button primitive wrapping a native <button> element with design-system classes.
@Input()  size:      'sm' | 'md'           = 'md';
@Input()  variant:  'primary' | 'outline'  = 'primary';
@Input()  disabled: boolean                = false;
@Input()  className: string                = '';
@Input()  startIcon?: string; // SVG or HTML string
@Input()  endIcon?:   string; // SVG or HTML string
@Output() btnClick = new EventEmitter<Event>();
The primary variant renders a filled brand-coloured button; outline renders a white/gray outlined button. When disabled is true, the btnClick event is suppressed and an opacity-50 cursor-not-allowed style is applied.

DropdownComponent

Selector: app-dropdownPath: shared/components/ui/dropdown/Generic dropdown wrapper controlled externally via @Input() isOpen. Emits a close event when a click outside the dropdown panel is detected, allowing the parent to update its state. Pair it with app-dropdown-item children to build context menus or action menus.
@Input()  isOpen:    boolean = false;
@Input()  className: string  = '';
@Output() close = new EventEmitter<void>();

AvatarComponent / AvatarTextComponent

Selectors: app-avatar, app-avatar-textPath: shared/components/ui/avatar/Two complementary avatar primitives. AvatarComponent renders an image-based circular avatar, while AvatarTextComponent renders an initials-based fallback. Both are used inside UserDropdownComponent in the header.

​
Form Components

Reusable form controls live in shared/components/form/. Each wraps a native HTML input or select with consistent labelling, validation state styling, and accessibility attributes.

InputFieldComponent

Path: shared/components/form/input/Standard single-line text input with label, hint, and error-state support.

TextAreaComponent

Path: shared/components/form/form-elements/text-area-input/Multi-line text input with matching label and validation state styling.

SelectComponent

Path: shared/components/form/select/Native <select> wrapper with design-system styling.

MultiSelectComponent

Path: shared/components/form/multi-select/Custom multi-select control for choosing multiple options from a list.

CheckboxComponent

Path: shared/components/form/form-elements/checkbox-components/Styled checkbox with an accessible label.

RadioComponent

Path: shared/components/form/form-elements/radio-buttons/Styled radio button group.

SwitchComponent

Path: shared/components/form/form-elements/toggle-switch/Toggle switch (boolean on/off control).

​
Chart Components

Chart components live in shared/components/charts/ and integrate the ng-apexcharts library. Both components encapsulate their own ApexCharts configuration and data internally — they expose no @Input() properties and are used as self-contained display elements dropped into a page template.

BarChartOneComponent

Path: shared/components/charts/bar/bar-chart-one/Renders a vertical bar chart using ng-apexcharts. Internally configures series, axes, colours, and tooltip formatting. Embed with <app-bar-chart-one> — no inputs required.

LineChartOneComponent

Path: shared/components/charts/line/line-chart-one/Renders a multi-series line chart using ng-apexcharts. Internally configures series, stroke, fill, and grid settings. Embed with <app-line-chart-one> — no inputs required.

​
Utility Pipe

​
SafeHtmlPipe

Path: shared/pipe/safe-html.pipe.ts Pipe name: safeHtml A thin wrapper around Angular’s DomSanitizer.bypassSecurityTrustHtml(). It is used wherever inline SVG strings stored in component data need to be rendered safely into the DOM — most notably for the icon strings in AppSidebarComponent and the icon inputs of BadgeComponent. 
@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(value: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }
}
Usage in a template: 
<span [innerHTML]="iconString | safeHtml"></span>
Only pass trusted, application-controlled strings to safeHtml. Never pipe user-supplied content through this pipe, as it bypasses Angular’s built-in XSS sanitisation.

Build docs developers (and LLMs) love

Get started for freeTalk to us