GO Material

ngx-go-material

GO UI components based on Angular Material and Kendo UI with material theme.

Installation

Install using NPM CLI

npm install --save @frontmatec/ngx-go-material

or using Yarn CLI

yarn add @frontmatec/ngx-go-material

Forms

Reusable form controls.

Dependencies

You must install the Kendo UI peer dependencies that are required by this module, if you want to use it.

Date-time picker

Let the user pick a date and a time which are combined into a date-time ISO 8601 string in UTC time. The value can be bound with an NgControl such as the formControl and ngModel directives.

Usage

The date part of the picker uses the Angular Material Datepicker, so you need to provide a DateAdapter in your app.

Angular Module import

// my-feature.module.ts
import { DateTimePickerModule } from '@frontmatec/ngx-go-material/forms';

import { MyFeatureComponent } from './my-feature.component';

@NgModule({
  declarations: [
    MyFeatureComponent,
  ],
  imports: [
    DateTimePickerModule,
  ],
})
export class MyFeatureModule {}

Component template usage

<!-- my-feature.component.html -->
<go-date-time-picker [(ngModel)]="myDateTimeString"></go-date-time-picker>

or

<!-- my-feature.component.html -->
<form [formGroup]="myForm">
  <go-date-time-picker formControlName="dateTime"></go-date-time-picker>
</form>

Kendo UI styles import

The Forms mixin for Kendo UI imports all the settings, tools, dependencies, styling and content from the Kendo UI material theme, you need. If you already imported some of the styles in your Kendo UI theme, they will not be duplicated.

// kendo-ui-light-theme.scss
/* ==========================================================================
   #KENDO-UI-LIGHT-THEME
   ========================================================================== */

/* Settings
   ========================================================================== */
@import "~@progress/kendo-theme-material/scss/variables";

/* Tools
   ========================================================================== */
@import "~@progress/kendo-theme-material/scss/mixins";

/* Dependencies
   ========================================================================== */
@import "~@progress/kendo-theme-material/scss/common";
@import "~@progress/kendo-theme-material/scss/ripple";
@import "~@progress/kendo-theme-material/scss/popup";

/* Components
   ========================================================================== */
@import "~@frontmatec/ngx-go-material/forms/go-forms-kendo-ui";

/* Styling & Content
   ========================================================================== */
@import "~@progress/kendo-theme-material/scss/styling";

or simply

// kendo-ui-light-theme.scss
/* ==========================================================================
   #KENDO-UI-LIGHT-THEME
   ========================================================================== */

/* Components
   ========================================================================== */
@import "~@frontmatec/ngx-go-material/forms/go-forms-kendo-ui";

Usage

See the example app.

GO Icon

Usage

Root-level Angular Module import

GO Icon needs an AppConfig. Make sure to provide it in a root-level Angular Module. GO Icon also dependes on MatIconRegistry which requires HttpClient. Make sure to import HttpClientModule in a root-level Angular Module.

// core.module.ts
import { HttpClientModule } from '@angular/common/http';
import { GOIconModule } from '@frontmatec/ngx-go-material';

@NgModule({
  imports: [
    HttpClientModule,
  ],
})
export class CoreModule {}

Angular Module import

// my-feature.module.ts
import { GOIconModule } from '@frontmatec/ngx-go-material';

import { MyFeatureComponent } from './my-feature.component';

@NgModule({
  declarations: [
    MyFeatureComponent,
  ],
  imports: [
    GOIconModule,
  ],
})
export class MyFeatureModule {}

Component template usage

<!-- my-feature.component.html -->
<mat-icon svgIcon="go:frontmatec-icon"></mat-icon>

Login

LoginDialogComponent is a component that you can open using MatDialog. LoginCardComponent is a self-contained component that emits an authenticate event on successful sign-in.

Usage

Angular Module import

// my-app-shell.module.ts
import { LoginModule } from '@frontmatec/ngx-go-material';

@NgModule({
  imports: [
    LoginModule,
  ],
})
export class MyAppShellModule {}

Component model usage

// my-app-shell.component.ts
import { LoginDialogComponent } from '@frontmatec/ngx-go-material';

@Component({
  // (...)
})
export class MyAppShellComponent implements OnDestroy {
  private readonly destroy: Subject<void> = new Subject();

  public constructor(
    private readonly dialog: MatDialog,
    private readonly snackBar: MatSnackBar,
  ) {}

  public ngOnDestroy(): void {
    // Manage subscriptions
    this.destroy.next();
    this.destroy.complete();
  }

  public onSignIn(): void {
    const loginDialog: MatDialogRef<LoginDialogComponent> =
      this.dialog.open(LoginDialogComponent);
    this.handleLoginErrors(loginDialog);
  }

  private displayInSnackBar(messages: Observable<string>): Subscription {
    return messages.pipe(
      takeUntil(this.destroy),
    )
      .subscribe(message => this.snackBar.open(message, 'Dismiss'));
  }

  private handleLoginErrors(
    dialog: MatDialogRef<LoginDialogComponent>,
  ): void {
    const errorSubscription: Subscription =
      this.displayInSnackBar(dialog.componentInstance.logInError);
    dialog.afterClosed().subscribe(() => errorSubscription.unsubscribe());
  }
}

Message Dialog

A message dialog you can open with predetermined buttons and custom content.

Usage

Angular Module import

// my-feature.module.ts
import { MessageDialogModule } from '@frontmatec/ngx-go-material';

import { MyFeatureComponent } from './my-feature.component';

@NgModule({
  declarations: [MyFeatureComponent],
  exports: [MyFeatureComponent],
  imports: [
    MessageDialogModule,
  ],
})
export class MyFeatureModule {}

Component model usage

// my-feature.component.ts
import {
  MessageDialogButton,
  MessageDialogResult,
  showMessageDialog,
} from '@frontmatec/ngx-go-material';

@Component({
  // (...)
})
export class MyFeatureComponent {
  public constructor(
    private readonly dialog: MatDialog,
  ) {}

  public onEngineStart(): void {
    showMessageDialog(
      this.dialog,
      'Start engine?',
      'Engine',
      MessageDialogButton.YesNo)
      .then((result: MessageDialogResult) => {
        switch (result) {
          case MessageDialogResult.Yes:
            console.log('Starting engine...');

            break;
          case MessageDialogResult.No:
            console.log('User does not want to start engine.');

            break;
          case MessageDialogResult.None:
            // Fall through case
          default:
            console.log('User closed dialog without deciding whether to start the engine.');

            break;
        }
      });
  }
}

Property Grid

A component for editing objects.

Built-in editors

In the meta decorator, the built-in editors support these type options:

• 'boolean'
• 'switch'
• 'text'
• 'textArray'
• 'label'
• 'integer'
• 'decimal'
• 'date'
• 'dateTime'
• 'color'
• 'options'
• 'radio'

Dependencies

You must install ngx-template since it is a peer dependency used by this feature.

Use the meta decorator from @frontmatec/ngx-go-core to customize the object you are editing.

Usage

See ngx-propery-grid.

Property Grid uses GO Material Forms controls. Remember to import the GO Material Forms styles.

Angular Module import

// my-feature.module.ts
import { PropertyGridModule } from '@frontmatec/ngx-go-material';

import { MyFeatureComponent } from './my-feature.component';

@NgModule({
  declarations: [MyFeatureComponent],
  exports: [MyFeatureComponent],
  imports: [
    PropertyGridModule,
  ],
})
export class MyFeatureModule {}

Styles

Settings and tools for Angular Material components and themes.

Settings

Colors

| Variable name | Description | |----------------------------------|-----------------------------------| | $go-brand-primary-color | Primary brand color | | $go-brand-accent-color | Accent brand color | | $go-brand-lighter-accent-color | Lighter accent brand color | | $go-brand-gray-color | Gray brand color | | $go-brand-white-color | White brand color | | $go-warn-color | Warning color | | $go-dark-color | Dark color, i.e. a shade of black |

Color maps

| Variable name | Description | |--------------------------------------|--------------------------------------| | $go-brand-primary-color-map | Primary brand color map | | $go-brand-accent-color-map | Accent brand color map | | $go-brand-lighter-accent-color-map | Lighter accent brand color map | | $go-brand-gray-color-map | Gray brand color map | | $go-warn-color-map | Warning color map | | $go-dark-color-map | Dark color map, i.e. shades of black |

Light theme

| Variable name | Description | |-----------------------------|-------------------------------------| | $go-light-primary-palette | Primary palette for the light theme | | $go-light-accent-palette | Accent palette for the light theme | | $go-light-warn-palette | Warning palette for the light theme | | $go-light-theme | Light Angular Material theme |

Dark themes

| Variable name | Description | |----------------------------|------------------------------------------------------| | $go-dark-primary-palette | Primary palette for the dark theme | | $go-dark-accent-palette | Accent palette for the dark theme | | $go-dark-warn-palette | Warning palette for the dark theme | | $go-dark-theme | Dark Angular Material theme | | $go-dark-colored-theme | Dark Angular Material theme with primary brand color |

Tools

| Mixin signature | Description | |--------------------------------|--------------------------------------------------------| | go-angular-material-layout() | Adds layout styles that sit on top of Angular Material |

Usage

// app.scss
/* Settings
   ========================================================================== */
@import "~@frontmatec/ngx-go-material/settings.go-material";
@import "settings/settings.variables";

/* Tools
   ========================================================================== */
@import "~@frontmatec/ngx-go-material/tools.go-material";
@import "tools/tools.mixins";

or simply

// app.scss
@import "~@frontmatec/ngx-go-material/go-material";

Shell

A layout for an app. Based on the Angular Material Sidenav component featuring a mini drawer with navigation and settings and an application launcher at the start of the drawer.

The layout supports a side sheet for e.g. detail views.

Usage

See the example app.

// app.scss
/* Settings
   ========================================================================== */
@import "settings/settings.variables";

/* Tools
   ========================================================================== */
@import "~@frontmatec/ngx-go-material/shell/go-shell";
@import "tools/tools.mixins";

or simply

// app.scss
@import "~@frontmatec/ngx-go-material/shell/go-shell";

Example app

An example app is in the projects/ngx-go-material-examples directory. Use the start script to run it.