Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

Componentes relativos a vistas

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

 

Accordion

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

Genera una lista de desplegables.

 

 Propiedades de entrada

Propiedad

Tipo

Descripción

Obligatorio

items

AccordionItemData[]

Contiene la información relativa a la lista.

Si

heading

AccordionHeaderData

Contiene la información del header

 

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.

 Contenido

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.

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>

 

 Ejemplos
Implementación básica
<desy-accordion [items]="[{headerText: 'Accordion Item 1', text: 'Example'},{headerText: 'Accordion Item 2', text: 'Example'},{headerText: 'Accordion Item 2', text: 'Example'}]" [idPrefix]="'accordion'"></desy-accordion>

 

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

 

AccordionHistory

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

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

 

 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.

 

 Contenido

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

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.

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

 

 Propiedades de entrada/salida

Propiedad

Evento

Tipo

Descripción

Obligatorio

active

activeChange

boolean

Indica si el alert está activo. Se puede modificar internamente, por lo que se recomienda el uso de two-way binding.

 

 

 Propiedades de entrada

Propiedad

Tipo

Descripción

Obligatorio

id

string

Identificador.

Sí.

caller

TemplateRef <any>

Template para mostrar como contenido del elemento.

Sí, al crearse desde template.

classes

string

Clases CSS separadas por espacio que se aplicarán sobre el componente.

 

focusFirst

boolean

Permite focalizar sobre el primer elemento dentro del alert al abrirse

 

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

 Ejemplos
Componente
@Component({
  selector: '...',
  templateUrl: '...'
})
export class DemoAlertComponent {
  templateActive = true;
  ...
}
HTML
<ng-template #alertTemplateContent>
  <desy-notification id="alert-template" [title]="{'text':'El documento se ha cargado correctamente'}" type="success" [isDismissible]="true" (isOpenChange)="templateActive = $event"></desy-notification>
</ng-template>
<desy-alert id="alert-id" [caller]="alertTemplateContent" [active]="templateActive" [focusFirst]="true" classes="mt-5"></desy-alert>

 

Collapsible

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

Permite la creación de una sección plegable

 Propiedades de entrada

Propiedad

Tipo

Descripción

Obligatorio

id

string

Identificador.

text

string

Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html.

Si, cuando no se especifica html.

html

TemplateRef <any>

Template para mostrar al desplegar el elemento.

Si, cuando no se especifica text.

classes

string

Clases CSS separadas por espacio que se aplicarán sobre el componente.

headerText

string

Define un encabezado visible para el elemento. No se aplicará cuando se especifique la propiedad headerHtml.

Si, cuando no se especifica headerHtml.

headerHtml

string

Contenido del encabezado en formato HTML.

Si, cuando no se especifica headerText.

open

boolean

Variable que indica si se muestra u oculta el texto plegable.

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

 Ejemplos

 

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

 

Collapsible cerrado con entrada de texto

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

 

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

 Propiedades de entrada

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

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

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.

 

 Contenido

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.

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

 Propiedades de entrada

Propiedad

Tipo

Descripción

Obligatorio

id

string

Identificador del texto.

text

string

Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html.

Si, cuando no se especifica html.

html

string

Contenido del texto en formato HTML.

Si, cuando no se especifica text.

classes

string

Clases CSS separadas por espacio que se aplicarán sobre el componente.

summaryText

string

Define un encabezado visible para el elemento. No se aplicará cuando se especifique la propiedad summaryHtml.

Si, cuando no se especifica summaryHtml.

summaryHtml

string

Contenido del encabezado en formato HTML.

Si, cuando no se especifica summaryText.

summaryClasses

string

Clases CSS separadas por espacio que se aplicarán sobre el encabezado.

 

containerClasses

string

Clases CSS separadas por espacio que se aplicarán sobre el contenedor de los detalles.

 

open

boolean

Variable que indica si se muestra u oculta el contenido.

Contenido

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

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

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

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

 

Item

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

Permite introducir un item

 

 Propiedades de entrada

Propiedad

Tipo

Descripción

Obligatorio

id

string

Identificador del grupo.

 

title

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.

 

 Contenido

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

TitleComponent

<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

<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

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

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

ItemContentBottomComponent

<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

<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

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

 Ejemplos

Implementación con contenido

<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

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

 

Implementación con HTML

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

 

Implementación con descripción

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

 

Implementación con items

Componente
@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoItemComponent {
	titleHtml = 'Las entidades beneficiarias deberán tener su sede y actividad <strong class=\\" font-bold \\">principal en Aragón.</strong>';
}
HTML
<desy-item [title]="{'html' : titleHtml}" [items]="['Desde modelo', 'Obligatorio previo a resolución', 'Condicionado']"></desy-item>

 

Implementación con content

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

 

Implementación con arrastrable

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

 

Implementación con tipo documento

Componente
@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoItemComponent {
	titleHtml = 'Las entidades beneficiarias deberán tener su sede y actividad <strong class=\\" font-bold \\">principal en Aragón.</strong>';
}
HTML
<desy-item [title]="{'html' : titleHtml}" [icon]="{'type': 'document'}"></desy-item>

 

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

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

 

 

Media-object

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

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

 

 Propiedades de entrada

Propiedad

Tipo

Descripción

Obligatorio

id

string

Identificador

caller

TemplateRef <any>

Template para mostrar dentro el div con texto

figureHtml

string

Variable que contendrá la figura a mostrar

Si

classes

string

Clases CSS separadas por espacio que se aplicarán sobre el componente.

center

boolean

Determina la posición de los elementos

reverse

boolean

Determina la posición de los elementos

figureClasses

string

Clases que se aplicarán sobre el div contenedor del figureHtml

contenClasses

string

Clases que se aplicarán sobre el div contenedor del caller

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

 

 Contenido

ContentComponent

<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

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

Permite indicar la figura del objeto..

 Ejemplos

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

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

 

 

Ejemplo con contenido

 

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

 

Pagination

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

Permite visualizar paginas en listados e interactuar con ellas

 

 Propiedades de entrada

Propiedad

Tipo

Descripción

Obligatorio

id

string

Identificador

 

hasSelect

boolean

Si es ‘true’, el componente aparecerá con un desplegable para seleccionar las paginas

 

idPrefix

string

Prefijo para el identificador de los objetos de la lista items

Sí

classesContainer

string

Clases CSS separadas por espacio que se aplicarán sobre el contenedor <div> del componente.

 

totalItems

number

Número total de objetos

Sí

itemsPerPage

number

Número de objetos por página

Sí

hasPrevious

boolean

Si hasSelect es ‘true’, aparecera como activo un boton de ‘Anterior’

 

hasNext

boolean

Si hasSelect es ‘true’, aparecera como activo un boton de ‘Siguiente’

 

previousText

string

Texto para reemplazar el boton ‘Anterior’

 

nextText

string

Texto para reemplazar el boton ‘Siguiente’

 

items

PaginationItemData[]

Listado de objetos a mostrar

Sí

classes

string

Clases CSS separadas por espacio que se aplicarán sobre el contenedor <nav> del componente.

 

PaginationItemData

Propiedad

Tipo

Descripción

Obligatorio

href

string

Enlace al que dirige el objeto

Sí

active

boolean

Si es ‘true’, aparecera como activo

 

classes

string

Clases CSS separadas por espacio que se aplicarán sobre el objeto.

 

Propiedades de accesibilidad

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

 

 Ejemplos

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

 

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

 

 

Spinner

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

Permite representar un spinner durante procesos de carga.

 Propiedades de entrada

Propiedad

Tipo

Descripción

Obligatorio

id

string

Identificador del spinner

text

string

Texto que se interpretará por los lectores de pantalla

classes

string

Clases CSS separadas por espacio que se aplicarán sobre el componente.

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

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

 

Status

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

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

 Propiedades de entrada

Propiedad

Tipo

Descripción

Obligatorio

id

string

Identificador.

text

string

Contenido del texto en formato texto plano.

Si.

icon

StatusIconData

Contiene la información relativa al icono del componente.

Si.

classes

string

Clases CSS separadas por espacio que se aplicarán sobre el componente.

 

Objeto StatusIconData

Propiedad

Tipo

Descripción

Obligatorio

html

string

Contenido en formato HTML para insertar un icono personalizado.

 

type

string

Estados disponibles para reflejar en el icono:

  • success

  • alert

  • loading

  • error

No se aplicará cuando se especifique la propiedad html.

 

 
Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

 Ejemplos
Status con texto e icon de tipo success
<desy-status text='completo' [icon]="{'type':'success'}"></desy-status>

 

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

 

 

Status con texto, classes e icon de tipo alert

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

 

Status-item

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

Permite introducir un item con status

 

 Propiedades de entrada

Propiedad

Tipo

Descripción

Obligatorio

id

string

Identificador.

Sí

title

StatusItemTitleData

Objeto con la información del titulo.

 

hint

HintData

Objeto con la información del Hint.

 

errorMessage

ErrorMessageData

Objeto con la información del ErrorMessage.

 

errorId

string

ID personalizado para agregar al atributo `aria-errormessage`

 

describedBy

string

Uno o más Id para agregar al atributo ‘aria-describedby’

 

items

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.

 Contenido

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

TitleComponent

<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

<desy-hint>...</desy-hint>

Permite indicar un texto de ayuda en el componente

Este componente se encuentra en el módulo DesyFormsModule.

ErrorMessageComponent

<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

<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

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

Permite indicar el termino en el componente

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

DefinitionComponent

<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

<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

<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

 Ejemplos
Status-item con hint y status de tipo success
<ng-template #caller3>
    <button class="c-button c-button--transparent" data-module="c-button">Modificar</button>
</ng-template>

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

 

Status-item con errorMessage y status

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

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

Status-item con items y status

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

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

 

Status-item con contenido
<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

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

Permite introducir pestañas para organizar el contenido

 Propiedades de entrada

Propiedad

Tipo

Descripción

Obligatorio

id

string

Identificador.

idPrefix

string

Identificador que se utiliza cuando no hay un id definido

 

title

string

Contiene información del titulo.

Si.

tabListArialabel

string

Es el aria-label para el elemento con role=tablist

Si.

items

TabsItemsData[]

Contiene la información relativa a la lista.

Si.

classes

string

Clases CSS separadas por espacio que se aplicarán sobre el la etiqueta <div> del contenedor del componente

 

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.

 

 

Objeto TabsItemsData

Propiedad

Tipo

Descripción

Obligatorio

id

string

Identificador del elemento de la lista.

Si

text

string

Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html.

Si, cuando no se especifica html.

html

string

Contenido del texto en formato HTML.

Si, cuando no se especifica text.

disabled

boolean

Si es true el nav item se deshabilita.

 

panel

TabsPanelData

Contiene la definición del objeto panel

Si

 

Objeto TabsPanelData

Propiedad

Tipo

Descripción

Obligatorio

text

string

Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html.

Si, cuando no se especifica html.

html

TemplateRef<any>

Template para mostrar el contenido del texto en formato HTML.

Si, cuando no se especifica text.

classes

string

Clases CSS separadas por espacio que se aplicarán sobre el componente.

 

 

El componente admite los siguientes parámetros de accesibilidad.

 Contenido

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

TabItemComponent

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

Permite indicar un item, junto con el componente y el panel.

ContentComponent

<desy-content>...</desy-content>

Permite indicar un contenido en el componente.

PanelComponent

<desy-panel>...</desy-panel>

Permite indicar un mensaje de contenido en el panel del componente.

 Ejemplos
Tabs con idPrefix, tabListAriaLabel, title, disabeld, item.panel.classes e item.panel.html como template.
<ng-template #html1>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
</ng-template>
<ng-template #html2>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
</ng-template>
<ng-template #html3>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
</ng-template>
<ng-template #html4>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
</ng-template>

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

 

Ejemplo con contenido

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

 

Tooltip

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

Permite mostrar información ampliada colocando el ratón encima de un elemento

 Parámetros de entrada

Propiedad

Tipo

Descripción

Obligatorio

id

string

Identificador.

Sí

complex

boolean

Parámetro para el contenido de la información sobre herramientas tenga textos largos o contenido mixto.

 

classes

string

Clases CSS separadas por espacio que se aplicarán sobre el componente.

 

classesTooltip

string

Clases CSS separadas por espacio que se aplicarán sobre el componente.

 

html

string

HTML a mostrar en el contenido

 

text

string

Texto para mostrar en el contenido

 

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:

  • info

  • alert

Si se especifica el objeto pero no el html ni un type entre los admitidos, se mostrará por defecto el icono de ayuda.

 

caller

TemplateRef <any>

Template para mostrar dentro del tooltip

 

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

 Contenido

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

ContentComponent

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

IconComponent

<desy-icon ...>...</desy-icon>

Permite añadir un icono tras el contenido principal. Si no se especifica un icono personalizado como contenido se mostrará un icono de ayuda. Admite el parámetro de entrada type, de forma que, al igual que especificando el icono con el objeto IconData, se sustituya el icono por defecto por un icono de información (valor ‘info’) o de advertencia (valor ‘alert’).

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

ContentTooltipComponent

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

Permite indicar la información extendida que se mostrará al posar el cursor sobre el componente..

 Ejemplos
Tooltip con atributos de entrada
<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
<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.

Parámetro

Atributo de accesibilidad equivalente

role

role

ariaLabel

aria-label

ariaDescribedBy

aria-describedby

ariaLabelledBy

aria-labelledby

ariaHidden

aria-hidden

ariaDisabled

aria-disabled

ariaControls

aria-controls

ariaCurrent

aria-current

ariaLive

aria-live

ariaExpanded

aria-expanded

ariaErrorMessage

aria-errormessage

ariaHasPopup

aria-haspopup

ariaModal

aria-modal

tabindex

tabindex


Servicios relativos a vistas

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

 

AlertService

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

Contiene los siguientes métodos:

openAlert

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

 Parámetros

Propiedad

Tipo

Descripción

Obligatorio

caller

TemplateRef<any>

Template del elemento a mostrar dentro del alert.

Sí

NotificationOptions

Especificando esta opción se generará automáticamente un componente NotificationComponent dentro del alert, utilizando los datos de este objeto como parámetros de entrada del componente.

alertOptions

AlertOptions

Datos de entrada del componente AlertComponent.

Sí.

 

AlertOptions

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

Propiedad

Tipo

Descripción

Obligatorio

place

ViewContainerRef

Contenedor donde se creará el alert.

Sí.

 Respuesta

El servicio devuelve un objeto Promise<OpenAlertResult>

OpenDialogResult

Propiedad

Tipo

Descripción

component

ComponentRef<any>

Si el parámetro caller utilizado es de tipo NotificationOptions, referencia al componente interno creado.

alert

ComponentRef<AlertComponent>

Referencia al componente diálogo creado.

 

closeAlert

Permite cerrar un alert.

 Parámetros

Propiedad

Tipo

Descripción

Obligatorio

alert

AlertComponent

ComponentRef<AlertComponent>

Alert a cerrar.

Sí

onCloseAlert

Permite gestionar el evento de cierre de un alert.

 Parámetros

Propiedad

Tipo

Descripción

Obligatorio

alert

AlertComponent

ComponentRef<DialogComponent>

Alert a gestionar.

Sí

 Respuesta

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

 

 Ejemplos de uso del servicio con mismo resultado

Resultado

 

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

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

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

 

Ejemplo utilizando caller de tipo TemplateRef (template personalizada)

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

    @ViewChild('alertPlace', {read: ViewContainerRef}) alertPlace: ViewContainerRef;
    @ViewChild('notificationRef') notificationRef: TemplateRef<any>;
    
	constructor(private dialogService: DialogService, private viewContainerRef: ViewContainerRef) { }
	
	ngOnInit(): void {
		this.openAlert(1);
		this.openAlert(2);
		this.openAlert(3);
	}
	
    openAlert(docNumber: number): void {
    
      const alertOptions: AlertOptions = {
        id: 'alert',
        place: this.alertPlace,
        role: 'alert',
        ariaLive: 'assertLive'
      };
      
      this.alertService.openAlert(this.notificationRef, alertOptions).then(result => {
        // En callerContext puedes incluir los parámetros que necesites utilizar dentro de la template
        result.alert.instance.callerContext = {
          alertRef: result.alert,
          docNumber: number
        };
      });
    }
    
    closeAlert(alertRef: ComponentRef<AlertComponent>): void {
      this.alertService.closeAlert(alertRef);
    }
	...
}
HTML
...
<ng-template #notificationRef let-alertRef="alertRef" let-docNumber="docNumber">
  <desy-notification id="alert-service-and-template" [title]="{'text': 'El documento ' + docNumber + ' se ha cargado correctamente'}" type="success" [isDismissible]="true" (isOpenChange)="closeAlert(alertRef)"></desy-notification>
</ng-template>
<ng-template #alertPlace></ng-template>
...

 

 

  • No labels