Page Comparison

Table of Contents

minLevel	2
maxLevel	2

...

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

Accordion

...

Code Block

language	xml

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

...

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>

Alert

...

Code Block

language	xml

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

...

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

Expand

title	Ejemplos

Image Removed

Image Added

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>

Description-list

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

definition classes Extra Large

Code Block

language	xml

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

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>

Image RemovedImage Added

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	Ejemplos

Implementación básica

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

Image Removed

Image Added

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

HTML con campo utilizado en un formulario dirigido por plantilla

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	Ejemplos

Image Removed

Image Added

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>

...

Code Block

language	xml

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

...

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

Expand

title	Ejemplos

Image Removed

Image Added

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

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>

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 2

New Version Current

Key

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

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 padding y margin

Pagination

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

AlertService

openAlert

closeAlert

onCloseAlert