WS Library NG

Angular component library for Winsys Lottery.

Installation

npm install ng-wsl-library

Available Components

WslButtonComponent

Custom button with multiple variants and sizes, featuring self-contained styling.

// Basic usage
<wsl-button>Click me</wsl-button>

// With variant and size
<wsl-button variant="success" size="large">Save</wsl-button>

// Disabled
<wsl-button [disabled]="true">Not available</wsl-button>

// With click event
<wsl-button (click)="onButtonClick($event)">Click me</wsl-button>

Properties:

• type: 'button' | 'submit' | 'reset' (default: 'button')
• disabled: boolean (default: false)
• variant: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' (default: 'primary')
• size: 'small' | 'medium' | 'large' (default: 'medium')

WslDatetimePickerComponent

Powerful and flexible datetime picker component with extensive customization options and self-contained styling.

Features calendar state events, proper ngModelChange handling, flexible time steps, and organized constants for date formats and time steps.

📖 View detailed documentation

WslCarouselComponent

High-performance carousel component for displaying scrollable content with self-contained styling.

📖 View detailed documentation

WslBannerSliderComponent

Specialized component for displaying banners in carousel format.

WslCustomComponent

Customizable component for specific use cases.

WslFooterComponent

Footer component.

WslOtpComponent

One-Time Password (OTP) input component with multiple features such as autofill, timer, and responsive design.

<wsl-otp [size]="4" [autocomplete]="true" (valueChange)="onOtpChange($event)"></wsl-otp>

Properties:

• size: number (default: 4) - Number of input fields.
• disabled: boolean (default: false) - Disables all inputs.
• timerDuration: number (default: 0) - Duration in seconds for the countdown timer.
• showTimer: boolean (default: false) - Whether to show the timer.
• timerLabel: string (default: '') - Label shown before the timer.
• hasError: boolean (default: false) - Applies error styling.
• maxResends: number | null (default: null) - Maximum number of allowed resends.
• limitReachedMessage: string (default: '') - Message shown when resend limit is reached.
• expiredMessage: string (default: '') - Message shown when timer expires.
• resendButtonText: string (default: 'Resend Code') - Text for the resend button.

Events:

• valueChange: Emits the full OTP string whenever it changes.
• resendCode: Emitted when the resend button is clicked.
• timerFinished: Emitted when the countdown timer reaches zero.
• resendLimitReached: Emitted when the maximum number of resends is reached.

WslHeaderComponent

Header component.

WslMainMenuComponent

Main menu component.

Available Services

WslCmsService

Service for managing CMS content.

import { WslCmsService } from 'ng-wsl-library';

constructor(private wslCmsService: WslCmsService) {}

// Get available components
const availableComponents = this.wslCmsService.getAvalaiableComponents();

Available Directives

WslCmsItemDirective

Directive for handling CMS items.

Integration in an Angular Project

1. Import the module in your app.module.ts:

import { WslComponentsModule } from "ng-wsl-library";

@NgModule({
  imports: [
    WslComponentsModule,
    // ... other modules
  ],
  // ...
})
export class AppModule {}

2. Use the components in your templates:

<wsl-button variant="primary">My Button</wsl-button>
<wsl-datetime-picker [(ngModel)]="selectedDate"></wsl-datetime-picker>
<wsl-carousel>
  <!-- Carousel content -->
</wsl-carousel>

Styling

The library includes its own self-contained styles and does not require any external CSS frameworks. All components come with modern, responsive styling out of the box.

If you need to include the component styles in your build, add them to your angular.json:

{
  "styles": [
    "node_modules/ng-wsl-library/dist/ng-wsl-library.css"
    // ... other styles
  ]
}

Custom Styling

You can override component styles using CSS custom properties or by targeting component CSS classes:

wsl-datetime-picker {
  --input-border-color: #007bff;
  --input-focus-border-color: #86b7fe;
}

wsl-button {
  --button-primary-bg: #28a745;
  --button-primary-border: #28a745;
}

Requirements

• Angular 14.0.0 or higher
• Node.js 14.0.0 or higher
• npm 6.0.0 or higher

Current Dependencies

This library uses the following dependencies:

• @angular/material
• @angular/cdk
• ngx-file-drop
• single-spa (for microfrontend support)
• lodash

Support

To report issues or request new features, please create an issue in the repository.

License

MIT

Available Utilities

WslDateTimeUtils

Convenient helper functions for working with dates and times in WSL format structures.

import { WslDateTimeUtils } from "ng-wsl-library";

// Get current date/time values
const currentDate = WslDateTimeUtils.getCurrentDate();
const currentTime = WslDateTimeUtils.getCurrentTime();
const currentDateTime = WslDateTimeUtils.getCurrentDateTime();

// Convert JavaScript Date objects
const jsDate = new Date();
const wslDate = WslDateTimeUtils.getWslDate(jsDate);
const wslTime = WslDateTimeUtils.getWslTime(jsDate);

📖 View detailed documentation