Componentes relativos a modales

Vamos a ver como se usa cada uno de los componentes.

Dialog

<desy-dialog...></desy-dialog>

Permite representar un diálogo modal definido desde template/html. Para crear un dialog dinámicamente ver el servicio DialogService.

Propiedades de entrada/salida

Propiedad	Evento	Tipo	Descripción	Obligatorio
active	activeChange	boolean	Indica si el dialog está activo. Se puede modificar internamente, por ejemplo al hacer pulsar sobre el fondo, por lo que se recomienda el uso de two-way binding.	Sí

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del dialog.	Sí
caller	TemplateRef<any>	Template del elemento a mostrar dentro del dialog.	Sí
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.
focusOnClose	string \| HTMLElement	Identificador o referencia del elemento que se llamará al cerrar la modal.
focusOnShow	string \| HTMLElement	Identificador o referencia del elemento que se llamará al abrir la modal. Si no se indica nada o no existe el elemento, se pondrá el foco sobre el primer elemento enfocable.
dismissOnBackdrop	boolean	Permite cerrar el modal al pulsar sobre el fondo.

Propiedades de accesibilidad

El componente dialog admite los siguientes parámetros de accesibilidad.

Ejemplos

Ejemplo utilizando un componente Modal como caller y un botón para abrir el dialog

Componente

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoDialogComponent {
	...
    active = false;

    openDialog(): void {
      this.active = true;
    }
    
    closeDialog(): void {
      this.active = false;
    }
	...
}

HTML

<desy-button text="Abrir dialog" (clickEvent)="openDialog()" [id]="'dialog-btn'"></desy-button>
<desy-dialog [(active)]="active" [id]="'dialog'" [caller]="modal" focusOnClose="dialog-btn" [dismissOnBackdrop]="true">
  <ng-template #modal>
    <desy-modal [id]="'caller-example'"
                classes="relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white mt-2xl"
                [isDismissible]="true"
                [title]="{text:'Editar servicio publicado'}"
                [description]="{html:'<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>'}"
                [itemsPrimary]="[{text:'Editar servicio','classes':'c-button--primary'}]"
                (closeModal)="closeDialog()">
    </desy-modal>
  </ng-template>
</desy-dialog>

<desy-modal...>...</desy-modal>

Permite representar el contenido de una ventana modal.

Propiedades de entrada

Propiedad	Tipo	Descripción
id	string	Identificador de la modal.
title	modalData	Contiene la información relativa al título de la modal.
description	modalData	Contiene la descripción que podrá acompañar al título.
itemsPrimary	Array<ModalButtonData[]>	Contiene la información relativa a los botones principales.
itemsSecondary	Array<ModalButtonData[]>	Contiene la información relativa a los botones secundarios.
icon	modalIconData	Contiene la información relativa al icono de la modal
isDismissible	boolean	Cuando es true, se muestra el icono de cierre de la modal
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.
headingLevel	number	Indica el nivel de encabezado del título: 1=h1, 2=h2, etc. Por defecto equivale a 2.
caller	TemplateRef <any>	Template para mostrar dentro del modal
itemsPrimary	Array<ModalButtonData[]>	Contiene la información relativa a los botones con spinner de carga principales.
itemsSecondary	Array<ModalButtonData[]>	Contiene la información relativa a los botones con spinner de carga secundarios.

Objeto ModalData

Propiedad	Tipo	Descripción	Obligatorio
text	string	Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Si, cuando no se especifica html.
html	string	Contenido del texto en formato HTML.	Si, cuando no se especifica text.
classes	string	Classes CSS separadas por espacio que se aplicarán sobre los objetos de este tipo

Objeto ModalButtonData

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del botón.
text	string	Contenido del texto de ayuda en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Si para elementos a y button y cuando no se especifica html.
html	string	Contenido del texto en formato HTML. Nota: no aplica al elemento input.	Si para elementos a y button y cuando no se especifica text.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.
element	string	Elemento HTML que se utilizará para representar el botón. Los valores posibles son: a (por defecto, si se incluye un href) button (por defecto) input
name	string	Nombre o atributo name del elemento que representa el botón. Nota: sólo para los elementos button e input.
value	any	Valor del botón a enviar como parte del formulario. Nota: sólo para el elemento button
type	string	Tipo del botón. Los valores posibles son: submit (por defecto) button reset Nota: sólo para los elementos button e input.
disabled	boolean	Indica si el botón está deshabilitado.
preventDoubleClick	boolean	Evita un doble click. Nota: sólo para los elementos button e input.
href	string	Ruta externa a la que se redirigirá al pulsar el botón. No se aplicará cuando se especifique la propiedad routerLink. Por defecto #. Nota: sólo para el elemento a.
target	string	Pestaña en la que se abrirá el enlace. Nota: sólo para el elemento a con href.
routerLink	string\|string[]	Ruta interna relativa al proyecto (ver https://angular.io/api/router/RouterLink ).
routerLinkActiveClasses	string\|string[]	Clases que se añadirán al componente cuando la ruta especificada en routerLink sea la actual (ver https://angular.io/api/router/RouterLinkActive ).
state	string	Estado del componente. Los valores posibles son: is-loading → Representa el estado "cargando". Muestra el spinner de carga. Deberá añadirse la clase "c-button-loader--is-loading" al parámetro classes. is-success → Representa el estado "éxito". Muestra el icono ✓. Deberá añadirse la clase "c-button-loader--is-success" al parámetro classes. Por defecto, o si no se especifica el valor, se muestra el contenido de los parámetros text o html. Nota: parámetro específico para usar en los componentes button-loader.
successText	string	Texto que se interpretará por los lectores de pantalla cuando se llegue al estado de "éxito". Nota: parámetro específico para usar en los componentes button-loader.
loaderText	string	Texto que se interpretará por los lectores de pantalla mientras está en el estado de "cargando". Nota: parámetro específico para usar en los componentes button-loader.
loaderClasses	string	Clases que se aplican sobre spinner. Nota: parámetro específico para usar en los componentes button-loader.

Objeto ModalIconData

Propiedad	Tipo	Descripción	Obligatorio
html	string	Contenido del texto en formato HTML.
type	string	Tipos predefinidos de icono, son: discard, delete, edit, changes y publish. No se aplicará cuando se especifique la propiedad html.

Propiedades de accesibilidad

El componente modal admite los siguientes parámetros de accesibilidad.

Eventos de salida

Evento	Tipo	Descripción
clickButton	DOM Event	Se emite al pulsar sobre un botón.

Contenido

Se permite proyectar contenido dentro del Modal para facilitar su uso. Para ello se facilitan los siguientes sub-componentes:

TitleComponent

<desy-title>...</desy-title>

Permite especificar el título sin utilizar los parámetros de entrada.

Admite las mismas propiedades de entrada que el objeto ModalData.

Este componente es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.

DescriptionComponent

<desy-description>...</desy-description>

Permite especificar la descripción sin utilizar los parámetros de entrada.

Admite las mismas propiedades de entrada que el objeto ModalData.

Este componente es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.

ContentComponent

<desy-description>...</desy-description>

Permite especificar contenido adicional sin utilizar el parámetro caller.

Este componente es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.

ModalButtonPrimaryComponent

<desy-modal-button-primary ...>...</desy-modal-button-primary>

Permite especificar un botón primario del listado.

Admite los mismos parámetros de entrada que el objeto ModalButtonData.

Emite el evento de salida clickEvent al pulsarse.

ModalButtonSecondaryComponent

<desy-modal-button-secondary ...>...</desy-modal-button-secondary>

Permite especificar un botón secundario del listado.

Admite los mismos parámetros de entrada que el objeto ModalButtonData.

Emite el evento de salida clickEvent al pulsarse.

ModalButtonLoaderPrimaryComponent

<desy-modal-button-loader-primary ...>...</desy-modal-button-loader-primary>

Permite especificar un botón primario con spinner primario del listado.

Admite los mismos parámetros de entrada que el objeto ModalButtonData.

Emite el evento de salida clickEvent al pulsarse.

ModalButtonLoaderSecondaryComponent

<desy-modal-button-loader-secondary ...>...</desy-modal-button-loader-secondary>

Permite especificar un botón con spinner secundario del listado.

Admite los mismos parámetros de entrada que el objeto ModalButtonData.

Emite el evento de salida clickEvent al pulsarse.

IconComponent

<desy-icon>...</desy-icon>

Permite especificar el icono.

Admite las mismas propiedades de entrada que el objeto ModalIconData.

Este componente es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.

Ejemplos

Modal con elementos como contenido

<desy-modal id="example">
  <desy-icon [type]="'edit'"></desy-icon>
  <desy-title>Editar servicio publicado</desy-title>
  <desy-description>
    <p>Actualmente este servicio está publicado.</p>
    <p>Los cambios realizados no serán visibles hasta que sean validados</p>
  </desy-description>
  <desy-content>
    <div class="prose max-w-auto mx-auto">
      <p class="text-center text-sm">Para más información, ir a la <a href="#">Página de ayuda</a></p>
    </div>
  </desy-content>
  <desy-modal-button-primary [classes]="'c-button--primary'" (clickEvent)="handleClick('click en primario')">
    Editar servicio
  </desy-modal-button-primary>
  <desy-modal-button-secondary [classes]="'c-button--secondary'" (clickEvent)="handleClick('click en secundario')">
    Cancelar, continuar
  </desy-modal-button-secondary>
</desy-modal>

Modal con itemsPrimary e isDismissible=true.

<desy-modal id="default-example" title="{'text':'Aviso'}" 
    [description]="{'text':'Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.'}"
    [itemsPrimary]="[{'text':'De acuerdo, continuar','classes':'c-button--primary'}]" [isDismissible]=true>
  </desy-modal>

Modal con itemsPrimary, itemsSecondary, texto con formato html, isDismissible=true y caller.

<desy-modal id="caller-example" title="{'text':'Editar servicio publicado'}" 
    [description]="{'html':'<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>'}"
    [itemsPrimary]="[{'text':'Editar servicio','classes':'c-button--primary'}]"
    [itemsSecondary]="[{'text':'Cancelar, continuar','classes':'c-button--secondary'}]" [isDismissible]=true
    [caller]="caller1">
</desy-modal>

Modal con icon de tipo delete

<desy-modal id="icon-type-A-example" title="{'text':'Borrar servicio'}" 
    [description]="{'html':'Esta acción no se puede deshacer ¿Estás seguro?'}"
    [itemsPrimary]="[{'text':'Si, borrar servicio','classes':'c-button--alert'}]"
    [itemsSecondary]="[{'text':'Cancelar','classes':'c-button--secondary'}]" [isDismissible]=true
    [icon]="{'type':'delete'}">
  </desy-modal>

Accesibilidad

En todos los componentes se han tenido en cuenta los siguiente parámetros de accesibilidad. Se detalla en cada componente.

Parámetro	Atributo de accesibilidad equivalente
role	role
ariaLabel	aria-label
ariaDescribedBy	aria-describedby
ariaLabelledBy	aria-labelledby
ariaHidden	aria-hidden
ariaDisabled	aria-disabled
ariaControls	aria-controls
ariaCurrent	aria-current
ariaLive	aria-live
ariaExpanded	aria-expanded
ariaErrorMessage	aria-errormessage
ariaHasPopup	aria-haspopup
ariaModal	aria-modal
tabindex	tabindex

Servicios relativos a modales

Vamos a ver como se usa cada uno de los servicios.

DialogService

Servicio que permite abrir y cerrar diálogos de forma dinámica, es decir, sin tener que especificar los componentes en el HTML. Contiene los siguientes métodos

openDialog

Permite abrir un dialog.

Parámetros

Propiedad	Tipo	Descripción	Obligatorio
caller	TemplateRef<any>	Template del elemento a mostrar dentro del dialog.	Sí
	Type<any>	Tipo del componente a mostrar dentro del dialog.
	ModalOptions	Especificando esta opción se generará automáticamente un componente ModalComponent dentro del dialog, utilizando los datos de este objeto como parámetros de entrada del componente.
dialogOptions	DialogOptions	Datos de entrada del componente DialogComponent.

DialogOptions

Mismos parámetros de entrada que el componente DialogComponent, a excepción de la propiedad caller. Contiene, además, las siguientes opciones:

Propiedad	Tipo	Descripción	Obligatorio
rootViewContainer	ViewContainerRef	Contenedor donde se creará el diálogo. Por defecto se creará al final del body del HTML.	No

Respuesta

El servicio devuelve un objeto Promise<OpenDialogResult>

OpenDialogResult

Propiedad	Tipo	Descripción
dialog	ComponentRef<DialogComponent>	Referencia al componente diálogo creado.
component	ComponentRef<any>	Si el parámetro caller utilizado es de tipo Type<any> o ModalOptions, referencia al componente interno creado.

closeDialog

Permite cerrar un dialog.

Parámetros

Propiedad

Tipo

Descripción

Obligatorio

dialog

DialogComponent

ComponentRef<DialogComponent>

Dialog a cerrar.

Sí

onCloseDialog

Permite gestionar el evento de cierre de un dialog.

Parámetros

Propiedad

Tipo

Descripción

Obligatorio

dialog

DialogComponent

ComponentRef<DialogComponent>

Dialog a gestionar.

Sí

Respuesta

El servicio devuelve un objeto Promise<void>, que se resuelve al cerrar el dialog.

Ejemplos de uso del servicio con mismo resultado

Resultado

Ejemplo utilizando caller de tipo ModelOptions (uso interno de componente ModalComponent)

Componente

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoDialogComponent {
	...
	constructor(private dialogService: DialogService, private viewContainerRef: ViewContainerRef) { }
	
    open(): void {
      const dialogOptions: DialogOptions = {
        id: 'dialog',
        dismissOnBackdrop: true,
        focusOnClose: 'dialog-btn',
      };
      const modalOptions: ModalOptions = {
        id: 'modal',
        title: {
          text: 'Editar servicio publicado',
          classes: ''
        },
        description: {
          html: '<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>',
        },
        itemsPrimary: [
          {
            text: 'Editar servicio',
            classes: 'c-button--primary'
          }
        ],
        isDismissible: true,
        classes: 'relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white mt-2xl'
      };
      this.dialogService.openDialog(this.viewContainerRef, modalOptions, dialogOptions).then(result => {
        this.dialogService.onCloseDialog(result.dialog).then(() => console.log('Se ha cerrado el dialog'));
      });
    }
	...
}

HTML

<desy-button text="Abrir dialog" (clickEvent)="open()" [id]="'dialog-btn'"></desy-button>

Ejemplo utilizando caller de tipo TemplateRef (template personalizada)

Componente

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoDialogComponent {
	...
	constructor(private dialogService: DialogService, private viewContainerRef: ViewContainerRef) { }
	
    open(modalRef: TemplateRef<any>): void {
      const dialogOptions: DialogOptions = {
        id: 'dialog',
        dismissOnBackdrop: true,
        focusOnClose: 'dialog-btn',
      };

      this.dialogService.openDialog(this.viewContainerRef, modalRef, dialogOptions).then(result => this.dialog = result.dialog.instance);
    }

    close(): void {
      if (this.dialog) {
        this.dialogService.closeDialog(this.dialog);
        this.dialog = null;
      }
    }
	...
}

HTML

<desy-button text="Abrir dialog" (clickEvent)="open(modal)" [id]="'dialog-btn'"></desy-button>
<ng-template #modal>
  <desy-modal [id]="'caller-example'"
              classes="relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white mt-2xl"
              [isDismissible]="true"
              [title]="{text:'Editar servicio publicado'}"
              [description]="{html:'<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>'}"
              [itemsPrimary]="[{text:'Editar servicio','classes':'c-button--primary'}]"
              (closeModal)="close()">
  </desy-modal>
</ng-template>

Ejemplo utilizando caller de tipo Type (componente personalizado)

Componente

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoDialogComponent {
	...
    constructor(private dialogService: DialogService, private viewContainerRef: ViewContainerRef) { }
  
    open(): void {
      const dialogOptions: DialogOptions = {
        id: 'dialog',
        dismissOnBackdrop: true,
        focusOnClose: 'dialog-btn',
      };
      this.dialogService.openDialog(this.viewContainerRef, ModalComponent, dialogOptions).then(result => {
        result.component.instance.title = {
          text: 'Editar servicio publicado',
          classes: ''
        };
        result.component.instance.description = {
          html: '<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>',
        };
        result.component.instance.itemsPrimary = [
          {
            text: 'Editar servicio',
            classes: 'c-button--primary'
          }
        ];
  
        result.component.instance.isDismissible = true;
        result.component.instance.id = 'modal';
        result.component.instance.classes = 'relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white mt-2xl';
  
        const subscription = result.component.instance.closeModal.subscribe(() => {
          this.dialogService.closeDialog(result.dialog);
          subscription.unsubscribe();
        });
      });
    }
	...
}

HTML

<desy-button text="Abrir dialog" (clickEvent)="open()" [id]="'dialog-btn'"></desy-button>

desy-angular v10.0 - Manual de integración DesyModalsModule

Componentes relativos a modales

Dialog

Propiedades de accesibilidad

Componente

HTML

Modal

Propiedades de accesibilidad

Modal con elementos como contenido

Modal con itemsPrimary e isDismissible=true.

Modal con itemsPrimary, itemsSecondary, texto con formato html, isDismissible=true y caller.

Modal con icon de tipo delete

Accesibilidad

Servicios relativos a modales

DialogService

openDialog

closeDialog

onCloseDialog

Componente

HTML

Componente

HTML

Componente

HTML