From 814e2d99d470bcee4eaeb7502d935baafa6dad8a Mon Sep 17 00:00:00 2001
From: Julio Santarelli <santarellijulio@gmail.com>
Date: Wed, 2 Sep 2020 11:37:20 -0300
Subject: [PATCH 1/8] demo(puntos-inicio): maquetado y mock-data

---
 src/demo/app/app.module.ts                    |  13 +-
 src/demo/app/app.routes.ts                    |   8 +
 .../punto-inicio-main.component.html          |  36 +
 .../punto-inicio-main.component.ts            | 134 +++
 .../detalle-agenda.component.html             |  36 +
 .../detalle-agenda.component.ts               |  48 +
 .../punto-inicio-sidebar.component.html       |  14 +
 .../punto-inicio-sidebar.component.ts         |  76 ++
 .../punto-inicio/punto-inicio.component.html  |  60 ++
 .../punto-inicio/punto-inicio.component.scss  |   0
 .../punto-inicio/punto-inicio.component.ts    | 131 +++
 .../app/templates/service/agenda.service.ts   |  23 +
 src/demo/app/templates/service/agenda.ts      |  93 ++
 .../app/templates/service/mock-agendas.ts     | 839 ++++++++++++++++++
 src/demo/app/templates/service/turno.ts       |  53 ++
 15 files changed, 1562 insertions(+), 2 deletions(-)
 create mode 100644 src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.html
 create mode 100644 src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.ts
 create mode 100644 src/demo/app/templates/punto-inicio/punto-inicio-sidebar/detalle-agenda/detalle-agenda.component.html
 create mode 100644 src/demo/app/templates/punto-inicio/punto-inicio-sidebar/detalle-agenda/detalle-agenda.component.ts
 create mode 100644 src/demo/app/templates/punto-inicio/punto-inicio-sidebar/punto-inicio-sidebar.component.html
 create mode 100644 src/demo/app/templates/punto-inicio/punto-inicio-sidebar/punto-inicio-sidebar.component.ts
 create mode 100644 src/demo/app/templates/punto-inicio/punto-inicio.component.html
 create mode 100644 src/demo/app/templates/punto-inicio/punto-inicio.component.scss
 create mode 100644 src/demo/app/templates/punto-inicio/punto-inicio.component.ts
 create mode 100644 src/demo/app/templates/service/agenda.service.ts
 create mode 100644 src/demo/app/templates/service/agenda.ts
 create mode 100644 src/demo/app/templates/service/mock-agendas.ts
 create mode 100644 src/demo/app/templates/service/turno.ts

diff --git a/src/demo/app/app.module.ts b/src/demo/app/app.module.ts
index b3164c320..361cd7c90 100644
--- a/src/demo/app/app.module.ts
+++ b/src/demo/app/app.module.ts
@@ -12,6 +12,7 @@ import { Plex } from '../../lib/core/service';
 // Services
 import { ServiceDemoSelect } from './select/select.service';
 import { PacienteService } from './templates/service/paciente.service';
+import { AgendaService } from './templates/service/agenda.service';
 
 // Routes
 import { HomeDemoComponent } from './home/home.component';
@@ -53,7 +54,11 @@ import { SliderDemoComponent } from './slider/slider.component';
 import { ListadoSidebarComponent } from './templates/listado-sidebar/listado-sidebar';
 import { SidebarDetalleComponent } from './templates/listado-sidebar/sidebar/detalle/sidebar-detalle.component';
 import { MainListadoComponent } from './templates/listado-sidebar/main/listado/main-listado.component';
+import { PuntoInicioComponent } from './templates/punto-inicio/punto-inicio.component';
 import { ModalTemplateComponent } from './templates/componentes/plex-modal-template/plex-modal-template';
+import { PuntoInicioMainComponent } from './templates/punto-inicio/punto-inicio-main/punto-inicio-main.component';
+import { PuntoInicioSidebarComponent } from './templates/punto-inicio/punto-inicio-sidebar/punto-inicio-sidebar.component';
+import { DetalleAgendaComponent } from './templates/punto-inicio/punto-inicio-sidebar/detalle-agenda/detalle-agenda.component';
 import { DemoIconComponent } from './icon/icon';
 import { NavbarDemoComponent } from './navbar/navbar';
 import { HelpDemoComponent } from './help/help.component';
@@ -121,6 +126,10 @@ import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar
         SliderDemoComponent,
         ListadoSidebarComponent,
         SidebarDetalleComponent,
+        PuntoInicioComponent,
+        DetalleAgendaComponent,
+        PuntoInicioMainComponent,
+        PuntoInicioSidebarComponent,
         MainListadoComponent,
         ModalTemplateComponent,
         // Templates genéricos
@@ -161,8 +170,8 @@ import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar
         appRoutingProviders,
         ServiceDemoSelect,
         PacienteService,
-        CamaService
-
+        CamaService,
+        AgendaService
     ],
     bootstrap: [AppComponent]
 })
diff --git a/src/demo/app/app.routes.ts b/src/demo/app/app.routes.ts
index 2bf476946..8472420f7 100644
--- a/src/demo/app/app.routes.ts
+++ b/src/demo/app/app.routes.ts
@@ -36,6 +36,8 @@ import { SidebarDetalleComponent } from './templates/listado-sidebar/sidebar/det
 import { DemoIconComponent } from './icon/icon';
 import { NavbarDemoComponent } from './navbar/navbar';
 import { ModalTemplateComponent } from './templates/componentes/plex-modal-template/plex-modal-template';
+import { PuntoInicioComponent } from './templates/punto-inicio/punto-inicio.component';
+import { DetalleAgendaComponent } from './templates/punto-inicio/punto-inicio-sidebar/detalle-agenda/detalle-agenda.component';
 import { CardDemoComponent } from './card/card.component';
 import { MpiDetalleComponent } from './templates/modulos/mpi/sidebar/detalle/mpi-detalle.component';
 import { MpiAltaComponent } from './templates/modulos/mpi/main/alta/mpi-alta.component';
@@ -86,6 +88,12 @@ const appRoutes: Routes = [
     { path: 'templates/form', component: TemplateFormComponent },
     { path: 'templates/form-sidebar', component: TemplateBotoneraSidebarComponent },
     { path: 'templates/visualizacion', component: TemplateVisualizacionComponent },
+    {
+        path: 'templates/punto-inicio', component: PuntoInicioComponent,
+        children: [
+            { path: ':id', component: DetalleAgendaComponent }
+        ]
+    },
     { path: 'templates/busqueda', component: TemplateBusquedaComponent },
     { path: 'templates/mpi-maquetado/mpi-alta', component: MpiAltaComponent },
     {
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.html b/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.html
new file mode 100644
index 000000000..8ef4706d9
--- /dev/null
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.html
@@ -0,0 +1,36 @@
+<header>
+    <plex-title size="sm" titulo="Lista de agendas">
+        <plex-radio [(ngModel)]="modelo.radio" [data]="options" name="colores" type="horizontal"></plex-radio>
+        <plex-badge type="info">27/11/2020</plex-badge>
+        <plex-button type="info" icon="filter" size="sm" (click)="mostrarFiltros()"></plex-button>
+    </plex-title>
+    <plex-wrapper *ngIf="filtros === true">
+        <plex-datetime label="Ingrese la fecha" [(ngModel)]="tModel.fechaHora" name="fechaHora" required>
+        </plex-datetime>
+        <plex-select grow="2" [(ngModel)]="modelo1.select" [data]="opciones"
+                     label-field="nombre + ' (' + continente + ')'" label="Seleccione una prestación">
+        </plex-select>
+        <plex-text label="Buscar paciente" [(ngModel)]="templateModel2.nombre" name="nombre">
+        </plex-text>
+    </plex-wrapper>
+</header>
+<plex-list height="60%">
+    <plex-heading>
+        <b></b>
+        <b label></b>
+        <b label></b>
+        <b></b>
+    </plex-heading>
+    <plex-item *ngFor="let agenda of agendas$ | async" (click)="selected(agenda)">
+        <plex-icon name="calendario-tilde" type="success"></plex-icon>
+        <plex-label titulo="{{ agenda.horaInicio }} a {{ agenda.horaFin }}" subtitulo="Duración: {{ duracion }}">
+        </plex-label>
+        <plex-label *ngFor="let profesional of agenda.profesionales" titulo="{{ agenda.tipoPrestaciones }}"
+                    subtitulo="Profesional: {{ profesional.apellido }}, {{ profesional.nombre }}">
+        </plex-label>
+        <plex-badge type="success">{{ agenda.estado }}</plex-badge>
+        <plex-badge *ngFor="let bloque of agenda.bloques" type="info">Pacientes
+            {{ bloque.restantesDelDia }}/{{ bloque.accesoDirectoDelDia }}
+        </plex-badge>
+    </plex-item>
+</plex-list>
\ No newline at end of file
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.ts b/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.ts
new file mode 100644
index 000000000..06d534565
--- /dev/null
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.ts
@@ -0,0 +1,134 @@
+import { Component, OnInit } from '@angular/core';
+import { AgendaService } from './../../service/agenda.service';
+import { Agenda } from './../../service/agenda';
+import { Plex } from './../../../../../lib/core/service';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { EventEmitter, Output } from '@angular/core';
+
+@Component({
+    selector: 'plex-punto-inicio-main',
+    templateUrl: './punto-inicio-main.component.html',
+})
+export class PuntoInicioMainComponent implements OnInit {
+
+    sidebarValue = 10;
+    filtros = false;
+    @Output() eventoSidebar = new EventEmitter<number>();
+
+    agendas$: Observable<Agenda[]>;
+    selectedId: string;
+
+    public duracion = '1 hs. 34 min.';
+    public plex: Plex;
+    public tModel: any;
+    public opciones: any[];
+    public options: any[];
+    public modelo1 = { select: null };
+    public modelo2 = {
+        select: null,
+        soloLectura: false,
+        selectMultiple: null
+    };
+    // public prueba = '';
+    public templateModel2: any;
+    public modelo: any;
+
+    public showModal = false;
+
+    foco = 'main';
+    public prueba = '';
+    public cambio = '';
+
+    updateMaxHora() {
+        this.tModel.minHora = moment().add(30, 'minutes').add(1, 'days');
+    }
+
+    horaPlus() {
+        return moment(this.tModel.hora).add(30, 'minutes');
+    }
+
+    onChange() {
+        this.plex.info('success', 'Este cartel se demoro un segundo en aparecer después de escribir.');
+    }
+
+
+    constructor(
+        private agendaService: AgendaService,
+        private router: Router,
+    ) { }
+
+    ngOnInit() {
+
+        // plex-datetime
+        this.tModel = {
+            fechaHora: null,
+            fecha: null,
+            hora: null,
+            horados: null,
+            disabled: false,
+            min: new Date(1970, 0, 1),
+            minHora: moment().add(30, 'minutes'),
+            maxHora: moment().add(180, 'minutes'),
+            fechaDecounce: new Date(1970, 0, 1),
+        };
+
+        // plex-phone
+        // plex-float
+        this.tModel = { valor: null };
+
+        // Radio
+        this.options = [
+            {
+                label: 'todas',
+                key: 1,
+            },
+            {
+                label: 'mías',
+                key: 2,
+            },
+        ]
+
+        // plex-select
+        this.opciones = [{
+            id: 1,
+            nombre: 'Consulta de medicina general',
+            continente: 'Prestación',
+        },
+        {
+            id: 2,
+            nombre: 'Exámen médico del adulto',
+            continente: 'Prestación',
+        },
+        {
+            id: 3,
+            nombre: 'Consulta de niño sano',
+            continente: 'Prestación',
+        }];
+
+        this.modelo1.select = this.modelo2.select = this.opciones[1];
+
+        // plex-text
+        this.templateModel2 = { nombre: null, min: 10, max: 15 };
+
+        // plex-bool
+        this.modelo = { checkbox: false, slide: false };
+
+        this.agendas$ = this.agendaService.getAgendas();
+    }
+
+    enviarSidebar() {
+        this.eventoSidebar.emit(this.sidebarValue);
+        this.sidebarValue = 8;
+    }
+
+    selected(agenda) {
+        this.selectedId = agenda.id;
+        this.router.navigate(['templates', 'punto-inicio', this.selectedId]);
+        this.enviarSidebar();
+    }
+
+    mostrarFiltros() {
+        this.filtros = !this.filtros;
+    }
+}
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/detalle-agenda/detalle-agenda.component.html b/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/detalle-agenda/detalle-agenda.component.html
new file mode 100644
index 000000000..8bc3564bb
--- /dev/null
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/detalle-agenda/detalle-agenda.component.html
@@ -0,0 +1,36 @@
+<ng-container *ngIf="agenda$ | async as agenda">
+    <plex-options [items]="options">
+
+    </plex-options>
+    <section justify="betweeen" class="w-100 my-4">
+        <plex-button type="info" icon="chevron-left" size="sm"></plex-button>
+        <div class="mx-4 w-100 d-flex justify-content-center">
+
+            <plex-label titulo="{{ agenda.dia}} {{ agenda.fecha }} | {{ agenda.horaInicio }} - {{ agenda.horaFin }} hs."
+                        subtitulo="{{ agenda.tipoPrestaciones }}" icon="account" size="lg" type="info"></plex-label>
+        </div>
+        <plex-button type="info" icon="chevron-right" size="sm"></plex-button>
+    </section>
+    <hr>
+
+    <plex-list>
+        <plex-heading>
+            <b label></b>
+            <b label></b>
+            <b label></b>
+            <b label></b>
+        </plex-heading>
+        <plex-item *ngFor="let turno of agenda.turnos">
+            <plex-label titulo="{{ turno.horaInicio }}" subtitulo="{{ turno.prestacion}} {{ turno.profesional }}">
+            </plex-label>
+            <plex-label titulo="Paciente" subtitulo="{{ turno.paciente }} {{ turno.dni }}"></plex-label>
+            <plex-label titulo="Nro. Carpeta" subtitulo="{{ turno.carpeta }} {{ turno.efector }}"></plex-label>
+            <plex-badge type="success">{{ turno.estado }}</plex-badge>
+            <plex-badge type="info">{{ turno.procedencia }}</plex-badge>
+            <plex-badge *ngIf="turno.prioritario == true" type="danger">prioritario</plex-badge>
+            <plex-button size="sm" type="warning" icon="pencil"></plex-button>
+            <plex-button size="sm" type="info" icon="history"></plex-button>
+            <plex-button size="sm" type="success" icon="documento"></plex-button>
+        </plex-item>
+    </plex-list>
+</ng-container>
\ No newline at end of file
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/detalle-agenda/detalle-agenda.component.ts b/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/detalle-agenda/detalle-agenda.component.ts
new file mode 100644
index 000000000..428d50f84
--- /dev/null
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/detalle-agenda/detalle-agenda.component.ts
@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+import { Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import { AgendaService } from './../../../service/agenda.service';
+import { Agenda } from './../../../service/agenda';
+
+@Component({
+    selector: 'plex-detalle-agenda',
+    templateUrl: './detalle-agenda.component.html',
+})
+export class DetalleAgendaComponent implements OnInit {
+
+    public listadoAgenda: Agenda[];
+    agenda$: Observable<Agenda>;
+
+    public options = [
+        {
+            label: 'turnos vigentes',
+            key: '1'
+        },
+        {
+            label: 'historial de turnos',
+            key: '2'
+        },
+    ];
+
+
+    constructor(
+        private agendaService: AgendaService,
+        private route: ActivatedRoute,
+        private router: Router,
+    ) { }
+
+    ngOnInit() {
+
+        // mostrar detalle agenda
+        this.agenda$ = this.route.paramMap.pipe(
+            switchMap((params: ParamMap) =>
+                this.agendaService.getAgenda(params.get('id')))
+        );
+    }
+
+    gotoAgendas(agenda: Agenda) {
+        const agendaId = agenda ? agenda.id : null;
+        this.router.navigate(['/punto-inicio-sidebar', { id: agendaId }]);
+    }
+}
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/punto-inicio-sidebar.component.html b/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/punto-inicio-sidebar.component.html
new file mode 100644
index 000000000..e49534290
--- /dev/null
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/punto-inicio-sidebar.component.html
@@ -0,0 +1,14 @@
+<plex-wrapper>
+    <plex-datetime label="Ingrese la fecha" [(ngModel)]="tModel.fechaHora" name="fechaHora" required>
+    </plex-datetime>
+    <plex-select grow="3" [(ngModel)]="modelo1.select" [data]="opciones" label-field="nombre + ' (' + continente + ')'"
+                 label="Seleccione una prestación">
+    </plex-select>
+    <plex-text label="Buscar paciente" [(ngModel)]="templateModel2.nombre" name="nombre">
+    </plex-text>
+</plex-wrapper>
+<section justify="center" class="align-items-center h-50">
+    <plex-label size="xl" type="info" titulo="Busca y selecciona un paciente"
+                subtitulo="prdras ver detalles del registro" icon="magnify" direction="column">
+    </plex-label>
+</section>
\ No newline at end of file
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/punto-inicio-sidebar.component.ts b/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/punto-inicio-sidebar.component.ts
new file mode 100644
index 000000000..91d0b221b
--- /dev/null
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/punto-inicio-sidebar.component.ts
@@ -0,0 +1,76 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+import { Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import { AgendaService } from './../../service/agenda.service';
+import { Agenda } from './../../service/agenda';
+import { DropdownItem } from '../../../../../lib/dropdown/dropdown-item.inteface';
+
+@Component({
+    selector: 'plex-punto-inicio-sidebar',
+    templateUrl: './punto-inicio-sidebar.component.html',
+})
+export class PuntoInicioSidebarComponent implements OnInit {
+
+    public listadoAgenda: Agenda[];
+    public items: DropdownItem[];
+    public modelo1;
+    public templateModel2;
+    public opciones: any[];
+    public tModel;
+    agenda$: Observable<Agenda>;
+
+    constructor(
+        private agendaService: AgendaService,
+        private route: ActivatedRoute,
+        private router: Router,
+    ) { }
+
+    ngOnInit() {
+        // plex-dropdown
+        this.items = [
+            {
+                label: 'opcion 1',
+                icon: 'star',
+                route: 'https://ui.andes.gob.ar',
+                handler: (() => {
+                    alert('Este es un handler');
+                })
+            }
+        ];
+
+        // plex-datetime
+        this.tModel = {
+            fechaHora: null,
+            fecha: null,
+            hora: null,
+            horados: null,
+            disabled: false,
+            min: new Date(1970, 0, 1),
+            minHora: moment().add(30, 'minutes'),
+            maxHora: moment().add(180, 'minutes'),
+            fechaDecounce: new Date(1970, 0, 1),
+        };
+
+
+        // plex-select
+        this.opciones = [{
+            id: 1,
+            nombre: 'Argentina',
+            continente: 'Latinoamerica',
+        },
+        {
+            id: 2,
+            nombre: 'Brasil',
+            continente: 'Latinoamerica',
+        },
+        {
+            id: 3,
+            nombre: 'Hospital Provincial Neuquen "Dr. Eduardo Castro Rendón"',
+            continente: 'Latinoamerica',
+        }];
+
+        // plex-text
+        this.templateModel2 = { nombre: null, min: 10, max: 15 };
+    }
+}
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio.component.html b/src/demo/app/templates/punto-inicio/punto-inicio.component.html
new file mode 100644
index 000000000..44bfddbf9
--- /dev/null
+++ b/src/demo/app/templates/punto-inicio/punto-inicio.component.html
@@ -0,0 +1,60 @@
+<plex-layout main="{{ sidebarValue }}">
+    <plex-layout-main>
+        <plex-title titulo="RUP | Punto de inicio">
+            <plex-button class="ml-2" type="info">Mapa de camas</plex-button>
+            <plex-button class="ml-2" type="info">Huds</plex-button>
+            <plex-button class="ml-2" type="warning">Inicio Andes</plex-button>
+        </plex-title>
+        <plex-grid cols="4" size="md">
+            <!-- plex-card -->
+            <plex-grid type="" span="1">
+                <plex-card *ngFor="let item of cards" align="start">
+                    <plex-label size="lg" type="default" titulo="{{ item.titulo }}" subtitulo="{{ item.subtitulo }}"
+                                icon="{{ item.icono }}">
+                    </plex-label>
+                    <plex-button type="info" label="{{ item.botones | slice:0:1 }}"></plex-button>
+                    <plex-button type="info" label="{{ item.botones | slice:1:2 }}"></plex-button>
+                </plex-card>
+                <ng-container *ngFor="let item of cards | slice:2:3">
+                    <plex-card size="lg" type="dark" align="center">
+                        <plex-badge type="warning">{{ item.estado }}</plex-badge>
+                        <plex-label size="lg" type="default" titulo="{{ item.fecha }}" subtitulo="{{ item.subtitulo }}">
+                        </plex-label>
+                    </plex-card>
+                </ng-container>
+            </plex-grid>
+            <!-- Listado -->
+            <section span="3">
+                <plex-punto-inicio-main (eventoSidebar)="recibirSidebar($event)">
+                </plex-punto-inicio-main>
+            </section>
+        </plex-grid>
+    </plex-layout-main>
+    <plex-layout-sidebar type="invert">
+        <plex-title titulo="{{sidebarValue === 10 ? 'Buscar' : 'Turnos'}}">
+            <plex-button size="sm" type="warning" label="huds paciente"></plex-button>
+            <plex-button size="sm" type="info" label="paciente sin turno"></plex-button>
+            <!--<plex-dropdown size="sm" type="info" label="sin turno" [items]="items"></plex-dropdown>-->
+            <plex-button type="danger" icon="close" size="sm" (click)="contraerSidebar()"></plex-button>
+        </plex-title>
+        <ng-container *ngIf="sidebarValue === 10">
+            <plex-wrapper>
+                <plex-datetime label="Ingrese la fecha" [(ngModel)]="tModel.fechaHora" name="fechaHora" required>
+                </plex-datetime>
+                <plex-select grow="3" [(ngModel)]="modelo1.select" [data]="opciones"
+                             label-field="nombre + ' (' + continente + ')'" label="Seleccione una prestación">
+                </plex-select>
+                <plex-text label="Buscar paciente" [(ngModel)]="templateModel2.nombre" name="nombre">
+                </plex-text>
+            </plex-wrapper>
+            <section justify="center" class="align-items-center h-50">
+                <plex-label size="xl" type="info" titulo="Busca y selecciona un paciente"
+                            subtitulo="prdras ver detalles del registro" icon="magnify" direction="column">
+                </plex-label>
+            </section>
+        </ng-container>
+        <ng-container *ngIf="sidebarValue === 8">
+            <router-outlet></router-outlet>
+        </ng-container>
+    </plex-layout-sidebar>
+</plex-layout>
\ No newline at end of file
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio.component.scss b/src/demo/app/templates/punto-inicio/punto-inicio.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio.component.ts b/src/demo/app/templates/punto-inicio/punto-inicio.component.ts
new file mode 100644
index 000000000..8f94303b3
--- /dev/null
+++ b/src/demo/app/templates/punto-inicio/punto-inicio.component.ts
@@ -0,0 +1,131 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
+
+// Servicios y modelo
+import { AgendaService } from '../service/agenda.service';
+import { Agenda } from '../service/agenda';
+import { PacienteService } from '../service/paciente.service';
+import { Paciente } from '../service/paciente';
+import { Plex } from './../../../../lib/core/service';
+import { EventEmitter, Output } from '@angular/core';
+
+@Component({
+    selector: 'plex-punto-inicio',
+    templateUrl: './punto-inicio.component.html',
+    styleUrls: ['./punto-inicio.component.scss']
+})
+export class PuntoInicioComponent implements OnInit {
+
+    sidebarValue = 10;
+    @Output() eventoSidebar = new EventEmitter<number>();
+
+
+    recibirSidebar($event) {
+        this.sidebarValue = $event;
+        console.log(this.sidebarValue);
+    }
+
+    contraerSidebar() {
+        this.eventoSidebar.emit(this.sidebarValue);
+        this.sidebarValue = 10;
+    }
+
+    cards = [
+        {
+            titulo: 'Agendas y turnos', subtitulo: 'Propias y de otros profesionales', icono: 'star', botones: ['opcion-1', 'opcion-2'], estado: 'pendiente', fecha: '27/11/20'
+        },
+        {
+            titulo: 'Solicitudes', subtitulo: 'Desde organizaciones o ámbitos ', icono: 'account', botones: ['opcion-1', 'opcion-2'], estado: 'pendiente', fecha: '27/11/20'
+        },
+        {
+            titulo: 'Interconsultas', subtitulo: 'Recibidas y realizadas', icono: 'clock', botones: ['opcion-1', 'opcion-2'], estado: 'pendiente', fecha: '27/11/20'
+        },
+    ];
+
+    constructor(
+        private agendaService: AgendaService,
+        private pacienteService: PacienteService,
+        private route: ActivatedRoute,
+        private plex: Plex
+    ) { }
+
+    ngOnInit() {
+        // plex-datetime
+        this.tModel = {
+            fechaHora: null,
+            fecha: null,
+            hora: null,
+            horados: null,
+            disabled: false,
+            min: new Date(1970, 0, 1),
+            minHora: moment().add(30, 'minutes'),
+            maxHora: moment().add(180, 'minutes'),
+            fechaDecounce: new Date(1970, 0, 1),
+        };
+
+        // plex-phone
+        // plex-float
+        this.tModel = { valor: null };
+
+        // plex-select
+        this.opciones = [{
+            id: 1,
+            nombre: 'Consulta de medicina general',
+            continente: 'Prestación',
+        },
+        {
+            id: 2,
+            nombre: 'Exámen médico del adulto',
+            continente: 'Prestación',
+        },
+        {
+            id: 3,
+            nombre: 'Consulta de niño sano',
+            continente: 'Prestación',
+        }];
+
+        this.modelo1.select = this.modelo2.select = this.opciones[1];
+
+        // plex-text
+        this.templateModel2 = { nombre: null, min: 10, max: 15 };
+
+        // plex-bool
+        this.modelo = { checkbox: false, slide: false };
+    }
+
+
+    public tModel: any;
+    public opciones: any[];
+    public modelo1 = { select: null };
+    public modelo2 = {
+        select: null,
+        soloLectura: false,
+        selectMultiple: null
+    };
+    // public prueba = '';
+    public templateModel2: any;
+    public modelo: any;
+
+    public showModal = false;
+
+    // public listadoPaciente: Paciente[];
+    pacientes$: Observable<Paciente[]>;
+    agendas$: Observable<Agenda[]>;
+    foco = 'main';
+    public prueba = '';
+    public cambio = '';
+
+    updateMaxHora() {
+        this.tModel.minHora = moment().add(30, 'minutes').add(1, 'days');
+    }
+
+    horaPlus() {
+        return moment(this.tModel.hora).add(30, 'minutes');
+    }
+
+    onChange() {
+        this.plex.info('success', 'Este cartel se demoro un segundo en aparecer después de escribir.');
+    }
+
+}
diff --git a/src/demo/app/templates/service/agenda.service.ts b/src/demo/app/templates/service/agenda.service.ts
new file mode 100644
index 000000000..08a76e7b0
--- /dev/null
+++ b/src/demo/app/templates/service/agenda.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { Agenda } from './agenda';
+import { AGENDAS } from './mock-agendas';
+import { Observable, of } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable()
+
+export class AgendaService {
+
+    constructor() {
+    }
+
+    getAgendas(): Observable<Agenda[]> {
+        return of(AGENDAS);
+    }
+
+    getAgenda(id: number | string) {
+        return this.getAgendas().pipe(
+            map((agendas: Agenda[]) => agendas.find(agenda => agenda.id === +id))
+        );
+    }
+}
diff --git a/src/demo/app/templates/service/agenda.ts b/src/demo/app/templates/service/agenda.ts
new file mode 100644
index 000000000..c6df6648e
--- /dev/null
+++ b/src/demo/app/templates/service/agenda.ts
@@ -0,0 +1,93 @@
+export class Agenda {
+    id: number;
+    tipoPrestaciones: string;
+    profesionales: [{
+        id: string,
+        nombre: string,
+        apellido: string
+    }];
+    paciente: [{
+        id: string,
+        nombre: string,
+        apellido: string
+    }];
+    turnos: [{
+        horaInicio: string;
+        estado: string;
+        asistencia: string;
+        prestacion: string;
+        profesional: string;
+        nota: string;
+        procedencia: string;
+        prioritario: boolean;
+        paciente: string;
+        dni: number,
+        carpeta: string;
+        efector: string
+    },
+    ];
+    organizacion: {
+        id: string,
+        nombre: string
+    };
+    espacioFisico: {
+        id: string,
+        nombre: string,
+        servicio: {
+            id: string,
+            nombre: string
+        };
+        sector: {
+            id: string,
+            nombre: string
+        };
+    };
+    otroEspacioFisico: string;
+    fecha: string;
+    dia: string;
+    horaInicio: string;
+    horaFin: string;
+    intercalar: boolean;
+    bloques: [
+        {
+            id: string;
+            horaInicio: number;
+            horaFin: number;
+            cantidadTurnos: number;
+            duracionTurno: number;
+            descripcion: string;
+            tipoPrestaciones: string;
+            accesoDirectoDelDia: number;
+            accesoDirectoProgramado: number;
+            reservadoGestion: number;
+            reservadoProfesional: number;
+            restantesDelDia: number;
+            restantesProgramados: number;
+            restantesGestion: number;
+            restantesProfesional: number;
+            pacienteSimultaneos: boolean;
+            cantidadSimultaneos: number;
+            citarPorBloque: boolean;
+            cantidadBloque: number;
+            turnos: number;
+        }
+    ];
+    estado: string;
+    prePausada: string;
+    sobreturnos: string;
+    turnosDisponibles: number;
+    turnosRestantesDelDia: number;
+    turnosRestantesProgramados: number;
+    turnosRestantesGestion: number;
+    turnosRestantesProfesional: number;
+    estadosAgendas: string;
+    nota: string;
+    nominalizada: boolean;
+    dinamica: boolean;
+    cupo: number;
+    avisos: [{
+        profenionalId: string,
+        estado: string,
+        fecha: string
+    }];
+}
diff --git a/src/demo/app/templates/service/mock-agendas.ts b/src/demo/app/templates/service/mock-agendas.ts
new file mode 100644
index 000000000..6dc0a4fe0
--- /dev/null
+++ b/src/demo/app/templates/service/mock-agendas.ts
@@ -0,0 +1,839 @@
+import { Agenda } from './agenda';
+
+export const AGENDAS: Agenda[] = [
+    {
+        id: 1513,
+        tipoPrestaciones: 'Exámen médico del adulto',
+        // profesionales: IProfesional[],
+        profesionales: [{
+            id: '5u32402r',
+            nombre: 'Carlos Daniel',
+            apellido: 'Ventura'
+        }],
+        paciente: [{
+            id: '2ebqd',
+            nombre: 'Fernanda Gabriela',
+            apellido: 'Saralero Mercusi',
+        }],
+        turnos: [
+            {
+                horaInicio: '10:30 hs.',
+                estado: 'en ejecución',
+                asistencia: 'asistió',
+                prestacion: 'Exámen médico del adulto',
+                profesional: 'Molinari, Juan Martin',
+                nota: 'Esta es una nota de prueba',
+                procedencia: 'Autocitado',
+                prioritario: true,
+                paciente: 'Regueiro, María Ines',
+                dni: 31350247,
+                carpeta: '4953242',
+                efector: 'Hospital Provincial Neuquén',
+            },
+        ],
+        organizacion: {
+            id: '56u532o',
+            nombre: 'Hospital Provincial '
+        },
+        espacioFisico: {
+            id: 'String',
+            nombre: 'String',
+            servicio: {
+                id: 'String',
+                nombre: 'String'
+            },
+            sector: {
+                id: 'String',
+                nombre: 'String'
+            },
+        },
+        otroEspacioFisico: 'String',
+        fecha: '27/11/20',
+        dia: 'VIERNES',
+        horaInicio: '10:00',
+        horaFin: '13:00',
+        intercalar: true,
+        bloques: [{
+            id: 'sdad',
+            horaInicio: 10,
+            horaFin: 13,
+            cantidadTurnos: 15,
+            duracionTurno: 20,
+            descripcion: 'Esta es una descripcion del bloque de turnos',
+            tipoPrestaciones: 'Consulta de niño sano',
+            accesoDirectoDelDia: 12,
+            accesoDirectoProgramado: 8,
+            reservadoGestion: 4,
+            reservadoProfesional: 2,
+            restantesDelDia: 5,
+            restantesProgramados: 3,
+            restantesGestion: 1,
+            restantesProfesional: 2,
+            pacienteSimultaneos: true,
+            cantidadSimultaneos: 8,
+            citarPorBloque: false,
+            cantidadBloque: 3,
+            turnos: 25,
+        }],
+        estado: 'publicada',
+        prePausada: '',
+        sobreturnos: 'Sin sobreturnos',
+        turnosDisponibles: 20,
+        turnosRestantesDelDia: 12,
+        turnosRestantesProgramados: 3,
+        turnosRestantesGestion: 2,
+        turnosRestantesProfesional: 3,
+        estadosAgendas: 'disponible',
+        nota: 'Esta es una nota de prueba de la agenda',
+        nominalizada: true,
+        dinamica: true,
+        cupo: 20,
+        avisos: [{
+            profenionalId: '5i324wef',
+            estado: 'String',
+            fecha: '27/11/20'
+        }],
+    },
+    {
+        id: 1513,
+        tipoPrestaciones: 'Exámen médico del adulto',
+        // profesionales: IProfesional[],
+        profesionales: [{
+            id: '5u32402r',
+            nombre: 'Carlos Daniel',
+            apellido: 'Ventura'
+        }],
+        paciente: [{
+            id: '2ebqd',
+            nombre: 'Fernanda Gabriela',
+            apellido: 'Saralero Mercusi',
+        }],
+        turnos: [
+            {
+                horaInicio: '10:30 hs.',
+                estado: 'en ejecución',
+                asistencia: 'asistió',
+                prestacion: 'Exámen médico del adulto',
+                profesional: 'Molinari, Juan Martin',
+                nota: 'Esta es una nota de prueba',
+                procedencia: 'Autocitado',
+                prioritario: true,
+                paciente: 'Regueiro, María Ines',
+                dni: 31350247,
+                carpeta: '4953242',
+                efector: 'Hospital Provincial Neuquén',
+            },
+        ],
+        organizacion: {
+            id: '56u532o',
+            nombre: 'Hospital Provincial '
+        },
+        espacioFisico: {
+            id: 'String',
+            nombre: 'String',
+            servicio: {
+                id: 'String',
+                nombre: 'String'
+            },
+            sector: {
+                id: 'String',
+                nombre: 'String'
+            },
+        },
+        otroEspacioFisico: 'String',
+        fecha: '27/11/20',
+        dia: 'VIERNES',
+        horaInicio: '10:00',
+        horaFin: '13:00',
+        intercalar: true,
+        bloques: [{
+            id: 'sdad',
+            horaInicio: 10,
+            horaFin: 13,
+            cantidadTurnos: 15,
+            duracionTurno: 20,
+            descripcion: 'Esta es una descripcion del bloque de turnos',
+            tipoPrestaciones: 'Consulta de niño sano',
+            accesoDirectoDelDia: 12,
+            accesoDirectoProgramado: 8,
+            reservadoGestion: 4,
+            reservadoProfesional: 2,
+            restantesDelDia: 5,
+            restantesProgramados: 3,
+            restantesGestion: 1,
+            restantesProfesional: 2,
+            pacienteSimultaneos: true,
+            cantidadSimultaneos: 8,
+            citarPorBloque: false,
+            cantidadBloque: 3,
+            turnos: 25,
+        }],
+        estado: 'publicada',
+        prePausada: '',
+        sobreturnos: 'Sin sobreturnos',
+        turnosDisponibles: 20,
+        turnosRestantesDelDia: 12,
+        turnosRestantesProgramados: 3,
+        turnosRestantesGestion: 2,
+        turnosRestantesProfesional: 3,
+        estadosAgendas: 'disponible',
+        nota: 'Esta es una nota de prueba de la agenda',
+        nominalizada: true,
+        dinamica: true,
+        cupo: 20,
+        avisos: [{
+            profenionalId: '5i324wef',
+            estado: 'String',
+            fecha: '27/11/20'
+        }],
+    },
+    {
+        id: 1513,
+        tipoPrestaciones: 'Exámen médico del adulto',
+        // profesionales: IProfesional[],
+        profesionales: [{
+            id: '5u32402r',
+            nombre: 'Carlos Daniel',
+            apellido: 'Ventura'
+        }],
+        paciente: [{
+            id: '2ebqd',
+            nombre: 'Fernanda Gabriela',
+            apellido: 'Saralero Mercusi',
+        }],
+        turnos: [
+            {
+                horaInicio: '10:30 hs.',
+                estado: 'en ejecución',
+                asistencia: 'asistió',
+                prestacion: 'Exámen médico del adulto',
+                profesional: 'Molinari, Juan Martin',
+                nota: 'Esta es una nota de prueba',
+                procedencia: 'Autocitado',
+                prioritario: true,
+                paciente: 'Regueiro, María Ines',
+                dni: 31350247,
+                carpeta: '4953242',
+                efector: 'Hospital Provincial Neuquén',
+            },
+        ],
+        organizacion: {
+            id: '56u532o',
+            nombre: 'Hospital Provincial '
+        },
+        espacioFisico: {
+            id: 'String',
+            nombre: 'String',
+            servicio: {
+                id: 'String',
+                nombre: 'String'
+            },
+            sector: {
+                id: 'String',
+                nombre: 'String'
+            },
+        },
+        otroEspacioFisico: 'String',
+        fecha: '27/11/20',
+        dia: 'VIERNES',
+        horaInicio: '10:00',
+        horaFin: '13:00',
+        intercalar: true,
+        bloques: [{
+            id: 'sdad',
+            horaInicio: 10,
+            horaFin: 13,
+            cantidadTurnos: 15,
+            duracionTurno: 20,
+            descripcion: 'Esta es una descripcion del bloque de turnos',
+            tipoPrestaciones: 'Consulta de niño sano',
+            accesoDirectoDelDia: 12,
+            accesoDirectoProgramado: 8,
+            reservadoGestion: 4,
+            reservadoProfesional: 2,
+            restantesDelDia: 5,
+            restantesProgramados: 3,
+            restantesGestion: 1,
+            restantesProfesional: 2,
+            pacienteSimultaneos: true,
+            cantidadSimultaneos: 8,
+            citarPorBloque: false,
+            cantidadBloque: 3,
+            turnos: 25,
+        }],
+        estado: 'publicada',
+        prePausada: '',
+        sobreturnos: 'Sin sobreturnos',
+        turnosDisponibles: 20,
+        turnosRestantesDelDia: 12,
+        turnosRestantesProgramados: 3,
+        turnosRestantesGestion: 2,
+        turnosRestantesProfesional: 3,
+        estadosAgendas: 'disponible',
+        nota: 'Esta es una nota de prueba de la agenda',
+        nominalizada: true,
+        dinamica: true,
+        cupo: 20,
+        avisos: [{
+            profenionalId: '5i324wef',
+            estado: 'String',
+            fecha: '27/11/20'
+        }],
+    },
+    {
+        id: 1513,
+        tipoPrestaciones: 'Exámen médico del adulto',
+        // profesionales: IProfesional[],
+        profesionales: [{
+            id: '5u32402r',
+            nombre: 'Carlos Daniel',
+            apellido: 'Ventura'
+        }],
+        paciente: [{
+            id: '2ebqd',
+            nombre: 'Fernanda Gabriela',
+            apellido: 'Saralero Mercusi',
+        }],
+        turnos: [
+            {
+                horaInicio: '10:30 hs.',
+                estado: 'en ejecución',
+                asistencia: 'asistió',
+                prestacion: 'Exámen médico del adulto',
+                profesional: 'Molinari, Juan Martin',
+                nota: 'Esta es una nota de prueba',
+                procedencia: 'Autocitado',
+                prioritario: true,
+                paciente: 'Regueiro, María Ines',
+                dni: 31350247,
+                carpeta: '4953242',
+                efector: 'Hospital Provincial Neuquén',
+            },
+        ],
+        organizacion: {
+            id: '56u532o',
+            nombre: 'Hospital Provincial '
+        },
+        espacioFisico: {
+            id: 'String',
+            nombre: 'String',
+            servicio: {
+                id: 'String',
+                nombre: 'String'
+            },
+            sector: {
+                id: 'String',
+                nombre: 'String'
+            },
+        },
+        otroEspacioFisico: 'String',
+        fecha: '27/11/20',
+        dia: 'VIERNES',
+        horaInicio: '10:00',
+        horaFin: '13:00',
+        intercalar: true,
+        bloques: [{
+            id: 'sdad',
+            horaInicio: 10,
+            horaFin: 13,
+            cantidadTurnos: 15,
+            duracionTurno: 20,
+            descripcion: 'Esta es una descripcion del bloque de turnos',
+            tipoPrestaciones: 'Consulta de niño sano',
+            accesoDirectoDelDia: 12,
+            accesoDirectoProgramado: 8,
+            reservadoGestion: 4,
+            reservadoProfesional: 2,
+            restantesDelDia: 5,
+            restantesProgramados: 3,
+            restantesGestion: 1,
+            restantesProfesional: 2,
+            pacienteSimultaneos: true,
+            cantidadSimultaneos: 8,
+            citarPorBloque: false,
+            cantidadBloque: 3,
+            turnos: 25,
+        }],
+        estado: 'publicada',
+        prePausada: '',
+        sobreturnos: 'Sin sobreturnos',
+        turnosDisponibles: 20,
+        turnosRestantesDelDia: 12,
+        turnosRestantesProgramados: 3,
+        turnosRestantesGestion: 2,
+        turnosRestantesProfesional: 3,
+        estadosAgendas: 'disponible',
+        nota: 'Esta es una nota de prueba de la agenda',
+        nominalizada: true,
+        dinamica: true,
+        cupo: 20,
+        avisos: [{
+            profenionalId: '5i324wef',
+            estado: 'String',
+            fecha: '27/11/20'
+        }],
+    },
+    {
+        id: 1513,
+        tipoPrestaciones: 'Exámen médico del adulto',
+        // profesionales: IProfesional[],
+        profesionales: [{
+            id: '5u32402r',
+            nombre: 'Carlos Daniel',
+            apellido: 'Ventura'
+        }],
+        paciente: [{
+            id: '2ebqd',
+            nombre: 'Fernanda Gabriela',
+            apellido: 'Saralero Mercusi',
+        }],
+        turnos: [
+            {
+                horaInicio: '10:30 hs.',
+                estado: 'en ejecución',
+                asistencia: 'asistió',
+                prestacion: 'Exámen médico del adulto',
+                profesional: 'Molinari, Juan Martin',
+                nota: 'Esta es una nota de prueba',
+                procedencia: 'Autocitado',
+                prioritario: true,
+                paciente: 'Regueiro, María Ines',
+                dni: 31350247,
+                carpeta: '4953242',
+                efector: 'Hospital Provincial Neuquén',
+            },
+        ],
+        organizacion: {
+            id: '56u532o',
+            nombre: 'Hospital Provincial '
+        },
+        espacioFisico: {
+            id: 'String',
+            nombre: 'String',
+            servicio: {
+                id: 'String',
+                nombre: 'String'
+            },
+            sector: {
+                id: 'String',
+                nombre: 'String'
+            },
+        },
+        otroEspacioFisico: 'String',
+        fecha: '27/11/20',
+        dia: 'VIERNES',
+        horaInicio: '10:00',
+        horaFin: '13:00',
+        intercalar: true,
+        bloques: [{
+            id: 'sdad',
+            horaInicio: 10,
+            horaFin: 13,
+            cantidadTurnos: 15,
+            duracionTurno: 20,
+            descripcion: 'Esta es una descripcion del bloque de turnos',
+            tipoPrestaciones: 'Consulta de niño sano',
+            accesoDirectoDelDia: 12,
+            accesoDirectoProgramado: 8,
+            reservadoGestion: 4,
+            reservadoProfesional: 2,
+            restantesDelDia: 5,
+            restantesProgramados: 3,
+            restantesGestion: 1,
+            restantesProfesional: 2,
+            pacienteSimultaneos: true,
+            cantidadSimultaneos: 8,
+            citarPorBloque: false,
+            cantidadBloque: 3,
+            turnos: 25,
+        }],
+        estado: 'publicada',
+        prePausada: '',
+        sobreturnos: 'Sin sobreturnos',
+        turnosDisponibles: 20,
+        turnosRestantesDelDia: 12,
+        turnosRestantesProgramados: 3,
+        turnosRestantesGestion: 2,
+        turnosRestantesProfesional: 3,
+        estadosAgendas: 'disponible',
+        nota: 'Esta es una nota de prueba de la agenda',
+        nominalizada: true,
+        dinamica: true,
+        cupo: 20,
+        avisos: [{
+            profenionalId: '5i324wef',
+            estado: 'String',
+            fecha: '27/11/20'
+        }],
+    },
+    {
+        id: 1513,
+        tipoPrestaciones: 'Exámen médico del adulto',
+        // profesionales: IProfesional[],
+        profesionales: [{
+            id: '5u32402r',
+            nombre: 'Carlos Daniel',
+            apellido: 'Ventura'
+        }],
+        paciente: [{
+            id: '2ebqd',
+            nombre: 'Fernanda Gabriela',
+            apellido: 'Saralero Mercusi',
+        }],
+        turnos: [
+            {
+                horaInicio: '10:30 hs.',
+                estado: 'en ejecución',
+                asistencia: 'asistió',
+                prestacion: 'Exámen médico del adulto',
+                profesional: 'Molinari, Juan Martin',
+                nota: 'Esta es una nota de prueba',
+                procedencia: 'Autocitado',
+                prioritario: true,
+                paciente: 'Regueiro, María Ines',
+                dni: 31350247,
+                carpeta: '4953242',
+                efector: 'Hospital Provincial Neuquén',
+            },
+        ],
+        organizacion: {
+            id: '56u532o',
+            nombre: 'Hospital Provincial '
+        },
+        espacioFisico: {
+            id: 'String',
+            nombre: 'String',
+            servicio: {
+                id: 'String',
+                nombre: 'String'
+            },
+            sector: {
+                id: 'String',
+                nombre: 'String'
+            },
+        },
+        otroEspacioFisico: 'String',
+        fecha: '27/11/20',
+        dia: 'VIERNES',
+        horaInicio: '10:00',
+        horaFin: '13:00',
+        intercalar: true,
+        bloques: [{
+            id: 'sdad',
+            horaInicio: 10,
+            horaFin: 13,
+            cantidadTurnos: 15,
+            duracionTurno: 20,
+            descripcion: 'Esta es una descripcion del bloque de turnos',
+            tipoPrestaciones: 'Consulta de niño sano',
+            accesoDirectoDelDia: 12,
+            accesoDirectoProgramado: 8,
+            reservadoGestion: 4,
+            reservadoProfesional: 2,
+            restantesDelDia: 5,
+            restantesProgramados: 3,
+            restantesGestion: 1,
+            restantesProfesional: 2,
+            pacienteSimultaneos: true,
+            cantidadSimultaneos: 8,
+            citarPorBloque: false,
+            cantidadBloque: 3,
+            turnos: 25,
+        }],
+        estado: 'publicada',
+        prePausada: '',
+        sobreturnos: 'Sin sobreturnos',
+        turnosDisponibles: 20,
+        turnosRestantesDelDia: 12,
+        turnosRestantesProgramados: 3,
+        turnosRestantesGestion: 2,
+        turnosRestantesProfesional: 3,
+        estadosAgendas: 'disponible',
+        nota: 'Esta es una nota de prueba de la agenda',
+        nominalizada: true,
+        dinamica: true,
+        cupo: 20,
+        avisos: [{
+            profenionalId: '5i324wef',
+            estado: 'String',
+            fecha: '27/11/20'
+        }],
+    },
+    {
+        id: 1513,
+        tipoPrestaciones: 'Exámen médico del adulto',
+        // profesionales: IProfesional[],
+        profesionales: [{
+            id: '5u32402r',
+            nombre: 'Carlos Daniel',
+            apellido: 'Ventura'
+        }],
+        paciente: [{
+            id: '2ebqd',
+            nombre: 'Fernanda Gabriela',
+            apellido: 'Saralero Mercusi',
+        }],
+        turnos: [
+            {
+                horaInicio: '10:30 hs.',
+                estado: 'en ejecución',
+                asistencia: 'asistió',
+                prestacion: 'Exámen médico del adulto',
+                profesional: 'Molinari, Juan Martin',
+                nota: 'Esta es una nota de prueba',
+                procedencia: 'Autocitado',
+                prioritario: true,
+                paciente: 'Regueiro, María Ines',
+                dni: 31350247,
+                carpeta: '4953242',
+                efector: 'Hospital Provincial Neuquén',
+            },
+        ],
+        organizacion: {
+            id: '56u532o',
+            nombre: 'Hospital Provincial '
+        },
+        espacioFisico: {
+            id: 'String',
+            nombre: 'String',
+            servicio: {
+                id: 'String',
+                nombre: 'String'
+            },
+            sector: {
+                id: 'String',
+                nombre: 'String'
+            },
+        },
+        otroEspacioFisico: 'String',
+        fecha: '27/11/20',
+        dia: 'VIERNES',
+        horaInicio: '10:00',
+        horaFin: '13:00',
+        intercalar: true,
+        bloques: [{
+            id: 'sdad',
+            horaInicio: 10,
+            horaFin: 13,
+            cantidadTurnos: 15,
+            duracionTurno: 20,
+            descripcion: 'Esta es una descripcion del bloque de turnos',
+            tipoPrestaciones: 'Consulta de niño sano',
+            accesoDirectoDelDia: 12,
+            accesoDirectoProgramado: 8,
+            reservadoGestion: 4,
+            reservadoProfesional: 2,
+            restantesDelDia: 5,
+            restantesProgramados: 3,
+            restantesGestion: 1,
+            restantesProfesional: 2,
+            pacienteSimultaneos: true,
+            cantidadSimultaneos: 8,
+            citarPorBloque: false,
+            cantidadBloque: 3,
+            turnos: 25,
+        }],
+        estado: 'publicada',
+        prePausada: '',
+        sobreturnos: 'Sin sobreturnos',
+        turnosDisponibles: 20,
+        turnosRestantesDelDia: 12,
+        turnosRestantesProgramados: 3,
+        turnosRestantesGestion: 2,
+        turnosRestantesProfesional: 3,
+        estadosAgendas: 'disponible',
+        nota: 'Esta es una nota de prueba de la agenda',
+        nominalizada: true,
+        dinamica: true,
+        cupo: 20,
+        avisos: [{
+            profenionalId: '5i324wef',
+            estado: 'String',
+            fecha: '27/11/20'
+        }],
+    },
+    {
+        id: 1513,
+        tipoPrestaciones: 'Exámen médico del adulto',
+        // profesionales: IProfesional[],
+        profesionales: [{
+            id: '5u32402r',
+            nombre: 'Carlos Daniel',
+            apellido: 'Ventura'
+        }],
+        paciente: [{
+            id: '2ebqd',
+            nombre: 'Fernanda Gabriela',
+            apellido: 'Saralero Mercusi',
+        }],
+        turnos: [
+            {
+                horaInicio: '10:30 hs.',
+                estado: 'en ejecución',
+                asistencia: 'asistió',
+                prestacion: 'Exámen médico del adulto',
+                profesional: 'Molinari, Juan Martin',
+                nota: 'Esta es una nota de prueba',
+                procedencia: 'Autocitado',
+                prioritario: true,
+                paciente: 'Regueiro, María Ines',
+                dni: 31350247,
+                carpeta: '4953242',
+                efector: 'Hospital Provincial Neuquén',
+            },
+        ],
+        organizacion: {
+            id: '56u532o',
+            nombre: 'Hospital Provincial '
+        },
+        espacioFisico: {
+            id: 'String',
+            nombre: 'String',
+            servicio: {
+                id: 'String',
+                nombre: 'String'
+            },
+            sector: {
+                id: 'String',
+                nombre: 'String'
+            },
+        },
+        otroEspacioFisico: 'String',
+        fecha: '27/11/20',
+        dia: 'VIERNES',
+        horaInicio: '10:00',
+        horaFin: '13:00',
+        intercalar: true,
+        bloques: [{
+            id: 'sdad',
+            horaInicio: 10,
+            horaFin: 13,
+            cantidadTurnos: 15,
+            duracionTurno: 20,
+            descripcion: 'Esta es una descripcion del bloque de turnos',
+            tipoPrestaciones: 'Consulta de niño sano',
+            accesoDirectoDelDia: 12,
+            accesoDirectoProgramado: 8,
+            reservadoGestion: 4,
+            reservadoProfesional: 2,
+            restantesDelDia: 5,
+            restantesProgramados: 3,
+            restantesGestion: 1,
+            restantesProfesional: 2,
+            pacienteSimultaneos: true,
+            cantidadSimultaneos: 8,
+            citarPorBloque: false,
+            cantidadBloque: 3,
+            turnos: 25,
+        }],
+        estado: 'publicada',
+        prePausada: '',
+        sobreturnos: 'Sin sobreturnos',
+        turnosDisponibles: 20,
+        turnosRestantesDelDia: 12,
+        turnosRestantesProgramados: 3,
+        turnosRestantesGestion: 2,
+        turnosRestantesProfesional: 3,
+        estadosAgendas: 'disponible',
+        nota: 'Esta es una nota de prueba de la agenda',
+        nominalizada: true,
+        dinamica: true,
+        cupo: 20,
+        avisos: [{
+            profenionalId: '5i324wef',
+            estado: 'String',
+            fecha: '27/11/20'
+        }],
+    },
+    {
+        id: 1527,
+        tipoPrestaciones: 'Exámen médico del adulto',
+        profesionales: [{
+            id: '5u32402r',
+            nombre: 'Carlos Daniel',
+            apellido: 'Ventura'
+        }],
+        paciente: [{
+            id: '2ebqd',
+            nombre: 'Fernanda Gabriela',
+            apellido: 'Saralero Mercusi',
+        }],
+        turnos: [{
+            horaInicio: '10:30 hs.',
+            estado: 'validada',
+            asistencia: 'asistió',
+            prestacion: 'Exámen médico del adulto',
+            profesional: 'Molinari, Juan Martin',
+            nota: 'string',
+            procedencia: 'autocitado',
+            prioritario: true,
+            paciente: 'string',
+            dni: 31350247,
+            carpeta: '4953242',
+            efector: 'Hospital Heller',
+        },
+        ],
+        organizacion: {
+            id: '56u532o',
+            nombre: 'Hospital Provincial '
+        },
+        espacioFisico: {
+            id: 'String',
+            nombre: 'String',
+            servicio: {
+                id: 'String',
+                nombre: 'String'
+            },
+            sector: {
+                id: 'String',
+                nombre: 'String'
+            },
+        },
+        otroEspacioFisico: 'String',
+        fecha: '27/11/20',
+        dia: 'VIERNES',
+        horaInicio: '10:00',
+        horaFin: '13:00',
+        intercalar: true,
+        bloques: [{
+            id: 'sdad',
+            horaInicio: 10,
+            horaFin: 13,
+            cantidadTurnos: 15,
+            duracionTurno: 20,
+            descripcion: 'Esta es una descripcion del bloque de turnos',
+            tipoPrestaciones: 'Consulta de niño sano',
+            accesoDirectoDelDia: 12,
+            accesoDirectoProgramado: 8,
+            reservadoGestion: 4,
+            reservadoProfesional: 2,
+            restantesDelDia: 5,
+            restantesProgramados: 3,
+            restantesGestion: 1,
+            restantesProfesional: 2,
+            pacienteSimultaneos: true,
+            cantidadSimultaneos: 8,
+            citarPorBloque: false,
+            cantidadBloque: 3,
+            turnos: 25,
+        }],
+        estado: 'publicada',
+        prePausada: '',
+        sobreturnos: 'Sin sobreturnos',
+        turnosDisponibles: 20, // Virtual
+        turnosRestantesDelDia: 12, // Virtual
+        turnosRestantesProgramados: 3, // Virtual
+        turnosRestantesGestion: 2, // Virtual
+        turnosRestantesProfesional: 3, // Virtual
+        estadosAgendas: 'disponible',
+        nota: 'Esta es una nota de prueba de la agenda',
+        nominalizada: true,
+        dinamica: true,
+        cupo: 20,
+        avisos: [{
+            profenionalId: '5i324wef',
+            estado: 'String',
+            fecha: '27/11/20'
+        }],
+    }
+];
diff --git a/src/demo/app/templates/service/turno.ts b/src/demo/app/templates/service/turno.ts
new file mode 100644
index 000000000..bafbe9ee1
--- /dev/null
+++ b/src/demo/app/templates/service/turno.ts
@@ -0,0 +1,53 @@
+export interface Turno {
+    id: string;
+    horaInicio: Date;
+    estado: string;
+    asistencia: string;
+    paciente: {
+        id: string,
+        nombre: string,
+        apellido: string,
+        alias: string,
+        documento: string,
+        fechaNacimiento: Date,
+        telefono: string,
+        sexo: string,
+        carpetaEfectores: [{
+            organizacion: string,
+            nroCarpeta: string
+        }],
+        obraSocial: string,
+
+    };
+    tipoPrestacion: string;
+    idPrestacionPaciente: string;
+    tipoTurno: string;
+    reasignado: {
+        anterior: {
+            idAgenda: string,
+            idBloque: string,
+            idTurno: string
+        }
+        siguiente: {
+            idAgenda: string,
+            idBloque: string,
+            idTurno: string
+        }
+    };
+    carpetaEfectores?: [{
+        organizacion: {
+            id: string,
+            nombre: string
+        },
+        nroCarpeta: string
+    }];
+    nota: string;
+    motivoSuspension: {
+        type: string,
+        enum: ['edilicia', 'profesional', 'organizacion', 'agendaSuspendida']
+    };
+    avisoSuspension: {
+        type: string,
+        enum: ['pendiente', 'no enviado', 'enviado', 'fallido']
+    };
+}

From 26ba9545825f35efba675732ad6da96be7460f8a Mon Sep 17 00:00:00 2001
From: Julio Santarelli <santarellijulio@gmail.com>
Date: Tue, 4 May 2021 11:46:36 -0300
Subject: [PATCH 2/8] feat(puntos-inicio): agrega acceso directo + actualiza
 grid

---
 .../app/templates/punto-inicio/punto-inicio.component.html  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/demo/app/templates/punto-inicio/punto-inicio.component.html b/src/demo/app/templates/punto-inicio/punto-inicio.component.html
index 44bfddbf9..99550b989 100644
--- a/src/demo/app/templates/punto-inicio/punto-inicio.component.html
+++ b/src/demo/app/templates/punto-inicio/punto-inicio.component.html
@@ -7,8 +7,8 @@
         </plex-title>
         <plex-grid cols="4" size="md">
             <!-- plex-card -->
-            <plex-grid type="" span="1">
-                <plex-card *ngFor="let item of cards" align="start">
+            <plex-grid type="" span="1" class="align-self-start">
+                <plex-card *ngFor="let item of cards" aligned="start">
                     <plex-label size="lg" type="default" titulo="{{ item.titulo }}" subtitulo="{{ item.subtitulo }}"
                                 icon="{{ item.icono }}">
                     </plex-label>
@@ -16,7 +16,7 @@
                     <plex-button type="info" label="{{ item.botones | slice:1:2 }}"></plex-button>
                 </plex-card>
                 <ng-container *ngFor="let item of cards | slice:2:3">
-                    <plex-card size="lg" type="dark" align="center">
+                    <plex-card size="lg" type="dark" aligned="center">
                         <plex-badge type="warning">{{ item.estado }}</plex-badge>
                         <plex-label size="lg" type="default" titulo="{{ item.fecha }}" subtitulo="{{ item.subtitulo }}">
                         </plex-label>

From 970c75c2d99edacb42b6f9b1cdeb2557059ca59a Mon Sep 17 00:00:00 2001
From: Julio Santarelli <santarellijulio@gmail.com>
Date: Mon, 7 Jun 2021 21:14:35 -0300
Subject: [PATCH 3/8] docs(puntos-inicio): agrega teleprestaciones

---
 src/demo/app/app.module.ts                    |  10 +-
 .../punto-inicio-main.component.html          |  95 +++++----
 .../punto-inicio-main.component.ts            |  12 +-
 .../punto-inicio-teleprestaciones.html        |  20 ++
 .../punto-inicio-teleprestaciones.ts          | 112 ++++++++++
 .../punto-inicio/punto-inicio.component.html  |  84 +++++---
 .../punto-inicio/punto-inicio.component.ts    |  90 ++++----
 .../app/templates/service/menu.service.ts     |  23 +++
 src/demo/app/templates/service/menu.ts        |  10 +
 src/demo/app/templates/service/mock-menu.ts   |  74 +++++++
 .../app/templates/service/mock-solicitudes.ts | 192 ++++++++++++++++++
 .../templates/service/solicitud.service.ts    |  23 +++
 src/demo/app/templates/service/solicitud.ts   |  18 ++
 src/demo/styles.scss                          |   7 +
 src/lib/css/plex-accordion.scss               |   2 +-
 15 files changed, 653 insertions(+), 119 deletions(-)
 create mode 100644 src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.html
 create mode 100644 src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.ts
 create mode 100644 src/demo/app/templates/service/menu.service.ts
 create mode 100644 src/demo/app/templates/service/menu.ts
 create mode 100644 src/demo/app/templates/service/mock-menu.ts
 create mode 100644 src/demo/app/templates/service/mock-solicitudes.ts
 create mode 100644 src/demo/app/templates/service/solicitud.service.ts
 create mode 100644 src/demo/app/templates/service/solicitud.ts

diff --git a/src/demo/app/app.module.ts b/src/demo/app/app.module.ts
index 361cd7c90..0b4fe02cd 100644
--- a/src/demo/app/app.module.ts
+++ b/src/demo/app/app.module.ts
@@ -13,6 +13,8 @@ import { Plex } from '../../lib/core/service';
 import { ServiceDemoSelect } from './select/select.service';
 import { PacienteService } from './templates/service/paciente.service';
 import { AgendaService } from './templates/service/agenda.service';
+import { MenuService } from './templates/service/menu.service';
+import { SolicitudService } from './templates/service/solicitud.service';
 
 // Routes
 import { HomeDemoComponent } from './home/home.component';
@@ -82,6 +84,7 @@ import { InternacionComponent } from './templates/modulos/internacion/internacio
 import { RecursosListadoComponent } from './templates/modulos/internacion/listado/recursos-listado.component';
 import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar/detalle/recurso-detalle.component';
 
+import { TeleprestacionesComponent } from './templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones';
 
 @NgModule({
     declarations: [
@@ -154,7 +157,8 @@ import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar
         AlignDemoComponent,
         InternacionComponent,
         RecursosListadoComponent,
-        RecursoDetalleComponent
+        RecursoDetalleComponent,
+        TeleprestacionesComponent
     ],
     entryComponents: [
         HeaderPacienteComponent
@@ -171,7 +175,9 @@ import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar
         ServiceDemoSelect,
         PacienteService,
         CamaService,
-        AgendaService
+        AgendaService,
+        MenuService,
+        SolicitudService
     ],
     bootstrap: [AppComponent]
 })
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.html b/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.html
index 8ef4706d9..cd439960b 100644
--- a/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.html
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.html
@@ -1,36 +1,59 @@
-<header>
-    <plex-title size="sm" titulo="Lista de agendas">
-        <plex-radio [(ngModel)]="modelo.radio" [data]="options" name="colores" type="horizontal"></plex-radio>
-        <plex-badge type="info">27/11/2020</plex-badge>
-        <plex-button type="info" icon="filter" size="sm" (click)="mostrarFiltros()"></plex-button>
-    </plex-title>
-    <plex-wrapper *ngIf="filtros === true">
-        <plex-datetime label="Ingrese la fecha" [(ngModel)]="tModel.fechaHora" name="fechaHora" required>
-        </plex-datetime>
-        <plex-select grow="2" [(ngModel)]="modelo1.select" [data]="opciones"
-                     label-field="nombre + ' (' + continente + ')'" label="Seleccione una prestación">
-        </plex-select>
-        <plex-text label="Buscar paciente" [(ngModel)]="templateModel2.nombre" name="nombre">
-        </plex-text>
-    </plex-wrapper>
-</header>
-<plex-list height="60%">
-    <plex-heading>
-        <b></b>
-        <b label></b>
-        <b label></b>
-        <b></b>
-    </plex-heading>
-    <plex-item *ngFor="let agenda of agendas$ | async" (click)="selected(agenda)">
-        <plex-icon name="calendario-tilde" type="success"></plex-icon>
-        <plex-label titulo="{{ agenda.horaInicio }} a {{ agenda.horaFin }}" subtitulo="Duración: {{ duracion }}">
-        </plex-label>
-        <plex-label *ngFor="let profesional of agenda.profesionales" titulo="{{ agenda.tipoPrestaciones }}"
-                    subtitulo="Profesional: {{ profesional.apellido }}, {{ profesional.nombre }}">
-        </plex-label>
-        <plex-badge type="success">{{ agenda.estado }}</plex-badge>
-        <plex-badge *ngFor="let bloque of agenda.bloques" type="info">Pacientes
-            {{ bloque.restantesDelDia }}/{{ bloque.accesoDirectoDelDia }}
-        </plex-badge>
-    </plex-item>
-</plex-list>
\ No newline at end of file
+<!-- Agendas -->
+<plex-tabs>
+    <plex-button type="info" class="ml-2" icon="filter" size="sm" (click)="mostrarFiltros()"></plex-button>
+    <plex-tab label="mis agendas" icon="">
+        <plex-wrapper *ngIf="filtros">
+            <plex-datetime label="Ingrese la fecha" [(ngModel)]="tModel.fechaHora" name="fechaHora" required>
+            </plex-datetime>
+            <plex-select grow="2" [(ngModel)]="modelo1.select" [data]="opciones"
+                         label-field="nombre + ' (' + continente + ')'" label="Seleccione una prestación">
+            </plex-select>
+            <plex-text label="Buscar paciente" [(ngModel)]="templateModel2.nombre" name="nombre">
+            </plex-text>
+        </plex-wrapper>
+        <plex-list height="300px">
+            <plex-item *ngFor="let agenda of agendas$ | async" (click)="selected(agenda)">
+                <plex-icon name="calendario-tilde" type="success"></plex-icon>
+                <plex-label titulo="{{ agenda.horaInicio }} a {{ agenda.horaFin }}"
+                            subtitulo="Duración: {{ duracion }}">
+                </plex-label>
+                <plex-label *ngFor="let profesional of agenda.profesionales" titulo="{{ agenda.tipoPrestaciones }}"
+                            subtitulo="Profesional: {{ profesional.apellido }}, {{ profesional.nombre }}">
+                </plex-label>
+                <plex-badge type="success">{{ agenda.estado }}</plex-badge>
+                <plex-badge *ngFor="let bloque of agenda.bloques" type="info">Pacientes
+                    {{ bloque.restantesDelDia }}/{{ bloque.accesoDirectoDelDia }}
+                </plex-badge>
+            </plex-item>
+        </plex-list>
+    </plex-tab>
+    <plex-tab label="todas las agendas" icon="">
+    </plex-tab>
+</plex-tabs>
+
+<hr>
+
+<!-- Pacientes -->
+<plex-tabs>
+    <plex-button type="success" type="sm" label="paciente sin turno"></plex-button>
+    <plex-tab label="consultas realizadas">
+        <div slider>
+            <plex-grid type="auto" cols="4">
+                <ng-container *ngFor="let paciente of pacientes$ | async">
+                    <plex-card aligned="center" size="md" type="default" [selected]="paciente.selected"
+                               (click)="selectedPaciente(paciente)">
+                        <plex-detail size="xs" direction="column">
+                            <img src="{{ paciente.foto }}">
+                            <plex-label direction="column" titulo="{{ paciente.nombre }}"
+                                        subtitulo="{{ paciente.documento }}" tooltip="{{ paciente.nombre }}">
+                            </plex-label>
+                        </plex-detail>
+                    </plex-card>
+                </ng-container>
+            </plex-grid>
+        </div>
+    </plex-tab>
+    <plex-tab label="consultas pendientes">
+    </plex-tab>
+    <plex-button type="info" class="ml-2" label="ver listado completo" size="sm"></plex-button>
+</plex-tabs>
\ No newline at end of file
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.ts b/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.ts
index 06d534565..672415b5a 100644
--- a/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.ts
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { AgendaService } from './../../service/agenda.service';
 import { Agenda } from './../../service/agenda';
+import { PacienteService } from './../../service/paciente.service';
+import { Paciente } from './../../service/paciente';
 import { Plex } from './../../../../../lib/core/service';
 import { Router } from '@angular/router';
 import { Observable } from 'rxjs';
@@ -17,6 +19,7 @@ export class PuntoInicioMainComponent implements OnInit {
     @Output() eventoSidebar = new EventEmitter<number>();
 
     agendas$: Observable<Agenda[]>;
+    pacientes$: Observable<Paciente[]>;
     selectedId: string;
 
     public duracion = '1 hs. 34 min.';
@@ -52,9 +55,9 @@ export class PuntoInicioMainComponent implements OnInit {
         this.plex.info('success', 'Este cartel se demoro un segundo en aparecer después de escribir.');
     }
 
-
     constructor(
         private agendaService: AgendaService,
+        private pacienteService: PacienteService,
         private router: Router,
     ) { }
 
@@ -115,6 +118,7 @@ export class PuntoInicioMainComponent implements OnInit {
         this.modelo = { checkbox: false, slide: false };
 
         this.agendas$ = this.agendaService.getAgendas();
+        this.pacientes$ = this.pacienteService.getPacientes();
     }
 
     enviarSidebar() {
@@ -128,6 +132,12 @@ export class PuntoInicioMainComponent implements OnInit {
         this.enviarSidebar();
     }
 
+    selectedPaciente(paciente) {
+        this.selectedId = paciente.id;
+        this.router.navigate(['templates', 'punto-inicio', this.selectedId]);
+        this.enviarSidebar();
+    }
+
     mostrarFiltros() {
         this.filtros = !this.filtros;
     }
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.html b/src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.html
new file mode 100644
index 000000000..8321690d2
--- /dev/null
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.html
@@ -0,0 +1,20 @@
+<plex-title size="sm" titulo="Teleprestaciones"></plex-title>
+<plex-list>
+    <plex-item *ngFor="let solicitud of solicitudes$ | async">
+        <plex-label icon="{{ solicitud.organizacionId === 1 ? 'hospital' : 'hombre-caminando' }}" size="lg"
+                    type="default" titulo="{{ solicitud.unidadOrganizativa }}" subtitulo="{{ solicitud.servicio }}">
+        </plex-label>
+        <plex-label icon="paciente" size="sm" type="default"
+                    titulo="{{ solicitud.paciente.nombre }} {{ solicitud.paciente.apellido }}"
+                    subtitulo="{{ solicitud.paciente.documento }}">
+        </plex-label>
+        <plex-label size=" sm" icon="medico" direction="row" type="info" titulo="{{ solicitud.profesionalOrigen }}"
+                    subtitulo="{{ solicitud.prestacionOrigen }}">
+        </plex-label>
+        <plex-badge type="info">{{ solicitud.organizativaId != 1 ? 'solicitud' : 'interconsulta' }}
+        </plex-badge>
+        <plex-button size="sm" type="info" icon="eye"></plex-button>
+        <plex-button size="sm" type="info" icon="historial"></plex-button>
+        <plex-button size="sm" type="warning" icon="documento-lapiz"></plex-button>
+    </plex-item>
+</plex-list>
\ No newline at end of file
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.ts b/src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.ts
new file mode 100644
index 000000000..f021669ef
--- /dev/null
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.ts
@@ -0,0 +1,112 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { EventEmitter, Output } from '@angular/core';
+
+// Servicios y modelo
+import { Plex } from './../../../../../../lib/core/service';
+import { Solicitud } from '../../../service/solicitud';
+import { SolicitudService } from '../../../service/solicitud.service'
+
+@Component({
+    selector: 'plex-teleprestaciones',
+    templateUrl: './punto-inicio-teleprestaciones.html',
+})
+
+export class TeleprestacionesComponent implements OnInit {
+
+    sidebarValue = 9;
+    @Output() eventoSidebar = new EventEmitter<number>();
+
+    public tModel: any;
+    public opciones: any[];
+    public modelo1 = { select: null };
+    public modelo2 = {
+        select: null,
+        soloLectura: false,
+        selectMultiple: null
+    };
+    // public prueba = '';
+    public templateModel2: any;
+    public modelo: any;
+
+    public showModal = false;
+
+    solicitudes$: Observable<Solicitud[]>;
+    foco = 'main';
+    public prueba = '';
+    public cambio = '';
+
+    constructor(
+        private solicitudService: SolicitudService,
+        private plex: Plex,
+    ) { }
+
+    ngOnInit() {
+        this.solicitudes$ = this.solicitudService.getSolicitudes();
+        this.plex.navbarVisible = false;
+
+        // plex-datetime
+        this.tModel = {
+            fechaHora: null,
+            fecha: null,
+            hora: null,
+            horados: null,
+            disabled: false,
+            min: new Date(1970, 0, 1),
+            minHora: moment().add(30, 'minutes'),
+            maxHora: moment().add(180, 'minutes'),
+            fechaDecounce: new Date(1970, 0, 1),
+        };
+
+        // plex-phone
+        // plex-float
+        this.tModel = { valor: null };
+
+        // plex-select
+        this.opciones = [{
+            id: 1,
+            nombre: 'Consulta de medicina general',
+            continente: 'Prestación',
+        },
+        {
+            id: 2,
+            nombre: 'Exámen médico del adulto',
+            continente: 'Prestación',
+        },
+        {
+            id: 3,
+            nombre: 'Consulta de niño sano',
+            continente: 'Prestación',
+        }];
+
+        this.modelo1.select = this.modelo2.select = this.opciones[1];
+
+        // plex-text
+        this.templateModel2 = { nombre: null, min: 10, max: 15 };
+
+        // plex-bool
+        this.modelo = { checkbox: false, slide: false };
+    }
+
+    updateMaxHora() {
+        this.tModel.minHora = moment().add(30, 'minutes').add(1, 'days');
+    }
+
+    horaPlus() {
+        return moment(this.tModel.hora).add(30, 'minutes');
+    }
+
+    onChange() {
+        this.plex.info('success', 'Este cartel se demoro un segundo en aparecer después de escribir.');
+    }
+
+    recibirSidebar($event) {
+        this.sidebarValue = $event;
+        console.log(this.sidebarValue);
+    }
+
+    contraerSidebar() {
+        this.eventoSidebar.emit(this.sidebarValue);
+        this.sidebarValue = 10;
+    }
+}
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio.component.html b/src/demo/app/templates/punto-inicio/punto-inicio.component.html
index 99550b989..435164940 100644
--- a/src/demo/app/templates/punto-inicio/punto-inicio.component.html
+++ b/src/demo/app/templates/punto-inicio/punto-inicio.component.html
@@ -1,43 +1,69 @@
-<plex-layout main="{{ sidebarValue }}">
+<plex-layout main="{{ sidebarValue }}" resizable="true" [min]="2" [max]="8" [steps]="2">
     <plex-layout-main>
-        <plex-title titulo="RUP | Punto de inicio">
-            <plex-button class="ml-2" type="info">Mapa de camas</plex-button>
-            <plex-button class="ml-2" type="info">Huds</plex-button>
-            <plex-button class="ml-2" type="warning">Inicio Andes</plex-button>
-        </plex-title>
-        <plex-grid cols="4" size="md">
-            <!-- plex-card -->
-            <plex-grid type="" span="1" class="align-self-start">
-                <plex-card *ngFor="let item of cards" aligned="start">
-                    <plex-label size="lg" type="default" titulo="{{ item.titulo }}" subtitulo="{{ item.subtitulo }}"
-                                icon="{{ item.icono }}">
+        <header>
+            <!-- Cabezal -->
+            <section span="12" justify class="bg-info">
+                <div class="ml-3 my-2">
+                    <plex-label icon="medico" size="xl" type="default" titulo="Bienvenido Walter"
+                                subtitulo="¿cómo será tu jornada laboral hoy?">
                     </plex-label>
-                    <plex-button type="info" label="{{ item.botones | slice:0:1 }}"></plex-button>
-                    <plex-button type="info" label="{{ item.botones | slice:1:2 }}"></plex-button>
-                </plex-card>
-                <ng-container *ngFor="let item of cards | slice:2:3">
-                    <plex-card size="lg" type="dark" aligned="center">
-                        <plex-badge type="warning">{{ item.estado }}</plex-badge>
-                        <plex-label size="lg" type="default" titulo="{{ item.fecha }}" subtitulo="{{ item.subtitulo }}">
-                        </plex-label>
-                    </plex-card>
-                </ng-container>
-            </plex-grid>
-            <!-- Listado -->
-            <section span="3">
-                <plex-punto-inicio-main (eventoSidebar)="recibirSidebar($event)">
-                </plex-punto-inicio-main>
+                </div>
+                <div>
+                    <plex-button class="ml-2" type="info">Mapa de camas</plex-button>
+                    <plex-button class="ml-2" type="info">Huds</plex-button>
+                    <plex-button class="ml-2" type="info">Inicio Andes</plex-button>
+                </div>
             </section>
+        </header>
+        <plex-grid cols="12" type="auto">
+
+            <!-- Menu Lateral -->
+            <plex-grid span="1" id="menu-vertical" class="d-flex align-self-start flex-column h-75 pt-3" justify
+                       size="xs">
+                <section class="d-flex flex-column" justify>
+                    <plex-label *ngFor="let card of menu$ | async" icon="{{ card.icono }}" type="" size="md"
+                                direction="column" class="color-{{ card.semanticTag}}" titulo="" subtitulo=""
+                                [routerLink]="[{ outlets: { listado: [card.path] } }]" tooltip="{{ card.path }}"
+                                tooltipPosition="right">
+                    </plex-label>
+                </section>
+                <section class="d-flex flex-column" justify>
+                    <plex-label icon="logo-youtube" size="md" direction="column" class="" titulo="" subtitulo=""
+                                routerLink="" tooltip="" tooltipPosition="right">
+                    </plex-label>
+                    <plex-label icon="-herramienta" size="md" direction="column" class="" titulo="" subtitulo=""
+                                routerLink="" tooltip="" tooltipPosition="right">
+                    </plex-label>
+                    <plex-label icon="salida" size="md" direction="column" class="" titulo="" subtitulo="" routerLink=""
+                                tooltip="" tooltipPosition="right">
+                    </plex-label>
+                </section>
+            </plex-grid>
+            <plex-grid span="11" cols="3" class="align-self-start mr-2">
+                <!-- Teleprestaciones -->
+                <section span="1" class="align-self-start mr-2">
+                    <plex-teleprestaciones>
+
+                    </plex-teleprestaciones>
+                </section>
+
+                <!-- Listado -->
+                <section span="2">
+                    <plex-punto-inicio-main (eventoSidebar)="recibirSidebar($event)">
+                    </plex-punto-inicio-main>
+                </section>
+            </plex-grid>
         </plex-grid>
+
     </plex-layout-main>
     <plex-layout-sidebar type="invert">
-        <plex-title titulo="{{sidebarValue === 10 ? 'Buscar' : 'Turnos'}}">
+        <plex-title titulo="Buscar">
             <plex-button size="sm" type="warning" label="huds paciente"></plex-button>
             <plex-button size="sm" type="info" label="paciente sin turno"></plex-button>
             <!--<plex-dropdown size="sm" type="info" label="sin turno" [items]="items"></plex-dropdown>-->
             <plex-button type="danger" icon="close" size="sm" (click)="contraerSidebar()"></plex-button>
         </plex-title>
-        <ng-container *ngIf="sidebarValue === 10">
+        <ng-container>
             <plex-wrapper>
                 <plex-datetime label="Ingrese la fecha" [(ngModel)]="tModel.fechaHora" name="fechaHora" required>
                 </plex-datetime>
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio.component.ts b/src/demo/app/templates/punto-inicio/punto-inicio.component.ts
index 8f94303b3..e60c79612 100644
--- a/src/demo/app/templates/punto-inicio/punto-inicio.component.ts
+++ b/src/demo/app/templates/punto-inicio/punto-inicio.component.ts
@@ -1,14 +1,15 @@
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
-import { ActivatedRoute } from '@angular/router';
 
 // Servicios y modelo
-import { AgendaService } from '../service/agenda.service';
 import { Agenda } from '../service/agenda';
-import { PacienteService } from '../service/paciente.service';
+import { MenuService } from '../service/menu.service';
+import { Menu } from '../service/menu';
 import { Paciente } from '../service/paciente';
 import { Plex } from './../../../../lib/core/service';
 import { EventEmitter, Output } from '@angular/core';
+import { Solicitud } from '../service/solicitud';
+import { SolicitudService } from '../service/solicitud.service'
 
 @Component({
     selector: 'plex-punto-inicio',
@@ -17,37 +18,36 @@ import { EventEmitter, Output } from '@angular/core';
 })
 export class PuntoInicioComponent implements OnInit {
 
-    sidebarValue = 10;
+    sidebarValue = 9;
     @Output() eventoSidebar = new EventEmitter<number>();
 
+    public tModel: any;
+    public opciones: any[];
+    public modelo1 = { select: null };
+    public modelo2 = {
+        select: null,
+        soloLectura: false,
+        selectMultiple: null
+    };
+    // public prueba = '';
+    public templateModel2: any;
+    public modelo: any;
 
-    recibirSidebar($event) {
-        this.sidebarValue = $event;
-        console.log(this.sidebarValue);
-    }
-
-    contraerSidebar() {
-        this.eventoSidebar.emit(this.sidebarValue);
-        this.sidebarValue = 10;
-    }
+    public showModal = false;
 
-    cards = [
-        {
-            titulo: 'Agendas y turnos', subtitulo: 'Propias y de otros profesionales', icono: 'star', botones: ['opcion-1', 'opcion-2'], estado: 'pendiente', fecha: '27/11/20'
-        },
-        {
-            titulo: 'Solicitudes', subtitulo: 'Desde organizaciones o ámbitos ', icono: 'account', botones: ['opcion-1', 'opcion-2'], estado: 'pendiente', fecha: '27/11/20'
-        },
-        {
-            titulo: 'Interconsultas', subtitulo: 'Recibidas y realizadas', icono: 'clock', botones: ['opcion-1', 'opcion-2'], estado: 'pendiente', fecha: '27/11/20'
-        },
-    ];
+    // public listadoPaciente: Paciente[];
+    pacientes$: Observable<Paciente[]>;
+    agendas$: Observable<Agenda[]>;
+    solicitudes$: Observable<Solicitud[]>;
+    menu$: Observable<Menu[]>;
+    foco = 'main';
+    public prueba = '';
+    public cambio = '';
 
     constructor(
-        private agendaService: AgendaService,
-        private pacienteService: PacienteService,
-        private route: ActivatedRoute,
-        private plex: Plex
+        private menuService: MenuService,
+        private solicitudService: SolicitudService,
+        private plex: Plex,
     ) { }
 
     ngOnInit() {
@@ -63,6 +63,9 @@ export class PuntoInicioComponent implements OnInit {
             maxHora: moment().add(180, 'minutes'),
             fechaDecounce: new Date(1970, 0, 1),
         };
+        this.menu$ = this.menuService.getMenues();
+        this.solicitudes$ = this.solicitudService.getSolicitudes();
+        this.plex.navbarVisible = false;
 
         // plex-phone
         // plex-float
@@ -94,28 +97,6 @@ export class PuntoInicioComponent implements OnInit {
         this.modelo = { checkbox: false, slide: false };
     }
 
-
-    public tModel: any;
-    public opciones: any[];
-    public modelo1 = { select: null };
-    public modelo2 = {
-        select: null,
-        soloLectura: false,
-        selectMultiple: null
-    };
-    // public prueba = '';
-    public templateModel2: any;
-    public modelo: any;
-
-    public showModal = false;
-
-    // public listadoPaciente: Paciente[];
-    pacientes$: Observable<Paciente[]>;
-    agendas$: Observable<Agenda[]>;
-    foco = 'main';
-    public prueba = '';
-    public cambio = '';
-
     updateMaxHora() {
         this.tModel.minHora = moment().add(30, 'minutes').add(1, 'days');
     }
@@ -128,4 +109,13 @@ export class PuntoInicioComponent implements OnInit {
         this.plex.info('success', 'Este cartel se demoro un segundo en aparecer después de escribir.');
     }
 
+    recibirSidebar($event) {
+        this.sidebarValue = $event;
+        console.log(this.sidebarValue);
+    }
+
+    contraerSidebar() {
+        this.eventoSidebar.emit(this.sidebarValue);
+        this.sidebarValue = 10;
+    }
 }
diff --git a/src/demo/app/templates/service/menu.service.ts b/src/demo/app/templates/service/menu.service.ts
new file mode 100644
index 000000000..158eb992f
--- /dev/null
+++ b/src/demo/app/templates/service/menu.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { Menu } from './menu';
+import { MENU } from './mock-menu';
+import { Observable, of } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable()
+
+export class MenuService {
+
+    constructor() {
+    }
+
+    getMenues(): Observable<Menu[]> {
+        return of(MENU);
+    }
+
+    getMenu(id: number | string) {
+        return this.getMenues().pipe(
+            map((menues: Menu[]) => menues.find(menu => menu.id === +id))
+        );
+    }
+}
diff --git a/src/demo/app/templates/service/menu.ts b/src/demo/app/templates/service/menu.ts
new file mode 100644
index 000000000..be68c6a45
--- /dev/null
+++ b/src/demo/app/templates/service/menu.ts
@@ -0,0 +1,10 @@
+export class Menu {
+    id: number;
+    nombre: string;
+    tipo: string;
+    semanticTag: String;
+    icono: string;
+    color: string;
+    path: string;
+    outlet: string;
+}
\ No newline at end of file
diff --git a/src/demo/app/templates/service/mock-menu.ts b/src/demo/app/templates/service/mock-menu.ts
new file mode 100644
index 000000000..beeaf754d
--- /dev/null
+++ b/src/demo/app/templates/service/mock-menu.ts
@@ -0,0 +1,74 @@
+import { Menu } from './menu';
+
+export const MENU: Menu[] = [
+    {
+        id: 1,
+        nombre: 'huds',
+        tipo: 'info',
+        semanticTag: 'solicitud',
+        icono: 'historial',
+        path: 'miHuds',
+        color: '#0070cc',
+        outlet: 'listado',
+    },
+    {
+        id: 2,
+        nombre: 'consultas',
+        tipo: 'custom',
+        semanticTag: 'solicitud',
+        icono: 'mano-corazon',
+        path: 'misConsultas',
+        color: '#0070cc',
+        outlet: 'listado',
+    },
+    {
+        id: 11,
+        nombre: 'documentos',
+        tipo: 'info',
+        semanticTag: 'registro',
+        icono: 'documento-cursor',
+        path: 'misDocumentos',
+        color: '#0070cc',
+        outlet: 'listado',
+    },
+    {
+        id: 12,
+        nombre: 'turnos',
+        tipo: 'info',
+        semanticTag: 'solicitud',
+        icono: 'turno-bold',
+        path: 'misTurnos',
+        color: '#0070cc',
+        outlet: 'listado',
+    },
+    {
+        id: 13,
+        nombre: 'mensajes',
+        tipo: 'info',
+        semanticTag: 'otro',
+        icono: 'mail',
+        path: 'misMensajes',
+        color: '#0070cc',
+        outlet: 'listado',
+    },
+    {
+        id: 14,
+        nombre: 'organizaciones',
+        tipo: 'info',
+        semanticTag: 'solicitud',
+        icono: 'hospital',
+        path: 'misOrganizaciones',
+        color: '#0070cc',
+        outlet: 'listado',
+    },
+    {
+        id: 9,
+        nombre: 'equipo de salud',
+        tipo: 'info',
+        semanticTag: 'solicitud',
+        icono: 'medico',
+        path: 'miEquipo',
+        color: '#0070cc',
+        outlet: 'listado',
+    },
+]
diff --git a/src/demo/app/templates/service/mock-solicitudes.ts b/src/demo/app/templates/service/mock-solicitudes.ts
new file mode 100644
index 000000000..38cd898ad
--- /dev/null
+++ b/src/demo/app/templates/service/mock-solicitudes.ts
@@ -0,0 +1,192 @@
+import { Solicitud } from "./solicitud";
+
+export const SOLICITUDES: Solicitud[] = [
+    {
+        id: 432,
+        fecha: "15/03/2021",
+        servicio: 'Servicio de kinesiología',
+        unidadOrganizativa: 'Huemul',
+        organizacion: "Hospital Provincial Neuquén 'Dr. Eduardo Castro Rendón'",
+        organizacionId: 1,
+        paciente:
+        {
+            id: 6,
+            documento: '38906735',
+            cuil: '20-38906735-5',
+            activo: true,
+            estado: 'temporal',
+            nombre: 'Marco Savino',
+            apellido: 'Santarelli',
+            nombreCompleto: '',
+            alias: '',
+            contacto: 2993420134,
+            sexo: 'masculino',
+            genero: 'masculino',
+            fechaNacimiento: '20/09/1957',
+            tipoIdentificacion: '',
+            numeroIdentificacion: '',
+            edad: 63,
+            edadReal: 'null',
+            fechaFallecimiento: null,
+            domicilio: 'Las acacias 410',
+            estadoCivil: undefined,
+            foto: 'https://library.kissclipart.com/20180901/krw/kissclipart-user-thumbnail-clipart-user-lorem-ipsum-is-simply-bfcb758bf53bea22.jpg',
+            relaciones: 'abuelo',
+            financiador: 'ISSN',
+            identificadores: 'null',
+            claveBlocking: 'null',
+            entidadesValidadoras: 'ISSN',
+            scan: 'null',
+            reportarError: false,
+            notaError: '',
+        },
+        profesional: "Giardino, Walter",
+        prestacion: "Consulta de neurología",
+        organizacionOrigen: "Centro de Salud 'Las Lajas'",
+        profesionalOrigen: "Barilari, Adrián",
+        prestacionOrigen: "Consulta general de medicina",
+        estado: "en curso",
+        registros: false,
+    },
+    {
+        id: 432,
+        fecha: "15/03/2021",
+        servicio: 'Servicio de kinesiología',
+        unidadOrganizativa: 'Huemul',
+        organizacion: "Hospital Provincial Neuquén 'Dr. Eduardo Castro Rendón'",
+        organizacionId: 1,
+        paciente:
+        {
+            id: 6,
+            documento: '38906735',
+            cuil: '20-38906735-5',
+            activo: true,
+            estado: 'temporal',
+            nombre: 'Marco Savino',
+            apellido: 'Santarelli',
+            nombreCompleto: '',
+            alias: '',
+            contacto: 2993420134,
+            sexo: 'masculino',
+            genero: 'masculino',
+            fechaNacimiento: '20/09/1957',
+            tipoIdentificacion: '',
+            numeroIdentificacion: '',
+            edad: 63,
+            edadReal: 'null',
+            fechaFallecimiento: null,
+            domicilio: 'Las acacias 410',
+            estadoCivil: undefined,
+            foto: 'https://library.kissclipart.com/20180901/krw/kissclipart-user-thumbnail-clipart-user-lorem-ipsum-is-simply-bfcb758bf53bea22.jpg',
+            relaciones: 'abuelo',
+            financiador: 'ISSN',
+            identificadores: 'null',
+            claveBlocking: 'null',
+            entidadesValidadoras: 'ISSN',
+            scan: 'null',
+            reportarError: false,
+            notaError: '',
+        },
+        profesional: "Giardino, Walter",
+        prestacion: "Consulta de neurología",
+        organizacionOrigen: "Centro de Salud 'Las Lajas'",
+        profesionalOrigen: "Barilari, Adrián",
+        prestacionOrigen: "Consulta general de medicina",
+        estado: "en curso",
+        registros: false,
+    },
+    {
+        id: 432,
+        fecha: "15/03/2021",
+        servicio: 'Servicio de kinesiología',
+        unidadOrganizativa: 'Huemul',
+        organizacion: "Hospital Provincial Neuquén 'Dr. Eduardo Castro Rendón'",
+        organizacionId: 1,
+        paciente:
+        {
+            id: 6,
+            documento: '38906735',
+            cuil: '20-38906735-5',
+            activo: true,
+            estado: 'temporal',
+            nombre: 'Marco Savino',
+            apellido: 'Santarelli',
+            nombreCompleto: '',
+            alias: '',
+            contacto: 2993420134,
+            sexo: 'masculino',
+            genero: 'masculino',
+            fechaNacimiento: '20/09/1957',
+            tipoIdentificacion: '',
+            numeroIdentificacion: '',
+            edad: 63,
+            edadReal: 'null',
+            fechaFallecimiento: null,
+            domicilio: 'Las acacias 410',
+            estadoCivil: undefined,
+            foto: 'https://library.kissclipart.com/20180901/krw/kissclipart-user-thumbnail-clipart-user-lorem-ipsum-is-simply-bfcb758bf53bea22.jpg',
+            relaciones: 'abuelo',
+            financiador: 'ISSN',
+            identificadores: 'null',
+            claveBlocking: 'null',
+            entidadesValidadoras: 'ISSN',
+            scan: 'null',
+            reportarError: false,
+            notaError: '',
+        },
+        profesional: "Giardino, Walter",
+        prestacion: "Consulta de neurología",
+        organizacionOrigen: "Centro de Salud 'Las Lajas'",
+        profesionalOrigen: "Barilari, Adrián",
+        prestacionOrigen: "Consulta general de medicina",
+        estado: "en curso",
+        registros: false,
+    },
+    {
+        id: 432,
+        fecha: "15/03/2021",
+        servicio: 'Servicio de kinesiología',
+        unidadOrganizativa: 'Huemul',
+        organizacion: "Hospital Provincial Neuquén 'Dr. Eduardo Castro Rendón'",
+        organizacionId: 1,
+        paciente:
+        {
+            id: 6,
+            documento: '38906735',
+            cuil: '20-38906735-5',
+            activo: true,
+            estado: 'temporal',
+            nombre: 'Marco Savino',
+            apellido: 'Santarelli',
+            nombreCompleto: '',
+            alias: '',
+            contacto: 2993420134,
+            sexo: 'masculino',
+            genero: 'masculino',
+            fechaNacimiento: '20/09/1957',
+            tipoIdentificacion: '',
+            numeroIdentificacion: '',
+            edad: 63,
+            edadReal: 'null',
+            fechaFallecimiento: null,
+            domicilio: 'Las acacias 410',
+            estadoCivil: undefined,
+            foto: 'https://library.kissclipart.com/20180901/krw/kissclipart-user-thumbnail-clipart-user-lorem-ipsum-is-simply-bfcb758bf53bea22.jpg',
+            relaciones: 'abuelo',
+            financiador: 'ISSN',
+            identificadores: 'null',
+            claveBlocking: 'null',
+            entidadesValidadoras: 'ISSN',
+            scan: 'null',
+            reportarError: false,
+            notaError: '',
+        },
+        profesional: "Giardino, Walter",
+        prestacion: "Consulta de neurología",
+        organizacionOrigen: "Centro de Salud 'Las Lajas'",
+        profesionalOrigen: "Barilari, Adrián",
+        prestacionOrigen: "Consulta general de medicina",
+        estado: "en curso",
+        registros: false,
+    },
+]
\ No newline at end of file
diff --git a/src/demo/app/templates/service/solicitud.service.ts b/src/demo/app/templates/service/solicitud.service.ts
new file mode 100644
index 000000000..8d36b5ae7
--- /dev/null
+++ b/src/demo/app/templates/service/solicitud.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { Solicitud } from './solicitud';
+import { SOLICITUDES } from './mock-solicitudes';
+import { Observable, of } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable()
+
+export class SolicitudService {
+
+    constructor() {
+    }
+
+    getSolicitudes(): Observable<Solicitud[]> {
+        return of(SOLICITUDES);
+    }
+
+    getSolicitud(id: number | string) {
+        return this.getSolicitudes().pipe(
+            map((solicitudes: Solicitud[]) => solicitudes.find(solicitud => solicitud.id === +id))
+        );
+    }
+}
diff --git a/src/demo/app/templates/service/solicitud.ts b/src/demo/app/templates/service/solicitud.ts
new file mode 100644
index 000000000..461c9d747
--- /dev/null
+++ b/src/demo/app/templates/service/solicitud.ts
@@ -0,0 +1,18 @@
+import { Paciente } from './paciente'
+
+export class Solicitud {
+    id: Number;
+    fecha: string;
+    servicio: string;
+    unidadOrganizativa: string;
+    organizacion: string;
+    organizacionId: number;
+    paciente: Paciente;
+    profesional: string;
+    prestacion: String;
+    organizacionOrigen: string;
+    profesionalOrigen: string;
+    prestacionOrigen: String;
+    estado: String;
+    registros: Boolean;
+}
diff --git a/src/demo/styles.scss b/src/demo/styles.scss
index a6f600982..d39b61c42 100644
--- a/src/demo/styles.scss
+++ b/src/demo/styles.scss
@@ -2,3 +2,10 @@ $typoPRO-font-path: '../lib/css/fonts/';
 @import '../lib/styles.scss';
 // Templates
 @import '../demo/app/templates/templates.scss';
+
+div[slider] {
+    overflow-x: scroll;
+    overflow-y: hidden;
+    height: 300px;
+    width: 30vw;
+}
\ No newline at end of file
diff --git a/src/lib/css/plex-accordion.scss b/src/lib/css/plex-accordion.scss
index 33d7c51f7..c832679c0 100644
--- a/src/lib/css/plex-accordion.scss
+++ b/src/lib/css/plex-accordion.scss
@@ -32,7 +32,7 @@ plex-accordion {
   
   [plex-accordion-title] {
     width: 100%;
-    display: flex;
+    display: inline-flex;
     justify-content: space-between;
     align-items: center;
   }

From b4efe7b655559fe6c3a18e82cdb515f5dfceabbb Mon Sep 17 00:00:00 2001
From: Julio Santarelli <santarellijulio@gmail.com>
Date: Thu, 10 Jun 2021 09:49:37 -0300
Subject: [PATCH 4/8] =?UTF-8?q?feat(mininav):=20componente=20para=20navega?=
 =?UTF-8?q?ci=C3=B3n=20lateral?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../punto-inicio-main.component.ts            |  3 +-
 .../punto-inicio-teleprestaciones.ts          |  4 +-
 .../punto-inicio/punto-inicio.component.html  | 55 +++++++++------
 .../punto-inicio/punto-inicio.component.ts    |  5 +-
 src/demo/app/templates/service/menu.ts        |  2 +-
 src/demo/app/templates/service/mock-menu.ts   |  2 +-
 .../app/templates/service/mock-solicitudes.ts | 70 +++++++++----------
 src/demo/app/templates/service/solicitud.ts   |  2 +-
 src/lib/css/plex-mininav.scss                 | 36 ++++++++++
 .../mininav-item/mininav-item.component.html  |  3 +
 .../mininav-item/mininav-item.component.ts    | 18 +++++
 src/lib/mininav/mininav.component.html        | 12 ++++
 src/lib/mininav/mininav.component.ts          | 16 +++++
 src/lib/module.ts                             |  6 ++
 src/lib/styles.scss                           |  1 +
 15 files changed, 169 insertions(+), 66 deletions(-)
 create mode 100644 src/lib/css/plex-mininav.scss
 create mode 100644 src/lib/mininav/mininav-item/mininav-item.component.html
 create mode 100644 src/lib/mininav/mininav-item/mininav-item.component.ts
 create mode 100644 src/lib/mininav/mininav.component.html
 create mode 100644 src/lib/mininav/mininav.component.ts

diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.ts b/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.ts
index 672415b5a..9ec5f4585 100644
--- a/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.ts
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.ts
@@ -76,7 +76,6 @@ export class PuntoInicioMainComponent implements OnInit {
             fechaDecounce: new Date(1970, 0, 1),
         };
 
-        // plex-phone
         // plex-float
         this.tModel = { valor: null };
 
@@ -90,7 +89,7 @@ export class PuntoInicioMainComponent implements OnInit {
                 label: 'mías',
                 key: 2,
             },
-        ]
+        ];
 
         // plex-select
         this.opciones = [{
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.ts b/src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.ts
index f021669ef..b339d57ef 100644
--- a/src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.ts
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.ts
@@ -5,7 +5,7 @@ import { EventEmitter, Output } from '@angular/core';
 // Servicios y modelo
 import { Plex } from './../../../../../../lib/core/service';
 import { Solicitud } from '../../../service/solicitud';
-import { SolicitudService } from '../../../service/solicitud.service'
+import { SolicitudService } from '../../../service/solicitud.service';
 
 @Component({
     selector: 'plex-teleprestaciones',
@@ -58,7 +58,6 @@ export class TeleprestacionesComponent implements OnInit {
             fechaDecounce: new Date(1970, 0, 1),
         };
 
-        // plex-phone
         // plex-float
         this.tModel = { valor: null };
 
@@ -102,7 +101,6 @@ export class TeleprestacionesComponent implements OnInit {
 
     recibirSidebar($event) {
         this.sidebarValue = $event;
-        console.log(this.sidebarValue);
     }
 
     contraerSidebar() {
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio.component.html b/src/demo/app/templates/punto-inicio/punto-inicio.component.html
index 435164940..6ad88f60e 100644
--- a/src/demo/app/templates/punto-inicio/punto-inicio.component.html
+++ b/src/demo/app/templates/punto-inicio/punto-inicio.component.html
@@ -18,26 +18,41 @@
         <plex-grid cols="12" type="auto">
 
             <!-- Menu Lateral -->
-            <plex-grid span="1" id="menu-vertical" class="d-flex align-self-start flex-column h-75 pt-3" justify
-                       size="xs">
-                <section class="d-flex flex-column" justify>
-                    <plex-label *ngFor="let card of menu$ | async" icon="{{ card.icono }}" type="" size="md"
-                                direction="column" class="color-{{ card.semanticTag}}" titulo="" subtitulo=""
-                                [routerLink]="[{ outlets: { listado: [card.path] } }]" tooltip="{{ card.path }}"
-                                tooltipPosition="right">
-                    </plex-label>
-                </section>
-                <section class="d-flex flex-column" justify>
-                    <plex-label icon="logo-youtube" size="md" direction="column" class="" titulo="" subtitulo=""
-                                routerLink="" tooltip="" tooltipPosition="right">
-                    </plex-label>
-                    <plex-label icon="-herramienta" size="md" direction="column" class="" titulo="" subtitulo=""
-                                routerLink="" tooltip="" tooltipPosition="right">
-                    </plex-label>
-                    <plex-label icon="salida" size="md" direction="column" class="" titulo="" subtitulo="" routerLink=""
-                                tooltip="" tooltipPosition="right">
-                    </plex-label>
-                </section>
+            <plex-grid span="1" class="d-flex align-self-start flex-column" justify size="xs">
+
+                <plex-mininav>
+                    <div superiores class="plex-minivav-container">
+                        <plex-mininav-item *ngFor="let card of menu$ | async">
+                            <plex-label icon="{{ card.icono }}" type="" size="md" direction="column"
+                                        class="color-{{ card.semanticTag}}" titulo="Titulo" subtitulo=""
+                                        [routerLink]="[{ outlets: { listado: [card.path] } }]" tooltip="{{ card.path }}"
+                                        tooltipPosition="right">
+                            </plex-label>
+                        </plex-mininav-item>
+                    </div>
+                    <div inferiores class="plex-minivav-container">
+                        <plex-mininav-item>
+                            <plex-label icon="logo-youtube" type="" size="md" direction="column" class=""
+                                        titulo="Titulo" subtitulo="" tooltip="" tooltipPosition="right">
+                            </plex-label>
+                        </plex-mininav-item>
+                    </div>
+                </plex-mininav>
+                <!--
+                    <section class="d-flex flex-column" justify>
+
+                    </section>
+                    <section class="d-flex flex-column" justify>
+                        <plex-label icon="logo-youtube" size="md" direction="column" class="" titulo="" subtitulo=""
+                                    routerLink="" tooltip="" tooltipPosition="right">
+                        </plex-label>
+                        <plex-label icon="-herramienta" size="md" direction="column" class="" titulo="" subtitulo=""
+                                    routerLink="" tooltip="" tooltipPosition="right">
+                        </plex-label>
+                        <plex-label icon="salida" size="md" direction="column" class="" titulo="" subtitulo="" routerLink=""
+                                    tooltip="" tooltipPosition="right">
+                        </plex-label>
+                    </section>-->
             </plex-grid>
             <plex-grid span="11" cols="3" class="align-self-start mr-2">
                 <!-- Teleprestaciones -->
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio.component.ts b/src/demo/app/templates/punto-inicio/punto-inicio.component.ts
index e60c79612..009984e36 100644
--- a/src/demo/app/templates/punto-inicio/punto-inicio.component.ts
+++ b/src/demo/app/templates/punto-inicio/punto-inicio.component.ts
@@ -9,13 +9,14 @@ import { Paciente } from '../service/paciente';
 import { Plex } from './../../../../lib/core/service';
 import { EventEmitter, Output } from '@angular/core';
 import { Solicitud } from '../service/solicitud';
-import { SolicitudService } from '../service/solicitud.service'
+import { SolicitudService } from '../service/solicitud.service';
 
 @Component({
     selector: 'plex-punto-inicio',
     templateUrl: './punto-inicio.component.html',
     styleUrls: ['./punto-inicio.component.scss']
 })
+
 export class PuntoInicioComponent implements OnInit {
 
     sidebarValue = 9;
@@ -67,7 +68,6 @@ export class PuntoInicioComponent implements OnInit {
         this.solicitudes$ = this.solicitudService.getSolicitudes();
         this.plex.navbarVisible = false;
 
-        // plex-phone
         // plex-float
         this.tModel = { valor: null };
 
@@ -111,7 +111,6 @@ export class PuntoInicioComponent implements OnInit {
 
     recibirSidebar($event) {
         this.sidebarValue = $event;
-        console.log(this.sidebarValue);
     }
 
     contraerSidebar() {
diff --git a/src/demo/app/templates/service/menu.ts b/src/demo/app/templates/service/menu.ts
index be68c6a45..dff9775cc 100644
--- a/src/demo/app/templates/service/menu.ts
+++ b/src/demo/app/templates/service/menu.ts
@@ -7,4 +7,4 @@ export class Menu {
     color: string;
     path: string;
     outlet: string;
-}
\ No newline at end of file
+}
diff --git a/src/demo/app/templates/service/mock-menu.ts b/src/demo/app/templates/service/mock-menu.ts
index beeaf754d..d4c61e3ad 100644
--- a/src/demo/app/templates/service/mock-menu.ts
+++ b/src/demo/app/templates/service/mock-menu.ts
@@ -71,4 +71,4 @@ export const MENU: Menu[] = [
         color: '#0070cc',
         outlet: 'listado',
     },
-]
+];
diff --git a/src/demo/app/templates/service/mock-solicitudes.ts b/src/demo/app/templates/service/mock-solicitudes.ts
index 38cd898ad..dcd6f1d23 100644
--- a/src/demo/app/templates/service/mock-solicitudes.ts
+++ b/src/demo/app/templates/service/mock-solicitudes.ts
@@ -1,12 +1,12 @@
-import { Solicitud } from "./solicitud";
+import { Solicitud } from './solicitud';
 
 export const SOLICITUDES: Solicitud[] = [
     {
         id: 432,
-        fecha: "15/03/2021",
+        fecha: '15/03/2021',
         servicio: 'Servicio de kinesiología',
-        unidadOrganizativa: 'Huemul',
-        organizacion: "Hospital Provincial Neuquén 'Dr. Eduardo Castro Rendón'",
+        unidadOrganizativa: 'Hueml',
+        organizacion: 'Hospital Provincial Neuquén Dr. Eduardo Castro Rendón',
         organizacionId: 1,
         paciente:
         {
@@ -40,20 +40,20 @@ export const SOLICITUDES: Solicitud[] = [
             reportarError: false,
             notaError: '',
         },
-        profesional: "Giardino, Walter",
-        prestacion: "Consulta de neurología",
-        organizacionOrigen: "Centro de Salud 'Las Lajas'",
-        profesionalOrigen: "Barilari, Adrián",
-        prestacionOrigen: "Consulta general de medicina",
-        estado: "en curso",
+        profesional: 'Giardino, Walter',
+        prestacion: 'Consulta de neurología',
+        organizacionOrigen: 'Centro de Salud Las Lajas',
+        profesionalOrigen: 'Barilari, Adrián',
+        prestacionOrigen: 'Consulta general de medicina',
+        estado: 'en curso',
         registros: false,
     },
     {
         id: 432,
-        fecha: "15/03/2021",
+        fecha: '15/03/2021',
         servicio: 'Servicio de kinesiología',
         unidadOrganizativa: 'Huemul',
-        organizacion: "Hospital Provincial Neuquén 'Dr. Eduardo Castro Rendón'",
+        organizacion: 'Hospital Provincial Neuquén Dr. Eduardo Castro Rendón',
         organizacionId: 1,
         paciente:
         {
@@ -87,20 +87,20 @@ export const SOLICITUDES: Solicitud[] = [
             reportarError: false,
             notaError: '',
         },
-        profesional: "Giardino, Walter",
-        prestacion: "Consulta de neurología",
-        organizacionOrigen: "Centro de Salud 'Las Lajas'",
-        profesionalOrigen: "Barilari, Adrián",
-        prestacionOrigen: "Consulta general de medicina",
-        estado: "en curso",
+        profesional: 'Giardino, Walter',
+        prestacion: 'Consulta de neurología',
+        organizacionOrigen: 'Centro de Salud Las Lajas',
+        profesionalOrigen: 'Barilari, Adrián',
+        prestacionOrigen: 'Consulta general de medicina',
+        estado: 'en curso',
         registros: false,
     },
     {
         id: 432,
-        fecha: "15/03/2021",
+        fecha: '15/03/2021',
         servicio: 'Servicio de kinesiología',
         unidadOrganizativa: 'Huemul',
-        organizacion: "Hospital Provincial Neuquén 'Dr. Eduardo Castro Rendón'",
+        organizacion: 'Hospital Provincial Neuquén Dr. Eduardo Castro Rendón',
         organizacionId: 1,
         paciente:
         {
@@ -134,20 +134,20 @@ export const SOLICITUDES: Solicitud[] = [
             reportarError: false,
             notaError: '',
         },
-        profesional: "Giardino, Walter",
-        prestacion: "Consulta de neurología",
-        organizacionOrigen: "Centro de Salud 'Las Lajas'",
-        profesionalOrigen: "Barilari, Adrián",
-        prestacionOrigen: "Consulta general de medicina",
-        estado: "en curso",
+        profesional: 'Giardino, Walter',
+        prestacion: 'Consulta de neurología',
+        organizacionOrigen: 'Centro de Salud Las Lajas',
+        profesionalOrigen: 'Barilari, Adrián',
+        prestacionOrigen: 'Consulta general de medicina',
+        estado: 'en curso',
         registros: false,
     },
     {
         id: 432,
-        fecha: "15/03/2021",
+        fecha: '15/03/2021',
         servicio: 'Servicio de kinesiología',
         unidadOrganizativa: 'Huemul',
-        organizacion: "Hospital Provincial Neuquén 'Dr. Eduardo Castro Rendón'",
+        organizacion: 'Hospital Provincial Neuquén Dr. Eduardo Castro Rendón',
         organizacionId: 1,
         paciente:
         {
@@ -181,12 +181,12 @@ export const SOLICITUDES: Solicitud[] = [
             reportarError: false,
             notaError: '',
         },
-        profesional: "Giardino, Walter",
-        prestacion: "Consulta de neurología",
-        organizacionOrigen: "Centro de Salud 'Las Lajas'",
-        profesionalOrigen: "Barilari, Adrián",
-        prestacionOrigen: "Consulta general de medicina",
-        estado: "en curso",
+        profesional: 'Giardino, Walter',
+        prestacion: 'Consulta de neurología',
+        organizacionOrigen: 'Centro de Salud Las Lajas',
+        profesionalOrigen: 'Barilari, Adrián',
+        prestacionOrigen: 'Consulta general de medicina',
+        estado: 'en curso',
         registros: false,
     },
-]
\ No newline at end of file
+];
diff --git a/src/demo/app/templates/service/solicitud.ts b/src/demo/app/templates/service/solicitud.ts
index 461c9d747..de046b92a 100644
--- a/src/demo/app/templates/service/solicitud.ts
+++ b/src/demo/app/templates/service/solicitud.ts
@@ -1,4 +1,4 @@
-import { Paciente } from './paciente'
+import { Paciente } from './paciente';
 
 export class Solicitud {
     id: Number;
diff --git a/src/lib/css/plex-mininav.scss b/src/lib/css/plex-mininav.scss
new file mode 100644
index 000000000..8002b0dc5
--- /dev/null
+++ b/src/lib/css/plex-mininav.scss
@@ -0,0 +1,36 @@
+plex-mininav {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: .5rem;
+    min-width: 50px;
+    max-width: fit-content;
+    height: 100%;
+
+    nav, ul {
+        display: block;
+        margin: 0;
+        padding: 0;
+
+        div {
+            &[superiores] {
+                height: 50%;
+            }
+            
+            &[inferiores] {
+                display: flex;
+                height: auto;
+                min-height: 200px;
+                align-items: flex-end;
+                justify-content: flex-end;
+            }
+
+            .plex-mininav-item {
+                width: 100%;
+                height: 50px;
+                list-style: none;
+            }
+
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/lib/mininav/mininav-item/mininav-item.component.html b/src/lib/mininav/mininav-item/mininav-item.component.html
new file mode 100644
index 000000000..e8f294346
--- /dev/null
+++ b/src/lib/mininav/mininav-item/mininav-item.component.html
@@ -0,0 +1,3 @@
+<li class="plex-mininav-item">
+    <ng-content select="plex-label"></ng-content>
+</li>
\ No newline at end of file
diff --git a/src/lib/mininav/mininav-item/mininav-item.component.ts b/src/lib/mininav/mininav-item/mininav-item.component.ts
new file mode 100644
index 000000000..9ed265db8
--- /dev/null
+++ b/src/lib/mininav/mininav-item/mininav-item.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'plex-mininav-item',
+    templateUrl: './mininav-item.component.html',
+})
+export class PlexMininavItemComponent implements OnInit {
+
+    @Input() target;
+    @Input() color;
+
+
+    constructor() { }
+
+    ngOnInit(): void {
+    }
+
+}
diff --git a/src/lib/mininav/mininav.component.html b/src/lib/mininav/mininav.component.html
new file mode 100644
index 000000000..0a4d443e6
--- /dev/null
+++ b/src/lib/mininav/mininav.component.html
@@ -0,0 +1,12 @@
+<section class="plex-mininav">
+    <ng-content select="plex-detail"></ng-content>
+    <ng-content select="plex-button"></ng-content>
+</section>
+<nav class="plex-mininav-container">
+    <ul>
+        <ng-content select="div[superiores]"></ng-content>
+    </ul>
+    <ul>
+        <ng-content select="div[inferiores]"></ng-content>
+    </ul>
+</nav>
\ No newline at end of file
diff --git a/src/lib/mininav/mininav.component.ts b/src/lib/mininav/mininav.component.ts
new file mode 100644
index 000000000..3b59096bb
--- /dev/null
+++ b/src/lib/mininav/mininav.component.ts
@@ -0,0 +1,16 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'plex-mininav',
+    templateUrl: './mininav.component.html',
+})
+export class PlexMininavComponent implements OnInit {
+
+    @Input() color;
+
+    constructor() { }
+
+    ngOnInit(): void {
+    }
+
+}
diff --git a/src/lib/module.ts b/src/lib/module.ts
index 8110a1233..8c2a42802 100644
--- a/src/lib/module.ts
+++ b/src/lib/module.ts
@@ -87,6 +87,8 @@ import { PlexTableSortPipe } from './table/table-sort.pipe';
 import { PlexColumnDirective } from './table/columns.directive';
 import { AccordionDirective } from './accordion/pl-accordion.directive';
 import { PlexVisualizadorService } from './core/plex-visualizador.service';
+import { PlexMininavComponent } from './mininav/mininav.component';
+import { PlexMininavItemComponent } from './mininav/mininav-item/mininav-item.component';
 
 @NgModule({
     imports: [
@@ -151,6 +153,8 @@ import { PlexVisualizadorService } from './core/plex-visualizador.service';
         PlexTableSortPipe,
         PlexColumnDirective,
         PlexSliderComponent,
+        PlexMininavComponent,
+        PlexMininavItemComponent,
 
         // Directivas
         AlignDirective,
@@ -229,6 +233,8 @@ import { PlexVisualizadorService } from './core/plex-visualizador.service';
         PlexTableColumnsComponent,
         PlexTableSortPipe,
         PlexSliderComponent,
+        PlexMininavComponent,
+        PlexMininavItemComponent,
 
         // Directivas
         AlignDirective,
diff --git a/src/lib/styles.scss b/src/lib/styles.scss
index f63a4340b..0a3ffe9cf 100644
--- a/src/lib/styles.scss
+++ b/src/lib/styles.scss
@@ -111,3 +111,4 @@ $mdi-font-path: "~@mdi/font/fonts/";
 @import "css/plex-grid";
 @import "css/plex-table";
 @import "css/plex-slider";
+@import "css/plex-mininav";

From eef350f36627afc0de3ac471602bbb1dcf07ee3b Mon Sep 17 00:00:00 2001
From: Julio Santarelli <santarellijulio@gmail.com>
Date: Tue, 15 Jun 2021 07:54:55 -0300
Subject: [PATCH 5/8] feat(sidenav): expandir/contraer + anchors

---
 .../punto-inicio/punto-inicio.component.html  | 116 ++++++++++-----
 .../punto-inicio/punto-inicio.component.ts    |  12 ++
 src/demo/app/templates/service/mock-menu.ts   |   2 +-
 src/lib/css/layout.scss                       |  20 +++
 src/lib/css/plex-mininav.scss                 | 135 +++++++++++++++---
 src/lib/layout/sidebar.component.ts           |   8 +-
 .../mininav-item/mininav-item.component.html  |   6 +-
 .../mininav-item/mininav-item.component.ts    |  25 +++-
 src/lib/mininav/mininav.component.html        |  28 ++--
 src/lib/mininav/mininav.component.ts          |  34 ++++-
 10 files changed, 297 insertions(+), 89 deletions(-)

diff --git a/src/demo/app/templates/punto-inicio/punto-inicio.component.html b/src/demo/app/templates/punto-inicio/punto-inicio.component.html
index 6ad88f60e..cff7d87c5 100644
--- a/src/demo/app/templates/punto-inicio/punto-inicio.component.html
+++ b/src/demo/app/templates/punto-inicio/punto-inicio.component.html
@@ -18,41 +18,19 @@
         <plex-grid cols="12" type="auto">
 
             <!-- Menu Lateral -->
-            <plex-grid span="1" class="d-flex align-self-start flex-column" justify size="xs">
-
+            <plex-grid span="1" class="d-flex align-self-start">
+                <!-- Mininav -->
                 <plex-mininav>
-                    <div superiores class="plex-minivav-container">
-                        <plex-mininav-item *ngFor="let card of menu$ | async">
-                            <plex-label icon="{{ card.icono }}" type="" size="md" direction="column"
-                                        class="color-{{ card.semanticTag}}" titulo="Titulo" subtitulo=""
-                                        [routerLink]="[{ outlets: { listado: [card.path] } }]" tooltip="{{ card.path }}"
-                                        tooltipPosition="right">
-                            </plex-label>
-                        </plex-mininav-item>
-                    </div>
-                    <div inferiores class="plex-minivav-container">
-                        <plex-mininav-item>
-                            <plex-label icon="logo-youtube" type="" size="md" direction="column" class=""
-                                        titulo="Titulo" subtitulo="" tooltip="" tooltipPosition="right">
-                            </plex-label>
+                    <ul superiores>
+                        <plex-mininav-item *ngFor="let item of menu$ | async" target="{{ item.path }}"
+                                           titulo="{{ item.nombre }}" icono="{{ item.icono }}">
                         </plex-mininav-item>
-                    </div>
+                    </ul>
+                    <ul inferiores>
+                        <plex-mininav-item titulo="" target="" icono="logo-youtube"></plex-mininav-item>
+                    </ul>
                 </plex-mininav>
-                <!--
-                    <section class="d-flex flex-column" justify>
 
-                    </section>
-                    <section class="d-flex flex-column" justify>
-                        <plex-label icon="logo-youtube" size="md" direction="column" class="" titulo="" subtitulo=""
-                                    routerLink="" tooltip="" tooltipPosition="right">
-                        </plex-label>
-                        <plex-label icon="-herramienta" size="md" direction="column" class="" titulo="" subtitulo=""
-                                    routerLink="" tooltip="" tooltipPosition="right">
-                        </plex-label>
-                        <plex-label icon="salida" size="md" direction="column" class="" titulo="" subtitulo="" routerLink=""
-                                    tooltip="" tooltipPosition="right">
-                        </plex-label>
-                    </section>-->
             </plex-grid>
             <plex-grid span="11" cols="3" class="align-self-start mr-2">
                 <!-- Teleprestaciones -->
@@ -63,7 +41,7 @@
                 </section>
 
                 <!-- Listado -->
-                <section span="2">
+                <section span="2" id="ancla">
                     <plex-punto-inicio-main (eventoSidebar)="recibirSidebar($event)">
                     </plex-punto-inicio-main>
                 </section>
@@ -72,13 +50,75 @@
 
     </plex-layout-main>
     <plex-layout-sidebar type="invert">
-        <plex-title titulo="Buscar">
-            <plex-button size="sm" type="warning" label="huds paciente"></plex-button>
-            <plex-button size="sm" type="info" label="paciente sin turno"></plex-button>
-            <!--<plex-dropdown size="sm" type="info" label="sin turno" [items]="items"></plex-dropdown>-->
+
+        <plex-title titulo="Buscar" main>
+            <plex-button size="sm" type="link" label="anchors/querySelector" routerLink="" fragment="ancla">
+            </plex-button>
             <plex-button type="danger" icon="close" size="sm" (click)="contraerSidebar()"></plex-button>
         </plex-title>
-        <ng-container>
+
+        <!-- Mininav -->
+        <plex-mininav [color]="color">
+            <ul superiores>
+                <plex-mininav-item *ngFor="let item of menu$ | async" target="target" titulo="{{ item.nombre }}"
+                                   icono="{{ item.icono }}">
+                </plex-mininav-item>
+            </ul>
+            <ul inferiores>
+                <plex-mininav-item titulo="" target="target" icono="logo-youtube"></plex-mininav-item>
+            </ul>
+        </plex-mininav>
+
+        <plex-title size="sm" titulo="subtitulo 1"></plex-title>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+            Cum
+            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
+        <plex-title size="sm" titulo="subtitulo 2"></plex-title>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+            Cum
+            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
+        <plex-title size="sm" titulo="subtitulo 1"></plex-title>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+            Cum
+            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
+        <plex-title size="sm" titulo="subtitulo 2"></plex-title>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+            Cum
+            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
+        <plex-title id="target" size="sm" titulo="id=target"></plex-title>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+            Cum
+            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
+        <plex-title #ancla size="sm" titulo="#ancla"></plex-title>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+            Cum
+            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
+        <plex-title #target size="sm" titulo="Target"></plex-title>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+            Cum
+            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
+        <plex-title id="ancla" name="target" size="sm" titulo="Ancla"></plex-title>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+            Cum
+            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
+
+        <ng-container *ngIf="sidebarValue === 10">
             <plex-wrapper>
                 <plex-datetime label="Ingrese la fecha" [(ngModel)]="tModel.fechaHora" name="fechaHora" required>
                 </plex-datetime>
@@ -88,7 +128,7 @@
                 <plex-text label="Buscar paciente" [(ngModel)]="templateModel2.nombre" name="nombre">
                 </plex-text>
             </plex-wrapper>
-            <section justify="center" class="align-items-center h-50">
+            <section aligned="center" vHeight="30">
                 <plex-label size="xl" type="info" titulo="Busca y selecciona un paciente"
                             subtitulo="prdras ver detalles del registro" icon="magnify" direction="column">
                 </plex-label>
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio.component.ts b/src/demo/app/templates/punto-inicio/punto-inicio.component.ts
index 009984e36..1a4e2420f 100644
--- a/src/demo/app/templates/punto-inicio/punto-inicio.component.ts
+++ b/src/demo/app/templates/punto-inicio/punto-inicio.component.ts
@@ -22,6 +22,18 @@ export class PuntoInicioComponent implements OnInit {
     sidebarValue = 9;
     @Output() eventoSidebar = new EventEmitter<number>();
 
+    vHeight = 200;
+    color = "#6a0dad"
+
+    items = [
+        {
+            opcion: 'paciente fuera de agenda',
+        },
+        {
+            opcion: 'paciente autocitado',
+        },
+    ]
+
     public tModel: any;
     public opciones: any[];
     public modelo1 = { select: null };
diff --git a/src/demo/app/templates/service/mock-menu.ts b/src/demo/app/templates/service/mock-menu.ts
index d4c61e3ad..e78a94c5b 100644
--- a/src/demo/app/templates/service/mock-menu.ts
+++ b/src/demo/app/templates/service/mock-menu.ts
@@ -7,7 +7,7 @@ export const MENU: Menu[] = [
         tipo: 'info',
         semanticTag: 'solicitud',
         icono: 'historial',
-        path: 'miHuds',
+        path: 'ancla',
         color: '#0070cc',
         outlet: 'listado',
     },
diff --git a/src/lib/css/layout.scss b/src/lib/css/layout.scss
index c9cc05e03..81041560f 100644
--- a/src/lib/css/layout.scss
+++ b/src/lib/css/layout.scss
@@ -66,6 +66,26 @@ plex-layout {
         }
     }
 
+    // mininav
+    plex-layout-sidebar {        
+        div.plex-box-content {
+            display: grid;
+            grid-template-columns: auto 1fr;
+            grid-template-rows: min-content 1fr;
+            grid-gap: .5rem;
+
+            > plex-mininav {
+                grid-column: 1;
+                grid-row: 2 / -1;
+            }
+    
+            div.plex-content {
+                grid-column: 2;
+                grid-row: 1 / -1;
+            }
+        }
+    }
+
     &[resizable="true"] > section {
         > div.row {
             > div[class*="col-"] {
diff --git a/src/lib/css/plex-mininav.scss b/src/lib/css/plex-mininav.scss
index 8002b0dc5..7db67e6e5 100644
--- a/src/lib/css/plex-mininav.scss
+++ b/src/lib/css/plex-mininav.scss
@@ -1,36 +1,125 @@
+@import './variables.scss';
+
 plex-mininav {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    padding: .5rem;
-    min-width: 50px;
-    max-width: fit-content;
-    height: 100%;
-
-    nav, ul {
-        display: block;
-        margin: 0;
-        padding: 0;
-
-        div {
+
+    > section {
+        --mininavWidth: 55px;
+        --mininavHeight: 100%;
+    
+        display: flex;
+        flex-direction: column;
+        //justify-content: space-between;
+        width: var(--mininavWidth);
+        height: var(--mininavHeight);
+        background-color: var(--nav-color);
+        overflow-x: hidden;
+        transition: all 900ms ease;
+
+        &.expanded {
+            width: 200px;
+            overflow-x: visible;
+
+            .nav-resizable-btn-wrapper {
+                left: 200px;
+                transition: left 900ms ease;
+
+            }
+        }
+  
+            /* Botonera sidebar expandible */
+            > .nav-resizable-btn-wrapper {
+                display: none;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
+                position: absolute;
+                z-index: 1;
+                left: 58px;
+                top: calc(50vh - 5rem);
+                background: $light-grey;
+                box-shadow: 1px 1px 12px 3px $dark-grey;
+                width: 2.5rem;
+                height: 2.5rem;
+                border-top-right-radius: 25%;
+                border-bottom-right-radius: 25%;
+                transform: scale(.6);
+                cursor: col-resize!important;
+                opacity: .4;
+
+                &.resizable {
+                    display: flex!important;
+                }
+
+                &:hover {
+                    opacity: 1;
+
+                    hr.divisor {
+                        height: 100vh;
+                        transition: height 1s ease;
+                        border: solid 2px $blue;
+                        left: 0;
+                    }
+                }
+                
+                hr.divisor {
+                    height: 2.5rem;
+                    position: absolute;
+                }
+            }
+        
+        // Mixins estados
+        @mixin mininavItemHover {
+                &:hover, &.selected {
+                    cursor: pointer;
+                    box-shadow: inset 0 0 0 2px var(--color-base)!important;
+                    background-color: var(--color-baseDark)!important;
+                    filter: brightness(0.85);
+                }
+        }
+        nav, ul {
+            display: flex;
+            flex-direction: column;
+        }
+
+        nav {
+            --vHeight: 200px;
+            height: calc(100vh - var(--vHeight));
+            }
+
+        ul {
+            --color-base: var(--nav-color);
+            justify-content: space-between;
+            align-items: flex-start;
+            margin: 0;
+            padding: 0;
+
+            background-color: var(--color-base);
+
             &[superiores] {
-                height: 50%;
+                justify-content: flex-start;
             }
             
             &[inferiores] {
-                display: flex;
-                height: auto;
-                min-height: 200px;
-                align-items: flex-end;
                 justify-content: flex-end;
             }
 
-            .plex-mininav-item {
+            plex-mininav-item {
                 width: 100%;
-                height: 50px;
-                list-style: none;
-            }
+                
+                & > li {
+                    --color-base: var(--nav-color);
+                    --color-baseDark: var(--nav-color);
 
+                    width: 100%;
+                    padding: .25rem .5rem .25rem 0;
+                    margin: 0;
+                    list-style: none;
+                    background-color: var(--nav-color)!important;
+                    
+                    @include mininavItemHover;
+                }
+            }
+    
         }
     }
 }
\ No newline at end of file
diff --git a/src/lib/layout/sidebar.component.ts b/src/lib/layout/sidebar.component.ts
index 7055935f7..a8686bf74 100644
--- a/src/lib/layout/sidebar.component.ts
+++ b/src/lib/layout/sidebar.component.ts
@@ -1,5 +1,4 @@
-import { Component, Input, ElementRef, HostListener, OnInit, AfterViewInit, ViewChild, Renderer2, ContentChildren, QueryList, ChangeDetectorRef } from '@angular/core';
-import { PlexListComponent } from '../item-list/list.component';
+import { Component, Input, ElementRef, HostListener, OnInit, AfterViewInit, ViewChild, Renderer2, ChangeDetectorRef } from '@angular/core';
 
 @Component({
     selector: 'plex-layout-sidebar',
@@ -8,7 +7,10 @@ import { PlexListComponent } from '../item-list/list.component';
         <ng-content select="header"></ng-content>
         <ng-content select="plex-title[main]"></ng-content>
         <div #content class="plex-box-content">
-            <ng-content></ng-content>
+            <ng-content select="plex-mininav"></ng-content>
+            <div class="plex-content">
+                <ng-content></ng-content>
+            </div>
         </div>
     </div>
     `,
diff --git a/src/lib/mininav/mininav-item/mininav-item.component.html b/src/lib/mininav/mininav-item/mininav-item.component.html
index e8f294346..440f94709 100644
--- a/src/lib/mininav/mininav-item/mininav-item.component.html
+++ b/src/lib/mininav/mininav-item/mininav-item.component.html
@@ -1,3 +1,5 @@
-<li class="plex-mininav-item">
-    <ng-content select="plex-label"></ng-content>
+<li class="plex-mininav-item" (click)="jumpToId(target)">
+    <plex-label icon="{{ icono }}" type="" size="{{ size }}" direction="row" titulo="{{ titulo }}"
+                subtitulo="{{ titulo }}" tooltip="{{ tooltip }}" tooltipPosition="right">
+    </plex-label>
 </li>
\ No newline at end of file
diff --git a/src/lib/mininav/mininav-item/mininav-item.component.ts b/src/lib/mininav/mininav-item/mininav-item.component.ts
index 9ed265db8..94f3c818b 100644
--- a/src/lib/mininav/mininav-item/mininav-item.component.ts
+++ b/src/lib/mininav/mininav-item/mininav-item.component.ts
@@ -1,18 +1,31 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
     selector: 'plex-mininav-item',
     templateUrl: './mininav-item.component.html',
 })
-export class PlexMininavItemComponent implements OnInit {
+export class PlexMininavItemComponent {
 
-    @Input() target;
+    @Input() titulo;
+    @Input() subtitulo;
+    @Input() size;
     @Input() color;
+    @Input() icono;
+    @Input() target;
+    @Input() tooltip;
+    @Input() selected = false;
 
+    constructor() {
+    }
 
-    constructor() { }
-
-    ngOnInit(): void {
+    jumpToId(fragment) {
+        window.location.hash = fragment;
+        if (fragment) {
+            const element = document.querySelector('[name="' + fragment + '"]');
+            if (element) {
+                element.scrollIntoView({ behavior: "smooth" });
+            }
+        }
     }
 
 }
diff --git a/src/lib/mininav/mininav.component.html b/src/lib/mininav/mininav.component.html
index 0a4d443e6..8ecbdf94e 100644
--- a/src/lib/mininav/mininav.component.html
+++ b/src/lib/mininav/mininav.component.html
@@ -1,12 +1,16 @@
-<section class="plex-mininav">
-    <ng-content select="plex-detail"></ng-content>
-    <ng-content select="plex-button"></ng-content>
-</section>
-<nav class="plex-mininav-container">
-    <ul>
-        <ng-content select="div[superiores]"></ng-content>
-    </ul>
-    <ul>
-        <ng-content select="div[inferiores]"></ng-content>
-    </ul>
-</nav>
\ No newline at end of file
+<section #miniNav [class.expanded]="expanded">
+    <div>
+        <ng-content></ng-content>
+    </div>
+    <nav class="plex-mininav-container">
+        <ng-content select="ul[superiores]"></ng-content>
+        <ng-content select="ul[inferiores]"></ng-content>
+    </nav>
+
+    <!-- expand button -->
+    <span *ngIf="resizable === true" class="nav-resizable-btn-wrapper" [class.resizable]="resizable" draggable="true">
+        <hr class="divisor">
+        <plex-button size="sm" (click)="expandir()" type="link" icon="{{expanded ? 'pico-izquierda' : 'pico-derecha'}}">
+        </plex-button>
+    </span>
+</section>
\ No newline at end of file
diff --git a/src/lib/mininav/mininav.component.ts b/src/lib/mininav/mininav.component.ts
index 3b59096bb..10f98120f 100644
--- a/src/lib/mininav/mininav.component.ts
+++ b/src/lib/mininav/mininav.component.ts
@@ -1,16 +1,42 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, ElementRef, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
+import { throwIfEmpty } from 'rxjs/operators';
 
 @Component({
     selector: 'plex-mininav',
     templateUrl: './mininav.component.html',
 })
-export class PlexMininavComponent implements OnInit {
+export class PlexMininavComponent implements OnChanges {
 
-    @Input() color;
+    @Input() color: string;
+    @Input() vHeight;
+    @Input() resizable = true;
+    @Input() expanded: boolean;
+    @Input() mode: 'filled' | 'outlined' = 'filled';
+
+    @ViewChild('miniNav', { static: true }) miniNav: ElementRef;
 
     constructor() { }
 
-    ngOnInit(): void {
+    ngOnChanges() {
+        if (this.color && this.color.length > 0) {
+            this.miniNav.nativeElement.style.setProperty('--nav-color', this.color);
+        }
+
+        if (this.color && this.color.length > 0 && this.mode === 'outlined') {
+            this.miniNav.nativeElement.style.setProperty('--nav-color', this.color + '20');
+        }
+    }
+
+    // Resize
+    expandir() {
+        //this.miniNav.nativeElement.style.setProperty("width", "200px");
+        this.expanded = !this.expanded;
+        console.log(this.expanded)
+    }
+
+    contraer() {
+
     }
 
+    // 
 }

From 2cfc84fd25848421ff8867b7156e8c0241f89f22 Mon Sep 17 00:00:00 2001
From: Julio Santarelli <santarellijulio@gmail.com>
Date: Sun, 18 Jul 2021 15:07:41 -0300
Subject: [PATCH 6/8] feat(plex-mininav): corrige estilos + custom colors

---
 .../punto-inicio/punto-inicio.component.html  |  12 +-
 .../punto-inicio/punto-inicio.component.ts    |   4 +-
 src/lib/css/plex-mininav.scss                 | 122 +++++++++++-------
 .../mininav-item/mininav-item.component.html  |   3 +-
 .../mininav-item/mininav-item.component.ts    |   2 +-
 src/lib/mininav/mininav.component.html        |   4 +-
 src/lib/mininav/mininav.component.ts          |  17 +--
 7 files changed, 91 insertions(+), 73 deletions(-)

diff --git a/src/demo/app/templates/punto-inicio/punto-inicio.component.html b/src/demo/app/templates/punto-inicio/punto-inicio.component.html
index cff7d87c5..05252f1d0 100644
--- a/src/demo/app/templates/punto-inicio/punto-inicio.component.html
+++ b/src/demo/app/templates/punto-inicio/punto-inicio.component.html
@@ -1,7 +1,6 @@
-<plex-layout main="{{ sidebarValue }}" resizable="true" [min]="2" [max]="8" [steps]="2">
+<plex-layout main="{{ sidebarValue }}" resizable="true" [min]="2" [max]="6" [steps]="2">
     <plex-layout-main>
-        <header>
-            <!-- Cabezal -->
+        <!--<header>
             <section span="12" justify class="bg-info">
                 <div class="ml-3 my-2">
                     <plex-label icon="medico" size="xl" type="default" titulo="Bienvenido Walter"
@@ -14,13 +13,14 @@
                     <plex-button class="ml-2" type="info">Inicio Andes</plex-button>
                 </div>
             </section>
-        </header>
+        </header>-->
         <plex-grid cols="12" type="auto">
 
             <!-- Menu Lateral -->
             <plex-grid span="1" class="d-flex align-self-start">
+
                 <!-- Mininav -->
-                <plex-mininav>
+                <plex-mininav [color]="color">
                     <ul superiores>
                         <plex-mininav-item *ngFor="let item of menu$ | async" target="{{ item.path }}"
                                            titulo="{{ item.nombre }}" icono="{{ item.icono }}">
@@ -58,7 +58,7 @@
         </plex-title>
 
         <!-- Mininav -->
-        <plex-mininav [color]="color">
+        <plex-mininav>
             <ul superiores>
                 <plex-mininav-item *ngFor="let item of menu$ | async" target="target" titulo="{{ item.nombre }}"
                                    icono="{{ item.icono }}">
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio.component.ts b/src/demo/app/templates/punto-inicio/punto-inicio.component.ts
index 1a4e2420f..0f610d2b9 100644
--- a/src/demo/app/templates/punto-inicio/punto-inicio.component.ts
+++ b/src/demo/app/templates/punto-inicio/punto-inicio.component.ts
@@ -23,7 +23,7 @@ export class PuntoInicioComponent implements OnInit {
     @Output() eventoSidebar = new EventEmitter<number>();
 
     vHeight = 200;
-    color = "#6a0dad"
+    color = '#92278e';
 
     items = [
         {
@@ -32,7 +32,7 @@ export class PuntoInicioComponent implements OnInit {
         {
             opcion: 'paciente autocitado',
         },
-    ]
+    ];
 
     public tModel: any;
     public opciones: any[];
diff --git a/src/lib/css/plex-mininav.scss b/src/lib/css/plex-mininav.scss
index 7db67e6e5..42765cc7f 100644
--- a/src/lib/css/plex-mininav.scss
+++ b/src/lib/css/plex-mininav.scss
@@ -4,68 +4,71 @@ plex-mininav {
 
     > section {
         --mininavWidth: 55px;
-        --mininavHeight: 100%;
-    
+        --mininavHeight: 100vh;
+        --border-color: gray;
+        
         display: flex;
         flex-direction: column;
-        //justify-content: space-between;
         width: var(--mininavWidth);
         height: var(--mininavHeight);
         background-color: var(--nav-color);
         overflow-x: hidden;
         transition: all 900ms ease;
+        border-right: solid 1px var(--border-color);
+        color: white;
 
-        &.expanded {
-            width: 200px;
-            overflow-x: visible;
+        //&.expanded {
+        //    --expandedWidth: 200px;
 
-            .nav-resizable-btn-wrapper {
-                left: 200px;
-                transition: left 900ms ease;
+        //    width: var(--expandedWidth);
+        //    overflow-x: visible;
 
-            }
-        }
+        //    .nav-resizable-btn-wrapper {
+        //        left: calc(var(--expandedWidth) + 16px);
+        //    }
+        //}
   
             /* Botonera sidebar expandible */
-            > .nav-resizable-btn-wrapper {
-                display: none;
-                flex-direction: row;
-                justify-content: center;
-                align-items: center;
-                position: absolute;
-                z-index: 1;
-                left: 58px;
-                top: calc(50vh - 5rem);
-                background: $light-grey;
-                box-shadow: 1px 1px 12px 3px $dark-grey;
-                width: 2.5rem;
-                height: 2.5rem;
-                border-top-right-radius: 25%;
-                border-bottom-right-radius: 25%;
-                transform: scale(.6);
-                cursor: col-resize!important;
-                opacity: .4;
-
-                &.resizable {
-                    display: flex!important;
-                }
+            //> .nav-resizable-btn-wrapper {
+            //    display: none;
+            //    flex-direction: row;
+            //    justify-content: center;
+            //    align-items: center;
+            //    position: absolute;
+            //    z-index: 1;
+            //    left: 71px;
+            //    top: calc(50vh - 5rem);
+            //    background: $light-grey;
+            //    box-shadow: 1px 1px 12px 3px $dark-grey;
+            //    width: 2.5rem;
+            //    height: 2.5rem;
+            //    border-top-right-radius: 25%;
+            //    border-bottom-right-radius: 25%;
+            //    transform: scale(.6);
+            //    cursor: col-resize!important;
+            //    opacity: .4;
 
-                &:hover {
-                    opacity: 1;
+            //    &.resizable {
+            //        display: flex!important;
+            //        transition: all 900ms ease;
+            //    }
 
-                    hr.divisor {
-                        height: 100vh;
-                        transition: height 1s ease;
-                        border: solid 2px $blue;
-                        left: 0;
-                    }
-                }
+            //    &:hover {
+            //        opacity: 1;
+
+            //        hr.divisor {
+            //            height: 100vh;
+            //            transition: height 1s ease;
+            //            border: solid 2px $blue;
+            //            left: 0;
+            //        }
+            //    }
                 
-                hr.divisor {
-                    height: 2.5rem;
-                    position: absolute;
-                }
-            }
+            //    hr.divisor {
+            //        height: 2.5rem;
+            //        position: absolute;
+            //    }
+            //}
         
         // Mixins estados
         @mixin mininavItemHover {
@@ -84,6 +87,7 @@ plex-mininav {
         nav {
             --vHeight: 200px;
             height: calc(100vh - var(--vHeight));
+            position: fixed;
             }
 
         ul {
@@ -122,4 +126,28 @@ plex-mininav {
     
         }
     }
+}
+
+plex-layout-sidebar {
+    plex-mininav {
+        > section {
+            --border-color: white;
+            border-right: solid 1px var(--border-color);
+
+            &.expanded {
+                --expandedWidth: 200px;
+    
+                width: var(--expandedWidth);
+                overflow-x: visible;
+    
+                .nav-resizable-btn-wrapper {
+                    left: var(--expandedWidth);
+                }
+            }
+
+            > .nav-resizable-btn-wrapper {
+                left: 58px;
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/lib/mininav/mininav-item/mininav-item.component.html b/src/lib/mininav/mininav-item/mininav-item.component.html
index 440f94709..0a8c9fb82 100644
--- a/src/lib/mininav/mininav-item/mininav-item.component.html
+++ b/src/lib/mininav/mininav-item/mininav-item.component.html
@@ -1,5 +1,4 @@
 <li class="plex-mininav-item" (click)="jumpToId(target)">
-    <plex-label icon="{{ icono }}" type="" size="{{ size }}" direction="row" titulo="{{ titulo }}"
-                subtitulo="{{ titulo }}" tooltip="{{ tooltip }}" tooltipPosition="right">
+    <plex-label icon="{{ icono }}" type="" size="{{ size }}" tooltip="{{ tooltip }}" tooltipPosition="right">
     </plex-label>
 </li>
\ No newline at end of file
diff --git a/src/lib/mininav/mininav-item/mininav-item.component.ts b/src/lib/mininav/mininav-item/mininav-item.component.ts
index 94f3c818b..12efe5d4b 100644
--- a/src/lib/mininav/mininav-item/mininav-item.component.ts
+++ b/src/lib/mininav/mininav-item/mininav-item.component.ts
@@ -23,7 +23,7 @@ export class PlexMininavItemComponent {
         if (fragment) {
             const element = document.querySelector('[name="' + fragment + '"]');
             if (element) {
-                element.scrollIntoView({ behavior: "smooth" });
+                element.scrollIntoView({ behavior: 'smooth' });
             }
         }
     }
diff --git a/src/lib/mininav/mininav.component.html b/src/lib/mininav/mininav.component.html
index 8ecbdf94e..26280f39e 100644
--- a/src/lib/mininav/mininav.component.html
+++ b/src/lib/mininav/mininav.component.html
@@ -8,9 +8,9 @@
     </nav>
 
     <!-- expand button -->
-    <span *ngIf="resizable === true" class="nav-resizable-btn-wrapper" [class.resizable]="resizable" draggable="true">
+    <!--<span *ngIf="resizable === true" class="nav-resizable-btn-wrapper" [class.resizable]="resizable" draggable="true">
         <hr class="divisor">
         <plex-button size="sm" (click)="expandir()" type="link" icon="{{expanded ? 'pico-izquierda' : 'pico-derecha'}}">
         </plex-button>
-    </span>
+    </span>-->
 </section>
\ No newline at end of file
diff --git a/src/lib/mininav/mininav.component.ts b/src/lib/mininav/mininav.component.ts
index 10f98120f..ffaed596d 100644
--- a/src/lib/mininav/mininav.component.ts
+++ b/src/lib/mininav/mininav.component.ts
@@ -1,5 +1,4 @@
-import { Component, ElementRef, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
-import { throwIfEmpty } from 'rxjs/operators';
+import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core';
 
 @Component({
     selector: 'plex-mininav',
@@ -28,15 +27,7 @@ export class PlexMininavComponent implements OnChanges {
     }
 
     // Resize
-    expandir() {
-        //this.miniNav.nativeElement.style.setProperty("width", "200px");
-        this.expanded = !this.expanded;
-        console.log(this.expanded)
-    }
-
-    contraer() {
-
-    }
-
-    // 
+    //expandir() {
+    //    this.expanded = !this.expanded;
+    //}
 }

From 34d67ac766d007377f3aea19ff1d1b3fc399d63b Mon Sep 17 00:00:00 2001
From: Julio Santarelli <santarellijulio@gmail.com>
Date: Tue, 24 Aug 2021 12:23:03 -0300
Subject: [PATCH 7/8] feat(mininav): agrega title + subtitle a items

---
 src/lib/css/plex-mininav.scss                 | 121 ++++++++++--------
 .../mininav-item/mininav-item.component.html  |   3 +-
 src/lib/mininav/mininav.component.html        |   4 +-
 src/lib/mininav/mininav.component.ts          |   6 +-
 4 files changed, 76 insertions(+), 58 deletions(-)

diff --git a/src/lib/css/plex-mininav.scss b/src/lib/css/plex-mininav.scss
index 42765cc7f..a64aeafe8 100644
--- a/src/lib/css/plex-mininav.scss
+++ b/src/lib/css/plex-mininav.scss
@@ -12,63 +12,81 @@ plex-mininav {
         width: var(--mininavWidth);
         height: var(--mininavHeight);
         background-color: var(--nav-color);
-        overflow-x: hidden;
-        transition: all 900ms ease;
+        transition: width 900ms ease;
         border-right: solid 1px var(--border-color);
         color: white;
 
-        //&.expanded {
-        //    --expandedWidth: 200px;
+        & > nav {
+            overflow-x: hidden;
+            plex-label > div.plex-label > div > span {
+                opacity: 0;
+                white-space: pre;
+            }
+        }
 
-        //    width: var(--expandedWidth);
-        //    overflow-x: visible;
+        &.expanded {
+            --mininavWidth: 200px;
+
+            width: var(--mininavWidth);
+            > nav {
+                overflow-x: visible;
+                plex-label > div.plex-label > div > span {
+                    opacity: 1;
+                    transition: opacity 900ms ease-in;
+                } 
+                
+                > ul > plex-mininav-item > li {
+                    width: var(--mininavWidth);
+                    transition: width 900ms ease-in;
+                }
+            }
 
-        //    .nav-resizable-btn-wrapper {
-        //        left: calc(var(--expandedWidth) + 16px);
-        //    }
-        //}
+            .nav-resizable-btn-wrapper {
+                left: calc(var(--mininavWidth) + 16px);
+            }
+        }
   
             /* Botonera sidebar expandible */
-            //> .nav-resizable-btn-wrapper {
-            //    display: none;
-            //    flex-direction: row;
-            //    justify-content: center;
-            //    align-items: center;
-            //    position: absolute;
-            //    z-index: 1;
-            //    left: 71px;
-            //    top: calc(50vh - 5rem);
-            //    background: $light-grey;
-            //    box-shadow: 1px 1px 12px 3px $dark-grey;
-            //    width: 2.5rem;
-            //    height: 2.5rem;
-            //    border-top-right-radius: 25%;
-            //    border-bottom-right-radius: 25%;
-            //    transform: scale(.6);
-            //    cursor: col-resize!important;
-            //    opacity: .4;
-
-            //    &.resizable {
-            //        display: flex!important;
-            //        transition: all 900ms ease;
-            //    }
-
-            //    &:hover {
-            //        opacity: 1;
-
-            //        hr.divisor {
-            //            height: 100vh;
-            //            transition: height 1s ease;
-            //            border: solid 2px $blue;
-            //            left: 0;
-            //        }
-            //    }
+            > .nav-resizable-btn-wrapper {
+                display: none;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
+                position: absolute;
+                z-index: 1;
+                left: 71px;
+                top: calc(50vh - 5rem);
+                background: $light-grey;
+                box-shadow: 1px 1px 12px 3px $dark-grey;
+                width: 2.5rem;
+                height: 2.5rem;
+                border-top-right-radius: 25%;
+                border-bottom-right-radius: 25%;
+                transform: scale(.6);
+                cursor: col-resize!important;
+                opacity: .4;
+
+                &.resizable {
+                    display: flex!important;
+                    transition: all 900ms ease;
+                }
+
+                &:hover {
+                    opacity: 1;
+
+                    hr.divisor {
+                        height: 100vh;
+                        transition: height 1s ease;
+                        border: solid 2px $blue;
+                        left: 0;
+                    }
+                }
                 
-            //    hr.divisor {
-            //        height: 2.5rem;
-            //        position: absolute;
-            //    }
-            //}
+                hr.divisor {
+                    height: 2.5rem;
+                    position: absolute;
+                }
+            }
         
         // Mixins estados
         @mixin mininavItemHover {
@@ -108,14 +126,13 @@ plex-mininav {
             }
 
             plex-mininav-item {
-                width: 100%;
                 
                 & > li {
                     --color-base: var(--nav-color);
                     --color-baseDark: var(--nav-color);
 
-                    width: 100%;
-                    padding: .25rem .5rem .25rem 0;
+                    width: var(--mininavWidth);
+                    padding: .5rem .5rem .5rem 0;
                     margin: 0;
                     list-style: none;
                     background-color: var(--nav-color)!important;
diff --git a/src/lib/mininav/mininav-item/mininav-item.component.html b/src/lib/mininav/mininav-item/mininav-item.component.html
index 0a8c9fb82..1f7b37e98 100644
--- a/src/lib/mininav/mininav-item/mininav-item.component.html
+++ b/src/lib/mininav/mininav-item/mininav-item.component.html
@@ -1,4 +1,5 @@
 <li class="plex-mininav-item" (click)="jumpToId(target)">
-    <plex-label icon="{{ icono }}" type="" size="{{ size }}" tooltip="{{ tooltip }}" tooltipPosition="right">
+    <plex-label titulo="{{ titulo }}" subtitulo="{{ subtitulo }}" icon="{{ icono }}" type="" size="{{ size }}"
+                tooltip="{{ tooltip }}" tooltipPosition="right" case="capitalize">
     </plex-label>
 </li>
\ No newline at end of file
diff --git a/src/lib/mininav/mininav.component.html b/src/lib/mininav/mininav.component.html
index 26280f39e..8ecbdf94e 100644
--- a/src/lib/mininav/mininav.component.html
+++ b/src/lib/mininav/mininav.component.html
@@ -8,9 +8,9 @@
     </nav>
 
     <!-- expand button -->
-    <!--<span *ngIf="resizable === true" class="nav-resizable-btn-wrapper" [class.resizable]="resizable" draggable="true">
+    <span *ngIf="resizable === true" class="nav-resizable-btn-wrapper" [class.resizable]="resizable" draggable="true">
         <hr class="divisor">
         <plex-button size="sm" (click)="expandir()" type="link" icon="{{expanded ? 'pico-izquierda' : 'pico-derecha'}}">
         </plex-button>
-    </span>-->
+    </span>
 </section>
\ No newline at end of file
diff --git a/src/lib/mininav/mininav.component.ts b/src/lib/mininav/mininav.component.ts
index ffaed596d..73fd501ea 100644
--- a/src/lib/mininav/mininav.component.ts
+++ b/src/lib/mininav/mininav.component.ts
@@ -27,7 +27,7 @@ export class PlexMininavComponent implements OnChanges {
     }
 
     // Resize
-    //expandir() {
-    //    this.expanded = !this.expanded;
-    //}
+    expandir() {
+        this.expanded = !this.expanded;
+    }
 }

From 64e94e28e3d97b0372eb6ccb0c006cea522c94b7 Mon Sep 17 00:00:00 2001
From: Julio Santarelli <santarellijulio@gmail.com>
Date: Wed, 25 Aug 2021 14:00:33 -0300
Subject: [PATCH 8/8] feat(plex-mininav): refactor componente

---
 .../punto-inicio-main.component.ts            |   2 +-
 .../punto-inicio-teleprestaciones.ts          |   1 -
 .../punto-inicio/punto-inicio.component.html  |  97 ++++------
 .../punto-inicio/punto-inicio.component.ts    |   1 -
 src/demo/app/templates/service/menu.ts        |   3 +-
 src/demo/app/templates/service/mock-menu.ts   |  21 ++-
 src/demo/app/templates/template-inicio.html   |  24 +--
 src/demo/app/templates/template-inicio.ts     |   9 +
 src/lib/css/layout.scss                       |  20 ++
 src/lib/css/plex-mininav.scss                 | 176 +++++++++---------
 src/lib/layout/main.component.ts              |   9 +-
 .../mininav-item/mininav-item.component.html  |   5 -
 .../mininav-item/mininav-item.component.ts    |  31 ++-
 src/lib/mininav/mininav.component.html        |  16 --
 src/lib/mininav/mininav.component.ts          |  26 ++-
 15 files changed, 229 insertions(+), 212 deletions(-)
 delete mode 100644 src/lib/mininav/mininav-item/mininav-item.component.html
 delete mode 100644 src/lib/mininav/mininav.component.html

diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.ts b/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.ts
index 9ec5f4585..a59b49af5 100644
--- a/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.ts
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.ts
@@ -14,7 +14,7 @@ import { EventEmitter, Output } from '@angular/core';
 })
 export class PuntoInicioMainComponent implements OnInit {
 
-    sidebarValue = 10;
+    sidebarValue = 9;
     filtros = false;
     @Output() eventoSidebar = new EventEmitter<number>();
 
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.ts b/src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.ts
index b339d57ef..e2ade1da2 100644
--- a/src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.ts
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.ts
@@ -43,7 +43,6 @@ export class TeleprestacionesComponent implements OnInit {
 
     ngOnInit() {
         this.solicitudes$ = this.solicitudService.getSolicitudes();
-        this.plex.navbarVisible = false;
 
         // plex-datetime
         this.tModel = {
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio.component.html b/src/demo/app/templates/punto-inicio/punto-inicio.component.html
index 05252f1d0..733aeb77b 100644
--- a/src/demo/app/templates/punto-inicio/punto-inicio.component.html
+++ b/src/demo/app/templates/punto-inicio/punto-inicio.component.html
@@ -1,75 +1,54 @@
 <plex-layout main="{{ sidebarValue }}" resizable="true" [min]="2" [max]="6" [steps]="2">
     <plex-layout-main>
-        <!--<header>
-            <section span="12" justify class="bg-info">
-                <div class="ml-3 my-2">
-                    <plex-label icon="medico" size="xl" type="default" titulo="Bienvenido Walter"
-                                subtitulo="¿cómo será tu jornada laboral hoy?">
-                    </plex-label>
-                </div>
-                <div>
-                    <plex-button class="ml-2" type="info">Mapa de camas</plex-button>
-                    <plex-button class="ml-2" type="info">Huds</plex-button>
-                    <plex-button class="ml-2" type="info">Inicio Andes</plex-button>
-                </div>
-            </section>
-        </header>-->
-        <plex-grid cols="12" type="auto">
-
-            <!-- Menu Lateral -->
-            <plex-grid span="1" class="d-flex align-self-start">
-
-                <!-- Mininav -->
-                <plex-mininav [color]="color">
-                    <ul superiores>
-                        <plex-mininav-item *ngFor="let item of menu$ | async" target="{{ item.path }}"
-                                           titulo="{{ item.nombre }}" icono="{{ item.icono }}">
-                        </plex-mininav-item>
-                    </ul>
-                    <ul inferiores>
-                        <plex-mininav-item titulo="" target="" icono="logo-youtube"></plex-mininav-item>
-                    </ul>
-                </plex-mininav>
+        <plex-title titulo="punto de inicio rup" main></plex-title>
+        <!-- Mininav -->
+        <plex-mininav>
+            <ul sup>
+                <li plex-mininav-item *ngFor="let item of menu$ | async" target="{{ item.target }}"
+                    titulo="{{ item.nombre }}" icono="{{ item.icono }}">
+                </li>
+            </ul>
+            <ul inf>
+                <li plex-mininav-item titulo="Navegar por ruteo" link="templates" icono="logo-youtube">
+                </li>
+            </ul>
+        </plex-mininav>
 
-            </plex-grid>
-            <plex-grid span="11" cols="3" class="align-self-start mr-2">
-                <!-- Teleprestaciones -->
-                <section span="1" class="align-self-start mr-2">
-                    <plex-teleprestaciones>
+        <plex-grid cols="3" class="align-self-start mr-2">
+            <!-- Teleprestaciones -->
+            <section span="1" class="align-self-start mr-2">
+                <plex-teleprestaciones>
 
-                    </plex-teleprestaciones>
-                </section>
+                </plex-teleprestaciones>
+            </section>
 
-                <!-- Listado -->
-                <section span="2" id="ancla">
-                    <plex-punto-inicio-main (eventoSidebar)="recibirSidebar($event)">
-                    </plex-punto-inicio-main>
-                </section>
-            </plex-grid>
+            <!-- Listado -->
+            <section span="2" id="ancla">
+                <plex-punto-inicio-main (eventoSidebar)="recibirSidebar($event)">
+                </plex-punto-inicio-main>
+            </section>
         </plex-grid>
 
     </plex-layout-main>
     <plex-layout-sidebar type="invert">
 
         <plex-title titulo="Buscar" main>
-            <plex-button size="sm" type="link" label="anchors/querySelector" routerLink="" fragment="ancla">
-            </plex-button>
             <plex-button type="danger" icon="close" size="sm" (click)="contraerSidebar()"></plex-button>
         </plex-title>
 
-        <!-- Mininav -->
         <plex-mininav>
-            <ul superiores>
-                <plex-mininav-item *ngFor="let item of menu$ | async" target="target" titulo="{{ item.nombre }}"
-                                   icono="{{ item.icono }}">
-                </plex-mininav-item>
+            <ul sup>
+                <li plex-mininav-item *ngFor="let item of menu$ | async" target="{{ item.target }}"
+                    titulo="{{ item.nombre }}" tooltip="{{ item.target }}" icono="{{ item.icono }}">
+                </li>
             </ul>
-            <ul inferiores>
-                <plex-mininav-item titulo="" target="target" icono="logo-youtube"></plex-mininav-item>
+            <ul inf>
+                <li plex-mininav-item titulo="" link="accordion" titulo="Navegar por ruteo" icono="logo-youtube">
+                </li>
             </ul>
         </plex-mininav>
 
-        <plex-title size="sm" titulo="subtitulo 1"></plex-title>
+        <plex-title anchor="miHuds" size="sm" titulo="miHuds"></plex-title>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
             Cum
             sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
@@ -93,25 +72,19 @@
             sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
             ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
             fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
-        <plex-title id="target" size="sm" titulo="id=target"></plex-title>
+        <plex-title anchor="misConsultas" size="sm" titulo="id=misConsultas"></plex-title>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
             Cum
             sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
             ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
             fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
-        <plex-title #ancla size="sm" titulo="#ancla"></plex-title>
-        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
-            Cum
-            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
-            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
-            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
-        <plex-title #target size="sm" titulo="Target"></plex-title>
+        <plex-title size="sm" titulo="subtitulo 1"></plex-title>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
             Cum
             sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
             ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
             fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
-        <plex-title id="ancla" name="target" size="sm" titulo="Ancla"></plex-title>
+        <plex-title size="sm" titulo="subtitulo 2"></plex-title>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
             Cum
             sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio.component.ts b/src/demo/app/templates/punto-inicio/punto-inicio.component.ts
index 0f610d2b9..20e44372f 100644
--- a/src/demo/app/templates/punto-inicio/punto-inicio.component.ts
+++ b/src/demo/app/templates/punto-inicio/punto-inicio.component.ts
@@ -78,7 +78,6 @@ export class PuntoInicioComponent implements OnInit {
         };
         this.menu$ = this.menuService.getMenues();
         this.solicitudes$ = this.solicitudService.getSolicitudes();
-        this.plex.navbarVisible = false;
 
         // plex-float
         this.tModel = { valor: null };
diff --git a/src/demo/app/templates/service/menu.ts b/src/demo/app/templates/service/menu.ts
index dff9775cc..7e4c60cc3 100644
--- a/src/demo/app/templates/service/menu.ts
+++ b/src/demo/app/templates/service/menu.ts
@@ -5,6 +5,7 @@ export class Menu {
     semanticTag: String;
     icono: string;
     color: string;
-    path: string;
+    target: string;
+    link: string;
     outlet: string;
 }
diff --git a/src/demo/app/templates/service/mock-menu.ts b/src/demo/app/templates/service/mock-menu.ts
index e78a94c5b..8e1863a10 100644
--- a/src/demo/app/templates/service/mock-menu.ts
+++ b/src/demo/app/templates/service/mock-menu.ts
@@ -7,7 +7,8 @@ export const MENU: Menu[] = [
         tipo: 'info',
         semanticTag: 'solicitud',
         icono: 'historial',
-        path: 'ancla',
+        target: 'miHuds',
+        link: 'miHuds',
         color: '#0070cc',
         outlet: 'listado',
     },
@@ -17,7 +18,8 @@ export const MENU: Menu[] = [
         tipo: 'custom',
         semanticTag: 'solicitud',
         icono: 'mano-corazon',
-        path: 'misConsultas',
+        target: 'misConsultas',
+        link: 'misConsultas',
         color: '#0070cc',
         outlet: 'listado',
     },
@@ -27,7 +29,8 @@ export const MENU: Menu[] = [
         tipo: 'info',
         semanticTag: 'registro',
         icono: 'documento-cursor',
-        path: 'misDocumentos',
+        target: 'misDocumentos',
+        link: 'misDocumentos',
         color: '#0070cc',
         outlet: 'listado',
     },
@@ -37,7 +40,8 @@ export const MENU: Menu[] = [
         tipo: 'info',
         semanticTag: 'solicitud',
         icono: 'turno-bold',
-        path: 'misTurnos',
+        target: 'misTurnos',
+        link: 'misTurnos',
         color: '#0070cc',
         outlet: 'listado',
     },
@@ -47,7 +51,8 @@ export const MENU: Menu[] = [
         tipo: 'info',
         semanticTag: 'otro',
         icono: 'mail',
-        path: 'misMensajes',
+        target: 'misMensajes',
+        link: 'misMensajes',
         color: '#0070cc',
         outlet: 'listado',
     },
@@ -57,7 +62,8 @@ export const MENU: Menu[] = [
         tipo: 'info',
         semanticTag: 'solicitud',
         icono: 'hospital',
-        path: 'misOrganizaciones',
+        target: 'misOrganizaciones',
+        link: 'misOrganizaciones',
         color: '#0070cc',
         outlet: 'listado',
     },
@@ -67,7 +73,8 @@ export const MENU: Menu[] = [
         tipo: 'info',
         semanticTag: 'solicitud',
         icono: 'medico',
-        path: 'miEquipo',
+        target: 'miEquipo',
+        link: 'miEquipo',
         color: '#0070cc',
         outlet: 'listado',
     },
diff --git a/src/demo/app/templates/template-inicio.html b/src/demo/app/templates/template-inicio.html
index 970470f44..b905ab745 100644
--- a/src/demo/app/templates/template-inicio.html
+++ b/src/demo/app/templates/template-inicio.html
@@ -5,17 +5,19 @@
         </section>
     </plex-layout-main>
     <plex-layout-sidebar type="invert">
-
-        <plex-grid class="h-100" justify="center" type="full" cols="2" size="lg">
-            <plex-card *ngFor="let temp of templates" mode="{{ temp.mode }}" selectable="true" type="{{ temp.type }}"
-                       (click)="irTemplate(temp.url)" aligned="center" size="md">
-                <plex-label direction="column" size="lg" titulo="{{ temp.titulo }}" subtitulo="{{ temp.subtitulo }}"
-                            icon="{{ temp.icon }}">
-                </plex-label>
-                <plex-button class="mt-4" type="info" size="md" label="Navegar template" routerLink="{{ temp.url }}">
-                </plex-button>
-            </plex-card>
-        </plex-grid>
+        <section class="h-75" align="center">
+            <plex-grid class="h-25" type="full" size="lg">
+                <plex-card *ngFor="let temp of templates" mode="{{ temp.mode }}" selectable="true"
+                           type="{{ temp.type }}" (click)="irTemplate(temp.url)" aligned="center" size="md">
+                    <plex-label direction="column" size="lg" titulo="{{ temp.titulo }}" subtitulo="{{ temp.subtitulo }}"
+                                icon="{{ temp.icon }}">
+                    </plex-label>
+                    <plex-button class="mt-4" type="info" size="md" label="Navegar template"
+                                 routerLink="{{ temp.url }}">
+                    </plex-button>
+                </plex-card>
+            </plex-grid>
+        </section>
 
     </plex-layout-sidebar>
 </plex-layout>
\ No newline at end of file
diff --git a/src/demo/app/templates/template-inicio.ts b/src/demo/app/templates/template-inicio.ts
index 41bd552a9..ce0fca917 100644
--- a/src/demo/app/templates/template-inicio.ts
+++ b/src/demo/app/templates/template-inicio.ts
@@ -37,6 +37,15 @@ export class TemplateInicioComponent implements OnInit {
             icon: 'view-day',
             selected: false,
         },
+        {
+            titulo: 'Template puntos de inicio',
+            subtitulo: 'Agrupamiento de información en acordiones',
+            mode: 'filled',
+            type: 'dark',
+            url: 'punto-inicio',
+            icon: 'adjust',
+            selected: false,
+        },
     ];
 
     constructor(private router: Router, private route: ActivatedRoute) {
diff --git a/src/lib/css/layout.scss b/src/lib/css/layout.scss
index 81041560f..653927c23 100644
--- a/src/lib/css/layout.scss
+++ b/src/lib/css/layout.scss
@@ -67,6 +67,26 @@ plex-layout {
     }
 
     // mininav
+    plex-layout-main {
+        div.plex-box-content {
+            display: grid;
+            grid-template-columns: auto 1fr;
+            grid-template-rows: min-content 1fr;
+            grid-gap: .5rem;
+    
+            > plex-mininav {
+                grid-column: 1;
+                grid-row: 2 / -1;
+            }
+            
+            div.plex-content {
+                grid-column: 2;
+                grid-row: 1 / -1;
+            }
+        }
+    }
+
+
     plex-layout-sidebar {        
         div.plex-box-content {
             display: grid;
diff --git a/src/lib/css/plex-mininav.scss b/src/lib/css/plex-mininav.scss
index a64aeafe8..4bf210148 100644
--- a/src/lib/css/plex-mininav.scss
+++ b/src/lib/css/plex-mininav.scss
@@ -1,4 +1,15 @@
 @import './variables.scss';
+@import './mixins/_contrast.scss';
+    
+// Mixins estados
+@mixin mininavItemHover {
+    &:hover, &.selected {
+        cursor: pointer;
+        //box-shadow: inset 0 0 0 2px var(--color-base)!important;
+        background-color: var(--color-baseDark)!important;
+        filter: brightness(0.85);
+    }
+}
 
 plex-mininav {
 
@@ -14,99 +25,24 @@ plex-mininav {
         background-color: var(--nav-color);
         transition: width 900ms ease;
         border-right: solid 1px var(--border-color);
-        color: white;
-
-        & > nav {
-            overflow-x: hidden;
-            plex-label > div.plex-label > div > span {
-                opacity: 0;
-                white-space: pre;
-            }
-        }
-
-        &.expanded {
-            --mininavWidth: 200px;
-
-            width: var(--mininavWidth);
-            > nav {
-                overflow-x: visible;
-                plex-label > div.plex-label > div > span {
-                    opacity: 1;
-                    transition: opacity 900ms ease-in;
-                } 
-                
-                > ul > plex-mininav-item > li {
-                    width: var(--mininavWidth);
-                    transition: width 900ms ease-in;
-                }
-            }
-
-            .nav-resizable-btn-wrapper {
-                left: calc(var(--mininavWidth) + 16px);
-            }
-        }
-  
-            /* Botonera sidebar expandible */
-            > .nav-resizable-btn-wrapper {
-                display: none;
-                flex-direction: row;
-                justify-content: center;
-                align-items: center;
-                position: absolute;
-                z-index: 1;
-                left: 71px;
-                top: calc(50vh - 5rem);
-                background: $light-grey;
-                box-shadow: 1px 1px 12px 3px $dark-grey;
-                width: 2.5rem;
-                height: 2.5rem;
-                border-top-right-radius: 25%;
-                border-bottom-right-radius: 25%;
-                transform: scale(.6);
-                cursor: col-resize!important;
-                opacity: .4;
-
-                &.resizable {
-                    display: flex!important;
-                    transition: all 900ms ease;
-                }
-
-                &:hover {
-                    opacity: 1;
-
-                    hr.divisor {
-                        height: 100vh;
-                        transition: height 1s ease;
-                        border: solid 2px $blue;
-                        left: 0;
-                    }
-                }
-                
-                hr.divisor {
-                    height: 2.5rem;
-                    position: absolute;
-                }
-            }
+        color: inherit;
         
-        // Mixins estados
-        @mixin mininavItemHover {
-                &:hover, &.selected {
-                    cursor: pointer;
-                    box-shadow: inset 0 0 0 2px var(--color-base)!important;
-                    background-color: var(--color-baseDark)!important;
-                    filter: brightness(0.85);
-                }
-        }
         nav, ul {
             display: flex;
             flex-direction: column;
         }
 
-        nav {
+        & > nav {
             --vHeight: 200px;
             height: calc(100vh - var(--vHeight));
             position: fixed;
+            overflow-x: hidden;
+
+            plex-label > div.plex-label > div > span {
+                opacity: 0;
+                white-space: pre;
             }
+        }
 
         ul {
             --color-base: var(--nav-color);
@@ -117,17 +53,16 @@ plex-mininav {
 
             background-color: var(--color-base);
 
-            &[superiores] {
+            &[sup] {
                 justify-content: flex-start;
             }
             
-            &[inferiores] {
+            &[inf] {
                 justify-content: flex-end;
             }
 
-            plex-mininav-item {
-                
-                & > li {
+            .plex-mininav-item {
+                 
                     --color-base: var(--nav-color);
                     --color-baseDark: var(--nav-color);
 
@@ -139,8 +74,71 @@ plex-mininav {
                     
                     @include mininavItemHover;
                 }
+             
+        }
+
+        &.expanded {
+            --mininavWidth: 200px;
+
+            width: var(--mininavWidth);
+            > nav {
+                overflow-x: visible;
+                plex-label > div.plex-label > div > span {
+                    opacity: 1;
+                    transition: opacity 900ms ease-in;
+                } 
+                
+                > ul > plex-mininav-item > li {
+                    width: var(--mininavWidth);
+                    transition: width 900ms ease-in;
+                }
+            }
+
+            .nav-resizable-btn-wrapper {
+                left: calc(var(--mininavWidth) + 16px);
+            }
+        }
+
+        /* Botonera sidebar expandible */
+        > .nav-resizable-btn-wrapper {
+            display: none;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            position: absolute;
+            z-index: 1;
+            left: 71px;
+            top: calc(50vh - 5rem);
+            background: $light-grey;
+            box-shadow: 1px 1px 12px 3px $dark-grey;
+            width: 2.5rem;
+            height: 2.5rem;
+            border-top-right-radius: 25%;
+            border-bottom-right-radius: 25%;
+            transform: scale(.6);
+            cursor: col-resize!important;
+            opacity: .4;
+
+            &.resizable {
+                display: flex!important;
+                transition: all 900ms ease;
+            }
+
+            &:hover {
+                opacity: 1;
+
+                hr.divisor {
+                    height: 100vh;
+                    transition: height 1s ease;
+                    border: solid 2px $blue;
+                    left: 0;
+                }
+            }
+            
+            hr.divisor {
+                height: 2.5rem;
+                position: absolute;
             }
-    
         }
     }
 }
diff --git a/src/lib/layout/main.component.ts b/src/lib/layout/main.component.ts
index 9d8b3f244..d082aacc6 100644
--- a/src/lib/layout/main.component.ts
+++ b/src/lib/layout/main.component.ts
@@ -6,10 +6,13 @@ import { Component, Input, ElementRef, AfterViewInit, HostListener, Renderer2, V
         <div class="plex-box" [class.plex-box-invert]="type == 'invert'">
             <ng-content select="header"></ng-content>
             <ng-content select="plex-title[main]"></ng-content>
-            <div #content class="plex-box-content" >
-                <ng-content></ng-content>
-            </div>
+            <div #content class="plex-box-content">
+                <ng-content select="plex-mininav"></ng-content>
+                <div class="plex-content">
+                    <ng-content></ng-content>
+                </div>
             </div>
+        </div>
     `,
 })
 export class PlexLayoutMainComponent implements AfterViewInit {
diff --git a/src/lib/mininav/mininav-item/mininav-item.component.html b/src/lib/mininav/mininav-item/mininav-item.component.html
deleted file mode 100644
index 1f7b37e98..000000000
--- a/src/lib/mininav/mininav-item/mininav-item.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<li class="plex-mininav-item" (click)="jumpToId(target)">
-    <plex-label titulo="{{ titulo }}" subtitulo="{{ subtitulo }}" icon="{{ icono }}" type="" size="{{ size }}"
-                tooltip="{{ tooltip }}" tooltipPosition="right" case="capitalize">
-    </plex-label>
-</li>
\ No newline at end of file
diff --git a/src/lib/mininav/mininav-item/mininav-item.component.ts b/src/lib/mininav/mininav-item/mininav-item.component.ts
index 12efe5d4b..b9e2f828d 100644
--- a/src/lib/mininav/mininav-item/mininav-item.component.ts
+++ b/src/lib/mininav/mininav-item/mininav-item.component.ts
@@ -1,10 +1,17 @@
-import { Component, Input } from '@angular/core';
+import { Component, HostBinding, HostListener, Input } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
-    selector: 'plex-mininav-item',
-    templateUrl: './mininav-item.component.html',
+    selector: '[plex-mininav-item]',
+    template: `
+        <plex-label titulo="{{ titulo }}" subtitulo="{{ subtitulo }}" icon="{{ icono }}" type="" size="{{ size }}"
+                tooltip="{{ tooltip }}" tooltipPosition="right" case="capitalize">
+        </plex-label>
+    `,
 })
+
 export class PlexMininavItemComponent {
+    @HostBinding('class.plex-mininav-item') estilos = true;
 
     @Input() titulo;
     @Input() subtitulo;
@@ -12,20 +19,26 @@ export class PlexMininavItemComponent {
     @Input() color;
     @Input() icono;
     @Input() target;
+    @Input() link;
     @Input() tooltip;
     @Input() selected = false;
 
-    constructor() {
+    constructor(
+        private router: Router,
+        private route: ActivatedRoute,
+    ) {
     }
 
-    jumpToId(fragment) {
-        window.location.hash = fragment;
-        if (fragment) {
-            const element = document.querySelector('[name="' + fragment + '"]');
+    @HostListener('click') jumpToId() {
+        if (this.target) {
+            const element = document.querySelector('[anchor="' + this.target + '"]');
             if (element) {
                 element.scrollIntoView({ behavior: 'smooth' });
             }
         }
-    }
 
+        if (this.link) {
+            this.router.navigate([this.link]);
+        }
+    }
 }
diff --git a/src/lib/mininav/mininav.component.html b/src/lib/mininav/mininav.component.html
deleted file mode 100644
index 8ecbdf94e..000000000
--- a/src/lib/mininav/mininav.component.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<section #miniNav [class.expanded]="expanded">
-    <div>
-        <ng-content></ng-content>
-    </div>
-    <nav class="plex-mininav-container">
-        <ng-content select="ul[superiores]"></ng-content>
-        <ng-content select="ul[inferiores]"></ng-content>
-    </nav>
-
-    <!-- expand button -->
-    <span *ngIf="resizable === true" class="nav-resizable-btn-wrapper" [class.resizable]="resizable" draggable="true">
-        <hr class="divisor">
-        <plex-button size="sm" (click)="expandir()" type="link" icon="{{expanded ? 'pico-izquierda' : 'pico-derecha'}}">
-        </plex-button>
-    </span>
-</section>
\ No newline at end of file
diff --git a/src/lib/mininav/mininav.component.ts b/src/lib/mininav/mininav.component.ts
index 73fd501ea..1fb870e3c 100644
--- a/src/lib/mininav/mininav.component.ts
+++ b/src/lib/mininav/mininav.component.ts
@@ -2,7 +2,25 @@ import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/cor
 
 @Component({
     selector: 'plex-mininav',
-    templateUrl: './mininav.component.html',
+    template: `
+        <section #miniNav [class.expanded]="expanded">
+            <div>
+                <ng-content></ng-content>
+            </div>
+            <nav class="plex-mininav-container">
+                <ng-content select="ul[sup]"></ng-content>
+                <ng-content select="ul[inf]"></ng-content>
+            </nav>
+
+            <!-- boton expandirNav -->
+            <span *ngIf="resizable === true" class="nav-resizable-btn-wrapper" [class.resizable]="resizable" draggable="true">
+                <hr class="divisor">
+                <plex-button size="sm" (click)="expandirMininav()" type="link"
+                            icon="{{ expanded ? 'pico-izquierda' : 'pico-derecha' }}">
+                </plex-button>
+            </span>
+        </section>
+    `,
 })
 export class PlexMininavComponent implements OnChanges {
 
@@ -20,14 +38,10 @@ export class PlexMininavComponent implements OnChanges {
         if (this.color && this.color.length > 0) {
             this.miniNav.nativeElement.style.setProperty('--nav-color', this.color);
         }
-
-        if (this.color && this.color.length > 0 && this.mode === 'outlined') {
-            this.miniNav.nativeElement.style.setProperty('--nav-color', this.color + '20');
-        }
     }
 
     // Resize
-    expandir() {
+    expandirMininav() {
         this.expanded = !this.expanded;
     }
 }