# Components

<ol>
  <li>zui-autocomplete</li>
  <li>zui-button</li>
  <li>zui-chart</li>
  <li>zui-checkbox</li>
  <li>zui-chip</li>
  <li>zui-date-time-picker</li>
  <li>zui-dialog</li>
  <li>zui-excel</li>
  <li>zui-input</li>
  <li>zui-loading</li>
  <li>zui-menu</li>
  <li>zui-pdf</li>
  <li>zui-popover</li>
  <li>zui-print</li>
  <li>zui-radio</li>
  <li>zui-select</li>
  <li>zui-sidenav</li>
  <li>zui-table</li>
  <li>zui-tabs</li>
  <li>zui-template</li>
  <li>zui-toast</li>
  <li>zui-upload</li>

  <!-- <li>zui-auth0</li> -->
</ol>

# Services

<ol>
  <li>ZuiAxios</li>
  <li>ZuiDirective</li>
  <li>ZuiEvent</li>
  <li>ZuiGraphQL</li>
  <li>ZuiPermission</li>
  <li>ZuiPipe</li>
  <li>ZuiSocket</li>
  <li>ZuiStorage</li>
  <li>ZuiTranslate</li>
  <li>ZuiUtility</li>
</ol>

# Installation

## Prerequisites

- Node `v19`
- Angular `v15`

## Install package

1. `npm install @material-zui/angular` or `yarn add @material-zui/angular`
2. Add css style by modify `angular.json` file

   ```json
   {
     "application-name": {
       "projectType": "application",
       "architect": {
         "build": {
           "options": {
             // style here
             "styles": ["node_modules/@material-zui/angular/assets/scss/material-zui-angular.scss"]
           }
         }
       }
     }
   }
   ```

3. Done!! &#128513;

# Icons

- Material icon: https://mui.com/components/material-icons
  - Ex: `check`, `check_box`, etc...
- Animation icon: https://icons8.com/preloaders

# Libs

- @material-zui/cli: <https://www.npmjs.com/package/@material-zui/cli>
- @material-zui/core: <https://www.npmjs.com/package/@material-zui/core>
- @material-zui/node: <https://www.npmjs.com/package/@material-zui/node>
- @material-zui/angular: <https://www.npmjs.com/package/@material-zui/angular>