desy-angular v5.3 - Manual de integración DesyViewsModule
- 1 Componentes relativos a vistas
- 1.1 Accordion
- 1.1.1 Implementación básica
- 1.1.2 Con heading y showControls
- 1.2 AccordionHistory
- 1.3 Alert
- 1.3.1 Componente
- 1.3.2 HTML
- 1.4 Collapsible
- 1.5 Description-list
- 1.6 Details
- 1.7 Item
- 1.7.1 Componente
- 1.7.2 HTML
- 1.7.3 Componente
- 1.7.4 HTML
- 1.7.5 Componente
- 1.7.6 HTML
- 1.7.7 Componente
- 1.7.8 HTML
- 1.7.9 Componente
- 1.7.10 HTML
- 1.7.11 Componente
- 1.7.12 HTML
- 1.7.13 Componente
- 1.7.14 HTML
- 1.8 Media-object
- 1.9 Pagination
- 1.9.1 PaginationItemData
- 1.9.1.1 Implementación por defecto
- 1.9.1.2 Implementación con selector
- 1.9.1 PaginationItemData
- 1.10 Spinner
- 1.10.1 Spinner simple
- 1.11 Status
- 1.12 Status-item
- 1.13 Tabs
- 1.14 Tooltip
- 1.14.1 Tooltip con atributos de entrada
- 1.14.2 Tooltip con contenido
- 1.15 Accesibilidad
- 1.1 Accordion
- 2 Servicios relativos a vistas
- 2.1 AlertService
- 2.1.1 openAlert
- 2.1.2 closeAlert
- 2.1.3 onCloseAlert
- 2.1.3.1 Componente
- 2.1.3.2 HTML
- 2.1.3.3 Componente
- 2.1.3.4 HTML
- 2.1 AlertService
Componentes relativos a vistas
Vamos a ver como se usa cada uno de los componentes.
Accordion
<desy-accordion ...></desy-accordion>
Genera una lista de desplegables.
Propiedad | Tipo | Descripción | Obligatorio |
---|
Propiedad | Tipo | Descripción | Obligatorio |
---|---|---|---|
items | AccordionItemData[] | Contiene la información relativa a la lista. | Si |
heading | AccordionHeaderData | Contiene la información del header |
|
headingLevel | number | Indica el nivel del encabezado principal: 1=h1, 2=h2, etc. Los encabezados internos serán del nivel inmediatamente inferior. Por defecto equivale a 2. |
|
allowToggle | boolean | Permite cerrar cada elemento de forma individual |
|
allowMultiple | boolean | Permite mantener desplegado los diferentes elementos individualmente |
|
showControl | boolean | Permite mostrar un botón para Mostrar/ocultar todos los elementos del accordion |
|
id-prefix | string | Prefijo de los identificadores del listado de it | Si |
classes | string | Clases CSS separadas por espacio que se aplicarán sobre el container del accordion |
|
Objeto AccordionItemData
Propiedad | Tipo | Descripción | Obligatorio |
---|
Propiedad | Tipo | Descripción | Obligatorio |
---|---|---|---|
headerText | string | Texto de la cabecera del elemento. No se aplicará cuando se especifique la propiedad headerHtml. | Si, cuando no se especifica headerHtml. |
headerHtml | string | Html de la cabecera del elemento. | Si, cuando no se especifica headerText. |
text | string | Texto del panel del item. Oculto por defecto. No se aplicará cuando se especifique la propiedad html. | Si, cuando no se especifica html. |
html | string | Html del panel del item. Oculto por defecto. | Si, cuando no se especifica text. |
open | boolean | Variable que marca si debe estar expandido el item |
|
id | string | Identificador del elemento de la lista. |
|
classes | string | Clases CSS separadas por espacio que se aplicarán sobre el elemento de la lista. |
|
Objeto AccordionHeaderData
Propiedad | Tipo | Descripción | Obligatorio |
---|
Propiedad | Tipo | Descripción | Obligatorio |
---|---|---|---|
text | string | Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html. | Si, cuando no se especifica html. |
html | string | Contenido del texto en formato HTML. | Si, cuando no se especifica text. |
classes | string | Clases CSS separadas por espacio que se aplicarán sobre el componente. |
|
Propiedades de accesibilidad
El componente, cada AccordionItemData y AccordionHeaderData admiten los siguientes parámetros de accesibilidad.
Se permite proyectar contenido dentro del Accordion para facilitar su uso. Para ello se facilitan los siguientes sub-componentes:
AccordionHeaderComponent
<desy-accordion-header ...>...</desy-accordion-header>
Permite especificar la cabecera.
Admite los mismos parámetros de entrada que el objeto AccordionHeaderData.
AccordionItemComponent
<desy-accordion-item ...>...</desy-accordion-item>
Permite especificar un item del listado.
Admite los mismos parámetros de entrada que el objeto AccordionItemData. El parámetro open admite double-binding.
Cada item está compuesto por una cabecera y un contenido, que se podrán representar mediante los componentes AccordionHeaderComponent y ContentComponent, respectivamente. El componente ContentComponent es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.
Implementación básica
<desy-accordion [items]="[{headerText: 'Accordion Item 1', text: 'Example'},{headerText: 'Accordion Item 2', text: 'Example'},{headerText: 'Accordion Item 2', text: 'Example'}]" [idPrefix]="'accordion'"></desy-accordion>
Con heading y showControls
<desy-accordion [heading]="{text: 'Accordion example'}" [showControl]="true" [items]="[{headerText: 'Accordion Item 1', text: 'Example'},{headerText: 'Accordion Item 2', text: 'Example'},{headerText: 'Accordion Item 2', text: 'Example'}]" [idPrefix]="'accordion'"></desy-accordion>
AccordionHistory
<desy-accordion-history ...></desy-accordion-history>
Genera una lista de desplegables que, además, tienen un estado temporal.
El componente AccordionHistory tiene los mismos parámetros de entrada que el componente Accordion.
Propiedades de accesibilidad
El componente, cada AccordionItemData y AccordionHeaderData admiten los siguientes parámetros de accesibilidad.
Se permite proyectar contenido dentro del AccordionHistory para facilitar su uso. Para ello se facilitan los siguientes sub-componentes:
AccordionHeaderComponent
<desy-accordion-header ...>...</desy-accordion-header>
Permite especificar la cabecera.
Admite los mismos parámetros de entrada que el objeto AccordionHeaderData.
AccordionHistoryItemComponent
<desy-accordion-history-item ...>...</desy-accordion-history-item>
Permite especificar un item del listado.
Admite los mismos parámetros de entrada que el componente AccordionItemComponent. Además, admite los siguientes parámetros adicionales:
Propiedad | Tipo | Descripción |
---|
Propiedad | Tipo | Descripción |
---|---|---|
status | string | Permite reflejar el estado temporal del item. Los posibles valores son:
|
disabled | boolean | Permite indicar que el item está deshabilitado. |
Cada item está compuesto por una cabecera y un contenido, que se podrán representar mediante los componentes AccordionHeaderComponent y ContentComponent, respectivamente. El componente ContentComponent es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.
Además, se puede modificar el botón de Mostrar/Ocultar incluyendo los componentes AccordionHistoryItemShowButtonComponent y AccordionHistoryItemHideButtonComponent respectivamente, que únicamente admiten como contenido el HTML a mostrar.
Implementación con items activos
<desy-accordion-history [id]="'id-e1'" [idPrefix]="'e1'" [showControl]="false" [allowMultiple]="true" [allowToggle]="false">
<desy-accordion-header>Ejemplo 1</desy-accordion-header>
<desy-accordion-history-item>
<desy-accordion-header>Item 1</desy-accordion-header>
<desy-content>Ejemplo item 1.</desy-content>
</desy-accordion-history-item>
<desy-accordion-history-item>
<desy-accordion-header>Item 2</desy-accordion-header>
<desy-content>Ejemplo item 2.</desy-content>
</desy-accordion-history-item>
<desy-accordion-history-item [status]="'current'" [open]="true">
<desy-accordion-header>Item 3</desy-accordion-header>
<desy-content>Ejemplo item 3.</desy-content>
</desy-accordion-history-item>
<desy-accordion-history-item [status]="'pending'">
<desy-accordion-header>Item 4</desy-accordion-header>
<desy-content>Ejemplo item 4 - pending.</desy-content>
</desy-accordion-history-item>
</desy-accordion-history>
Implementación con items deshabilitados
<desy-accordion-history [id]="'id-e1'" [idPrefix]="'e1'" [showControl]="false" [allowMultiple]="true" [allowToggle]="false">
<desy-accordion-header>Ejemplo 2</desy-accordion-header>
<desy-accordion-history-item [status]="'muted'" [disabled]="true">
<desy-accordion-header>Item 1</desy-accordion-header>
<desy-content>Ejemplo item 1.</desy-content>
</desy-accordion-history-item>
<desy-accordion-history-item [status]="'muted'" [disabled]="true" [open]="true">
<desy-accordion-header>Item 2</desy-accordion-header>
<desy-content>Ejemplo item 2 - deshabilitado y abierto</desy-content>
</desy-accordion-history-item>
<desy-accordion-history-item [status]="'currentmuted'" [disabled]="true">
<desy-accordion-header>Item 3</desy-accordion-header>
<desy-content>Ejemplo item 3.</desy-content>
</desy-accordion-history-item>
<desy-accordion-history-item [status]="'pending'" [disabled]="true">
<desy-accordion-header>Item 4</desy-accordion-header>
<desy-content>Ejemplo item 4 - pending.</desy-content>
</desy-accordion-history-item>
</desy-accordion-history>
Alert
<desy-alert ...></desy-alert>
Permite abrir una notificación. Se recomienda su creación dinámica desde el servicio AlertService.
Propiedad | Evento | Tipo | Descripción | Obligatorio |
---|
Propiedad | Evento | Tipo | Descripción | Obligatorio |
---|---|---|---|---|
active | activeChange | boolean | Indica si el alert está activo. Se puede modificar internamente, por lo que se recomienda el uso de two-way binding. |
|
Propiedad | Tipo | Descripción | Obligatorio |
---|
Propiedad | Tipo | Descripción | Obligatorio |
---|---|---|---|
id | string | Identificador. | Sí. |
caller | TemplateRef <any> | Template para mostrar como contenido del elemento. | Sí, al crearse desde template. |
classes | string | Clases CSS separadas por espacio que se aplicarán sobre el componente. |
|
focusFirst | boolean | Permite focalizar sobre el primer elemento dentro del alert al abrirse |
|
Propiedades de accesibilidad
El componente admite los siguientes parámetros de accesibilidad.
Componente
@Component({
selector: '...',
templateUrl: '...'
})
export class DemoAlertComponent {
templateActive = true;
...
}
HTML
<ng-template #alertTemplateContent>
<desy-notification id="alert-template" [title]="{'text':'El documento se ha cargado correctamente'}" type="success" [isDismissible]="true" (isOpenChange)="templateActive = $event"></desy-notification>
</ng-template>
<desy-alert id="alert-id" [caller]="alertTemplateContent" [active]="templateActive" [focusFirst]="true" classes="mt-5"></desy-alert>
Collapsible
<desy-collapsible ...></desy-collapsible>
Permite la creación de una sección plegable
Propiedad | Tipo | Descripción | Obligatorio |
---|
Propiedad | Tipo | Descripción | Obligatorio |
---|---|---|---|
id | string | Identificador. |
|
text | string | Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html. | Si, cuando no se especifica html. |
html | TemplateRef <any> | Template para mostrar al desplegar el elemento. | Si, cuando no se especifica text. |
classes | string | Clases CSS separadas por espacio que se aplicarán sobre el componente. |
|
headerText | string | Define un encabezado visible para el elemento. No se aplicará cuando se especifique la propiedad headerHtml. | Si, cuando no se especifica headerHtml. |
headerHtml | string | Contenido del encabezado en formato HTML. | Si, cuando no se especifica headerText. |
open | boolean | Variable que indica si se muestra u oculta el texto plegable. |
|
Propiedades de accesibilidad
El componente admite los siguientes parámetros de accesibilidad.
Collapsible abierto con entrada de texto
<desy-collapsible id="help-with-nationality" headerText="Help with nationality" text="We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post." open=true></desy-collapsible>
Collapsible cerrado con entrada de texto
<desy-collapsible id="help-with-nationality" headerText="Help with nationality" text="We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post."></desy-collapsible>
Collapsible cerrado con contenido
<desy-collapsible id="help-with-nationality" text="We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.">Esto es un collapsibe <strong>con HTML</desy-collapsible>
Description-list
<desy-description-list ...></desy-description-list>
Genera una lista de descripción (<dl>). El elemento incluye una lista de grupos de términos (especificados mediante el elemento <dt>) y descripciones (proporcionadas por elementos <dd>)
Propiedad | Tipo | Descripción | Obligatorio |
---|
Propiedad | Tipo | Descripción | Obligatorio |
---|---|---|---|
items | DescriptionItemData[] | Contiene la lista de descripciones, compuestas por un término y una definición. | Si |
id | string | Identificador del elemento <dl> |
|
classes | string | Clases CSS separadas por espacio que se aplicarán sobre el elemento <dl> |
|
Objeto DescriptionItemData
Propiedad | Tipo | Descripción | Obligatorio |
---|
Propiedad | Tipo | Descripción | Obligatorio |
---|---|---|---|
id | string | Identificador del elemento de la lista. |
|
classes | string | Clases CSS separadas por espacio que se aplicarán sobre el elemento de la lista. |
|
term | TermDefinitionData | Permite especificar el término. | Si |
definition | TermDefinitionData | Permite especificar la definición. | Si |
Objeto TermDefinitionData
Propiedad | Tipo | Descripción | Obligatorio |
---|
Propiedad | Tipo | Descripción | Obligatorio |
---|---|---|---|
id | string | Identificador |
|
text | string | Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html. | Si, cuando no se especifica html. |
html | string | Contenido del texto en formato HTML. | Si, cuando no se especifica text. |
classes | string | Clases CSS separadas por espacio que se aplicarán sobre el componente. |
|
Propiedades de accesibilidad
El componente, cada DescriptionItemData, el term y definition admiten los siguientes parámetros de accesibilidad.
Se permite proyectar contenido dentro del DescriptionList para facilitar su uso. Para ello se facilitan los siguientes sub-componentes:
DescriptionItemComponent
<desy-description-item ...>...</desy-description-item>
Permite especificar un item de la lista de descripciones. Engloba un término y una definición.
Admite los mismos parámetros de entrada que el objeto DescriptionItemData.
TermComponent
<desy-term ...>...</desy-term>
Permite especificar el término dentro de un desy-description-item.
Admite los mismos parámetros de entrada que el objeto TermDefinitionData.
DefinitionComponent
<desy-definition ...>...</desy-definition>
Permite especificar la definición dentro de un desy-description-item.
Admite los mismos parámetros de entrada que el objeto TermDefinitionData.
Ejemplo con items por contenido
<desy-description-list [id]="'id'">
<desy-description-item>
<desy-term>term</desy-term>
<desy-definition [classes]="'font-bold text-xl'">definition</desy-definition>
</desy-description-item>
</desy-description-list>
Ejemplo con items como parámetros
<desy-description-list [id]="'id'" [items]="[{'term':{'text':'term'},'definition':{'text':'definition','classes':'font-bold text-xl'}}]"></desy-description-list>
Ejemplo con atributos
<desy-description-list [id]="'description'" [items]="[{'term':{'text':'term','id':'term'},'definition':{'text':'definition','id':'definition'},'id':'item'}]"></desy-description-list>
Details
<desy-details ...> Detalles </desy-destails>
Permite ver detalles adicionales que el usuario puede abrir y cerrar.
Propiedad | Tipo | Descripción | Obligatorio |
---|
Propiedad | Tipo | Descripción | Obligatorio |
---|---|---|---|
id | string | Identificador del texto. |
|
text | string | Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html. | Si, cuando no se especifica html. |
html | string | Contenido del texto en formato HTML. | Si, cuando no se especifica text. |
classes | string | Clases CSS separadas por espacio que se aplicarán sobre el componente. |
|
summaryText | string | Define un encabezado visible para el elemento. No se aplicará cuando se especifique la propiedad summaryHtml. | Si, cuando no se especifica summaryHtml. |
summaryHtml | string | Contenido del encabezado en formato HTML. | Si, cuando no se especifica summaryText. |
summaryClasses | string | Clases CSS separadas por espacio que se aplicarán sobre el encabezado. |
|
containerClasses | string | Clases CSS separadas por espacio que se aplicarán sobre el contenedor de los detalles. |
|
open | boolean | Variable que indica si se muestra u oculta el contenido. |
|
Contenido
Los detalles que se desean mostrar u ocultar se especificarán como contenido del componente.
Propiedades de accesibilidad
El componente admite los siguientes parámetros de accesibilidad.
Details cerrado con entra de texto
<desy-details summaryText="Help with nationality">We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</desy-details>
Details abierto con entrada de texto
<desy-details [open]="true" summaryText="Help with nationality">We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</desy-details>
Item
<desy-item ...></desy-item>
Permite introducir un item
Propiedad | Tipo | Descripción | Obligatorio |
---|
Propiedad | Tipo | Descripción | Obligatorio |
---|---|---|---|
id | string | Identificador del grupo. |
|
title | TitleData | Objeto con la información del titulo. | Sí |
description | DescriptionData | Objeto con la información de la descripción |
|
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. |
|
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:
|
|
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.
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.
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>