1 Accordion
2 Alert
3 Collapsible
4 Description-list
5 Details
6 Item
7 Media-object
8 Pagination
9 Spinner
10 Status
11 Status-item
12 Tabs
13 Accesibilidad
14 AlertService

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.

Propiedad	Tipo	Descripción	Obligatorio

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

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

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.

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.

Propiedad	Evento	Tipo	Descripción	Obligatorio

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.

Propiedad	Tipo	Descripción	Obligatorio

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.

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

Propiedad	Tipo	Descripción	Obligatorio

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.

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>)

Propiedad	Tipo	Descripción	Obligatorio

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

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

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.

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.

Propiedad	Tipo	Descripción	Obligatorio

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.

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

Propiedad	Tipo	Descripción	Obligatorio

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

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

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

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

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.

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>

Área de empleados públicos e Integradores

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

Item

TitleItemData

DescriptionItemData

ContentItemData

IconItemData

Componente

HTML

Componente

HTML

Componente

HTML