Componentes relativos a vistas

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

Accordion

<desy-accordion ...></desy-accordion>

Genera una lista de desplegables.

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
items	AccordionItemData[]	Contiene la información relativa a la lista.	Si
heading	AccordionHeaderData	Contiene la información del header
allowToggle	boolean	Permite cerrar cada elemento de forma individual
allowMultiple	boolean	Permite mantener desplegado los diferentes elementos individualmente
showControl	boolean	Permite mostrar un botón para Mostrar/ocultar todos los elementos del accordion
id-prefix	string	Prefijo de los identificadores del listado de it	Si
id	string	Identificador del elemento
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el container del accordion

Objeto AccordionItemData

Propiedad	Tipo	Descripción	Obligatorio
headerText	string	Texto de la cabecera del elemento. No se aplicará cuando se especifique la propiedad headerHtml.	Si, cuando no se especifica headerHtml.
headerHtml	string	Html de la cabecera del elemento.	Si, cuando no se especifica headerText.
text	string	Texto del panel del item. Oculto por defecto. No se aplicará cuando se especifique la propiedad html.	Si, cuando no se especifica html.
html	string	Html del panel del item. Oculto por defecto.	Si, cuando no se especifica text.
open	boolean	Variable que marca si debe estar expandido el item
id	string	Identificador del elemento de la lista.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el elemento de la lista.

Objeto AccordionHeaderData

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	Clases CSS separadas por espacio que se aplicarán sobre el componente.

Propiedades de accesibilidad

El componente, cada AccordionItemData y AccordionHeaderData admiten los siguientes parámetros de accesibilidad.

Ejemplos

Implementación básica

<desy-accordion [items]="[{headerText: 'Accordion Item 1', text: 'Example'},{headerText: 'Accordion Item 2', text: 'Example'},{headerText: 'Accordion Item 2', text: 'Example'}]" [idPrefix]="'accordion'"></desy-accordion>

Con heading y showControls

<desy-accordion [heading]="{text: 'Accordion example'}" [showControl]="true" [items]="[{headerText: 'Accordion Item 1', text: 'Example'},{headerText: 'Accordion Item 2', text: 'Example'},{headerText: 'Accordion Item 2', text: 'Example'}]" [idPrefix]="'accordion'"></desy-accordion>

Alert

<desy-alert ...></desy-alert>

Permite abrir una notificación. Se recomienda su creación dinámica desde el servicio AlertService.

Propiedades de entrada/salida

Propiedad	Evento	Tipo	Descripción	Obligatorio
active	activeChange	boolean	Indica si el alert está activo. Se puede modificar internamente, por lo que se recomienda el uso de two-way binding.

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador.	Sí.
caller	TemplateRef <any>	Template para mostrar como contenido del elemento.	Sí, al crearse desde template.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.
focusFirst	boolean	Permite focalizar sobre el primer elemento dentro del alert al abrirse

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

Ejemplos

Componente

@Component({
  selector: '...',
  templateUrl: '...'
})
export class DemoAlertComponent {
  templateActive = true;
  ...
}

HTML

<ng-template #alertTemplateContent>
  <desy-notification id="alert-template" [title]="{'text':'El documento se ha cargado correctamente'}" type="success" [isDismissible]="true" (isOpenChange)="templateActive = $event"></desy-notification>
</ng-template>
<desy-alert id="alert-id" [caller]="alertTemplateContent" [active]="templateActive" [focusFirst]="true" classes="mt-5"></desy-alert>

Collapsible

<desy-collapsible ...></desy-collapsible>

Permite la creación de una sección plegable

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador.
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	TemplateRef <any>	Template para mostrar al desplegar el elemento.	Si, cuando no se especifica text.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.
headerText	string	Define un encabezado visible para el elemento. No se aplicará cuando se especifique la propiedad headerHtml.	Si, cuando no se especifica headerHtml.
headerHtml	string	Contenido del encabezado en formato HTML.	Si, cuando no se especifica headerText.
open	boolean	Variable que indica si se muestra u oculta el texto plegable.

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

Ejemplos

Collapsible abierto con entrada de texto

<desy-collapsible id="help-with-nationality" headerText="Help with nationality" text="We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post." open=true></desy-collapsible>

Collapsible cerrado con entrada de texto

<desy-collapsible id="help-with-nationality" headerText="Help with nationality" text="We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post."></desy-collapsible>

Description-list

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

Genera una lista de descripción (<dl>). El elemento incluye una lista de grupos de términos (especificados mediante el elemento <dt>) y descripciones (proporcionadas por elementos <dd>)

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
items	ItemDescriptionData[]	Contiene la información relativa a la lista.	Si
id	string	Identificador del elemento <dl>
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el elemento <dl>

Objeto ItemDescriptionData

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del elemento de la lista.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el elemento de la lista.
term	DescriptionData	Contiene la definicón del objeto term <dt>	Si
definition	DescriptionData	Contiene la definicón del objeto definition <dd>	Si

Objeto DescriptionData

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador
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	Clases CSS separadas por espacio que se aplicarán sobre el componente.

Propiedades de accesibilidad

El componente, cada ItemDescriptionData, el term y definition admiten los siguientes parámetros de accesibilidad.

Ejemplos

definition classes Extra Large

<desy-description-list id="id" [items]="[{'term':{'text':'term'},'definition':{'text':'definition','classes':'font-bold text-xl'}}]"></desy-description-list>

Con atributos

<desy-description-list id="description" [items]="[{'term':{'text':'term','id':'term'},'definition':{'text':'definition','id':'definition'},'id':'item'}]"></desy-description-list>

Details

<desy-details ...> Detalles </desy-destails>

Permite ver detalles adicionales que el usuario puede abrir y cerrar.

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del texto.
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	Clases CSS separadas por espacio que se aplicarán sobre el componente.
summaryText	string	Define un encabezado visible para el elemento. No se aplicará cuando se especifique la propiedad summaryHtml.	Si, cuando no se especifica summaryHtml.
summaryHtml	string	Contenido del encabezado en formato HTML.	Si, cuando no se especifica summaryText.
summaryClasses	string	Clases CSS separadas por espacio que se aplicarán sobre el encabezado.
containerClasses	string	Clases CSS separadas por espacio que se aplicarán sobre el contenedor de los detalles.
open	boolean	Variable que indica si se muestra u oculta el contenido.

Contenido

Los detalles que se desean mostrar u ocultar se especificarán como contenido del componente.

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

Ejemplos

Details cerrado con entra de texto

<desy-details summaryText="Help with nationality">We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</desy-details>

Details abierto con entrada de texto

<desy-details [open]="true" summaryText="Help with nationality">We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</desy-details>

Item

<desy-item ...></desy-item>

Permite introducir un item

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del grupo.
title	TitleItemData	Objeto con la información del titulo.	Sí
description	DescriptionItemData	Objeto con la información de la desccripción
items	string[]	Listado de textos que apareceran debajo de la descripción.
content	ContentItemData	Objeto con la información del contenido
icon	IconItemData	Objeto con la informacion del icono
isDraggable	boolean	Indica si el item es arrastrable
isLocked	boolean	Indica si el item esta bloqueado su arrastre
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.
caller	TemplateRef<any>	Template para mostrar dentro el div con texto

TitleItemData

Propiedad	Tipo	Descripción	Obligatorio
text	string	Texto del titulo. Se igonora si se especifica un html.	Sí, en caso de que no se adjunte html
html	string	Html del titulo	Sí, en caso de que no se adjunte text
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el titulo.

DescriptionItemData

Propiedad	Tipo	Descripción	Obligatorio
text	string	Texto de la descripción. Se ignora si se especifica un html.	Sí, en caso de que no se adjunte html
html	string	Html de la descripción	Sí, en caso de que no se adjunte text
classes	string	Clases CSS separadas por espacio que se aplicarán sobre la descripción.

ContentItemData

Propiedad	Tipo	Descripción	Obligatorio
text	string	Texto del contenido. Se ignora si se especifica un html.	Sí, en caso de que no se adjunte html
html	string	Html del contenido	Sí, en caso de que no se adjunte text
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el contenido.

IconItemData

Propiedad

Tipo

Descripción

Obligatorio

type

string

Iconos predefinidos.

document
clipboard
link

html

string

Html del icono

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

Ejemplos

Implementación básica

<desy-item [title]="{'text' : 'Registro de alta de la asociación'}"></desy-item>

Implementación con HTML

Componente

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoItemComponent {
	titleHtml = 'Las entidades beneficiarias deberán tener su sede y actividad <strong class=\\" font-bold \\">principal en Aragón.</strong>';
}

HTML

<desy-item [title]="{'html' : titleHtml}"></desy-item>

Implementación con descripción

Componente

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoItemComponent {
	titleHtml = 'Las entidades beneficiarias deberán tener su sede y actividad <strong class=\\" font-bold \\">principal en Aragón.</strong>';
	descriptionHtml = 'Documento acreditativo de registro de alta de la <strong class=\\" font-bold \\">asociación</strong>';
}

HTML

<desy-item [title]="{'html' : titleHtml}" [description]="{'html': descriptionHtml}"></desy-item>

Implementación con items

Componente

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoItemComponent {
	titleHtml = 'Las entidades beneficiarias deberán tener su sede y actividad <strong class=\\" font-bold \\">principal en Aragón.</strong>';
}

HTML

<desy-item [title]="{'html' : titleHtml}" [items]="['Desde modelo', 'Obligatorio previo a resolución', 'Condicionado']"></desy-item>

Implementación con content

Componente

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoItemComponent {
	titleHtml = 'Las entidades beneficiarias deberán tener su sede y actividad <strong class=\\" font-bold \\">principal en Aragón.</strong>';
	contentHtml = 'Modelo: <a class=\" c-link break-all \" href=\" # \">aragon.es/tramites/19283-19348401/Modelofianza.pdf</a>';
}

HTML

<desy-item [title]="{'html' : titleHtml}" [content]="{'html': contentHtml, 'classes': 'text-sm text-neutral-dark'}"></desy-item>

Implementación con arrastrable

Componente

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoItemComponent {
	titleHtml = 'Las entidades beneficiarias deberán tener su sede y actividad <strong class=\\" font-bold \\">principal en Aragón.</strong>';
}

HTML

<desy-item [title]="{'html' : titleHtml}" [isDraggable]="true"></desy-item>

Implementación con tipo documento

Componente

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoItemComponent {
	titleHtml = 'Las entidades beneficiarias deberán tener su sede y actividad <strong class=\\" font-bold \\">principal en Aragón.</strong>';
}

HTML

<desy-item [title]="{'html' : titleHtml}" [icon]="{'type': 'document'}"></desy-item>

Implementación con calle, title, description, items, content e icon

Componente

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoItemComponent {
  title: TitleItemData;
  description: DescriptionItemData;
  items: string[];
  content: ContentItemData;
  icon: IconItemData;
  
  constructor() {
    this.title = {
      text: 'Registro de alta de la asociación',
      html: null,
      classes: 'font-bold'
    };
    this.description = {
      text: 'Documento acreditativo de registro de alta de la asociación',
      html: null,
      classes: null
    };
    this.items = [ 'Desde modelo', 'Obligatorio previo a resolución', 'Condicionado'];
    this.content = {
      text: null,
      html: 'Modelo: <a class=\" c-link break-all \" href=\" # \">aragon.es/tramites/19283-19348401/Modelofianza.pdf</a>',
      classes: 'text-neutral-dark'
    };
    this.icon = {
      type: 'document',
      html: null
    };
  }
}

HTML

  <ng-template #caller1>
    <button class=" c-button c-button--sm c-button--transparent ">Eliminar</button>
    <button class=" c-button c-button--sm c-button--transparent ">Editar</button>
  </ng-template>
  <desy-item
    [title]="title"
    [description]="description"
    [items]="items"
    [content]="content"
    [icon]="icon"></desy-item>

HTML con campo utilizado en un formulario dirigido por plantilla

Media-object

<desy-media-object ...></desy-media-object>

Genera una etiqueta div que contiene a su vez otro div con una figura en formato Html y un div con texto .

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador
caller	TemplateRef <any>	Template para mostrar dentro el div con texto
figureHtml	string	Variable que contendrá la figura a mostrar	Si
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.
center	boolean	Determina la posición de los elementos
reverse	boolean	Determina la posición de los elementos
figureClasses	string	Clases que se aplicarán sobre el div contenedor del figureHtml
contenClasses	string	Clases que se aplicarán sobre el div contenedor del caller

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

Ejemplos

Classes añadiendo reverse

<desy-media-object id="identificador" reverse="true"
        figureHtml="<div class='w-20 h-20'><div class='h-full border-4 border-dashed border-gray-200 rounded-lg'></div></div>"
        [caller]="callerRef"></desy-media-object>
   
<ng-template #callerRef>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.
</ng-template>

Classes añadiendo padding y margin

<desy-media-object id="identificador" figureClasses="mr-base" contentClasses="text-sm" classes="mb-base"
        figureHtml="<div class='w-20 h-20 '><div class='h-full border-4 border-dashed border-gray-200 rounded-lg'></div></div>"
        [caller]="callerRef"></desy-media-object>
   
<ng-template #callerRef>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.
</ng-template>

<desy-pagination ...></desy-pagination>

Permite visualizar paginas en listados e interactuar con ellas

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador
hasSelect	boolean	Si es ‘true’, el componente aparecerá con un desplegable para seleccionar las paginas
idPrefix	string	Prefijo para el identificador de los objetos de la lista items	Sí
classesContainer	string	Clases CSS separadas por espacio que se aplicarán sobre el contenedor <div> del componente.
totalItems	number	Número total de objetos	Sí
itemsPerPage	number	Número de objetos por página	Sí
hasPrevious	boolean	Si hasSelect es ‘true’, aparecera como activo un boton de ‘Anterior’
hasNext	boolean	Si hasSelect es ‘true’, aparecera como activo un boton de ‘Siguiente’
previousText	string	Texto para reemplazar el boton ‘Anterior’
nextText	string	Texto para reemplazar el boton ‘Siguiente’
items	PaginationItemData[]	Listado de objetos a mostrar	Sí
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el contenedor <nav> del componente.

PaginationItemData

Propiedad	Tipo	Descripción	Obligatorio
href	string	Enlace al que dirige el objeto	Sí
active	boolean	Si es ‘true’, aparecera como activo
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el objeto.

Propiedades de accesibilidad

El componente y PaginationItemData admite los siguientes parámetros de accesibilidad.

Ejemplos

Implementación por defecto

<desy-pagination [items]="[{href: '#'}, {href: '#'}]" [itemsPerPage]="10" [totalItems]="64" [idPrefix]="'simple'"></desy-pagination>

Implementación con selector

<desy-pagination [items]="[{href: '#'}, {href: '#'}]" [itemsPerPage]="10" [totalItems]="64" [hasSelect]="true" [hasNext]="true" [hasPrevious]="true" [idPrefix]="'selector'"></desy-pagination>

Spinner

<desy-spinner ...></desy-spinner>

Permite representar un spinner durante procesos de carga.

Propiedades de entrada

Propiedad	Tipo	Descripción
id	string	Identificador del spinner
text	string	Texto que se interpretará por los lectores de pantalla
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

Ejemplos

Spinner simple

<desy-spinner id="identificador" text="Cargando..." classes="text-2xl" ariaLabel="Prueba del componente spinner"></desy-spinner >

Status

<desy-status...></desy-status>

Permite representar el estado de un elemento o de una operación.

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador.
text	string	Contenido del texto en formato texto plano.	Si.
icon	StatusIconData	Contiene la información relativa al icono del componente.	Si.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.

Objeto StatusIconData

Propiedad

Tipo

Descripción

Obligatorio

html

string

Contenido en formato HTML para insertar un icono personalizado.

type

string

Estados disponibles para reflejar en el icono:

success
alert
loading
error

No se aplicará cuando se especifique la propiedad html.

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

Ejemplos

Status con texto e icon de tipo success

<desy-status text='completo' [icon]="{'type':'success'}"></desy-status>

Status con texto, classes e icon de tipo alert

<desy-status text='incompleto' classes='text-alert-base' [icon]="{'type':'alert'}"></desy-status>

Status-item

<desy-status-item...></desy-status-item>

Permite introducir un item con status

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador.	Sí
title	StatusItemTitleData	Objeto con la información del titulo.
hint	HintData	Objeto con la información del Hint.
errorMessage	ErrorMessageData	Objeto con la información del ErrorMessage.
errorId	string	ID personalizado para agregar al atributo `aria-errormessage`
describedBy	string	Uno o más Id para agregar al atributo ‘aria-describedby’
items	ItemDescriptionData[]	Contiene la información relativa a la lista.
status	StatusData	Objeto con la información del status.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el la etiqueta <div> del contenedor del componente
caller	TemplateRef<any>	Template para mostrar dentro el div con texto

Objeto StatusItemTitleData

Propiedad	Tipo	Descripción	Obligatorio
text	string	Contenido del texto en formato texto plano. Si html esta establecido, este no es requerido.	Sí, cuando no se especifica html.
html	string	Contenido del texto en formato HTML.	Sí, cuando no se especifica text.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el titulo.

Objeto StatusData

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador.
text	string	Contenido del texto en formato texto plano.	Sí
icon	statusData	Contiene la información relativa al icono del componente.	Sí
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

Ejemplos

Status-item con hint y status de tipo success

<ng-template #caller3>
    <button class="c-button c-button--transparent" data-module="c-button">Modificar</button>
</ng-template>

<desy-status-item id="with-title-html"
    [title]="{'text':'Personas de la unidad familiar'}"
    [hint]="{'text':'2 personas añadidas','id':'with-hint-html-hint'}"
    [status]="{'text':'Aportado','icon':{'type':'success'}}"
    [caller]="caller3"></desy-status-item>

Status-item con errorMessage y status

<ng-template #caller3>
    <button class="c-button c-button--transparent" data-module="c-button">Modificar</button>
</ng-template>

<desy-status-item id="with-status-alert" classes="border-l-4 border-alert-base"
    [title]="{'text':'Datos adicionales del solicitante'}"
    [errorMessage]="{'text':'Es necesario aportar este documento para enviar el trámite','classes':'my-sm text-alert-base'}"
    [status]="{'text':'Incompleto','icon':{'type':'alert'},'classes':'text-alert-base'}"
    [caller]="caller3"></desy-status-item>

Status-item con items y status

<ng-template #caller1>
    <button class="c-button c-button--transparent" data-module="c-button">Action</button>
</ng-template>

<desy-status-item id="only-items"
    [items]="[{'term':{'text':'term'},'definition':{'text':'definition'}},{'term':{'text':'term'},'definition':{'text':'definition'}},{'term':{'text':'term'},'definition':{'text':'definition'}}]"
    [status]="{'text':'status','icon':{'type':'success'}}"
    [caller]="caller1"></desy-status-item>

Tabs

<desy-tabs...></desy-tabs>

Permite introducir pestañas para organizar el contenido

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador.
idPrefix	string	Identificador que se utiliza cuando no hay un id definido
title	string	Contiene información del titulo.	Si.
tabListArialabel	string	Es el aria-label para el elemento con role=tablist	Si.
items	TabsItemsData[]	Contiene la información relativa a la lista.	Si.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el la etiqueta <div> del contenedor del componente

Objeto TabsItemsData

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del elemento de la lista.	Si
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.
disabled	boolean	Si es true el nav item se deshabilita.
panel	TabsPanelData	Contiene la definición del objeto panel	Si

Objeto TabsPanelData

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	TemplateRef<any>	Template para mostrar el contenido del texto en formato HTML.	Si, cuando no se especifica text.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.

El componente admite los siguientes parámetros de accesibilidad.

Ejemplos

Tabs con idPrefix, tabListAriaLabel, title, disabeld, item.panel.classes e item.panel.html como template.

<ng-template #html1>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
</ng-template>
<ng-template #html2>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
</ng-template>
<ng-template #html3>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
</ng-template>
<ng-template #html4>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
</ng-template>

<desy-tabs idPrefix="tab-example" tablistAriaLabel="Tab example" title="Implementación Default"
    [items]="[{'text':'Tab 1','id':'tab-example-a','panel':{'html':html1,'classes':'bg-warning-light'}},
        {'text':'Tab 2','id':'tab-example-b', 'disabled':'true','panel':{'html':html2}},
        {'text':'Tab 3','id':'tab-example-c','panel':{'html':html3,'classes':'bg-warning-light'}},
        {'text':'Tab 4','id':'tab-example-d','panel':{'html':html4}}]"></desy-tabs>

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

Componentes relativos a vistas

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

AlertService

Servicio que permite abrir y cerrar alerts de forma dinámica, es decir, sin tener que especificar los componentes en el HTML.

Contiene los siguientes métodos:

openAlert

Permite abrir un alert en una posición específica del html.

Parámetros

Propiedad	Tipo	Descripción	Obligatorio
caller	TemplateRef<any>	Template del elemento a mostrar dentro del alert.	Sí
caller	NotificationOptions	Especificando esta opción se generará automáticamente un componente NotificationComponent dentro del alert, utilizando los datos de este objeto como parámetros de entrada del componente.	Sí
alertOptions	AlertOptions	Datos de entrada del componente AlertComponent.	Sí.

AlertOptions

Mismos parámetros de entrada que el componente AlertComponent, a excepción de la propiedad caller e isOpen (al utilizar el servicio se considerará abierto). Contiene, además, las siguientes opciones:

Propiedad	Tipo	Descripción	Obligatorio
place	ViewContainerRef	Contenedor donde se creará el alert.	Sí.

Respuesta

El servicio devuelve un objeto Promise<OpenAlertResult>

OpenDialogResult

Propiedad	Tipo	Descripción
component	ComponentRef<any>	Si el parámetro caller utilizado es de tipo NotificationOptions, referencia al componente interno creado.
alert	ComponentRef<AlertComponent>	Referencia al componente diálogo creado.

closeAlert

Permite cerrar un alert.

Parámetros

Propiedad

Tipo

Descripción

Obligatorio

alert

AlertComponent

ComponentRef<AlertComponent>

Alert a cerrar.

Sí

onCloseAlert

Permite gestionar el evento de cierre de un alert.

Parámetros

Propiedad

Tipo

Descripción

Obligatorio

alert

AlertComponent

ComponentRef<DialogComponent>

Alert a gestionar.

Sí

Respuesta

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

Ejemplos de uso del servicio con mismo resultado

Resultado

Ejemplo utilizando caller de tipo NotificationOptions (uso interno de componente NotificationComponent)

Componente

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoAlertComponent implements OnInit {

    @ViewChild('alertPlace', {read: ViewContainerRef}) alertPlace: ViewContainerRef;
    
	constructor(private dialogService: DialogService, private viewContainerRef: ViewContainerRef) { }
	
	ngOnInit(): void {
		this.openAlert(1);
		this.openAlert(2);
		this.openAlert(3);
	}
	
    openAlert(docNumber: number): void {
    
      const alertOptions: AlertOptions = {
        id: 'alert',
        place: this.alertPlace,
        role: 'alert',
        ariaLive: 'assertLive'
      };
      
      const notificationOptions: NotificationOptions = {
        id: 'alert-service',
        title: {
          text: 'El documento ' + docNumber + ' se ha cargado correctamente'
        },
        type: 'success',
        isDismissible: true
      };
      
      this.alertService.openAlert(notificationOptions, alertOptions).then();
    }
	...
}

HTML

...
<ng-template #alertPlace></ng-template>
...

Ejemplo utilizando caller de tipo TemplateRef (template personalizada)

Componente

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoAlertComponent implements OnInit {

    @ViewChild('alertPlace', {read: ViewContainerRef}) alertPlace: ViewContainerRef;
    @ViewChild('notificationRef') notificationRef: TemplateRef<any>;
    
	constructor(private dialogService: DialogService, private viewContainerRef: ViewContainerRef) { }
	
	ngOnInit(): void {
		this.openAlert(1);
		this.openAlert(2);
		this.openAlert(3);
	}
	
    openAlert(docNumber: number): void {
    
      const alertOptions: AlertOptions = {
        id: 'alert',
        place: this.alertPlace,
        role: 'alert',
        ariaLive: 'assertLive'
      };
      
      this.alertService.openAlert(this.notificationRef, alertOptions).then(result => {
        // En callerContext puedes incluir los parámetros que necesites utilizar dentro de la template
        result.alert.instance.callerContext = {
          alertRef: result.alert,
          docNumber: number
        };
      });
    }
    
    closeAlert(alertRef: ComponentRef<AlertComponent>): void {
      this.alertService.closeAlert(alertRef);
    }
	...
}

HTML

...
<ng-template #notificationRef let-alertRef="alertRef" let-docNumber="docNumber">
  <desy-notification id="alert-service-and-template" [title]="{'text': 'El documento ' + docNumber + ' se ha cargado correctamente'}" type="success" [isDismissible]="true" (isOpenChange)="closeAlert(alertRef)"></desy-notification>
</ng-template>
<ng-template #alertPlace></ng-template>
...

desy-angular v2.0 - Manual de integración DesyViewsModule

Componentes relativos a vistas

Accordion

Implementación básica

Con heading y showControls

Alert

Componente

HTML

Collapsible

Collapsible abierto con entrada de texto

Description-list

definition classes Extra Large

Con atributos

Details

Details cerrado con entra de texto

Details abierto con entrada de texto

Item

TitleItemData

DescriptionItemData

ContentItemData

IconItemData

Componente

HTML

Componente

HTML

Componente

HTML

Componente

HTML

Componente

HTML

Componente

HTML

Componente

HTML

HTML con campo utilizado en un formulario dirigido por plantilla

Media-object

Classes añadiendo reverse

Classes añadiendo padding y margin

Pagination

PaginationItemData

Implementación por defecto

Implementación con selector

Spinner

Spinner simple

Status

Status con texto e icon de tipo success

Status-item

Status-item con hint y status de tipo success

Tabs

Tabs con idPrefix, tabListAriaLabel, title, disabeld, item.panel.classes e item.panel.html como template.

Accesibilidad

Componentes relativos a vistas

AlertService

openAlert

closeAlert

onCloseAlert

Componente

HTML

Componente

HTML