ReusableComponents

Notes

This is a generated file from the individual reusable components, services, and directives in this package.

Installation

npm install @bspjojo/reusable-components

Dialog Service

Description

A service that allows the consumer to create a dialog that will return a result.

Usage

Typescript

import { BspWuiDialogConfig, BspWuiDialogService } from '@bspjojo/reusable-components';
import { ExampleDialogComponent } from './example-dialog/example-dialog.component';

export class ExampleClass {
  constructor(
    private dialogService: BspWuiDialogService
  ) { }

  public openDialog(): void {
    const dialogConf: BspWuiDialogConfig<string> = {
      data: 'some data',
      dialogConfig: {
        allowBackdropClickDismiss: true // set to false to disable dismiss on backdrop click
      }
    };

    this.dialogService
      .open(ExampleDialogComponent, dialogConf)
      .afterClosed()
      .subscribe(v => {
        console.log({ v });
      });
  }
}

ExampleDialogComponent

import { JsonPipe } from '@angular/common';
import { Component, Inject } from '@angular/core';
import { BSPWUI_DIALOG_DATA, BspWuiDialogRef } from '@bspjojo/reusable-components';

@Component({
  selector: 'bsp-ex-example-dialog',
  standalone: true,
  imports: [JsonPipe],
  template: `
  <div class="header">
    <div class="title">Title</div>
    <div class="close" (click)="close()"><i class="bi bi-x-circle"></i></div>
  </div>
  <div class="body">
    {{ dialogData | json }}
  </div>
  <div class="footer">
    <button (click)="acceptAndClose()">Accept</button>
  </div>
`,
  styles: `
  :host {
    width: 500px;
    height: 400px;

    display: flex;
    flex-direction: column;

    .header {
      display: flex;
      flex-direction: row;
      border-bottom: 1px solid darkgray;
      flex: 0 1 auto;

      .title {
        flex: 1 1 auto;
      }

      .close {
        flex: 0 1 auto;
      }
    }

    .body {
      flex: 1 1 auto
    }

    .footer {
      flex: 0 1 auto;
    }
  }
`
})
export class ExampleDialogComponent {
  constructor(
    private dialogRef: BspWuiDialogRef,
    @Inject(BSPWUI_DIALOG_DATA) public dialogData: string
  ) { }

  public close(): void {
    this.dialogRef.close({ res: false });
  }

  public acceptAndClose(): void {
    this.dialogRef.close({ res: true });
  }
}

Generic Input

Description

An input wrapper that displays the label and validation errors in a consistent way.

Usage

Typescript

import { Component, DestroyRef, OnInit } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { BspWuiInputComponent } from '@bspjojo/reusable-components';

@Component({
  ...
  imports: [BspWuiInputComponent, ReactiveFormsModule],
  ...
})
export class TextInputComponent implements OnInit {
  public formControl!: FormControl<string | null>;
  public inputId = 'formId'

  constructor(private destroyRef: DestroyRef) { }

  public ngOnInit(): void {
    this.formControl = new FormControl<string>('test', Validators.required);

    this.formControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(v => {
      console.log(v);
    });
  }
}

HTML

<bsp-w-ui-input fieldName="Example Field" [formControl]="formControl" [id]="inputId"></bsp-w-ui-input>

Styles

CSS Variables

• --bsp-w-ui-field-height
  • the height of the BspWuiInputComponent

Nested Menu

Description

A vertical menu with a nested structure where the child items can collapse.

Usage

Typescript

import { Component } from '@angular/core';
import { BspWuiNestedMenuComponent, BspWuiNestedMenuDataItem } from '@bspjojo/reusable-components';

@Component({
  ...
  imports: [BspWuiNestedMenuComponent],
  ...
})
export class MenuContainerComponent {
  public readonly menu: BspWuiNestedMenuDataItem[] = [
    {
      route: '/',
      text: 'Home'
    },
    {
      text: 'Awesome menu item',
      children: [
        {
          collapsed: true,
          route: '/awesome/menu/item',
          text: 'Menu text'
        }
      ],
      text: 'Expanded menu item',
      children: [
        {
          route: '/expanded/menu/item',
          text: 'Expanded'
        }
      ]
    },
    {
      route: 'components',
      text: 'Components',
      children: [
        {
          route: '/inputs', // components/inputs
          text: 'Inputs',
          children: [
            {
              route: '/generic', // components/inputs/generic
              text: 'Generic'
            }
          ]
        }
      ]
    }
  ];
}

HTML

<bsp-w-ui-nested-menu [menuItems]="menu" rootRoute="/"></bsp-w-ui-nested-menu>

Styles

CSS Variables

• --bsp-w-ui-color-hover
  • The color of the menu items on hover

Page Layout

Description

This module contains

• a component to help with page layout.
• a component to handle sections within the page.

Component also has a shortcut menu to the right.

Usage

Typescript

import { Component } from '@angular/core';
import { BspWuiPageLayoutModule } from '@bspjojo/reusable-components';

@Component({
  ...
  imports: [BspWuiPageLayoutModule],
  ...
})
export class PageComponent {
  public numbers = new Array(100);
}

HTML

<bsp-w-ui-page-layout>
  @for (item of numbers; track $index) {
  <bsp-w-ui-page-section heading="Heading section {{$index}}" [sectionId]="$index">
    Content for section {{$index}}
  </bsp-w-ui-page-section>
  }
</bsp-w-ui-page-layout>

Styles

CSS Variables

• --bsp-w-ui-page-section-border-bottom
  • The border separating the page sections
• --bsp-w-ui-page-section-list-width
  • The width of the page section list

Validation Error Display

Description

A component that will display any known errors

Usage

HTML

<bsp-w-ui-validation-display [errors]="control.errors"></bsp-w-ui-validation-display>

@Component({
  ...
  imports: [BspWuiValidationDisplayComponent],
  ...
})
export class ComponentClass OnInit {
  public control: FormControl;

  public ngOnInit(): void {
    this.control = new FormControl<string>('a value');
  }
}

Validation Display Service

Description

A service that single sources the form error messages for invalid inputs

Usage

import { Component } from '@angular/core';
import { BspWuiValidationDisplayService } from '@bspjojo/reusable-components';

@Component({
  ...
})
export class AppComponent {
  constructor(validation: BspWuiValidationDisplayService) {
    validation.overrideMessageGenerator('max', ({ max, actual }) => `override for max value of ${max} vs actual ${actual}`);
  }
}