npm package: @gmrs/window-menu-gmr
Description: ventana de menu con N niveles
Author: irvin uriel
Latest version: 0.0.6

# Window-menu-gmr

Ventana de menu aplicable a cualquier etiqueta html con N niveles de ventanas para angular 7 en adelante

### Installation

Esta version requiere de [Node.js](https://nodejs.org/) v4+ para correr.

Instale las dependencias e inicie el servidor.

```sh
$ cd <tuProyecto>
$ npm install @gmrs/window-menu-gmr
$ ng serve
```

### Modelos e Interfaces

Los modelos son clases que contiene la libreria

```sh
export class WindowMenuModel {
  //Variable que contiene la lista de opciones para el menu
  private items: WindowItemModel[];

  //metodo que agrega una opcion nueva al menu con su funcion Clic
  addItemWithFunction
  (btnName: string, functionClick: (btnName?: string) => void)
  : WindowMenuModel;
  
  //metodo que agrega una opcion nueva al menu que al dar clic abrira otro nuevo menu
  addItemWithNewMenu(btnName: string): WindowMenuModel;

  //metodo que retorna la posicion de la ventana buscandolo por su nombre
  getItemMenuModelName(btnName: string): WindowMenuModel;

  //metodo que agrega una lista de WindowItemModel
  set setWindowItemsModel(items: WindowItemModel[]);

  //metodo que retorna toda la lista de WindowItemModel 
  get getWindowItemsModel();
}

interface WindowModel { windowMenuModel: WindowMenuModel; }

interface FunctionModel { function: (btnName?: string) => void; }

export interface WindowItemModel {
  btnName: string;
  clickEvent: FunctionModel | WindowModel;
}

```

### Inputs y Outputs

A continuacion se describen los inputs y outputs de la librería

| Inputs | Descripción |
| ------ | ------ |
| @Input() windowMenuModel: WindowMenuModel | Es obligatorio mandar la lista de menus para que se puedan ver con el modelo WindowMenuModel |

| Outputs | Descripción |
| ------ | ------ |
| n/a | ... |

### Como usar
Import => import { WindowMenuGmrModule } from '@gmrs/window-menu-gmr';


Implementar el modulo WindowMenuGmrModule dentro de tu modulo principal y en en el HTML poner la etiqueta window-menu-gmr
```sh
<window-menu-gmr></window-menu-gmr>
```

en el TS generar la lista para crear el menu como en el ejemplo:
   - Vertebrates
     - Fishes
        - Baikal oilfish
        - Bala shark
        - Ballan wrasse
        - Bamboo shark
        - Banded killifish
     - Amphibians
        - Sonoran desert toad
        - Western toad
        - Arroyo toad
        - Yosemite toad
   - Invertebrates
     - Insects
     - Molluscs
     - Crustaceans
     - Corals
     - Arachnids
     - Velvet worms
     - Horseshoe crabs
```sh
this.windowMenuModel = new WindowMenuModel();
    windowMenuModel.addItemWithNewMenu('Vertebrates')
      .addItemWithNewMenu('Fishes')
      .addItemWithFunction('Baikal oilfish', this.clickEvent)
      .addItemWithFunction('Bala shark', this.clickEvent)
      .addItemWithFunction('Ballan wrasse', this.clickEvent)
      .addItemWithFunction('Bamboo shark', this.clickEvent)
      .addItemWithFunction('Banded killifish', this.clickEvent);

    windowMenuModel.getItemMenuModelName('Vertebrates')
      .addItemWithNewMenu('Amphibians')
      .addItemWithFunction('Sonoran desert toad', this.clickEvent)
      .addItemWithFunction('Western toad', this.clickEvent)
      .addItemWithFunction('Arroyo toad', this.clickEvent)
      .addItemWithFunction('Yosemite toad', this.clickEvent);
      
    windowMenuModel.addItemWithNewMenu('Invertebrates')
      .addItemWithFunction('Insects', this.clickEvent)
      .addItemWithFunction('Molluscs', this.clickEvent)
      .addItemWithFunction('Crustaceans', this.clickEvent)
      .addItemWithFunction('Corals', this.clickEvent)
      .addItemWithFunction('Arachnids', this.clickEvent)
      .addItemWithFunction('Velvet worms', this.clickEvent)
      .addItemWithFunction('Horseshoe crabs', this.clickEvent);
      
    //generar una funcion para prueba
    clickEvent(btnName: string) {
        console.log(btnName);
    }
```

agregar la variable windowMenuModel con la lista creada al input de la etiqueta window-menu-gmr y asignarle una variable a la etiqueta con el #.
Donde se va a usar el menu al dar clic se tiene que agregar como input matMenuTriggerFor y pasarle el parentMenu de window-menu-gmr para que este funcione.
```sh
<window-menu-gmr [windowMenuModel]="windowMenuModel" #appWindowMenu></window-menu-gmr>

<button [matMenuTriggerFor]="appWindowMenu.parentMenu"> click</button>
```

nota: si trae errores al compilar, agregar en su modulo del proyecto el MatMenuModule.