# jsvalley-ui

> Collection of Quality Angular2 User Interfaces

Latest version **0.2.4** (published 2016-07-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install jsvalley-ui
pnpm add jsvalley-ui
yarn add jsvalley-ui
bun add jsvalley-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.4 |
| Published | 2016-07-01 |
| First published | 2016-06-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 11 |
| Known vulnerabilities | 0 (+21 in 3 direct dependencies) |
| Install scripts | no |
| GitHub stars | 73 |
| Maintainers | allenkim |
| Keywords | angular2, auto-complete, datetime-picker, google-maps, input, select |

## Links

- npm: https://www.npmjs.com/package/jsvalley-ui
- Repository: https://github.com/jsvalley/jsvalley-ui
- Homepage: https://github.com/jsvalley/jsvalley-ui#readme
- Issues: https://github.com/jsvalley/jsvalley-ui/issues
- npm.io page: https://npm.io/package/jsvalley-ui

## Dependencies (11)

- [rxjs](https://npm.io/package/rxjs.md) 5.0.0-beta.6
- [core-js](https://npm.io/package/core-js.md) ^2.4.0
- [zone.js](https://npm.io/package/zone.js.md) 0.6.12
- [es6-shim](https://npm.io/package/es6-shim.md) ^0.35.1
- [systemjs](https://npm.io/package/systemjs.md) 0.19.27
- [@angular/core](https://npm.io/package/@angular/core.md) 2.0.0-rc.1
- [@angular/common](https://npm.io/package/@angular/common.md) 2.0.0-rc.1
- [reflect-metadata](https://npm.io/package/reflect-metadata.md) 0.1.3
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) 2.0.0-rc.1
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) 2.0.0-rc.1
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) 2.0.0-rc.1

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 0.2.4 (latest) — 2016-07-01
- 0.2.3 — 2016-07-01
- 0.2.2 — 2016-07-01
- 0.2.1 — 2016-07-01
- 0.2.0 — 2016-06-30
- 0.1.12 — 2016-06-29
- 0.1.11 — 2016-06-23
- 0.1.10 — 2016-06-22
- 0.1.9 — 2016-06-20
- 0.1.8 — 2016-06-20
- 0.1.7 — 2016-06-20
- 0.1.6 — 2016-06-19
- 0.1.5 — 2016-06-19
- 0.1.4 — 2016-06-19
- 0.1.3 — 2016-06-19
- … 3 more at https://npm.io/package/jsvalley-ui/versions

## README

# JsValley User Interface

Collection of Quality Angular 2 UIs

[Demo](https://jsvalley.github.io/jsvalley-ui)


## Current Modules Included
  * ng2-auto-complete
  * ng2-datetime-picker
  * ng2-map
  * ng2-overlay
  * ng2-scrollable

## Install 

   * npm
   
         $ npm install jsvalley-ui
   
   * update `config.js` map and packages
   
         //map tells the System loader where to look for things
         map: {
           app: "./src",
           '@angular': 'https://npmcdn.com/@angular',
           ...
           'jsvalley-ui': 'https://npmcdn.com/jsvalley-ui' // <----- this
         },
    
         packages: {
            app: {
              main: './main.ts',
              defaultExtension: 'ts'
            },
            ...
            'jsvalley-ui': {                              // <----- this
              main: 'dist/index.js',
              defaultExtension: 'js'
            }
         }

## Usage

Import and include directives for your application

* app.ts

        //our root app component
        import {Component, enableProdMode} from '@angular/core'
        import { JSVALLEY_DIRECTIVES } from "jsvalley-ui";
        enableProdMode();

        @Component({
          selector: 'my-app',
          templateUrl: 'src/app.tpl.html',
          directives: [ JSVALLEY_DIRECTIVES ]
        })
        export class App {
          arrayOfValues: any[] = ['a', 'b', 'c'];
        }

* src/app.tpl.html

        <input ng2-auto-complete [source]="arrayOfKeyValues" [(ngModel)]="myModel" />
        
        <input [(ngModel)]="date1" ng2-datetime-picker /> 
        
        <ng2-map center="Brampton, Canada"></ng2-map>

## Directives
 * `ng2-map` Google Maps Api V3 Wrappe
 * `ng2-auto-complete` Typeahead for local and remote sources
 * `ng2-datetime-picker` Date picker, Time picker, or both
 * `ng2-overlay`  Generic overlays
 * `ng2-scrollable` Scroll Enabler and Sccoll Detector

## For Developer,

To publish a directive as a part of Jsvalley UI, `jui`

1. Update `build.sh` by adding additional line, so it will be added to distribution

        declare -a packages=(
            ng2-map
            ng2-auto-complete
            ng2-datetime-picker
            ng2-overlay
            ng2-scrollable
        )

2. Update `dist/jsvalley-directives.ts`, so that it will included in `JSVALLEY_DIRECTIVES`

        import { NG2_MAP_DIRECTIVES } from './ng2-map';

        export const JSVALLEY_DIRECTIVES: any[] = [
          ..
          NG2_MAP_DIRECTIVES
        ];

3. Build again
        
        $ npm run build

---
_Source: https://npm.io/package/jsvalley-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._