# assure-ui

> This is a UI library specific to conform to Assure Services User Interface standards

Latest version **0.1.74** (published 2019-03-04) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.74 |
| Published | 2019-03-04 |
| First published | 2018-06-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 481.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Josh Waite |
| Maintainers | jjgonzalez, jwaite, kdiederich1 |

## Links

- npm: https://www.npmjs.com/package/assure-ui
- npm.io page: https://npm.io/package/assure-ui

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 0.1.74 (latest) — 2019-03-04
- 0.1.73 — 2019-02-19
- 0.1.72 — 2018-12-21
- 0.1.71 — 2018-10-17
- 0.1.7 — 2018-09-06
- 0.1.62 — 2018-06-15
- 0.1.61 — 2018-06-15
- 0.1.6 — 2018-06-15
- 0.1.5 — 2018-06-13
- 0.1.4 — 2018-06-13
- 0.1.3 — 2018-06-12
- 0.1.2 — 2018-06-11
- 0.1.1 — 2018-06-11
- 0.1.0 — 2018-06-06
- 0.0.9 — 2018-06-06
- … 14 more at https://npm.io/package/assure-ui/versions

## README

# Assure - UI Library

This is a UI library specific to conform to Assure Services User Interface standards

## How to implement new artifacts into the Library

1. Any new artifacts can be tested with
```
    npm run build_lib
```
2.In order to push to npm, run 
```
    npm run package
```
then 
```
    npm run npm-deploy
```

*Warning, the version should be updated in the package.json 

## Component Libary

### Navigation Panel

```
    import {NavigationPanelModule} from 'assure-ui'
    imports:[NavigationPanelModule]
    exports:[NavigationPanelModule]

    <assure-navigation-panel [routes]='links'></assure-navigation-panel>
```
A Left Justified Navigation panel. 

### Window-Card
```
    import {WindowCardModule} from 'assure-ui'
    imports:[WindowCardModule]
    exports:[WindowCardModule]

    <assure-window-card><assure-window-card>
```
A large card that will be the wrapper for each page.

### Deal Card
```
    import {DealCardModule} from 'assure-ui'
    imports:[DealCardModule]
    exports:[DealCardModule]

    <assure-deal-card [name]="'Deal One'" [estimatedCloseDate]= "'09/23/1993'" [funded]= 2000 [targetAmount]=4000 [invites]=2 [comitted]=3 [completed]=2 [status]="'cl'">
    </assure-deal-card>

```
An Card used for showing Deal Only Information

    -@Input() name: String = 'Deal Name';
        - Input for Deal Name
    -@Input() estimatedCloseDate: String = 'Closing Date';
        - Input for estimatedCloseDate
    -@Input() funded: Number = 0;
        - Input for funded amount
    -@Input() targetAmount: Number = 0;
        - Input for target Amount
    -@Input() invites: Number = 0;
        - Input for invites
    -@Input() comitted: Number = 0;
        - Input for comitted
    -@Input() completed: Number = 0;
        - Input for completed
    -@Input() status: String = 'Deal Status';
        - Input for status
 

### Investment Card
```
    import {InvestmentCardModule} from 'assure-ui'
    imports:[InvestmentCardModule]
    exports:[InvestmentCardModule]

    <assure-investment-card>
  </assure-investment-card>
```
An Card used for showing Investment Only Information

   - @Input() readyToSign: Boolean = false;
    - Boolean to pass in when you want the Sign Text to show up on the card
   - @Input() isDocumentSigned: Boolean = false;
    - Boolean to pass in when you want to show a signed text to show up on the card
   - @Input() signing_URL: String = '';
    - String to pass in signing base url path
   - @Input() investment_id: String = '';
    - string to pass in investment id to generate proper information
   - @Output() RouteLink: EventEmitter<any> = new EventEmitter();
    - Listener that returns back correct URL to redirect to from event click
### Inner-Card
```
    import {InnerCardModule} from 'assure-ui'
    imports:[InnerCardModule]
    exports:[InnerCardModule]
    
    <assure-inner-card>
    <div style="display: flex; flex-direction: column;">
      <div>
        hai
      </div>
      <div>
        test
      </div>
    </div>
  </assure-inner-card>
```
A large card that will be the wrapper for each page. 

### Info-Display
```
    import {InfoDisplayModule} from 'assure-ui'
    imports:[InfoDisplayModule]
    exports:[InfoDisplayModule]

    <assure-info-display [role]="'danger'" [showCancel]="true">
    <info-display-title>This is a test!</info-display-title>
    This is the content of the test. :)
     </assure-info-display>
```
An Item for infomation display, more specifically, Alerts, Notices, etc.

### Search-Bar 
```
    import {SearchBarModule} from 'assure-ui'
    imports:[SearchBarModule]
    exports:[SearchBarModule]

    <assure-search-bar [phrase]='"Sch"'></assure-search-bar>    
```

A rounded search bar that has a input variable as 'phrase' to define the Placeholder in the searchbar

These CSS Varibles are required to show the search-bar correctly 
1. --app-accent-buttons
2. --app-font-regular

## Coming Soon
- [ ] Progess Bar
- [ ] Notification Item
- [ ] Large Card Single Line Information

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