andes · liquid36 · Jun 10, 2020 · Jun 5, 2020 · Jun 3, 2020 · Jun 5, 2020
@@ -13,7 +13,7 @@ context('detail', () => {
 
         cy.eyesCheckWindow('plex-detail - scrool');
 
-        cy.get('plex-layout plex-help').plexButtonIcon('information').click();
+        cy.get('plex-layout plex-help').plexButtonIcon('information-variant').click();
 
         cy.eyesCheckWindow('plex-detail - plex-help');
 

@@ -0,0 +1,20 @@
+/// <reference types="Cypress" />
+
+context('help', () => {
+    before(() => {
+        cy.eyesOpen({ appName: 'PLEX', testName: 'plex-help' });
+        cy.visit('/help');
+    });
+
+    it('abre y cierra help', () => {
+
+        cy.get('plex-layout plex-help:first').plexButtonIcon('help-circle').click();
+
+        cy.get('plex-layout plex-help').plexButtonIcon('information-variant').click();
+
+        cy.eyesCheckWindow('plex-help');
+
+        cy.eyesClose();
+
+    });
+});
@@ -9,7 +9,7 @@ context('template listado', () => {
     it('test accordion', () => {
         cy.eyesCheckWindow('main');
 
-        cy.plexButton('Accion Modal').click();
+        cy.get('plex-title').plexButtonIcon('chevron-down').click();
 
         cy.eyesCheckWindow('modal');
 
@@ -36,7 +36,7 @@ context('template listado', () => {
 
         cy.eyesCheckWindow('accordion open');
 
-        cy.get('plex-help').plexButton('TOP').click();
+        cy.get('plex-help').plexButtonIcon('help-circle').click();
 
         cy.eyesCheckWindow('plex-help open');
 

@@ -16,7 +16,7 @@ context('tooltip & hint', () => {
         cy.plexButton('tooltip').blur();
     });
 
-    it.only('hint directive', () => {
+    it('hint directive', () => {
         const hintText = '¿Sabías que... el hint es un texto que sugiere acciones o indica alguna novedad?';
         cy.get('#cdk-describedby-message-container div').eq(0).should('not.be.visible');
         cy.get('plex-hint').eq(0).find('a').focus().trigger('mouseover', { force: true });

@@ -21,6 +21,7 @@ export class AppComponent implements OnInit {
             { label: 'DateTime', icon: 'calendar', route: '/datetime' },
             { label: 'Detail', icon: 'account', route: '/detail' },
             { label: 'Dropdown', icon: 'menu-right', route: '/dropdown' },
+            { label: 'Help', icon: 'help-circle', route: '/help' },
             { label: 'Float', icon: 'numeric', route: '/float' },
             { label: 'Int', icon: 'numeric', route: '/int' },
             { label: 'Item List', icon: 'format-list-checks', route: '/item' },

@@ -51,13 +51,15 @@ import { ModalTemplateComponent } from './templates/componentes/plex-modal-templ
 import { DemoIconComponent } from './icon/icon';
 import { NavbarDemoComponent } from './navbar/navbar';
 import { TooltipHintDemoComponent } from './tooltip-hint/tooltip-hint.component';
+import { HelpDemoComponent } from './help/help.component';
 
 @NgModule({
     declarations: [
         AppComponent,
         BoxDemoComponent,
         TextDemoComponent,
         HomeDemoComponent,
+        HelpDemoComponent,
         NavbarDemoComponent,
         IntDemoComponent,
         FloatDemoComponent,

@@ -2,6 +2,7 @@ import { TooltipHintDemoComponent } from './tooltip-hint/tooltip-hint.component'
 import { ModuleWithProviders } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { HomeDemoComponent } from './home/home.component';
+import { HelpDemoComponent } from './help/help.component';
 import { BoxDemoComponent } from './box/box.component';
 import { TextDemoComponent } from './text/text.component';
 import { DateTimeDemoComponent } from './datetime/datetime.component';
@@ -38,6 +39,7 @@ const appRoutes: Routes = [
     { path: 'box', component: BoxDemoComponent },
     { path: 'text', component: TextDemoComponent },
     { path: 'datetime', component: DateTimeDemoComponent },
+    { path: 'help', component: HelpDemoComponent },
     { path: 'fonts', component: FontsDemoComponent },
     { path: 'wrapper', component: WrapperDemoComponent },
     { path: 'bool', component: BoolDemoComponent },

@@ -1,7 +1,7 @@
 <plex-layout main="8">
     <plex-layout-main>
         <plex-title titulo="Titulo principal">
-            <plex-help icon="information">
+            <plex-help type="info">
                 <div info justify="center">
                     <plex-detail direction="column" justify="center">
                         <img src="{{ paciente.foto }}" alt="">

@@ -0,0 +1,24 @@
+import { Plex } from '../../../lib/core/service';
+import { Component, OnInit } from '@angular/core';
+import { from } from 'rxjs';
+import { tap } from 'rxjs/operators';
+
+@Component({
+    templateUrl: 'help.html',
+})
+export class HelpDemoComponent implements OnInit {
+
+    showContent = false;
+
+    asyncContent = from([1, 2, 3, 4]).pipe(
+        tap((index) => {
+            // tslint:disable-next-line:no-console
+            console.log('Contenido evaluado recien al abrirse', index);
+        })
+    );
+
+    constructor(private plex: Plex) { }
+
+    ngOnInit() {
+    }
+}
@@ -0,0 +1,105 @@
+<plex-layout main="8">
+    <plex-layout-main>
+
+        <plex-title titulo="plex-help (type ='help')">
+            <plex-button size="sm" type="warning" label="acción sensible"></plex-button>
+            <plex-help type="help" titulo="Ayuda de este panel" size="sm">
+                <div class="ml-4 mb-4" *plHelp>
+                    <label>Organización:</label>
+                    prestacion.solicitud.organizacion.nombre
+                    <label>Fecha:</label>
+                    prestacion.solicitud.fecha | date
+                    <label>Prestación de origen:</label>
+                    prestacion.solicitud.prestacionOrigen
+                    {{ asyncContent | async | json }}
+                </div>
+            </plex-help>
+        </plex-title>
+        <h6>El component e <code>&#706;plex-help&#707;</code> en su tipología 'help' se emplea en aquellas situaciones
+            en
+            las que
+            consideramos necesario expandir información para guiar al usuario sobre una acción u elemento que cuya
+            finalidad no se intuye por si misma.</h6>
+        <plex-title size="sm" titulo="plex-help (size:'sm')" class="mb-4">
+            <plex-help type="help" titulo="size = sm" size="sm">
+                <div class="ml-4 mb-4">
+                    <label>Organización:</label>
+                    prestacion.solicitud.organizacion.nombre
+                </div>
+            </plex-help>
+        </plex-title>
+        <p>plex-help (size:'md')</p>
+        <plex-title size="md" titulo="plex-help (size:'md')" class="mb-4">
+            <plex-help type="help" titulo="size = md" size="md">
+                <div class="ml-4 mb-4">
+                    <label>Organización:</label>
+                    prestacion.solicitud.organizacion.nombre
+                </div>
+            </plex-help>
+        </plex-title>
+        <p>plex-help (size:'lg')</p>
+        <plex-title size="lg" titulo="plex-help (size:'lg')" class="mb-4">
+            <plex-help type="help" titulo="size = lg" size="lg">
+                <div class="ml-4 mb-4">
+                    <label>Organización:</label>
+                    prestacion.solicitud.organizacion.nombre
+                </div>
+            </plex-help>
+        </plex-title>
+        <p>plex-help (size:'sm')</p>
+
+    </plex-layout-main>
+    <plex-layout-sidebar type="invert">
+
+        <plex-title titulo="plex-help (type ='info')">
+            <plex-button size="sm" type="success" label="acción satisfactoria"></plex-button>
+            <plex-help type="info" class="ml-1" titulo="Información sobre este módulo"
+                       subtitulo="A continuación todas las opciones">
+                <ol info class="list-group-flush">
+                    <li class="list-group-item">Buscá conceptos SNOMED en el campo de texto del panel lateral
+                        (acepta búsquedas
+                        parciales)</li>
+                    <li class="list-group-item">Seleccioná el concepto al cual quieras agregar o modificar
+                        plantillas</li>
+                    <li class="list-group-item">Completá los campos "Título" y "Texto del procedimiento"</li>
+                    <li class="list-group-item">Opcionalmente podés elegir seleccionar a todos los descendientes
+                        del concepto.</li>
+                    <li class="list-group-item">Hacé click en "Guardar todos" o el botón con el signo <i
+                           class="mdi mdi-check"></i> para guardar una plantilla individual</li>
+                </ol>
+            </plex-help>
+        </plex-title>
+        <h6>
+            Se emplea en casos en los que se necesita brindar información complementaria y circunstancial al
+            usuario.
+            <hr>
+            <ul>
+                <li>Es un elemento emergente de carácter informativo.</li><br>
+                <li>Evita incorporar elementos informativos que le restan espacio, jerarquía y visibilidad a otros
+                    de
+                    mayor
+                    relevancia o frecuencia de uso en las interfaces.</li><br>
+                <li>El componente presenta dos tipologías: <b>info</b> y <b>help</b>.</li>
+            </ul>
+        </h6>
+        <plex-title titulo="plex-help con botones" size="sm">
+            <plex-button size="sm" type="danger" label="acción peligrosa"></plex-button>
+            <plex-help type="help" class="ml-1" titulo="Información sobre este módulo"
+                       subtitulo="A continuación todas las opciones">
+                <ol info class="list-group-flush">
+                    <li class="list-group-item">Buscá conceptos SNOMED en el campo de texto del panel lateral
+                        (acepta búsquedas
+                        parciales)</li>
+                    <li class="list-group-item">Seleccioná el concepto al cual quieras agregar o modificar
+                        plantillas</li>
+                    <li class="list-group-item">Completá los campos "Título" y "Texto del procedimiento"</li>
+                    <li class="list-group-item">Opcionalmente podés elegir seleccionar a todos los descendientes
+                        del concepto.</li>
+                    <li class="list-group-item">Hacé click en "Guardar todos" o el botón con el signo <i
+                           class="mdi mdi-check"></i> para guardar una plantilla individual</li>
+                </ol>
+            </plex-help>
+        </plex-title>
+
+    </plex-layout-sidebar>
+</plex-layout>
@@ -1,14 +1,19 @@
-<plex-layout main="8">
+=<plex-layout main="8">
     <plex-layout-main>
         <plex-title size="lg" titulo="Bienvenido a Plex">
-            <plex-button type="success" size="sm" (click)="showModal = true">Accion Modal</plex-button>
-            <plex-modal-template *ngIf="showModal" (motivoAccesoHuds)="showModal = false"></plex-modal-template>
-
-            <plex-help titulo="Ayuda de este panel" tituloBoton="TOP">
+            <plex-help type="help" titulo="Ayuda de este panel" size="sm" title="este es un atributo [title]"
+                       class="mr-1">
                 <div info>
-                    contenido del plex-help
+                    <label>Organización:</label>
+                    prestacion.solicitud.organizacion.nombre
+                    <label>Fecha:</label>
+                    prestacion.solicitud.fecha | date
+                    <label>Prestación de origen:</label>
+                    prestacion.solicitud.prestacionOrigen
                 </div>
             </plex-help>
+            <plex-button type="success" size="sm" icon="chevron-down" (click)="showModal = true"></plex-button>
+            <plex-modal-template *ngIf="showModal" (motivoAccesoHuds)="showModal = false"></plex-modal-template>
         </plex-title>
 
         <plex-wrapper>

@@ -15,7 +15,7 @@
             {{ paciente.fechaFallecimiento }}
         </plex-badge>
         <!-- <plex-button type="info" size="sm" [routerLink]="['/listado-sidebar', paciente.id]">acción de sistema -->
-        <plex-button type="info" size="sm" icon="eye" (click)="selected(paciente)">
+        <plex-button type="info" size="sm" title="ver detalle" icon="eye" (click)="selected(paciente)">
         </plex-button>
         <!-- <plex-button type="success" size="sm">acción satisfactoria</plex-button> -->
     </plex-item>

@@ -4,9 +4,9 @@ import { Component, Input, Renderer2, Output, EventEmitter } from '@angular/core
     selector: 'plex-help',
     template: `
     <div class="toggle-{{ type }}" [ngClass]="{'closed': closed, 'open': !closed}">
-        <plex-button *ngIf="!closed" type="danger" size="sm" icon="close" (click)="toogle();$event.stopImmediatePropagation();"></plex-button>
-        <plex-button *ngIf="content && closed && !tituloBoton" type="info" size="sm" [icon]="icon" (click)="toogle();$event.stopImmediatePropagation();"></plex-button>
-        <plex-button *ngIf="content && closed && tituloBoton" type="info" size="sm" [label]="tituloBoton" (click)="toogle();$event.stopImmediatePropagation();"></plex-button>
+        <plex-button *ngIf="!closed" type="danger" size="{{ size }}" icon="close" (click)="toogle();$event.stopImmediatePropagation();"></plex-button>
+        <plex-button *ngIf="content && closed && !tituloBoton" type="info" size="{{ size }}" title="{{ title }}" [icon]="type === 'info'? 'information-variant' : 'help-circle'" (click)="toogle();$event.stopImmediatePropagation();"></plex-button>
+        <plex-button *ngIf="content && closed && tituloBoton" type="info" size="{{ size }}" [label]="tituloBoton" (click)="toogle();$event.stopImmediatePropagation();"></plex-button>
     </div>
     <div class="card {{ type }}" [ngClass]="{'open': !closed}" *ngIf="type === 'help'" (click)="$event.stopImmediatePropagation();">
         <ng-container *ngIf="!closed">
@@ -35,9 +35,13 @@ export class PlexHelpComponent {
 
     @Input() subtitulo: string;
 
+    @Input() size: 'sm' | 'md' | 'lg' = 'sm';
+
+    @Input() title: string;
+
     @Input() tituloBoton = '';
 
-    @Input() icon = 'help-circle';
+    @Input() icon: 'help-circle' | 'information-variant' = 'help-circle';
 
     @Output() close = new EventEmitter();
 
@@ -69,4 +73,3 @@ export class PlexHelpComponent {
         }
     }
 }
-
@@ -0,0 +1,48 @@
+import { Directive, TemplateRef, ViewContainerRef, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { PlexHelpComponent } from './help.component';
+
+export interface ObserveContext<T> {
+    $implicit: T;
+    observe: T;
+}
+
+export interface ErrorContext {
+    $implicit: Error;
+}
+
+@Directive({
+    // tslint:disable-next-line:directive-selector
+    selector: '[plHelp]'
+})
+export class HelpDirective<T> implements OnDestroy, OnInit {
+    private openSubscription: Subscription;
+    private closeSubscription: Subscription;
+
+    constructor(
+        private view: ViewContainerRef,
+        private nextRef: TemplateRef<ObserveContext<T>>,
+        private changes: ChangeDetectorRef,
+        private plexHelp: PlexHelpComponent
+    ) { }
+
+
+    ngOnDestroy() {
+        this.openSubscription.unsubscribe();
+        this.closeSubscription.unsubscribe();
+    }
+
+    ngOnInit() {
+        this.openSubscription = this.plexHelp.open.subscribe(() => {
+            this.view.clear();
+            this.view.createEmbeddedView(this.nextRef);
+            this.changes.markForCheck();
+        });
+
+        this.closeSubscription = this.plexHelp.close.subscribe(() => {
+            this.view.clear();
+            this.changes.markForCheck();
+        });
+    }
+
+}
@@ -69,6 +69,7 @@ import { QuillModule } from 'ngx-quill';
 import { NavItemComponent } from './app/nav-item.component';
 import { HintComponent } from './hint/hint.component';
 import { HintDirective } from './hint/hint.directive';
+import { HelpDirective } from './help/help.directive';
 
 const MODULES = [
     PlexAppComponent,
@@ -117,7 +118,8 @@ const MODULES = [
     PreviewDirective,
     NavItemComponent,
     PlexWrapperComponent,
-    HintDirective
+    HintDirective,
+    HelpDirective
     // MatTooltip
 ];