@bnuby/ng-bnuby

## Installation ``` npm install ng-bnuby --save ```

Usage no npm install needed!

<script type="module">
  import bnubyNgBnuby from 'https://cdn.skypack.dev/@bnuby/ng-bnuby';
</script>

README

NgBnuby Library

Installation

npm install ng-bnuby --save

Usage

step 1: Import NgBnubyModule into your app.module.ts

  @NgModule({
    imports: [
      NgBnubyModule
    ]
  })

step 2:
You are Well Done!.
Now you can Add your favorite Component. (prefix with: ng-bnuby)

<body>
  <ng-bnuby-datatable></ng-bnuby-datatable>
  <ng-bnuby-image-upload></ng-bnuby-image-upload>
</body>

Components List

1. Datatable

2. Image Upload

3. Multi Select

4. Side Bar

Components

1. Datatable Component

Dom

example.component.html

<ng-bnuby-datatable
  [table]="table"
  [headers]="headers"
  [isLoading]="isLoading"
  [itemSet]="itemSet"
></ng-bnuby-datatable>

typescript

example.component.ts

Datatable main config

table: Datatable = {
  style: {
    'background-color': 'white'
  }
};

Define Header

headers: DatatableHeaders = [
  {
    title: 'Name',
    key: 'h1'
  },
  {
    title: 'Test2',
    key: 'h2'
  },
  {
    title: 'Tools',
    key: 'tools'
  }
];

Define thead style

theadStyle: { [klass: string]: any } = {
  'border-bottom': '1px solid gray'
};

Define th style

thStyle: { [klass: string]: any } = {
  padding: '10px 10px'
};

Define loading text

loadingText: string = 'Data Loading';

Define no Data text

noDataText: string = 'No Data';

Define Table Item

itemSet: DatatableRows =  [
    {
      _item: {},
      h1: {
        title: 'Hello World'
      },
      h2: {
        title: 'Temporary 2'
      },
      tools: {
        buttons: [
          {
            html: '<i class=\'fa fa-edit\'/i>',
            callback: item => {
              console.log(item);
            }
          },
          {
            html: '<i class=\'fa fa-trash\'/i>',
            callback: item => {
              console.log(item);
            }
          },
          {
            html: '<i class=\'fa fa-info\'/i>',
            callback: item => {
              console.log(item);
            }
          }
        ]
      }
    }
  ]

Methods / Attributes

| Attribute | Description | type | default value | | - | - | - | - | | table | Use to define datatable, ex: title, style, class | Datatable | { style: { 'background-color': 'white' } }; |
| theadStyle | Use to define thead Style | CSSStyleDeclaration | { 'border-bottom': '1px solid gray' }| | thStyle | Use to define th Style | CSSStyleDeclaration | { padding: '10px 10px' }|
| tdStyle | Use to define td Style | CSSStyleDeclaration | { padding: '5px 10px', 'border-bottom': '1px solid gray' } | | * headers | Use to define datatable header | DatatableHeaders | { title: 'Name', key: 'h1' } | | loadingText | Use to define loading text | string | Data Loading | | noDataText | Use to define no data text | string | No Data | | * itemSet | Use to define Table Data | DatatableRows | { ... } | | isLoading | Use to control loading text | boolean | false |

2. Image Upload Component

Use ng-bnuby-image-upload tag selector

<ng-bnuby-image-upload></ng-bnuby-image-upload>

Methods / Attributes

| Attribute | Description | type | default value | | - | - | - | - | | title | Given a title for the image upload | string | Image Upload |
| simple | If false Use the title attr and size attr | boolean | false|
| size | Use to define image upload size | sm, md, lg, fluid | md | | uploadURL (Require) | The url that file upload. | string | '' | | uploadedCallback | Use to receive the request callback and return a string for form control value. If status true, mean upload succses, otherwise mean fail. | Funtion | (status: boolean, res: any) => string | null |
| zIndex | Use to change content (image) z-index | number | 0|

3. Multi Select Component

Use ng-bnuby-multi-select multi selector

<ng-bnuby-multi-select></ng-bnuby-multi-select>

Methods / Attributes

| Attribute | Description | type | default value | | - | - | - | - | | title | Given a title for the image upload | string | Image Upload |
| simple | If false Use the title attr and size attr | boolean | false|
| options | Use to define the options | ngBnubyOptions | [ { title: 'example', value: 'example', } ]| | placeholder | Use to define placeholder | string | example |

4. Side Bar Component

Use ng-bnuby-side-bar selector

<ng-bnuby-side-bar></ng-bnuby-side-bar>

Methods / Attributes

| Attribute | Description | type | default value | | - | - | - | - | | sideBarItems | Use SideBarItems to define the sidebar | SideBarItems | Below Example 1 |

Example 1: Basic Usage

 sideBarItems: SideBarItems = [
  [
    {
      title: 'Home',
      icon: 'fa-home',
      path: '/home'
    },
    {
      title: 'User',
      icon: 'fa-user',
      children: [
        {
          title: 'Management',
          icon: 'fa-text',
          path: '/user/user-mgt'
        },
        {
          title: 'Setting',
          icon: 'fa-text',
          path: '/user/setting'
        },
      ],
    },
  ]
 ]