WS Library NG

Angular component library for Winsys Lottery.

Installation

npm install ws-library-ng

Available Components

WslButtonComponent

Custom button with multiple variants and sizes.

// 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')

WslSliderComponent

Carousel component for displaying scrollable content.

WslBannerSliderComponent

Specialized component for displaying banners in carousel format.

WslCustomComponent

Customizable component for specific use cases.

WslFooterComponent

Footer component.

WslHeaderComponent

Header component.

WslMainMenuComponent

Main menu component.

Available Services

WslCmsService

Service for managing CMS content.

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

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 'ws-library-ng';

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

2. Use the components in your templates:

<wsl-button variant="primary">My Button</wsl-button>
<wsl-slider>
  <!-- Slider content -->
</wsl-slider>

Styles

The library includes its own styles. Make sure to include the styles in your angular.json:

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

Requirements

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

Dependencies

The library uses the following main dependencies:

• @angular/material
• @angular/cdk
• lodash
• jquery
• ngx-slick-carousel

Support

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

License

MIT