@woodwing/eos-ui-angular

Eos UI Angular Component library

This library supplies a collection of generic components with looks and behaviours that follow the WoodWing design guidelines.

Setup

Installing required packages

The library is published as an npm module which should make getting started very easy. To install, including peer dependencies:

npm i @angular/cdk @woodwing/eos-ui-angular

Global styles and theming

To make the components work and look like intended a couple of steps need to be taken.

Important

All components use the em as the basis for sizes. This should make it as straight-forward as setting the font-size on a sub-tree of components to implement zooming in and out.

Global styles

Add the following style files to /src/styles.sccs.

// Normalize the default html styling
@import '~@woodwing/eos-ui-angular/styles/reboot';

// Load the fonts used by the themes exposed by the library
@import '~@woodwing/eos-ui-angular/styles/fonts';

// Set up some root level theming like the size of rem
@import '~@woodwing/eos-ui-angular/styles/base';

// Setup css for Angular CDK overlays
@import '~@angular/cdk/overlay-prebuilt';

Theme definition

Create a new /src/theming.ts file with contents:

import { EosThemeService, pewter, white } from '@woodwing/eos-ui-angular';

// Define sections in the application that can be themed
export enum ThemeSections {
    Main = 'main',
}

// Define the theme names that exist
export enum ThemeNames {
    Light = 'light',
    Dark = 'dark',
}

export function configureEosThemeModule(themeService: EosThemeService): void {
    themeService.init(
        // Tie the theme names to a theme definition. Use the predefined themes from the library
        // or define your own.
        new Map([
            [ThemeNames.Light, white],
            [ThemeNames.Dark, pewter],
        ]),
        // Indicate which theme will initially be the active one for each section of the application
        new Map([[ThemeSections.Main, ThemeNames.Light]]),
    );
}

Load theme definitions

Add the EosThemeModule to the AppModule's imports in /src/app/app.module.ts

import { EosThemeModule } from '@woodwing/eos-ui-angular';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AppRoutingModule, EosThemeModule],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

Extend /src/app/app.component.ts to call configureEosThemeModule

import { Component } from '@angular/core';
import { configureEosThemeModule } from '../theming';
import { EosThemeService } from '@woodwing/eos-ui-angular';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent {
    constructor(private themeService: EosThemeService) {
        configureEosThemeModule(this.themeService);
    }
}

Set theme section

Add the eos-theme-root directive to the top level element in /src/app/app.component.html. As the value use the section name as defined in the theme sections. This will set the CSS variables as defined in the corresponding theme on the body element of the document which makes inheriting in CSS work correctly.

<router-outlet eos-theme-root="main"></router-outlet>

Using eos-theme-container and eos-theme-root-container

eos-theme-container and eos-theme-root-container can used in situations where the directive cannot be used, for example in AngularJS applications which do not support downgrading Angular directives.

<eos-theme-container section="header"></eos-theme-container>

Using the components

The various components available in the library are split up in component modules. In order to be able to use the component, the component module needs to be imported in the module that will be using it. Once it has been imported, the components and directives in the component module are ready for use in the component templates and code.

As an example of the use of the eos-button component, you should import the EosButtonModule module first.

import { EosButtonModule } from '@woodwing/eos-ui-angular';

@NgModule({
  ...
  imports: [EosButtonModule]
  ...
})

In your template you can then do:

<button eos-button>Button</button>

Available components

• Button
• Checkbox
• Input
• Modal
• Select
• Slider
• Slider with Input
• Toolbar
• Tooltip