open-index/open-npm huggingface dataset:
npm package: @ngu/alert
Description: Angular Universal alert
Latest version: 0.3.0

# ngu-alert

Angular Universal alert

## Installation

`npm install @ngu/alert --save`

## Sample

Include NguAlertModule in your app module:

```javascript
import { NguAlertModule } from '@ngu/alert';

@NgModule({
  imports: [
    NguAlertModule
  ],
})
export class AppModule { }
```

Then use in your component:

```javascript
import { Component, OnInit } from '@angular/core';
import { NguAlertService } from '@ngu/alert';

@Component({
  selector: 'sample',
  template: `<h1>Ngu Alert</h1>`,
})
export class SampleComponent implements OnInit {
    constructor(private alert: NguAlertService)

    ngOnInit() {
        for (i = 0; i < 4; i++) {
            this.alert.open({
                heading: 'This is a heading',
                msg: 'This is a message from alert',
                type: 'success',
                duration: 10000
            });
        }
    }
}
```

## License

[MIT](LICENSE) license.
npm package: @ngu/flow
Description: Angular Flow is a component that allows you to create a flow diagram using Angular. Live Demo [link](https://uiuniversal.github.io/flow/)
Latest version: 0.0.7

# Angular Flow

Angular Flow is a component that allows you to create a flow diagram using Angular.
Live Demo [link](https://uiuniversal.github.io/flow/)

Stackblitz Demo [link](https://stackblitz.com/edit/ngu-flow)

## Installation

```bash
npm install @ngu/flow
```

## Usage

```ts
import { Component } from "@angular/core";
import { FlowComponent, FlowChildComponent } from "@ngu/flow";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [FlowComponent, FlowChildComponent],
  template: `
    <ngu-flow class="flow">
      @for (item of lists; track item.id; let i = $index) {
      <div [flowChild]="item" class="child">{{ i }}</div>
      }
    </ngu-flow>
  `,
  styles: `
  .flow {
    min-height: 90vh;
    background: #eee;
  }
  .child {
    border: 1px solid #ccc;
    width: 100px;
    height: 50px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  `,
})
export class AppComponent {
  lists = [
    { id: "1", x: 0, y: 0, deps: [] },
    { id: "2", x: 0, y: 0, deps: ["1"] },
  ];
}
```
npm package: @ngu/magnify
Description: Magnify directive helps to magnify the image on mouse hover. Currently it is only work if **z** is pressed and hover on image.
Author: Sheik Althaf
Latest version: 0.0.2

# Magnify

Magnify directive helps to magnify the image on mouse hover. Currently it is only work if **z** is pressed and hover on image.

To implement this directive, you need to add **magnify** attribute to the image tag.

```ts
import { Magnify } from '@ngu/magnify';

@NgModule({
  Imports: [
    Magnify
  ]
})
export class AppModule {}
```

Or You can use it on standalone component.
```ts
import { Magnify } from '@ngu/magnify';

@Component({
  standalone: true,
  imports: [
    Magnify
  ],
  selector: 'app',
  ...
})
```

```html
<img src="image.jpg" magnify />

<!-- You can make the inline false (Default: true) -->
<img src="image.jpg" magnify [inline]="false" [scale]="3" />

<!-- You can specify different image too -->
<img src="thumnail.jpg" magnify="original.jpg" />
```
npm package: @ngua/cardano-serialization-lib-browser
Description: (De)serialization functions for the Cardano blockchain along with related utility functions
Author: EMURGO
Latest version: 9.1.2

# Cardano Serialization Lib

This is a library for serialization & deserialization of data structures used in Cardano's Haskell implementation of Shelley along with useful utility functions.

##### NPM packages

- [NodeJS WASM package](https://www.npmjs.com/package/@ngua/cardano-serialization-lib-nodejs)
- [Browser (chrome/firefox) WASM package](https://www.npmjs.com/package/@ngua/cardano-serialization-lib-browser)
- [Browser (pure JS - no WASM) ASM.js package](https://www.npmjs.com/package/@ngua/cardano-serialization-lib-asmjs)

##### Rust crates

- [cardano-serialization-lib](https://crates.io/crates/cardano-serialization-lib)

##### Mobile bindings

- [React-Native mobile bindings](https://github.com/Emurgo/react-native-haskell-shelley)

## Documentation

You can find documentation [here](https://docs.cardano.org/cardano-components/cardano-serialization-lib)
npm package: @ngua/cardano-serialization-lib-nodejs
Description: (De)serialization functions for the Cardano blockchain along with related utility functions
Author: EMURGO
Latest version: 9.1.2

# Cardano Serialization Lib

This is a library for serialization & deserialization of data structures used in Cardano's Haskell implementation of Shelley along with useful utility functions.

##### NPM packages

- [NodeJS WASM package](https://www.npmjs.com/package/@ngua/cardano-serialization-lib-nodejs)
- [Browser (chrome/firefox) WASM package](https://www.npmjs.com/package/@ngua/cardano-serialization-lib-browser)
- [Browser (pure JS - no WASM) ASM.js package](https://www.npmjs.com/package/@ngua/cardano-serialization-lib-asmjs)

##### Rust crates

- [cardano-serialization-lib](https://crates.io/crates/cardano-serialization-lib)

##### Mobile bindings

- [React-Native mobile bindings](https://github.com/Emurgo/react-native-haskell-shelley)

## Documentation

You can find documentation [here](https://docs.cardano.org/cardano-components/cardano-serialization-lib)
npm package: @nguansak/typegraphql-prisma
Description: ![integration logo](https://raw.githubusercontent.com/MichalLytek/typegraphql-prisma/main/img/integration.png)
Author: Michał Lytek
Latest version: 0.24.0

![integration logo](https://raw.githubusercontent.com/MichalLytek/typegraphql-prisma/main/img/integration.png)

# TypeGraphQL & Prisma integration

Prisma generator to emit TypeGraphQL types and CRUD resolvers from your Prisma schema.

[**https://prisma.typegraphql.com/**](https://prisma.typegraphql.com/)

## Documentation

The documentation, installation guide, detailed description of the API and all of its features is [available on the website](https://prisma.typegraphql.com/).

## Examples

You can check out some usage examples on this repo:

https://github.com/MichalLytek/typegraphql-prisma/blob/main/examples/Readme.md

## Feedback

Currently released version `0.x` is just a preview of the upcoming integration. For now it lacks some customization option - picking models or fields of object types to expose in the schema, hiding input fields as well as picking exposed args fields. However, the base functionality is working well, so I strongly encourage you to give it a try and play with it.

Any feedback about the developers experience or ideas about new features or enhancements are very welcome - please feel free to put your two cents by using the [GitHub Discussions feature](https://github.com/MichalLytek/typegraphql-prisma/discussions/new):

<img src="https://raw.githubusercontent.com/MichalLytek/typegraphql-prisma/main/img/feedback.png" width="327"/>

## Security contact information

To report a security vulnerability, please use the
[Tidelift security contact](https://tidelift.com/security).
Tidelift will coordinate the fix and disclosure.

## Future plans

In some far feature, when Prisma SDK will be ready, the `typegraphql-prisma` integration will also allow to use a code-first approach to build a `schema.prisma` and GraphQL schema at once, using classes with decorators as a single source of truth.

Stay tuned! :muscle:
npm package: @ngui/collapsable
Description: Angular2 Tab Component
Author: Allen Kim
Latest version: 0.5.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# collapsable
Angular2 Accordion Component 

## IMPORTANT NOTICE

After 0.5.0 or higher, `ng2-collapsable` has been changed to `@ngui/collapsable`. Here are the changes;

* Module `ng2-collapsable` is changed to `@ngui/collapsable`.
* Direvtive `ng2-collapsable` is changed to `ngui-collapsable`.
* Class name `Ng2CollapsableModule` is changed to `NguiCollapsableModule`.

<a href="https://rawgit.com/ng2-ui/collapsable/master/app/index.html">
  Demo
</a>

## Install

1. install @ngui/collapsable

        $ npm install @ngui/collapsable --save

2. add `map` and `packages` to your `systemjs.config.js`

        map['@ngui/collapsable'] = 'node_modules/collapsable/dist/collapsable.umd.js';

3. import NguiCollapsable to your AppModule
        import { NgModule } from '@angular/core';
        import { FormsModule } from "@angular/forms";
        import { BrowserModule  } from '@angular/platform-browser';
        import { AppComponent } from './app.component';
        import { NguiCollapsable } from '@ngui/collapsable';
        
        @NgModule({
          imports: [BrowserModule, FormsModule, NguiCollapsable],
          declarations: [AppComponent],
          bootstrap: [ AppComponent ]
        })
        export class AppModule { }

## Use it in your template
 
    <ngui-collapsable
      selected="js"
      selected-index-class="selected"
      selected-contents-class="slideDown animated">
      <div index="html">HTML</div>
      <div contents="html">HTML {{1}}</div>
      <div index="js">Javascript</div>
      <div contents="js">Javascript {{1}}</div>
    </ngui-collapsable>
         
For full example, please check out `test` directory to see the example of;

  - `systemjs.config.js`
  - `app.module.ts`
  -  and `app.component.ts`.

## **ng2-ui** welcomes new members and contributors

This module is only improved and maintained by contributors like you;

As a contributor, it's NOT required to be skilled in Javascript nor Angular2. 
It’s required to be open-minded and interested in helping others.
You can contribute to the following;

  * Updating README.md
  * Making more and clearer comments
  * Answering issues and building FAQ
  * Documentation
  * Translation

In result of your active contribution, you will be listed as a core contributor
on https://ng2-ui.github.io, and a member of ng2-ui too.

If you are interested in becoming a contributor and/or a member of ng-ui,
please send me email to `allenhwkim AT gmail.com` with your github id. 

## For Developers

### To start

    $ git clone https://github.com/ng2-ui/collapsable.git
    $ cd collapsable
    $ npm install
    $ npm start
npm package: @ngui/common
Description: Angular 6 and 7 common modules; virtual-scroll, lazy-rendering, interactive list, etc
Author: Allen Kim
Latest version: 1.0.0

# @ngui/common

Angular 12+ UI common directives, functions, services

[![Build Status](https://travis-ci.org/allenhwkim/ngui-common.svg?branch=master)](https://travis-ci.org/allenhwkim/ngui-common)
[![npm](https://img.shields.io/npm/dt/@ngui/common.svg)](https://www.npmjs.com/package/@ngui/common) 
[![npm](https://img.shields.io/npm/v/@ngui/common.svg)](https://www.npmjs.com/package/@ngui/common)
[![npm](https://img.shields.io/npm/l/@ngui/common.svg)](https://www.npmjs.com/package/@ngui/common)
 
[Demo](https://rawgit.com/allenhwkim/ngui-common/master/dist/ngui-common-app/index.html)  
[Object Documentation](https://rawgit.com/allenhwkim/ngui-common/master/documentation/index.html)  
[Code Coverage Report](https://rawgit.com/allenhwkim/ngui-common/master/coverage/index.html)  
[Unit Test Report](https://rawgit.com/allenhwkim/ngui-common/master/test-report.html)  
[Acceptance Report](https://rawgit.com/allenhwkim/ngui-common/master/acceptance-report/mochawesome.html)  
[Article on Medium](https://medium.com/allenhwkim/simple-lazy-loading-with-angular-716dd3b174a)  

## Install

1. install @ngui/common

```
$ npm install @ngui/common --save
```

2. import NguiCommonModule to your AppModule  

```
import { NguiInviewModule, NguiListModule, NguiUtilsModule } from '@ngui/common';

@NgModule({
  imports: [BrowserModule, FormsModule, NguiListModule, NguiInviewModule, NguiUtilsModule],
  declarations: [AppComponent],
  providers: [HTTP_PROVIDERS],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
```

## Use it in your code  

```
<!-- the image is only displayed when "ngui-inview" is in viewport -->
<ngui-inview style="min-height: 300px">
  <img *ngIf src="https://picsum.photos/800/300" height="33%">
</ngui-inview>
```

## Modules

### NguiInViewModule 
Handles lazy rendering of Angular components, which utilizes HTML5 IntersectionObserver.

For IE11 and Safari, please add [polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) for this module:  
`<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>`
- ngui-inview component
- ngui-inview directive

### NguiUtilsModules
Collection of basic utility functions
- DynamicComponentService
- nguiHilight pipe
- fireEvent function

### NguiListModule
Handles list elements with highlight and keyboard/mouse interaction
- ngui-inview-page component
- ngui-list component
- ngui-virtual-list component
- ngui-autocomplete component
npm package: @ngui/infinite-list
Description: Angular2 Infinite List Directive
Author: Allen Kim
Latest version: 0.6.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# infinite-list
Angular2 Infinite List directive

## IMPORTANT NOTICE

After 0.6.0 or higher, `ng2-infinite-list` has been changed to `@ngui/infinite-list`. Here are the changes;

* Module `ng2-infinite-list` is changed to `@ngui/infinite-list`.
* Direvtive `ng2-infinite-list` is changed to `ngui-infinite-list`.
* Class name `Ng2InfiniteListModule` is changed to `NguiInfiniteListModule`.

<a href="https://rawgit.com/ng2-ui/infinite-list/master/app/index.html">
  <img src="http://i.imgur.com/5SDqQ6t.png"width="50% border="1" />
</a> 

Plunker Example: http://plnkr.co/edit/3LTMdS?p=preview

## Install

1. install @ngui/infinite-list

        $ npm install @ngui/infinite-list --save

2. add `map` and `packages` to your `systemjs.config.js`

        map['@ngui/infinite-list'] = 'node_modules/@ngui/infinite-list/dist/infinite-list.umd.js';

3. import NguiInfiniteList to your AppModule

        import { NgModule } from '@angular/core';
        import { FormsModule } from "@angular/forms";
        import { BrowserModule  } from '@angular/platform-browser';
        import { AppComponent } from './app.component';
        import { NguiInfiniteListModule } from '@ngui/infinite-list';
        
        @NgModule({
          imports: [BrowserModule, FormsModule, NguiInfiniteListModule],
          declarations: [AppComponent],
          bootstrap: [ AppComponent ]
        })
        export class AppModule { }

## Use it in your code

```
    <ul ngui-infinite-list  class="infinite-list" [disableScrollListener]="set1.loadingInProgress"
     (endVisible)="loadMore(set1)">
      <li *ngFor="let item of set1.list">{{item+1}}</li>
      <div ngui-infinite-list-end>
        <div *ngIf="set1.loadingInProgress">Loading</div>
        <div *ngIf="set1.endOfList">End Of List</div>
      </div>
    </ul>
```
         
For full example, please check out `test` directory to see the example of;

  - `systemjs.config.js`
  - `app.module.ts`
  -  and `app.component.ts`.

## **ng2-ui** welcomes new members and contributors

This module is only improved and maintained by contributors like you.

As a contributor, it's NOT required to be skilled in Javascript nor Angular2. 
You are only to be open-minded and interested in helping others.
As a contributor, you do following;

  * Updating README.md
  * Improving code comments
  * Answering issues and building FAQ
  * Documentation
  * Translation

In result of your active contribution, you will be listed as a core contributor
on https://ng2-ui.github.io, and a member of ng2-ui too.

If you are interested in becoming a contributor and/or a member of ng-ui,
please send me email to `allenhwkim AT gmail.com` with your github id. 

## For Developers

### To start

    $ git clone https://github.com/ng2-ui/infinite-list.git
    $ cd infinite-list
    $ npm install
    $ npm start
npm package: @ngui/menu
Description: Angular2 Menu Directive
Author: Allen Kim
Latest version: 0.6.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# menu
Angular2 menu directive

<a href="https://rawgit.com/ng2-ui/menu/master/app/index.html">
  <img src="http://i.imgur.com/w6yJBua.png" width="50% border="1" />
</a>

Plunker Example: https://plnkr.co/edit/u6sihV?p=preview

## Install

1. install @ngui/menu

        $ npm install @ngui/menu --save

2. add `map` and `packages` to your `systemjs.config.js`. 

        map['@ngui/menu'] = 'node_modules/@ngui/menu/dist/menu.umd.js';

3. import NguiMenuModule to your AppModule
        import { NgModule } from '@angular/core';
        import { FormsModule } from "@angular/forms";
        import { BrowserModule  } from '@angular/platform-browser';
        import { AppComponent } from './app.component';
        import { NguiMenuModule } from '@ngui/menu';
        
        @NgModule({
          imports: [BrowserModule, FormsModule, NguiMenuModule],
          declarations: [AppComponent],
          bootstrap: [ AppComponent ]
        })
        export class AppModule { }

For full example, please check out `test` directory to see the example of;

  - `systemjs.config.js`
  - `app.module.ts`
  -  and `app.component.ts`.

3.  add ngui-menu.css into your html

        <link rel="stylesheet" href="https://unpkg.com/menu/dist/ngui-menu.css" />

## Use it in your code
 You are ready. use it in your template

       <ul ngui-menu>
         <li> Menu Item 1 </li>
         <li> Menu Item 2
           <ul ngui-menu>
             <li> Menu Item 2-1 </li>
             <li> Menu Item 2-2 
               <ul ngui-menu>
                 <li> Menu Item 2-2-1 </li>
                 <li> Menu Item 2-2-2 </li>
                 <li> Menu Item 2-2-3 </li>
               </ul>
             </li>
             <li> Menu Item 2-2 </li>
           </ul>
         </li>
         <li> Menu Item 3 </li>
       </ul>

## **ng2-ui** welcomes new members and contributors

This module is only improved and maintained by contributors like you.

As a contributor, it's NOT required to be skilled in Javascript nor Angular2. 
You are only to be open-minded and interested in helping others.
As a contributor, you do following;

  * Updating README.md
  * Improving code comments
  * Answering issues and building FAQ
  * Documentation
  * Translation

In result of your active contribution, you will be listed as a core contributor
on https://ng2-ui.github.io, and a member of ng2-ui too.

If you are interested in becoming a contributor and/or a member of ng-ui,
please send me email to `allenhwkim AT gmail.com` with your github id.
npm package: @ngui/overlay
Description: Angular2 Overlay
Author: Allen Kim
Latest version: 0.8.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Angular(2+) Overlay
General Solution For Angular2 Overlay Elements

<a href="https://rawgit.com/ng2-ui/overlay/master/app/index.html">
  <img src="http://i.imgur.com/0qcxg8X.png" width="50% border="1" />
</a>

## Install

1. install overlay

        $ npm install overlay

2. add `map` and `packages` to your `systemjs.config.js`

        map['@ngui/overlay'] = 'node_modules/@ngui/overlay/dist/overlay.umd.js';

3. import NguiOverlayModule to your AppModule
        import { NgModule } from '@angular/core';
        import { FormsModule } from "@angular/forms";
        import { CommonModule  } from '@angular/common';
        import { AppComponent } from './app.component';
        import { NguiOverlayModule } from '@ngui/overlay';
        
        @NgModule({
          imports: [CommonModule, FormsModule, NguiOverlayModule],
          declarations: [AppComponent],
          bootstrap: [ AppComponent ]
        })
        export class AppModule { }

For full example, please check out `test` directory to see the example of;

  - `systemjs.config.js`
  - `app.module.ts`
  -  and `app.component.ts`.
  
## Usage it in your code
 You are ready. use it in your template

        <div id="window-loading" ngui-overlay-of="window">
          Loading...
        </div>
        <button (click)="overlayManager.open('window-loading')">Show Loading For Window</button>

## **ng2-ui** welcomes new members and contributors

This module is only improved and maintained by contributors like you.

As a contributor, it's NOT required to be skilled in Javascript nor Angular2. 
You are only to be open-minded and interested in helping others.
As a contributor, you do following;

  * Updating README.md
  * Improving code comments
  * Answering issues and building FAQ
  * Documentation
  * Translation

In result of your active contribution, you will be listed as a core contributor
on https://ng2-ui.github.io, and a member of ng2-ui too.

If you are interested in becoming a contributor and/or a member of ng-ui,
please send me email to `allenhwkim AT gmail.com` with your github id. 



## attributes
  [ngui-overlay], [ngui-overlay-of], [ngui-overlay-position]

  * ngui-overlay, Display inside overylay center-center positioned
  * ngui-overlay-of="window", Display window overlay
  * ngui-overlay-position="VERTICAL HORIZONTAL outside"
     e.g.,   
     `ngui-overlay-position="center center"` for loading sign  
     `ngui-overlay-position="top center outside"` for tooltip  

     * VERTICAL positions: top,  middle, or bottom
     * HORIZONTAL positions: left,  center, or right
     * `outside` to display overlay outside of the container
npm package: @ngui/parallax-scroll
Description: Angular2 parallax-scroll Directive
Author: Allen Kim
Latest version: 0.5.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# parallax-scroll
Angular2 parallax direc tive

## IMPORTANT NOTICE

After 0.5.0 or higher, `ng2-parallax-scroll` has been changed to `@ngui/parallax-scroll`. Here are the changes;

* Module `ng2-parallax-scroll` is changed to `@ngui/parallax-scroll`.
* Direvtive `ng2-parallax-scroll` is changed to `ngui-parallax-scroll`.
* Class name `Ng2ParallaxScrollModule` is changed to `NguiParallaxScrollModule`.

[Demo](https://rawgit.com/ng2-ui/parallax-scroll/master/app/index.html)

Plunker Example: https://plnkr.co/edit/zaESbL?p=preview

## Install

1. install @ngui/parallax-scroll

        $ npm install @ngui/parallax-scroll --save

2. add `map` and `packages` to your `systemjs.config.js`

        map['@ngui/parallax-scroll'] = '@ngui/parallax-scroll/dist/parallax-scroll.umd.js';

3. import NguiParallaxScrollModule to your AppModule
        import { NgModule } from '@angular/core';
        import { FormsModule } from "@angular/forms";
        import { BrowserModule  } from '@angular/platform-browser';
        import { AppComponent } from './app.component';
        import { NguiParallaxScrollModule } from '@ngui/parallax-scroll';
        
        @NgModule({
          imports: [BrowserModule, FormsModule, NguiParallaxScroll],
          declarations: [AppComponent],
          bootstrap: [ AppComponent ]
        })
        export class AppModule { }

         
For full example, please check out `test` directory to see the example of;

  - `systemjs.config.js`
  - `app.module.ts`
  -  and `app.component.ts`.


## Use it in your code

      <div ngui-parallax style="height: 300px">
        <img src="http://materializecss.com/images/parallax1.jpg" />
      </div>`,
            
## **ng2-ui** welcomes new members and contributors

This module is only improved and maintained by contributors like you.

As a contributor, it's NOT required to be skilled in Javascript nor Angular2. 
You are only to be open-minded and interested in helping others.
As a contributor, you do following;

  * Updating README.md
  * Improving code comments
  * Answering issues and building FAQ
  * Documentation
  * Translation

In result of your active contribution, you will be listed as a core contributor
on https://ng2-ui.github.io, and a member of ng2-ui too.

If you are interested in becoming a contributor and/or a member of ng-ui,
please send me email to `allenhwkim AT gmail.com` with your github id. 


## For Developers

### To start

    $ git clone https://github.com/ng2-ui/ngui-parallax-scroll.git
    $ cd ngui-parallax-scroll
    $ npm install
    $ npm start
npm package: @ngui/sortable
Description: Re-arrangable list element
Author: Allen Kim
Latest version: 0.4.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# sortable

Mobile-friendly re-arrangable list element

<a href="https://rawgit.com/ng2-ui/sortable/master/app/index.html">
  DEMO
  <!-- img src="http://i.imgur.com/0qcxg8X.png" width="50% border="1" / -->
</a>

## Install

1. install @ngui/sortable node module

        $ npm install @ngui/sortable --save

2. add `map` and `packages` to your `systemjs.config.js`

        map['@ngui/sortable'] = 'node_modules/sortable/dist/sortable.umd.js';

3. import NguiSortableModule to your AppModule

        import { NgModule } from '@angular/core';
        import { FormsModule } from "@angular/forms";
        import { BrowserModule  } from '@angular/platform-browser';
        import { AppComponent } from './app.component';
        import { NguiSortableModule } from '@ngui/sortable';
        
        @NgModule({
          imports: [BrowserModule, FormsModule, NguiSortableModule],
          declarations: [AppComponent],
          bootstrap: [ AppComponent ]
        })
        export class AppModule { }


For full example, please check out `test` directory to see the example of;

  - `systemjs.config.js`
  - `app.module.ts`
  -  and `app.component.ts`.

## Usage it in your code

add `hammer.js` in your html

    <script src="../node_modules/hammerjs/hammer.js"></script>
  
You are ready. use it in your template


    <ul ngui-sortable>
      <li id="order">Order</li>
      <li id="me">Me</li>
      <li id="right">Right</li>
      <li id="the">The</li>
      <li id="into">Into</li>
      <li id="put">Put</li>
    </ul>

## Without css, it still works, but for better styling, please use some css. e.g.;

    ul[ngui-sortable] {
       padding: 10px; 
       border: 1px solid #ccc;
      list-style: none; 
      display: block
    }
    ul[ngui-sortable] li {
      padding: 10px 5px;
      background: #4986e7;
      color: #fff; 
      border: 1px solid #fff;
      display: block; 
      position: relative
    }
    ul[ngui-sortable] li.drag-enter {
      border-top: 2px solid yellow;
    }

## For Developers

  Things to know to understand the implementation;
  
  1.  **transform: 'translate(x, y)'**   
      when  drag an element. which sets the position of an element to a new one, described by two vectors (x, y). The y value is optional.</li>
      
  2. **document.elementFromPoint(x, y)**   
      The elementFromPoint() method of the Document interface returns the topmost element at the specified coordinates.
      https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint
  
  3. pan events(a gesture event)
  
      * event.center     {Object}  center position of the touches. contains pageX and pageY
      * event.deltaTime  {Number}  the total time of the touches in the screen
      * event.deltaX     {Number}  the delta on x axis we haved moved
      * event.deltaY     {Number}  the delta on y axis we haved moved
npm package: @ngui/sticky
Description: CSS position: sticky implementation in Angular2
Author: Allen Kim
Latest version: 0.6.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @ngui/sticky
position: sticky implementaion in Angular2

## IMPORTANT NOTICE
After 0.7.0 or higher, ng2-sticky has been changed to @ngui/sticky. Here are the changes;

 * Module ng2-sticky has been changed to @ngui/sticky.
 * Direvtive ng2-sticky is moved to ngui-sticky.
 * Class name Ng2StickyModule is moved to NguiStickyModule.

[Demo](https://rawgit.com/ng2-ui/sticky/master/app/index.html)

Plunker Example: https://plnkr.co/edit/ZKwAHN?p=preview

## Install

1. install @ngui/sticky

        $ npm install @ngui/sticky --save

2. If you are not using webpack, add `map` and `packages` to your `systemjs.config.js`

        map['@ngui/sticky'] = 'node_modules/@ngui/sticky/dist/sticky.umd.js';

3. import NguiStickyModule to your AppModule

        import { NgModule } from '@angular/core';
        import { FormsModule } from "@angular/forms";
        import { BrowserModule  } from '@angular/platform-browser';
        import { AppComponent } from './app.component';
        import { NguiStickyModule } from '@ngui/sticky';
        
        @NgModule({
          imports: [BrowserModule, FormsModule, NguiStickyModule],
          declarations: [AppComponent],
          bootstrap: [ AppComponent ]
        })
        export class AppModule { }

         
For full example, please check out `test` directory to see the example of;

  - `systemjs.config.js`
  - `app.module.ts`
  -  and `app.component.ts`.

## Usage it in your code

      <div class="div-middle">
        <div>One</div>
        <div>After</div>
        <div>Another</div>
        
        <div ngui-sticky>
        
        <br/><br/><br/>
        <div>One</div>
        <div>After</div>
        <div>Another</div>
      </div>

## **ng2-ui** welcomes new members and contributors

This module is only improved and maintained by contributors like you.

As a contributor, it's NOT required to be skilled in Javascript nor Angular2. 
You are only to be open-minded and interested in helping others.
As a contributor, you do following;

  * Updating README.md
  * Improving code comments
  * Answering issues and building FAQ
  * Documentation
  * Translation

In result of your active contribution, you will be listed as a core contributor
on https://ng2-ui.github.io, and a member of ng2-ui too.

If you are interested in becoming a contributor and/or a member of ng-ui,
please send me email to `allenhwkim AT gmail.com` with your github id.
npm package: @ngui/tab
Description: Angular2 Tab Component
Author: Allen Kim
Latest version: 0.5.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# tab
Angular2 Tab Component 

<a href="https://rawgit.com/ng2-ui/tab/master/app/index.html">
  Demo
</a>

## Install

1. install @ngui/tab

        $ npm install @ngui/tab --save

2. add `map` and `packages` to your `systemjs.config.js`

        map['@ngui/tab'] = 'node_modules/tab/dist/tab.umd.js';

3. import NguiTab to your AppModule

        import { NgModule } from '@angular/core';
        import { FormsModule } from "@angular/forms";
        import { BrowserModule  } from '@angular/platform-browser';
        import { AppComponent } from './app.component';
        import { NguiTabModule } from '@ngui/tab';
        
        @NgModule({
          imports: [BrowserModule, FormsModule, NguiTabModule],
          declarations: [AppComponent],
          bootstrap: [ AppComponent ]
        })
        export class AppModule { }

         
For full example, please check out `test` directory to see the example of;

  - `systemjs.config.js`
  - `app.module.ts`
  -  and `app.component.ts`.

## Use it in your code

    <ngui-tab
      selected="js"
      selected-index-class="selected"
      selected-contents-class="fadeIn animated">
      <div class="tabs">
        <div index="html">HTML</div>
        <div index="js">Javascript</div>
      </div>
      <div class="tab-contents">
        <div contents="html">HTML {{1}}</div>
        <div contents="js">Javascript {{1}}</div>
      </div>
    </ngui-tab>
          
## **ng2-ui** welcomes new members and contributors

This module is only improved and maintained by contributors like you.

As a contributor, it's NOT required to be skilled in Javascript nor Angular2. 
You are only to be open-minded and interested in helping others.
As a contributor, you do following;

  * Updating README.md
  * Improving code comments
  * Answering issues and building FAQ
  * Documentation
  * Translation

In result of your active contribution, you will be listed as a core contributor
on https://ng2-ui.github.io, and a member of ng2-ui too.

If you are interested in becoming a contributor and/or a member of ng-ui,
please send me email to `allenhwkim AT gmail.com` with your github id. 


## For Developers

### To start

    $ git clone https://github.com/ng2-ui/tab.git
    $ cd tab
    $ npm install
    $ npm start
npm package: @ngui/tooltip
Description: Angular2 Tooltip Directive
Author: Allen Kim
Latest version: 0.5.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# tooltip
Angular2+ tooltip directive

<a href="https://rawgit.com/ng2-ui/tooltip/master/app/index.html">
  <img src="http://i.imgur.com/ezWv5Jw.png" width="50% border="1" />
</a>

Plunker Example: https://plnkr.co/edit/6reiaH?p=preview

## Install

1. install @ngitooltip

        $ npm install @ngui/tooltip --save

2. add `map` and `packages` to your `systemjs.config.js`

        map['@ngui/tooltip'] = 'node_modules/@ngui/tooltip/dist/tooltip.umd.js';

3. import NguiTooltipOverlay to your AppModule

        import { NgModule } from '@angular/core';
        import { FormsModule } from "@angular/forms";
        import { BrowserModule  } from '@angular/platform-browser';
        import { AppComponent } from './app.component';
        import { NguiTooltipModule } from '@ngui/tooltip';
        
        @NgModule({
          imports: [BrowserModule, FormsModule, NguiTooltipModule],
          declarations: [AppComponent],
          bootstrap: [ AppComponent ]
        })
        export class AppModule { }

         
For full example, please check out `test` directory to see the example of;

  - `systemjs.config.js`
  - `app.module.ts`
  -  and `app.component.ts`.

3.  add ngui-tooltip.css into your html

        <link rel="stylesheet" href="https://unpkg.com/ngui-tooltip-overlay/dist/ngui-tooltip.css" />

## Usage it in your code

     <div tooltip="This is my tooltip">
        Move mouse over here to see the tooltip
     </div>

## **ng2-ui** welcomes new members and contributors

This module is only improved and maintained by contributors like you.

As a contributor, it's NOT required to be skilled in Javascript nor Angular2. 
You are only to be open-minded and interested in helping others.
As a contributor, you do following;

  * Updating README.md
  * Improving code comments
  * Answering issues and building FAQ
  * Documentation
  * Translation

In result of your active contribution, you will be listed as a core contributor
on https://ng2-ui.github.io, and a member of ng2-ui too.

If you are interested in becoming a contributor and/or a member of ng-ui,
please send me email to `allenhwkim AT gmail.com` with your github id.
npm package: @ngui/utils
Description: Angular2 utility functions
Author: Allen Kim
Latest version: 0.8.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Angular 2 UI Utility Functoins

utility functions

## IMPORTANT NOTICE

After 0.7.0 or higher, `ng2-utils` has been changed to `@ngui/utils` 
like the same Angular version is more than 2. Here are the changes;

* Module name `ng2-utils` has been changed to `@ngui/utils`.
* Direvtive name `ng2-utils-X` is moved to `ngui-utils-X`. e.g., ngui-utils-1  
* Class name `Ng2Util` is moved to `NguiUtils`.

## Install

1. install @ngui/utils

        $ npm install @ngui/utils --save

## Use it in your code

App Component

        import { NguiUtilsModule } from '@ngui/utils';

        import { AppComponent }   from './app.component';

        @NgModule({    imports: [BrowserModule, NguiUtilsModule],
          declarations: [AppComponent],
          bootstrap: [ AppComponent ]
        })
        export class AppModule { }

        platformBrowserDynamic().bootstrapModule(AppModule);

Javascript

        import { elementVisible, computedStyle, scrollTo, outerHeight, outerWidth } from '@ngui/utils';
        
HTML

        {{myHtml | htmlCode}}
        {{myHtml | htmlCode:'include'}}
        {{myHtml | htmlCode:'-include'}}
        {{ngOnInit | jsCode}}
        
## DOM-related functions

  * computedStyle(element, styleName)
    * returns style value
      
  * elementVisible(innerElement, outerElement)
    * returns visiblility of top, bottom, left, and right 
      
  * outerHeight(element)
    * return height in number
      
  * outerWidth(element)
    * return width in number
      
  * scrollTo(selector, parentCssSelector)
  
    * scrolls to a certain section in a second
    * returns void

## Pipes

  * string | htmlCode:'include,-exclude'
    * returns html string with tags included and excluded 
    
  * string | jsCode
    * returns beautified Javascript code

## Services

    * MemoryStorage
      memory storage without using localStorage or sessionStorage with following functions
        * getItem(key: string) : returns string value of stored value
        * setItem(key: string, value: string): store value of key into memory
        * clear(): reset memory storage

    * Storage
      session storage using sessionStorage with fallback to MemoryStorage with following functions
        * getItem(key: string) : returns string value of stored value
        * setItem(key: string, value: string): store value of key into memory
        * clear(): reset storage