WIG Lib

@wigtertainment-ltd/comp-lib provides reusable standalone Angular components, services, pipes, validators, and translations for WIG applications. The components build on PrimeNG and can be imported individually without an Angular module.

Installation

Install the library and its UI dependencies in an Angular application:

npm install @wigtertainment-ltd/comp-lib [email protected] primeicons@7 primeflex@4 @primeuix/themes chart.js@4 gsap@3 dayjs@1 quill@2

The current library release targets Angular 20.3.4. Use compatible versions of @angular/core, @angular/common, @angular/forms, @angular/router, and @angular/animations in the consuming application.

PrimeNG setup

Configure animations and a PrimeNG theme in the application providers:

import { ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import Material from '@primeuix/themes/material';
import { providePrimeNG } from 'primeng/config';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimationsAsync(),
    providePrimeNG({
      theme: {
        preset: Material
      }
    })
  ]
};

Add the shared utility and icon styles to the application's global stylesheet:

@import "primeflex/primeflex.scss";
@import "primeicons/primeicons.css";

Applications using the rich-text editor in WigFormComponent should also include the Quill styles:

@import "quill/dist/quill.snow.css";
@import "quill/dist/quill.core.css";

Using a component

Import standalone components directly into another standalone component:

import { Component } from '@angular/core';
import { WigButtonComponent, WigTypographyComponent } from '@wigtertainment-ltd/comp-lib';

@Component({
  selector: 'app-profile-actions',
  imports: [WigButtonComponent, WigTypographyComponent],
  template: `
    <wig-typography variant="section-title">Profile</wig-typography>
    <wig-button label="Save" icon="pi pi-check" />
  `
})
export class ProfileActionsComponent {}

Components

The package currently exports:

• Accordion
• Alert
• Breadcrumb
• Button and icon button
• Calendar and date filter
• Card
• Chart
• Credit card
• Dialog, drawer, and modal
• Dropdown
• File upload
• Form
• Info box
• Loading indicator
• Navigation
• Skeleton
• Table
• Toast
• Typography

Each component is exported from the package root:

import {
  WigAlertComponent,
  WigButtonComponent,
  WigTableComponent
} from '@wigtertainment-ltd/comp-lib';

Refer to the showcase application for live previews, inputs, outputs, CSS hooks, and complete examples.

Services and utilities

In addition to components, the package exports:

• DialogService, ModalService, and ToastService for global overlays and notifications
• WigConfigService, FileService, HelperService, LocalStorageService, LoggerService, and StateService
• EuroPipe and TranslatePipe
• WigValidators for password and form validation
• Translation models and default English translations

Global dialog, modal, and toast services require their host components once near the application root:

<wig-dialog />
<wig-modal />
<wig-toast [global]="true" />

Custom translations

Override only the translation groups required by the application through WigConfigService:

import { inject } from '@angular/core';
import { WigConfigService } from '@wigtertainment-ltd/comp-lib';

const config = inject(WigConfigService);

config.setTranslations({
  dateFilter: {
    ...config.getTranslations().dateFilter,
    today: 'Heute',
    currentWeek: 'Aktuelle Woche'
  }
});

setTranslations performs a shallow merge at the top level. When replacing a nested translation group, provide all values required by that group.

Typography theming

Typography roles can be customized globally or within a specific container:

:root {
  --wig-typography-font-family: Roboto, sans-serif;
  --wig-typography-page-title-font-size: 2.25rem;
  --wig-typography-color-default: #111827;
  --wig-typography-color-muted: #6b7280;
}

Every typography variant exposes --wig-typography-{variant}-font-size, --wig-typography-{variant}-line-height, and --wig-typography-{variant}-font-weight variables. Available color tones are default, muted, danger, success, warning, and inherit.