# @a15-ghm/gh-ui > GoldenHippo UI components. Latest version **2.0.0** (published 2023-11-17) · ISC license · 0 weekly downloads ## Install ```sh npm install @a15-ghm/gh-ui pnpm add @a15-ghm/gh-ui yarn add @a15-ghm/gh-ui bun add @a15-ghm/gh-ui ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.0 | | Published | 2023-11-17 | | First published | 2023-06-14 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 3 | | Unpacked size | 120.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | devops-ghm-npm, danni.liu, s.bely, kiskina_victoria, sergey.kuzovlev, s.bozhik, brian.park | ## Links - npm: https://www.npmjs.com/package/@a15-ghm/gh-ui - Repository: https://github.com/GoldenHippoMedia/gh-ui - Homepage: https://github.com/GoldenHippoMedia/gh-ui#readme - Issues: https://github.com/GoldenHippoMedia/gh-ui/issues - npm.io page: https://npm.io/package/@a15-ghm/gh-ui ## Dependencies (3) - [tslib](https://npm.io/package/tslib.md) ^2.3.0 - [@angular/cdk](https://npm.io/package/@angular/cdk.md) ^15.2.9 - [@angular/material](https://npm.io/package/@angular/material.md) ^15.2.9 ## Recent versions - 2.0.0 (latest) — 2023-11-17 - 1.4.2 — 2023-10-05 - 1.4.0 — 2023-08-29 - 1.2.0 — 2023-07-05 - 1.1.0 — 2023-06-23 - 1.0.2 — 2023-06-15 - 1.0.1 — 2023-06-15 - 1.0.0 — 2023-06-14 ## README # gh-ui GoldenHippo UI components. ## Installation To use the `gh-ui` library in your Angular project, follow these steps: Install the `gh-ui` library by running the following command `npm install --save @a15-ghm/gh-ui` ## GhUiSnackbarComponent This component allows you to display customizable snackbars in your Angular application. ### Importing the GhUiSnackbarComponent Once you have installed the `gh-ui` library, you can import the `GhUiSnackbarComponent` in your Angular application. 1. Open the module file (app.module.ts) where you want to use the `GhUiSnackbarComponent`. 2. Import the necessary modules and components: 3. Use the `GhUiSnackbarComponent` in your Angular application ```ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; import { GhUiLibModule, GhUiSnackbarComponent } from '@a15-ghm/gh-ui'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatCardModule } from '@angular/material/card'; import { MatButtonModule } from '@angular/material/button'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, GhUiLibModule, MatToolbarModule, BrowserAnimationsModule, MatCardModule, MatButtonModule], providers: [GhUiSnackbarComponent], bootstrap: [AppComponent], }) export class AppModule {} ``` ### Using the GhUiSnackbarComponent To show a custom snackbar using the `GhUiSnackbarComponent`, you can call the `show()` method and pass the necessary data. ```ts import { Component, OnInit } from '@angular/core'; import { GhUiSnackbarComponent } from '@a15-ghm/gh-ui'; import { GhUiSnackbarConfig } from './app.config'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent implements OnInit { constructor(private snackbarComponent: GhUiSnackbarComponent) {} ngOnInit(): void {} showSnackbar() { this.snackbarComponent.show(GhUiSnackbarConfig); } } ``` In the example above, the `show()` method in the `AppComponent` class demonstrates how to use the `GhUiSnackbarComponent` to show a custom snackbar with a `header`, `message`, and `delay`, that are saved in `GhUiSnackbarConfig`. ```ts import { ISnackBarData } from '@a15-ghm/gh-ui'; export const GhUiSnackbarConfig: ISnackBarData = { header: 'Header', //Header text of snackbar component message: 'Main text', //Message text of snackbar component showWithDelay: false, //On or off showing snackbar component after delayTimeMs (not necessary) delayTimeMs: 12000, //Number of ms after which we should show component again (not necessary) }; ``` --- ## GhUiSpinnerComponent This component allows you to display customizable spinners in your Angular application. This component contains two types of spinners: 1. Default spinner from angular material. 2. Gif spinner. There are two options for these spinners: 1. Common Spinner. It's placed in the `center` of the screen and `has overlay`. 2. Local spinner. It's `located` wherever `you put it`. ### Using the GhUiSpinnerComponent #### Importing the GhUiSpinnerComponent Once you have installed the `gh-ui` library, you can import the `GhUiSpinnerComponent` in your Angular application. 1. Open the module file (app.module.ts) where you want to use the `GhUiSpinnerComponent`. 2. Import the necessary modules and components: 3. Use the `GhUiSpinnerComponent` in your Angular application. ```ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; import { GhUiLibModule, GhUiSpinnerComponent } from '@a15-ghm/gh-ui'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatCardModule } from '@angular/material/card'; import { MatButtonModule } from '@angular/material/button'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, GhUiLibModule, MatToolbarModule, BrowserAnimationsModule, MatCardModule, MatButtonModule], providers: [GhUiSpinnerComponent], bootstrap: [AppComponent], }) export class AppModule {} ``` #### Using in HTML: 1. Default spinner. Customization includes choice of color, diameter, as well as displaying strictly in the center of the screen or freely configurable location in your application. `API:` All inputs are optional. - @Input() color: string. - spinner color. `The default is blue`. - @Input() diameter: string- The diameter of the spinner. `The default is 100`. - @Input() isCommonSpinner: boolean - Whether the spinner should be positioned in the center of the screen. `The default is true`. 2. Gif spinner. Customization includes passing an url for the gif, and choosing to display strictly in the center of the screen or a freely configurable location in your application. `API:` - @Input() spinnerUrl: string - `Required parameter`. If not specified, the default spinner will appear. - @Input() isCommonSpinner: boolean - Not a required parameter. Whether the spinner should be positioned in the center of the screen. `The default is true`. #### Using in TS\JS `API:` The spinner is immediately shown when added to the HTML. `Show/hide` the spinner with \*ngIf. Examples: ##### TS\JS: ```ts import { Component, OnInit } from '@angular/core'; import { GhUiSpinnerComponent } from '@a15-ghm/gh-ui'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent implements OnInit { public isShown = false; showBaseSpinner() { this.isShown = true; } hideBaseSpinner() { this.isShown = false; } } ``` ##### HTML: 1. Default spinner ```html ``` 2. Gif spinner ```html ``` ## GhUiToastComponent This component allows you to display standard toast message types (Success, Error and Warn) and customize them by passing styles as incoming parameters. ### Importing the GhUiToastComponent and GhUiToastService Once you have installed the `gh-ui` library, you need to import the `GhUiToastComponent` and `GhUiToastService` into your Angular application. 1. Open the module file (app.module.ts) in which you want to use the `GhUiToastComponent` and `GhUiToastService`. 2. Import the required modules and components 3. Use the `GhUiToastComponent` in your Angular application ```ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; import { GhUiLibModule, GhUiToastComponent, GhUiToastService } from '@a15-ghm/gh-ui'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, GhUiLibModule, BrowserAnimationsModule], providers: [GhUiToastComponent, GhUiToastService], bootstrap: [AppComponent], }) export class AppModule {} ``` ### Using the GhUiToastComponent #### Standard toast message To display a standard toast message using the `GhUiToastComponent`, you need to inject `GhUiToastService` (or import it in the constructor), and call the `showToast()` method with your options ```ts import { Component, inject } from '@angular/core'; import { GhUiToastService, ToastType } from '@a15-ghm/gh-ui'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent implements OnInit, OnDestroy { private toastService = inject(GhUiToastService); showToast() { this.toastService.showToast({ message: 'success', type: ToastType.Success }); } clearToasts() { this.toastService.clearToasts(); } } ``` The next step is to use the GhUiToastComponent's selector () as a directive in template. You can add it anywhere ```html ``` In the example above, the `showToast()` method in the `AppComponent` class demonstrates the use of the `GhUiToastComponent` to display a standard toast with the basic required options. You can also use the `clearToasts()` method to close ALL toast messages Below is an example of all the possible options that can be changed and passed to `showToast()`: ```ts import { IToastOptions, ToastType, ToastPosition } from '@a15-ghm/gh-ui'; const config: IToastOptions = { message: 'message', // Text of toast message (required), HTML support type: ToastType.Success, // Type of toast message (required) position: ToastPosition.Bottom, // Position of toast message (not necessary, by default is ToastPosition.Top) isAutoClose: true, // Automatic or manual closing toast message (not necessary, by default is false) duration: 3000, // Duration in ms of showing toast message (not necessary, by default is 5000ms). If it is passed, the isAutoClose option will be true header: 'HEADER', // Header's text of toast message (not necessary, by default is missing and not show), HTML support customCss: { // Css styles for custom toast (not necessary, by default is missing and not using) main: { color: 'white', backgroundColor: 'black' }, // Css styles for main content header: { // Css styles for header if it exists fontSize: '30px', border: '1px solid red', }, button: { color: 'yellow' }, // Css styles for close button of toast message }, }; ``` All possible toast options can be found in the interface (`IToastOptions`), positions (`ToastPosition`) and types (`ToastType`) in the enums exported from the `gh-ui` library #### Custom toast message In addition, you can customize the toast message with your own styles. To do this, just pass the css styles to the customCss option ```ts import { ToastType, IToastOptions } from '@a15-ghm/gh-ui'; const config: IToastOptions = { message: 'Custom toast', type: ToastType.Custom, customCss: { main: { color: 'white', backgroundColor: 'black' }, header: { color: 'blue', border: '1px solid red', }, button: { color: 'yellow' }, }, }; ``` In the example above, the `ToastType.Custom` type was used, it removes all standard styles, but you can add `customCss` option for standard toast types as well (`ToastType.Success`, etc.) if desired --- _Source: https://npm.io/package/@a15-ghm/gh-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._