Componentes relativos a vistas

...

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

Accordion

...

Code Block

language	xml

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

...

Expand

title	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
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
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.

Expand

title	Contenido

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

AccordionHeaderComponent

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

Permite especificar la cabecera.

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

AccordionItemComponent

Code Block
<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.

Expand

title	Ejemplos

Implementación básica

Code Block

language	xml

<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

Code Block

language	xml

<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

...

Code Block

language	xml

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

...

Expand

title	Propiedades de entrada

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.

Expand

title	Contenido

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

AccordionHeaderComponent

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

Permite especificar la cabecera.

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

AccordionHistoryItemComponent

Code Block
<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

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.

Expand

title	Ejemplos

Implementación con items activos

Code Block

language	xml

<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

Code Block

language	xml

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

Alert

...

Code Block

language	xml

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

...

Expand

title	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.

Expand

title	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.

Expand

title	Ejemplos

Componente

Code Block

language	xml

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

HTML

Code Block

language	xml

<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

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

Collapsible abierto con entrada de texto

Code Block

language	xml

<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

Code Block

language	xml

<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

Code Block

language	xml

<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

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

Ejemplo con items por contenido

Code Block

language	xml

<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

Code Block

language	xml

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

Ejemplo con atributos

Code Block

language	xml

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

Details

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

Details cerrado con entra de texto

Code Block

language	xml

<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

Code Block

language	xml

<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

...

Code Block

language	xml

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

...

Expand

title	Propiedades de entrada

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	Indica si el item esta bloqueado su arrastre
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.

Expand

title	Contenido

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

TitleComponent

Code Block
<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 TitleData.

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

DescriptionComponent

Code Block
<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 DescriptionData.

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

ItemItemComponent

Code Block
<desy-item-item>...</desy-item-item>

Permite incluir cada item del listado sin utilizar el parámetro items.

ItemContentBottomComponent

Code Block
<desy-item-content-bottom ...>...</desy-item-content-bottom>

Permite incluir contenido adicional en la parte inferior del item sin utilizar el parámetor content.

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

ItemContentRightComponent

Code Block
<desy-item-content-right>...</desy-item-content-right>

Permite incluir contenido adicional en la parte derecha del item sin utilizar el parámetor caller.

IconComponent

Code Block
<desy-icon>...</desy-icon>

Permite especificar el icono.

Admite las mismas propiedades de entrada que el objeto IconData.

Admite los siguientes tipos:

document
clipboard
link

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

Expand

title	Ejemplos

Implementación con contenido

Code Block

<desy-item>
  <desy-icon [type]="'document'"></desy-icon>
  <desy-title [classes]="'font-bold'">Registro de alta de la asociación</desy-title>
  <desy-description>Documento acreditativo de registro de alta de la asociación</desy-description>
  <desy-item-item>Desde modelo</desy-item-item>
  <desy-item-item>Obligatorio previo a resolución</desy-item-item>
  <desy-item-item>Condicionado</desy-item-item>
  <desy-item-content-bottom>Modelo: <a class=" c-link break-all " href="#">aragon.es/tramites/19283-19348401/Modelofianza.pdf</a></desy-item-content-bottom>
  <desy-item-content-right>
    <button class=" c-button c-button--sm c-button--transparent ">Eliminar</button>
    <button class=" c-button c-button--sm c-button--transparent ">Editar</button>
  </desy-item-content-right>
</desy-item>

Implementación básica

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

Implementación con HTML

Componente

Code Block

language	js

@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

Code Block

language	html

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

Implementación con descripción

Componente

Code Block

@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

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

Implementación con items

Componente

Code Block

@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

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

Implementación con content

Componente

Code Block

@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

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

Implementación con arrastrable

Componente

Code Block

@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

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

Implementación con tipo documento

Componente

Code Block

@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

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

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

Componente

Code Block

@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

Code Block

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

Media-object

...

Code Block

language	xml

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

...

Expand

title	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.

Expand

title	Contenido

ContentComponent

Code Block
<desy-content>...</desy-content>

Permite indicar el contenido principal que englobará el tooltip, de forma que al posar el cursor sobre éste se muestre la información extendida.

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

MediaObjectFigureComponent

Code Block
<desy-media-object-figure>...</desy-media-object-figure>

Permite indicar la figura del objeto..

Expand

title	Ejemplos

Classes añadiendo reverse

Code Block

language	xml

<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

Code Block

language	xml

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

Ejemplo con contenido

Code Block

language	html

<desy-media-object [classes]="classes" [id]="id"
          [figureClasses]="figureClasses" [contenClasses]="contenClasses" [center]="center" [reverse]="reverse">
           <desy-media-object-figure>
            <div class='w-20 h-20'><div class='h-full border-4 border-dashed border-blue-200 rounded-lg'></div></div>
           </desy-media-object-figure>
           <desy-content>
            Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit.</strong> Integer maximus, <i>elit et faucibus finibus</i>, 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.
          </desy-content>
</desy-media-object>

...

Code Block

language	xml

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

...

Expand

title	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.

Expand

title	Ejemplos

Implementación por defecto

Code Block

language	xml

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

Implementación con selector

Code Block

language	xml

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

Spinner

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

Spinner simple

Code Block

language	xml

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

Status

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

Status con texto e icon de tipo success

Code Block

language	xml

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

Status con texto e icon con contenido

Code Block

language	xml

<desy-status text='texto editable' [icon]="icon"">Status with <strong>HTML</strong></desy-status>

Status con texto, classes e icon de tipo alert

Code Block

language	xml

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

Status-item

...

Code Block

language	xml

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

...

Expand

title	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	DescriptionItemData[]	Contiene la información relativa a la lista (ver componente DescriptionList).
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.

Expand

title	Contenido

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

TitleComponent

Code Block
<desy-title>...</desy-title>

Permite indicar el titulo que englobará el componente

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

HintComponent

Code Block
<desy-hint>...</desy-hint>

Permite indicar un texto de ayuda en el componente

Este componente se encuentra en el módulo DesyFormsModule.

ErrorMessageComponent

Code Block
<desy-error-message>...</desy-error-message>

Permite indicar un mensaje de error en el componente

Este componente se encuentra en el módulo DesyFormsModule.

DescriptionItemComponent

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

Permite indicar la descripción en el componente

Este componente se encuentra en el módulo DesyViewsModule, en description-list.

TermComponent

Code Block
<desy-term>...</desy-term>

Permite indicar el termino en el componente

Este componente se encuentra en el módulo DesyViewsModule, en description-list.

DefinitionComponent

Code Block
<desy-definition>...</desy-definition>

Permite indicar la definición en el componente

Este componente se encuentra en el módulo DesyViewsModule, en description-list.

ContentComponent

Code Block
<desy-content>...</desy-content>

Permite especificar el contenido adicional tras los items.

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

StatusComponent

Code Block
<desy-status>...</desy-status>

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

Este componente se encuentra en el módulo DesyViewsModule

Expand

title	Ejemplos

Status-item con hint y status de tipo success

Code Block

language	xml

<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

Code Block

language	xml

<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

Code Block

language	xml

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

Status-item con contenido

Code Block

language	html

<desy-status-item [id]="id + '-content'" [classes]='classes'
                  [role]="role"
                  [ariaLabel]="ariaLabel"
                  [ariaDescribedBy]="ariaDescribedBy"
                  [ariaLabelledBy]="ariaLabelledBy"
                  [ariaHidden]="ariaHidden"
                  [ariaDisabled]="ariaDisabled"
                  [ariaControls]="ariaControls"
                  [ariaCurrent]="ariaCurrent"
                  [ariaLive]="ariaLive"
                  [ariaExpanded]="ariaExpanded"
                  [ariaErrorMessage]="ariaErrorMessage"
                  [ariaHasPopup]="ariaHasPopup"
                  [tabindex]="tabindex">
    <desy-title [classes]="title.classes">
      <ng-container *appCustomInnerContent="{ html: title.html, text: title.text }"></ng-container>
    </desy-title>
    <desy-hint [classes]="hint.classes" [id]="hint.id"
               [role]="hint.role"
               [ariaLabel]="hint.ariaLabel"
               [ariaDescribedBy]="hint.ariaDescribedBy"
               [ariaLabelledBy]="hint.ariaLabelledBy"
               [ariaHidden]="hint.ariaHidden"
               [ariaDisabled]="hint.ariaDisabled"
               [ariaControls]="hint.ariaControls"
               [ariaCurrent]="hint.ariaCurrent"
               [ariaLive]="hint.ariaLive"
               [ariaExpanded]="hint.ariaExpanded"
               [ariaErrorMessage]="hint.ariaErrorMessage"
               [ariaHasPopup]="hint.ariaHasPopup"
               [tabindex]="hint.tabindex">
      <ng-container *appCustomInnerContent="{ html: hint.html, text: hint.text }"></ng-container>
    </desy-hint>
    <desy-error-message [visuallyHiddenText]="errorMessage.visuallyHiddenText"
                        [id]="(errorId ? errorId : id + '-error')" [classes]="errorMessage.classes"
                        [role]="errorMessage.role"
                        [ariaLabel]="errorMessage.ariaLabel"
                        [ariaDescribedBy]="(errorMessage.ariaDescribedBy ? errorMessage.ariaDescribedBy + '' + errorId : errorId)"
                        [ariaLabelledBy]="errorMessage.ariaLabelledBy"
                        [ariaHidden]="errorMessage.ariaHidden"
                        [ariaDisabled]="errorMessage.ariaDisabled"
                        [ariaControls]="errorMessage.ariaControls"
                        [ariaCurrent]="errorMessage.ariaCurrent"
                        [ariaLive]="errorMessage.ariaLive"
                        [ariaExpanded]="errorMessage.ariaExpanded"
                        [ariaErrorMessage]="errorMessage.ariaErrorMessage"
                        [ariaHasPopup]="errorMessage.ariaHasPopup"
                        [tabindex]="errorMessage.tabindex">
      <ng-container *appCustomInnerContent="{ html: errorMessage.html, text: errorMessage.text }"></ng-container>
    </desy-error-message>
    <desy-description-item *ngFor="let item of items" [id]="item.id" [classes]="item.classes">
      <desy-term [classes]="item.term.classes" [id]="item.term.id">
        <ng-container *appCustomInnerContent="{ html: item.term.html, text: item.term.text }"></ng-container>
      </desy-term>
      <desy-definition [classes]="item.definition.classes" [id]="item.definition.id">
        <ng-container *appCustomInnerContent="{ html: item.definition.html, text: item.definition.text }"></ng-container>
      </desy-definition>
    </desy-description-item>
    <desy-content>
      <button class="c-button c-button--transparent" data-module="c-button">Modificar</button>
    </desy-content>
    <desy-status [text]="status.text" [icon]="status.icon" [classes]="status.classes" [id]="status.id"
                 [role]="status.role"
                 [ariaLabel]="status.ariaLabel"
                 [ariaDescribedBy]="status.ariaDescribedBy"
                 [ariaLabelledBy]="status.ariaLabelledBy"
                 [ariaHidden]="status.ariaHidden"
                 [ariaDisabled]="status.ariaDisabled"
                 [ariaControls]="status.ariaControls"
                 [ariaCurrent]="status.ariaCurrent"
                 [ariaLive]="status.ariaLive"
                 [ariaExpanded]="status.ariaExpanded"
                 [ariaErrorMessage]="status.ariaErrorMessage"
                 [ariaHasPopup]="status.ariaHasPopup"
                 [tabindex]="status.tabindex"></desy-status>
</desy-status-item>

Tabs

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

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

Code Block

language	xml

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

Ejemplo con contenido

Code Block

language	html

<desy-tabs [idPrefix]="'tab-example'">
  <desy-tab-item [id]="'tab-example-a'">
    <desy-content>Tab 1</desy-content>
    <desy-panel [classes]="'bg-warning-light'">
      <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>
    </desy-panel>
  </desy-tab-item>
  <desy-tab-item [id]="'tab-example-b'" [disabled]="true">
    <desy-content>Tab 2</desy-content>
    <desy-panel>
      <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>
    </desy-panel>
  </desy-tab-item>
  <desy-tab-item [id]="'tab-example-c'">
    <desy-content>Tab 3</desy-content>
    <desy-panel [classes]="'bg-warning-light'">
      <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>
    </desy-panel>
  </desy-tab-item>
  <desy-tab-item [id]="'tab-example-d'">
    <desy-content>Tab 4</desy-content>
    <desy-panel>
      <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>
    </desy-panel>
  </desy-tab-item>
</desy-tabs>

...

Code Block

language	html

<desy-tooltip ...>...</desy-tooltip>

...

Expand

title	Ejemplos

Tooltip con atributos de entrada

Code Block

<ng-template #caller>
  <div class="w-48 p-2">
    <div class="border-4 border-dashed border-gray-200 rounded-lg h-40"></div>
  </div>
</ng-template>
<desy-tooltip [id]="'tooltip'" [classes]="'text-alert-base'" [text]="'Ejemplo'" [icon]="{'type':'alert'}" [caller]="caller"></desy-tooltip>

Tooltip con contenido

Code Block

<desy-tooltip [id]="'tooltip'" [complex]="true">
  <desy-content>Ejemplo</desy-content>
  <desy-icon>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-neutral-dark" role="img" aria-label="Ayuda"><path d="M140 15a15 15 0 00-15-15H15A15 15 0 000 15v110a15 15 0 0015 15h110a15 15 0 0015-15zM70 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z" fill="currentColor"/></svg>
  </desy-icon>
  <desy-tooltip-content>
    <p>El código CVV se encuentra situado en la tarjeta por detrás. <strong>¡Compruébalo!</strong></p>
  </desy-tooltip-content>
</desy-tooltip>

Accesibilidad

...

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

...

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.

...

Expand

title	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.

Expand

title	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.

...

Page Comparison

Versions Compared

Old Version 1

New Version 2

Key

Accordion

Implementación básica

Con heading y showControls

AccordionHistory

Implementación con items activos

Implementación con items deshabilitados

Alert

Componente

HTML

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

Componente

HTML

Componente

HTML

Componente

HTML

Componente

HTML

Componente

HTML

Componente

HTML

Componente

HTML

Media-object

Classes añadiendo reverse

Classes añadiendo padding y margin

Ejemplo con contenido

Pagination

PaginationItemData

Implementación por defecto

Implementación con selector

Spinner

Spinner simple

Status

Status con texto e icon de tipo success

Status con texto e icon con contenido

Status-item

Status-item con hint y status de tipo success

Status-item con contenido

Tabs

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

Ejemplo con contenido

Tooltip

Tooltip con atributos de entrada

Tooltip con contenido

Accesibilidad

AlertService

openAlert

closeAlert

onCloseAlert