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 = 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