# F2E Pro UI Library

An UI library base on Angular Material for Moxa products.

## Documentation

To be continue... (To be come out with [Storybook](https://storybook.js.org/))

## Installation

At first, you have to install the Angular Material and set it up. [How to install Angular Material.](https://material.angular.io/guide/getting-started)

Then install UI library:

```bash
$ npm install @moxa/formoxa
```

## Usage

Import the modules or standalone component you're going to use, such as anchor, table...

You might also need to import some dependence modules, like MaterialsModule..., when you're using those modules we provided.

```typescript
import { MxCardModule } from '@moxa/formoxa/mx-card';
@NgModule({
  ...
  imports: [
    CommonModule,
    BrowserModule,

    MaterialsModule,
    MxCardModule
  ],
  ...
})
export class AppModule {}

// Standalone
@Component({
  imports: [
    CommonModule,
    BrowserModule,

    MaterialsModule,
    MxAnchorComponent,
    MxCardModule
    ...
  ]
})
export class AppComponent {}
```

### Import Angular Material Modules

```typescript
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
...

@NgModule({
  imports: [
    MatButtonModule,
    MatCheckboxModule,
    ...
  ]
})
export class AppModule {}

// Standalone
@Component({
  imports: [
    MatButtonModule,
    MatCheckboxModule,
    ...
  ]
})
export class AppComponent {}

```

## Theming

There are few things need to add in yours app's global style, like `styles.scss`, for theming components:

1. include mat.core()
2. define material palette
3. define material light and dark theme
4. include mat.all-component-themes()
5. include customize themingAllcomponents()

```scss
@use '@angular/material' as mat;
@use '@moxa/formoxa' as *; // including base, components, layout styles forwarding
@use '@moxa/formoxa/theming' as mxTheming;

@include mat.all-component-typographies();
@include mat.core();

// UI Library light theme
$mx-app-primary: mat.define-palette($mx-primary, 800);
$mx-app-accent: mat.define-palette($mx-accent, 800);
$mx-app-warn: mat.define-palette($mx-warn, 900);
$mx-app-theme: mat.define-light-theme(
  (
    color: (
      primary: $mx-app-primary,
      accent: $mx-app-accent,
      warn: $mx-app-warn
    )
  )
);

$mx-app-dark-primary: mat.define-palette($mx-primary, 400);
// UI Library dark theme
$mx-app-dark-theme: mat.define-dark-theme(
  (
    color: (
      primary: $mx-app-dark-primary,
      accent: $mx-app-accent,
      warn: $mx-app-warn
    )
  )
);

// @include mat.all-component-themes($mx-app-theme);
@include mat.all-component-themes($mx-app-theme);
@include mxTheming.themingAllComponents($mx-app-theme);
.mx-dark-theme {
  // @include mat.all-component-themes($mx-app-dark-theme);
  @include mat.all-component-colorss($mx-app-dark-theme);
  @include mxTheming.themingAllComponents($mx-app-dark-theme);
}
```

## Icons

In order to keep the consistency of icon system, we highly recommand to download the icons from [Material Icons](https://fonts.google.com/icons?icon.style=Filled&icon.set=Material+Icons). We also provided a SVG **icons' spritesheet** which incoluding the icons commonly used in each apps from Material Icons and the custom icons designed by designer.

There are few steps to use the icons-sprite.svg _(which we provide in `/assets` folder in library package)_ in your apps:

1. Glob `icons-sprite.svg` from library's assets forlder, to do that please add the assets config in your `project.json`

```JSON
"assets": [
  ...,
  {
    "glob": "icons-sprite.svg",
    "input": "node_modules/@moxa/formoxa/assets",
    "output": "assets/"
  }
]
```

2. Make a service for registry SVG into material icon _( [here for more details](https://material.angular.io/components/icon/overview#svg-icons) )_, like the example below

```TypeScript
@Injectable({
  providedIn: 'root'
})
export class IconRegistryService {
  constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) {}

  initData() {
    const basePath = window.parent.location.pathname === '/' ? '/assets/' : `${window.parent.location.pathname}assets/`;

    this.matIconRegistry.addSvgIconSetInNamespace(
      'icon',
      this.domSanitizer.bypassSecurityTrustResourceUrl(basePath + 'icons-sprite.svg')
    );
  }
}
```

3. Invoke the service you just made in last step in `app.module` to get ready the `icons-sprite.svg` when app initialization.

```TypeScript
 providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: (iconRegistryService: IconRegistryService) => () => iconRegistryService.initData(),
      deps: [IconRegistryService],
      multi: true
    }
  ],
```

4. Use mat-icon like this ( [What icons we provided?](#) ) :

```html
<mat-icon svgIcon="icon:verified_user"></mat-icon>
```