npm package: @laberry/lab-material
Description: Baixe o boilerplate para iniciar o admin.
Latest version: 1.0.0-rc.2

# LabAdmin

## Install

Baixe o boilerplate para iniciar o admin.

`git clone https://gitlab.com/lab123/lab-admin-boilerplate.git`

Dê `npm i` para instalar as dependencias.

## Panel

`import {PanelModule} from '@laberry/lab-material';`

### Components

#### LabPanel

selector: `lab-panel`

| Propriedades    |
|----------|
| @Input() navMenu: IMenuItem |

#### LabPanelTitle

selector: `lab-panel-title`

#### LabPanelNav

selector: `lab-panel-nav`

#### LabPanelContent

selector: `lab-panel-content`

### Interfaces

#### IMenuItem

| Propriedades |
|----------|
| name: string |
| icon?: string |
| active?: boolean |
| route?: string |
| items?: IMenuItem[] |

### ***Exemplo***

 ```html
<lab-panel [navMenu]="menu">
  <lab-panel-title>
    Laberry SDK
  </lab-panel-title>

  <lab-panel-nav>
    <ul>
      <li>
        <lab-hub-message [seeAll]="actionMessage()">
          <ng-container *ngFor="let item of hubMessage">
            <button mat-list-item>
              <lab-avatar mat-list-icon>
                <img class="avatardefault" [src]="item.image">
              </lab-avatar>
              <h4 mat-line [innerHTML]="item.message"></h4>
              <time mat-line>
                <mat-icon mat-list-icon>access_time</mat-icon>
                {{ item.send_date | date:'EEEE, d \' de \' MMMM  | h\'h\'mm' }}
              </time>
            </button>
          </ng-container>
        </lab-hub-message>
      </li>
      <li>
        <lab-hub-notification [seeAll]="actionNotification()">
          <button  mat-list-item>
            <mat-icon mat-list-icon color="accent">folder</mat-icon>
            <h4 mat-line><strong>Hospital da Luz</strong> e <strong>Maria regina</strong> realizaram um match</h4>
            <time mat-line>
              <mat-icon mat-list-icon>access_time</mat-icon>
              Quarta-feira, 18 de novembro | 14h00
            </time>
          </button>
        </lab-hub-notification>
      </li>
      <li class="divider">
        <lab-nav-user>

          <button mat-menu-item>
            <mat-icon>person</mat-icon>
            Perfil do Usuário
          </button>

          <button mat-menu-item>
            <mat-icon>exit_to_app</mat-icon>
            Sair
          </button>

        </lab-nav-user>
      </li>
    </ul>
  </lab-panel-nav>

  <lab-panel-content>
    <router-outlet></router-outlet>
  </lab-panel-content>
</lab-panel>


 ```

----

## NotificationService

Serviço para disparar mensagens para o usuário.

### Metodos

| Parameters   |    Type   ||
|----------|:-------------:|------:|
| error(metodo error() apenas) | Error \| IApiTransportError | Erro para mostrar no snackbar. |
| message | string | Mensagem para mostrar no snackbar. |
| config? | MatSnackBarConfig\<any> |    Configurações adicionais para o snackbar.    |
| action | string = 'Fechar'| Label para botão do snackbar. |

| Return |
|----------|
| MatSnackBarRef\<SimpleSnackBar> |

----

## Hub

`import {HubModule} from '@laberry/lab-material';`

Component para usar com `mat-menu`, normalmente usado no header para ver notificações ou as ultimas mensagens.

### Components

selector: `lab-hub`

### ***Exemplo***

 ```html
  <mat-menu>
    <lab-hub>
      <mat-card-header>
        <mat-card-title>Últimas Mensagens</mat-card-title>
      </mat-card-header>

      <mat-card-content>
        <mat-action-list>
          <button  mat-list-item>

            <!-- Avatar -->
            <lab-avatar mat-list-icon>
              <img src="" alt="Avatar">
            </lab-avatar>

            <!-- OU Icone -->
            <mat-icon mat-list-icon color="accent">
              folder
            </mat-icon>

            <h4 mat-line>Opa! Beleza?</h4>

            <time mat-line>
              <mat-icon mat-list-icon>access_time</mat-icon>
              Quarta-feira, 18 de novembro | 14h00
            </time>
          </button>
        </mat-action-list>

      </mat-card-content>
      <mat-card-actions>
        <button mat-button>
          Ver todos
          <mat-icon>arrow_forward_ios</mat-icon>
        </button>
      </mat-card-actions>
    </lab-hub>
  </mat-menu>
 ```

----

## Hub Message

`import {HubMessageModule} from '@laberry/lab-material';`

### Components

#### HubMessageComponent

selector: `lab-hub-message`

| Propriedades |
|----------|
| @Input() seeAll: Function |

### ***Exemplo***

```html
  <lab-hub-message [seeAll]="actionMessage()">
    <ng-container *ngFor="let item of hubMessage">
      <button mat-list-item>
        <lab-avatar mat-list-icon>
          <img class="avatardefault" [src]="item.image">
        </lab-avatar>
        <h4 mat-line [innerHTML]="item.message"></h4>
        <time mat-line><mat-icon mat-list-icon>access_time</mat-icon> {{ item.send_date | date:'EEEE, d \' de \' MMMM  | h\'h\'mm' }} </time>
      </button>
    </ng-container>
  </lab-hub-message>
```

----

## Hub Notification

`import {HubNotificationModule} from '@laberry/lab-material';`

### Components

#### HubNotificationComponent

selector: `lab-hub-notification`

| Propriedades |
|----------|
| @Input() seeAll: Function |

### ***Exemplo***

```html
  <lab-hub-notification [seeAll]="actionNotification()">
    <button  mat-list-item>
      <mat-icon mat-list-icon color="accent">folder</mat-icon>
      <h4 mat-line><strong>Hospital da Luz</strong> e <strong>Maria regina</strong> realizaram um match</h4>
      <time mat-line><mat-icon mat-list-icon>access_time</mat-icon> Quarta-feira, 18 de novembro | 14h00 </time>
    </button>
  </lab-hub-notification>
```

----

## Avatar Component

`import {AvatarModule} from '@laberry/lab-material';`

Component para criar avatar de usuário.

selector: `lab-avatar`

### ***Exemplo***

```html
  <lab-avatar>
    <img src="../../../../assets/avatar@2x.png" alt="Avatar">
  </lab-avatar>
```

----

## Modal Components

`import {LabModalModule} from '@laberry/lab-material';`

Essa é a estrutura de modal para ser injetada no metodo do `open` do serviço `MatDialog`.

### Components

#### ModalComponent

selector: `lab-modal`

#### ModalHeaderComponent

selector: `lab-modal-header`

| Propriedades |
|----------|
| @Input() disableClose:boolean = false |

#### ModalContentComponent

selector: `lab-modal-content`

Esse component está preparado para receber texto e o component `mat-tab-group`.

#### ModalFooterComponent

selector: `lab-modal-footer`

### ***Exemplo***

```html
  <lab-modal-header>
    <h1 mat-dialog-title>Modal Lab</h1>
  </lab-modal-header>

  <lab-modal-content>
    Qualquer conteudo

    OU

    <!-- Tabs -->
    <mat-tab-group>
      <mat-tab label="First"> Content 1 </mat-tab>
      <mat-tab label="Second"> Content 2 </mat-tab>
      <mat-tab label="Third"> Content 3 </mat-tab>
    </mat-tab-group>
  </lab-modal-content>

  <lab-modal-footer>
    <button
      mat-button
      [mat-dialog-close]="true">
      CANCELAR
    </button>
    <button
      mat-raised-button
      color="accent"
      [mat-dialog-close]="true">
      SALVAR
    </button>
  </lab-modal-footer>
```