open-index/open-npm huggingface dataset:
npm package: @lakea/gravity
Description: Gravity is a [Angular](https://angular.io/) library that provides you essentials UI components, styles and a CDK to simplify component creation.
Author: Lakea Blockchain
Latest version: 3.0.2

# @lakea/gravity

Gravity is a [Angular](https://angular.io/) library that provides you essentials
UI components, styles and a CDK to simplify component creation.

## Install

Install the library in your project using NPM:

`npm i @lakea/gravity @lakea/assets`

## Styles

Import global styles to `styles.scss` of your project

```scss
@import 'node_modules/@lakea/gravity/styles/normalize';
@import 'node_modules/@lakea/gravity/styles/global';
```

To apply global styles (typography, headings, scroll, etc...) to your application, you need to add the fallowing
classes to html and body tag:

```angular2html
<html class="gr-scroll">
  <!--...-->
  <body class="gr-body gr-typo gr-headings">...</body>
  <!--...-->
<html>
```

## Fonts

To use the default lib font ([Work Sans](https://fonts.google.com/specimen/Work+Sans)), add the following file to `angular.json` styles option:

```json
"styles": ["node_modules/@lakea/assets/fonts/worksans/worksans.css"]
```

> We provide the font by @lakea/assets package, but you can import using the common way: [Read more](https://developers.google.com/fonts/docs/getting_started)

If you want to use a different font, import another font and set a new font style via css var:

```scss
:root {
  --gr-font-primary: 'YOUR_CUSTOM_FONT', sans-serif;
}
```

## Assets

Add this config to you `angular.json` assets option:

```json
"assets": [
  {
    "glob": "**/*",
    "input": "node_modules/lakea-assets/images",
    "output": "assets/images"
  }
]
```

> It copies favicons, icons, illustrations, fonts and Lakea logos to project `assets` folder.
npm package: @lakea/gravity-cookie-adapter-ngx-cookie
Description: An adapter for `GrCookie` using [`ngx-cookie`](https://github.com/salemdar/ngx-cookie) as implementation.
Latest version: 3.0.2

# @lakea/gravity-cookie-adapter-ngx-cookie

An adapter for `GrCookie` using [`ngx-cookie`](https://github.com/salemdar/ngx-cookie) as implementation.

## Installation

Install the library using NPM:

`npm install @lakea/gravity-cookie-adapter-ngx-cookie ngx-cookie --save`

Next, create a new file, `cookie-adapter-root.module.ts` which exposes an Angular's module with a default configuration.

```typescript
import {NgModule} from '@angular/core';
import {CookieModule} from 'ngx-cookie';
import {GrCookie} from '@lakea/gravity/cdk';
import {GrCookieAdapterNgxCookie} from '@lakea/gravity-cookie-adapter-ngx-cookie';

@NgModule({
  imports: [CookieModule.withOptions()],
  providers: [
    {
      provide: GrCookie,
      useClass: GrCookieAdapterNgxCookie,
    },
  ],
})
export class CookieAdapterRootModule {}
```

Import `CookieAdapterRootModule` to application root module like `app.module.ts`.

> You should import the CookieAdapterRootModule once in your root module.

The `CookieAdapterRootModule` file imports the `CookieModule` from `ngx-cookie` library and provide the adapter implementation too.

To configure the `ngx-cookie` library, read the docs [here](https://github.com/salemdar/ngx-cookie).

---

## Creating your own adapter

Create your adapter implementation class extending `GrCookie` abstraction:

```typescript
import {Injectable} from '@angular/core';

import {GrCookie} from '@lakea/gravity/cdk';

@Injectable()
export class GrCookieAdapter extends GrCookie {
  constructor() {
    super();
  }

  public getItem(key: string): string {
    // YOUR IMPLEMENTATION
  }

  public getObjectItem(key: string): object {
    // YOUR IMPLEMENTATION
  }

  public removeAll(): void {
    // YOUR IMPLEMENTATION
  }

  public removeItem(key: string): void {
    // YOUR IMPLEMENTATION
  }

  public setItem(key: string, value: string): void {
    // YOUR IMPLEMENTATION
  }

  public setObjectItem(key: string, value: object): void {
    // YOUR IMPLEMENTATION
  }
}
```

So, provide it on your application root module (maybe `app.module.ts`), like this:

```typescript
  providers: [
    {
      provide: GrCookie,
      useClass: GrCookieAdapter,
    }
  ]
```
npm package: @lakea/gravity-date-adapter-date-fns
Description: An adapter for `GrDate` using [`date-fns`](https://date-fns.org/) as implementation.
Latest version: 3.0.2

# @lakea/gravity-date-adapter-date-fns

An adapter for `GrDate` using [`date-fns`](https://date-fns.org/) as implementation.

## Installation

Install the library using NPM:

`npm install @lakea/gravity-date-adapter-date-fns date-fns --save`

Next, create a new file, `date-adapter-root.module.ts` which exposes an Angular's module with a default configuration.

```typescript
import {NgModule} from '@angular/core';
import {GR_DATE_FORMAT, GrDate} from '@lakea/gravity/cdk';
import {GR_DATE_FORMAT_DATE_FNS, GrDateAdapterDateFns} from '@lakea/gravity-date-adapter-date-fns';

@NgModule({
  providers: [
    {
      provide: GrDate,
      useClass: GrDateAdapterDateFns,
    },
    {
      provide: GR_DATE_FORMAT,
      useValue: GR_DATE_FORMAT_DATE_FNS,
    },
  ],
})
export class DateAdapterRootModule {}
```

Import `DateAdapterRootModule` to application root module like `app.module.ts`.

> You should import the DateAdapterRootModule once in your root module.

The `DateAdapterRootModule` provide the adapter implementation for `GrDate` and a default date format.

`GR_DATE_FORMAT_DATE_FNS` pattern value is `P`.

To change default date format, provide a new pattern value for `GR_DATE_FORMAT` injector. Read the [`date-fns` format docs](https://date-fns.org/v2.28.0/docs/format) to see all available patterns.

---

## Creating your own adapter

Create your adapter implementation class extending `GrDate` abstraction:

```typescript
import {Inject, Injectable} from '@angular/core';

import {GrDate} from '@lakea/gravity/cdk';

@Injectable()
export class GrDateAdapter extends GrDate {
  constructor(@Inject(GR_DATE_FORMAT) private _dateFormat: string) {
    super();
  }

  public add(date: Date, value: number, type: 'second' | 'minute' | 'hour' | 'day' | 'month' | 'year'): Date {
    // YOUR IMPLEMENTATION
  }

  public subs(date: Date, value: number, type: 'second' | 'minute' | 'hour' | 'day' | 'month' | 'year'): Date {
    // YOUR IMPLEMENTATION
  }

  public isBetween(date: Date, start: Date, end: Date): boolean {
    // YOUR IMPLEMENTATION
  }

  public set(
    date: Date,
    values: {
      year?: number;
      month?: number;
      date?: number;
      hours?: number;
      minutes?: number;
      seconds?: number;
      milliseconds?: number;
    }
  ): Date {
    // YOUR IMPLEMENTATION
  }

  public formatDate(date: Date, dateFormat?: string): string {
    // YOUR IMPLEMENTATION
  }

  public toDate(value: string, fromFormat?: string): Date {
    // YOUR IMPLEMENTATION
  }

  public toISO(date: Date): string {
    // YOUR IMPLEMENTATION
  }

  public toUnix(date: Date): number {
    // YOUR IMPLEMENTATION
  }

  public unixToDate(value: number): Date {
    // YOUR IMPLEMENTATION
  }
}
```

So, provide it on your application root module (maybe `app.module.ts`), like this:

```typescript
  providers: [
    {
      provide: GrDate,
      useClass: GrDateAdapter,
    }
  ]
```
npm package: @lakea/gravity-identicon-adapter-minidenticons
Description: An adapter for `GrIdenticon` using [`Minidenticons`](https://github.com/laurentpayot/minidenticons) as implementation.
Latest version: 3.0.2

# @lakea/gravity-identicon-adapter-minidenticon

An adapter for `GrIdenticon` using [`Minidenticons`](https://github.com/laurentpayot/minidenticons) as implementation.

## Installation

Install the library using NPM:

`npm install @lakea/gravity-identicon-adapter-minidenticon minidenticons --save`

Next, create a new file, `identicon-adapter-root.module.ts` which exposes an Angular's module with a default configuration.

```typescript
import {NgModule} from '@angular/core';
import {GrIdenticon} from '@lakea/gravity/cdk';
import {GrIdenticonAdapterMinidenticons} from '@lakea/gravity-identicon-adapter-minidenticons';

@NgModule({
  providers: [
    {
      provide: GrIdenticon,
      useClass: GrIdenticonAdapterMinidenticons,
    },
  ],
})
export class IdenticonAdapterRootModule {}
```

Import `IdenticonAdapterRootModule` to application root module like `app.module.ts`.

> You should import the IdenticonAdapterRootModule once in your root module.

The `IdenticonAdapterRootModule` provide the adapter implementation to `GrIdenticon`.

---

## Creating your own adapter

Create your adapter implementation class extending `GrIdenticon` abstraction:

```typescript
import {Injectable} from '@angular/core';

import {GrIdenticon} from '@lakea/gravity/cdk';

@Injectable()
export class GrIdenticonAdapter extends GrIdenticon {
  constructor() {
    super();
  }

  public generateSVG(value: string): string {
    // YOUR IMPLEMENTATION
  }
}
```

So, provide it on your application root module (maybe `app.module.ts`), like this:

```typescript
  providers: [
    {
      provide: GrIdenticon,
      useClass: GrIdenticonAdapter,
    }
  ]
```
npm package: @lakea/gravity-markdown-adapter-marked
Description: An adapter for `GrMarkdown` using [`marked`](https://marked.js.org/) as implementation.
Latest version: 3.0.2

# @lakea/gravity-markdown-adapter-marked

An adapter for `GrMarkdown` using [`marked`](https://marked.js.org/) as implementation.

## Installation

Install the library using NPM:

`npm install @lakea/gravity-markdown-adapter-marked marked --save`

Next, create a new file, `markdown-adapter-root.module.ts` which exposes an Angular's module with a default configuration.

```typescript
import {NgModule} from '@angular/core';
import {GrMarkdown} from '@lakea/gravity/cdk';
import {GrMarkdownAdapterMarked} from '@lakea/gravity-markdown-adapter-marked';

@NgModule({
  providers: [
    {
      provide: GrMarkdown,
      useClass: GrMarkdownAdapterMarked,
    },
  ],
})
export class MarkdownAdapterRootModule {}
```

Import `MarkdownAdapterRootModule` to application root module like `app.module.ts`.

> You should import the MarkdownAdapterRootModule once in your root module.

The `MarkdownAdapterRootModule` provide the adapter implementation for `GrMarkdown`.

---

## Creating your own adapter

Create your adapter implementation class extending `GrMarkdown` abstraction:

```typescript
import {Injectable} from '@angular/core';

import {GrMarkdown} from '@lakea/gravity/cdk';

@Injectable()
export class GrMarkdownAdapter extends GrMarkdown {
  constructor() {
    super();
  }

  public toHtml(value: string): string {
    // YOUR IMPLEMENTATION
  }
}
```

So, provide it on your application root module (maybe `app.module.ts`), like this:

```typescript
  providers: [
    {
      provide: GrMarkdown,
      useClass: GrMarkdownAdapter,
    }
  ]
```
npm package: @lakea/gravity-popover-adapter-floating-ui
Description: An adapter for `GrPopover` using [`Floating UI`](https://floating-ui.com/) as implementation.
Latest version: 3.0.2

# @lakea/gravity-popover-adapter-floating-ui

An adapter for `GrPopover` using [`Floating UI`](https://floating-ui.com/) as implementation.

## Installation

Install the library using NPM:

`npm install @lakea/gravity-popover-adapter-floating-ui @floating-ui/dom --save`

Next, create a new file, `cookie-adapter-root.module.ts` which exposes an Angular's module with a default configuration.

```typescript
import {NgModule} from '@angular/core';
import {GrPopover} from '@lakea/gravity/ui';
import {GrPopoverAdapterFloatingUi} from '@lakea/gravity-popover-adapter-floating-ui';

@NgModule({
  providers: [
    {
      provide: GrPopover,
      useClass: GrPopoverAdapterFloatingUi,
    },
  ],
})
export class PopoverAdapterRootModule {}
```

Import `PopoverAdapterRootModule` to application root module like `app.module.ts`.

> You should import the PopoverAdapterRootModule once in your root module.

The `PopoverAdapterRootModule` provide the adapter implementation for `GrPopover`.

---

## Creating your own adapter

Create your adapter implementation class extending `GrPopover` abstraction:

```typescript
import {Injectable} from '@angular/core';

import {GrPopover, GrPopoverInstance, GrPopoverPlacements} from '@lakea/gravity/ui';

@Injectable()
export class GrPopoverAdapter extends GrPopover {
  constructor() {
    super();
  }

  public create(trigger: HTMLElement, element: HTMLElement, placement: GrPopoverPlacements): GrPopoverInstance {
    // YOUR IMPLEMENTATION
  }
}

class GrPopoverAdapterInstance implements GrPopoverInstance {
  constructor(trigger: HTMLElement, element: HTMLElement, placement: GrPopoverPlacements) {
  }

  public show(): void {
    // YOUR IMPLEMENTATION
  }

  public hide(): void {
    // YOUR IMPLEMENTATION
  }

  public destroy(): void {
    // YOUR IMPLEMENTATION
  }
}
```

So, provide it on your application root module (maybe `app.module.ts`), like this:

```typescript
  providers: [
    {
      provide: GrPopover,
      useClass: GrPopoverAdapter,
    }
  ]
```
npm package: @lakea/gravity-svg-adapter-svg-injector
Description: An adapter for `GrSvg` using [`svg-injector`](https://github.com/tanem/svg-injector) as implementation.
Latest version: 3.0.2

# @lakea/gravity-svg-adapter-svg-injector

An adapter for `GrSvg` using [`svg-injector`](https://github.com/tanem/svg-injector) as implementation.

## Installation

Install the library using NPM:

`npm install @lakea/gravity-svg-adapter-svg-injector @tanem/svg-injector --save`

Next, create a new file, `svg-adapter-root.module.ts` which exposes an Angular's module with a default configuration.

```typescript
import {NgModule} from '@angular/core';
import {GrSvg} from '@lakea/gravity/ui';
import {GrSvgAdapterSvgInjector} from '@lakea/gravity-svg-adapter-svg-injector';

@NgModule({
  providers: [
    {
      provide: GrSvg,
      useClass: GrSvgAdapterSvgInjector,
    },
  ],
})
export class SvgAdapterRootModule {}
```

Import `SvgAdapterRootModule` to application root module like `app.module.ts`.

> You should import the SvgAdapterRootModule once in your root module.

The `SvgAdapterRootModule` provide the adapter implementation for `GrSvg`.

---

## Creating your own adapter

Create your adapter implementation class extending `GrSvg` abstraction:

```typescript
import {Injectable, Renderer2, RendererFactory2} from '@angular/core';

import {GrSvg} from '@lakea/gravity/ui';

@Injectable()
export class GrSvgAdapter extends GrSvg {
  constructor() {
    super();
  }

  public generateSvg(assetUrl: string): Promise<SVGSVGElement> {
    // YOUR IMPLEMENTATION
  }
}
```

So, provide it on your application root module (maybe `app.module.ts`), like this:

```typescript
  providers: [
    {
      provide: GrSvg,
      useClass: GrSvgAdapter,
    }
  ]
```
npm package: @lakea/gravity-translate-adapter-transloco
Description: An adapter for `GrTranslate` using [`Transloco`](https://ngneat.github.io/transloco/) as implementation.
Latest version: 3.0.2

# @lakea/gravity-translate-adapter-transloco

An adapter for `GrTranslate` using [`Transloco`](https://ngneat.github.io/transloco/) as implementation.

## Installation

Install the library using NPM:

`npm install @lakea/gravity-translate-adapter-transloco @ngneat/transloco --save`

Next, create a new file, `translate-adapter-root.module.ts` which exposes an Angular's module with a default configuration.

```typescript
import {NgModule} from '@angular/core';
import {GrTranslateAdapterTranslocoModule} from '@lakea/gravity-translate-adapter-transloco';

@NgModule({
  imports: [
    GrTranslateAdapterTranslocoModule.forRoot({
      availableLangs: ['en', 'es'],
      defaultLang: 'en',
      reRenderOnLangChange: true,
      prodMode: false, // get from your environments file
    }),
  ],
})
export class TranslateAdapterRootModule {}
```

Import `TranslateAdapterRootModule` to application root module like `app.module.ts`.

> You should import the TranslateAdapterRootModule once in your root module.

The `TranslateAdapterRootModule` file imports the `GrTranslateAdapterTranslocoModule` which has all `Transloco` initial configs.

To configure `transloco` library, read the docs [here](https://ngneat.github.io/transloco/docs/getting-started/config-options).

Going forward, you need to provide a global app config injector with `baseUrl` property.

Add it to you app root module (maybe `app.module.ts`):

```typescript
  providers: [
    {
      provide: 'APP_CONFIG',
      useValue: {
        // change for your app baseUrl
        // (don't miss to deal with prod url)
        baseUrl: 'http://localhost:4200'
      },
    },
  ]
```

> `baseUrl` is used by `TranslocoLoader` to load translations file from `assets`.

---

## Creating your own adapter

Create your adapter implementation class extending `GrTranslate` abstraction:

```typescript
import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';

import {HashMap} from '@lakea/gravity/cdk';
import {GrTranslate} from '@lakea/gravity/translate';

@Injectable()
export class GrTranslateAdapter extends GrTranslate {
  constructor() {
    super();
  }

  public activeLanguageChanges$(): Observable<string> {
    // YOUR IMPLEMENTATION
  }

  public changeActiveLanguage(lang: string): void {
    // YOUR IMPLEMENTATION
  }

  public getActiveLanguage(): string {
    // YOUR IMPLEMENTATION
  }

  public getAvailableLanguages(): string[] {
    // YOUR IMPLEMENTATION
  }

  public translate<T = string | string[]>(key: T, options?: HashMap): Observable<T> {
    // YOUR IMPLEMENTATION
  }
}
```

So, provide it on your application root module (maybe `app.module.ts`), like this:

```typescript
  providers: [
    {
      provide: GrTranslate,
      useClass: GrTranslateAdapter,
    }
  ]
```