desy-angular v2.0 - Manual de integración DesyModalsModule
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.
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>
Modal
<desy-modal...></desy-modal>Permite representar el contenido de una ventana 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.
closeDialog
Permite cerrar un dialog.
onCloseDialog
Permite gestionar el evento de cierre de un dialog.
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>
, multiple selections available,