1 Accordion
2 AccordionHistory
3 Alert
4 Card
5 Collapsible
6 Description-list
7 Details
8 Item
9 Media-object
10 Pagination
11 Spinner
12 Status
13 Status-item
14 Tabs
15 Tooltip
16 Accesibilidad
17 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
id	string	Id para el botón de mostrar/ocultar todo
items	AccordionItemData[]	Contiene la información relativa a la lista.	Si
heading	AccordionHeaderData	Contiene la información del header
headingLevel	number	Indica el nivel del encabezado principal: 1=h1, 2=h2, etc. Los encabezados internos serán del nivel inmediatamente inferior. Por defecto equivale a 2.
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
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.

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

AccordionHeaderComponent

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

Permite especificar la cabecera.

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

AccordionItemComponent

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

Permite especificar un item del listado.

Admite los mismos parámetros de entrada que el objeto AccordionItemData. El parámetro open admite double-binding.

Cada item está compuesto por una cabecera y un contenido, que se podrán representar mediante los componentes AccordionHeaderComponent y ContentComponent, respectivamente. El componente ContentComponent es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.

Además, se puede modificar el botón de Mostrar/Ocultar incluyendo los componentes AccordionItemShowButtonComponent y AccordionItemHideButtonComponent respectivamente, que únicamente admiten como contenido el HTML a mostrar.

AccordionItemShowButtonComponent

<desy-accordion-item-show-button ...>...</desy-accordion-item-show-button>

AccordionItemHideButtonComponent

<desy-accordion-item-hide-button ...>...</desy-accordion-item-hide-button>

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>

AccordionHistory

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

Genera una lista de desplegables que, además, tienen un estado temporal.

El componente AccordionHistory tiene los mismos parámetros de entrada que el componente Accordion.

Propiedades de accesibilidad

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

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

AccordionHeaderComponent

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

Permite especificar la cabecera.

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

AccordionHistoryItemComponent

<desy-accordion-history-item ...>...</desy-accordion-history-item>

Permite especificar un item del listado.

Admite los mismos parámetros de entrada que el componente AccordionItemComponent. Además, admite los siguientes parámetros adicionales:

Propiedad	Tipo	Descripción

Propiedad

Tipo

Descripción

status

string

Permite reflejar el estado temporal del item. Los posibles valores son:

current → Estado actual
pending → Estado pendiente
muted → Estado desactivado
currentmuted → Estado desactivado y actual
Otro/ninguno/por defecto → Estado anterior al actual

disabled

boolean

Permite indicar que el item está deshabilitado.

Cada item está compuesto por una cabecera y un contenido, que se podrán representar mediante los componentes AccordionHeaderComponent y ContentComponent, respectivamente. El componente ContentComponent es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.

Además, se puede modificar el botón de Mostrar/Ocultar incluyendo los componentes AccordionHistoryItemShowButtonComponent y AccordionHistoryItemHideButtonComponent respectivamente, que únicamente admiten como contenido el HTML a mostrar.

Implementación con items activos

<desy-accordion-history [id]="'id-e1'" [idPrefix]="'e1'" [showControl]="false" [allowMultiple]="true" [allowToggle]="false">
    <desy-accordion-header>Ejemplo 1</desy-accordion-header>
    <desy-accordion-history-item>
        <desy-accordion-header>Item 1</desy-accordion-header>
        <desy-content>Ejemplo item 1.</desy-content>
    </desy-accordion-history-item>
    <desy-accordion-history-item>
        <desy-accordion-header>Item 2</desy-accordion-header>
        <desy-content>Ejemplo item 2.</desy-content>
    </desy-accordion-history-item>
    <desy-accordion-history-item [status]="'current'" [open]="true">
        <desy-accordion-header>Item 3</desy-accordion-header>
        <desy-content>Ejemplo item 3.</desy-content>
    </desy-accordion-history-item>
    <desy-accordion-history-item [status]="'pending'">
        <desy-accordion-header>Item 4</desy-accordion-header>
        <desy-content>Ejemplo item 4 - pending.</desy-content>
    </desy-accordion-history-item>
</desy-accordion-history>

Implementación con items deshabilitados

<desy-accordion-history [id]="'id-e1'" [idPrefix]="'e1'" [showControl]="false" [allowMultiple]="true" [allowToggle]="false">
    <desy-accordion-header>Ejemplo 2</desy-accordion-header>
    <desy-accordion-history-item [status]="'muted'" [disabled]="true">
        <desy-accordion-header>Item 1</desy-accordion-header>
        <desy-content>Ejemplo item 1.</desy-content>
    </desy-accordion-history-item>
    <desy-accordion-history-item [status]="'muted'" [disabled]="true" [open]="true">
        <desy-accordion-header>Item 2</desy-accordion-header>
        <desy-content>Ejemplo item 2 - deshabilitado y abierto</desy-content>
    </desy-accordion-history-item>
    <desy-accordion-history-item [status]="'currentmuted'" [disabled]="true">
        <desy-accordion-header>Item 3</desy-accordion-header>
        <desy-content>Ejemplo item 3.</desy-content>
    </desy-accordion-history-item>
    <desy-accordion-history-item [status]="'pending'" [disabled]="true">
        <desy-accordion-header>Item 4</desy-accordion-header>
        <desy-content>Ejemplo item 4 - pending.</desy-content>
    </desy-accordion-history-item>
</desy-accordion-history>

Implementación con botones de mostrar y ocultar personalizados

  <desy-accordion-history [id]="'id-e1'" [idPrefix]="'e1'" [showControl]="false" [allowMultiple]="true" [allowToggle]="true">
    <desy-accordion-header>Ejemplo 1</desy-accordion-header>
    <desy-accordion-history-item>
        <desy-accordion-header>Item 1</desy-accordion-header>
        <desy-content>Ejemplo item 1.</desy-content>
        <desy-accordion-item-show-button>
          MOSTRAR TODO
        </desy-accordion-item-show-button>
        <desy-accordion-item-hide-button>
          OCULTAR TODO
        </desy-accordion-item-hide-button>
    </desy-accordion-history-item>
    <desy-accordion-history-item>
        <desy-accordion-header>Item 2</desy-accordion-header>
        <desy-content>Ejemplo item 2.</desy-content>
        <desy-accordion-item-show-button>
          <strong>Mostrar contenido</strong>
        </desy-accordion-item-show-button>
        <desy-accordion-item-hide-button>
          <strong>Ocultar contenido</strong>
        </desy-accordion-item-hide-button>
    </desy-accordion-history-item>
    <desy-accordion-history-item [status]="'current'" [open]="true">
        <desy-accordion-header>Item 3</desy-accordion-header>
        <desy-content>Ejemplo item 3.</desy-content>
        <desy-accordion-item-show-button>
          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M14 7a1 1 0 0 0-1-1H8.25A.25.25 0 0 1 8 5.75V1a1 1 0 0 0-2 0v4.75a.25.25 0 0 1-.25.25H1a1 1 0 0 0 0 2h4.75a.25.25 0 0 1 .25.25V13a1 1 0 0 0 2 0V8.25A.25.25 0 0 1 8.25 8H13a1 1 0 0 0 1-1Z" fill="currentColor" transform="scale(3.42857)"/></svg>
        </desy-accordion-item-show-button>
        <desy-accordion-item-hide-button>
          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M13 8H1a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(3.42857)"/></svg>
        </desy-accordion-item-hide-button>
    </desy-accordion-history-item>
    <desy-accordion-history-item [status]="'pending'">
        <desy-accordion-header>Item 4</desy-accordion-header>
        <desy-content>Ejemplo item 4 - pending.</desy-content>
        <desy-accordion-item-show-button>
          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M14 7a1 1 0 0 0-1-1H8.25A.25.25 0 0 1 8 5.75V1a1 1 0 0 0-2 0v4.75a.25.25 0 0 1-.25.25H1a1 1 0 0 0 0 2h4.75a.25.25 0 0 1 .25.25V13a1 1 0 0 0 2 0V8.25A.25.25 0 0 1 8.25 8H13a1 1 0 0 0 1-1Z" fill="currentColor" transform="scale(3.42857)"/></svg>
        </desy-accordion-item-show-button>
        <desy-accordion-item-hide-button>
          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M13 8H1a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(3.42857)"/></svg>
        </desy-accordion-item-hide-button>
    </desy-accordion-history-item>
</desy-accordion-history>

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>

Card

<desy-card ...></desy-card>

Permite introducir una card

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción	Obligatorio
`containerClasses`	`string`	Clases CSS separadas por espacio que se aplicarán en el primer div del componente
`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.

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

CardSuperComponent

<desy-card-super>...</desy-card-super>

Permite incluir contenido adicional en la parte superior de la card mediante ng-content

CardLeftComponent

<desy-card-left>...</desy-card-left>

Permite incluir contenido adicional en la parte izquierda de la card mediante ng-content

CardRightComponent

<desy-card-right>...</desy-card-right>

Permite incluir contenido adicional en la parte derecha de la card mediante ng-content

CardSubComponent

<desy-card-sub>...</desy-card-sub>

Permite incluir contenido adicional en la parte inferior de la card mediante ng-content

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

Implementación con contenido

<desy-card classes="lg:w-2/3" containerClasses="p-base bg-neutral-lighter border-t-8 border-neutral-dark">
  <desy-card-super backgroundColor="transparent"
    backgroundImageUrl="https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen"
    classes="lg:hidden h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden" [role]="role"
    [ariaLabel]="ariaLabel" />
  <ng-container *ngTemplateOutlet="defaultContentWithBtn"></ng-container>
  <desy-card-left backgroundColor="transparent"
    backgroundImageUrl="https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen"
    classes="hidden lg:block w-1/2 -m-base mr-base bg-cover bg-center bg-no-repeat overflow-hidden" [role]="role"
    [ariaLabel]="ariaLabel" />
</desy-card>

Implementación básica

<desy-card classes="lg:w-1/3" containerClasses="p-base border border-neutral-base rounded">
  <h3 class="c-h3"><a href="#" class="c-link">Título card</a></h3>
  <div class="prose max-w-none">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur
      vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
  </div>
</desy-card>

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>

Collapsible cerrado con contenido

<desy-collapsible id="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.">Esto es un collapsibe <strong>con HTML</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	DescriptionItemData[]	Contiene la lista de descripciones, compuestas por un término y una definición.	Si
id	string	Identificador del elemento <dl>
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el elemento <dl>

Objeto DescriptionItemData

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	TermDefinitionData	Permite especificar el término.	Si
definition	TermDefinitionData	Permite especificar la definición.	Si

Objeto TermDefinitionData

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 DescriptionItemData, el term y definition admiten los siguientes parámetros de accesibilidad.

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

DescriptionItemComponent

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

Permite especificar un item de la lista de descripciones. Engloba un término y una definición.

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

TermComponent

<desy-term ...>...</desy-term>

Permite especificar el término dentro de un desy-description-item.

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

DefinitionComponent

<desy-definition ...>...</desy-definition>

Permite especificar la definición dentro de un desy-description-item.

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

Ejemplo con items por contenido

<desy-description-list [id]="'id'">
  <desy-description-item>
    <desy-term>term</desy-term>
    <desy-definition [classes]="'font-bold text-xl'">definition</desy-definition>
  </desy-description-item>
</desy-description-list>

Ejemplo con items como parámetros

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

Ejemplo 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	TitleData	Objeto con la información del titulo. Este objeto es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.	Sí
description	DescriptionData	Objeto con la información de la descripción Este objeto es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.
headingLevel	number	Indica el nivel del encabezado principal del título: 1=h1, 2=h2, etc. Si no se indica, se incorpora dentro de un elemento p.
items	string[]	Listado de textos que aparecerán debajo de la descripción.
content	ContentData	Objeto con la información del contenido adicional a mostrar en la parte inferior del item. Este objeto es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.
caller	TemplateRef<any>	Template con el contenido adicional a mostrar en la parte derecha del item.
icon	IconData	Objeto con la información del icono. Este objeto es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule. Admite los siguientes tipos: document clipboard link
isDraggable	boolean	Indica si el item es arrastrable
isLocked	boolean

Área de empleados públicos e Integradores

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

Componentes relativos a vistas

Accordion

Implementación básica

Con heading y showControls

AccordionHistory

Implementación con items activos

Implementación con items deshabilitados

Alert

Componente

HTML

Card

Collapsible

Collapsible abierto con entrada de texto

Description-list

Ejemplo con items por contenido

Ejemplo con items como parámetros

Ejemplo con atributos

Details

Details cerrado con entra de texto

Details abierto con entrada de texto

Item