ReusableComponents

Notes

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

Installation

npm install @bspjojo/reusable-components

App Layout

Description

A component to help with simple app layout with a header, footer, menu, and main content.

Usage

Typescript

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

@Component({
  ...
  imports: [BspWuiAppLayoutComponent],
  ...
})
export class AppComponent {}

HTML

<bsp-w-ui-app-layout>
  <heading-component bsp-w-ui-heading></heading-component>
  <menu-component bsp-w-ui-menu></menu-component>
  <router-outlet bsp-w-ui-content></router-outlet>
  <footer-component bsp-w-ui-footer>Copyright</footer-component>
</bsp-w-ui-app-layout>

Styles

CSS Variables

• --bsp-w-ui-page-sep-px
  • Border width on the bottom of the heading.
  • Border width on the bottom of the menu and content.
  • Border width between menu and content.
• --bsp-w-ui-page-sep
  • Border color on the bottom of the heading.
  • Border color on the bottom of the menu and content.
  • Border color between menu and content.

Checkbox Input

Description

A checkbox input that allows the user to select multiple items in a list.

Usage

Typescript

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

@Component({
  ...
  imports: [
    ReactiveFormsModule,
    BspWuiCheckboxInputComponent    
  ],
  ...
})
export class CheckboxInputComponent implements OnInit {
  public formControl!: FormControl;

  public options: BspWuiSelectItem[] = [
    'Africa',
    'Antarctica',
    'Asia',
    'Australia',
    'Europe',
    'North_America',
    'South_America'
  ].map(v => ({ label: v, data: v }));

  public ngOnInit(): void {
    this.formControl = new FormControl(['Africa'], Validators.required);

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

HTML

<bsp-w-ui-checkbox-input [formControl]="formControl" fieldName="Checkbox" id="checkbox-example"
  name="checkbox-example" [options]="options"></bsp-w-ui-checkbox-input>

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 });
  }
}

Expansion panel

Description

A panel that will show and hide content.

Usage

Typescript

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

@Component({
  ...
  imports: [BspWuiExpansionPanelComponent],
  ...
})
export class ExpansionPanelComponent implements OnInit {
  public hidden = true;
  public toggleSide = 'left';
}

HTML

<bsp-w-ui-expansion-panel [toggleSide]="toggleSide" [hidden]="hidden">
  ...
</bsp-w-ui-expansion-panel>

Styles

CSS Variables

• --bsp-w-ui-expansion-panel-border
  • The expansion panel border.
• --bsp-w-ui-expansion-panel-border-radius
  • The expansion panel border radius.

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

Radio Input

Description

A radio input that allows the user to select an item in a list.

Usage

Typescript

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

@Component({
  ...
  imports: [
    ReactiveFormsModule,
    BspWuiRadioInputComponent    
  ],
  ...
})
export class RadioInputComponent implements OnInit {
  public formControl!: FormControl;

  public options: BspWuiSelectItem[] = [
    '',
    'Africa',
    'Antarctica',
    'Asia',
    'Australia',
    'Europe',
    'North_America',
    'South_America'
  ].map(v => ({ label: v ? v : '-', data: v }));

  public ngOnInit(): void {
    this.formControl = new FormControl('Africa', Validators.required);

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

HTML

<bsp-w-ui-radio-input [formControl]="formControl" fieldName="Radio" id="radio-example"
  name="radio-example" [options]="options"></bsp-w-ui-radio-input>

Select Input

Description

A select input that allows the user to select an item in a dropdown.

Usage

Typescript

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

@Component({
  ...
  imports: [
    ReactiveFormsModule,
    BspWuiSelectInputComponent    
  ],
  ...
})
export class SelectInputComponent implements OnInit {
  public formControl!: FormControl;

  public options: BspWuiSelectItem[] = [
    '',
    'Africa',
    'Antarctica',
    'Asia',
    'Australia',
    'Europe',
    'North_America',
    'South_America'
  ].map(v => ({ label: v ? v : '-', data: v }));

  public ngOnInit(): void {
    this.formControl = new FormControl('Africa', Validators.required);

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

HTML

<bsp-w-ui-select-input [formControl]="formControl" fieldName="Select" id="select-example"
  name="select-example" [options]="options"></bsp-w-ui-select-input>

Styles

CSS Variables

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

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}`);
  }
}