Page Comparison

Table of Contents

minLevel	2
maxLevel	2

...

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

Button

...

Code Block

language	xml

<desy-button ...></desy-button>

...

Expand

title	Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del botón.
text	string	Contenido del texto de ayuda en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Si para elementos a y button y cuando no se especifica html.
html	string	Contenido del texto en formato HTML. Nota: no aplica al elemento input.	Si para elementos a y button y cuando no se especifica text.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.
element	string	Elemento HTML que se utilizará para representar el botón. Los valores posibles son: a (por defecto, si se incluye un href) button (por defecto) input
name	string	Nombre o atributo name del elemento que representa el botón. Nota: sólo para los elementos button e input.
value	any	Valor del botón a enviar como parte del formulario. Nota: sólo para el elemento button
type	string	Tipo del botón. Los valores posibles son: submit (por defecto) button reset Nota: sólo para los elementos button e input.
disabled	boolean	Indica si el botón está deshabilitado.
preventDoubleClick	boolean	Evita un doble click. Nota: sólo para los elementos button e input.
href	string	Ruta externa a la que se redirigirá al pulsar el botón. No se aplicará cuando se especifique la propiedad routerLink. Por defecto #. Nota: sólo para el elemento a.
target	string	Pestaña en la que se abrirá el enlace. Nota: sólo para el elemento a con href.
routerLink	string\|string[]	Ruta interna relativa al proyecto (ver https://angular.io/api/router/RouterLink).
routerLinkActiveClasses	string\|string[]	Clases que se añadirán al componente cuando la ruta especificada en routerLink sea la actual (ver https://angular.io/api/router/RouterLinkActive).

Propiedades de accesibilidad

El componente button admite los siguientes parámetros de accesibilidad.

Expand

title	Eventos de salida

Evento	Tipo	Descripción
clickEvent	DOM Event	Se emite al pulsar sobre el botón.

Expand

title	Ejemplos

Image Removed

Image Added

Button con entrada de texto

Code Block

language	xml

<desy-button id="send" text="Enviar" ariaLabel="Prueba del componente button"></desy-button>

Image Removed

Image Added

Button con contenido

Code Block

language	xml

<desy-button id="send" ariaLabel="Prueba del componente button">Button with <strong>&nbsp;HTML</strong></desy-button>

Image RemovedImage Added

Button con entrada de html y recogiendo el evento de salida

Code Block

language	xml

<desy-button id="delete" classes="c-button-loader--alert" (clickEvent)="handleClickEvent($event)" html="Botón con icono<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path fill=\"currentColor\" stroke=\"none\" d=\"M14.621 7.928a.643.643 0 00-.478-.214H3.857a.643.643 0 00-.643.711l.965 9A.643.643 0 004.82 18h8.358a.643.643 0 00.642-.575l.965-9a.643.643 0 00-.165-.497zM16.071 3.59h-3.214a.321.321 0 01-.321-.322V2.25A2.253 2.253 0 0010.286 0H7.714a2.26 2.26 0 00-2.25 2.215L5.45 3.272a.323.323 0 01-.322.318H1.93a1.286 1.286 0 000 2.571H16.07a1.286 1.286 0 000-2.571zM7.393 2.245a.323.323 0 01.321-.316h2.572a.321.321 0 01.321.321v1.018a.321.321 0 01-.321.322H7.699a.323.323 0 01-.322-.327z\"/>
"></desy-button>

Code Block

language	typescript

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoButtonComponent {
	...
	handleClickEvent(event: any): void {
	   ...
	}
	...
}

Button Loader

...

Code Block

language	xml

<desy-button-loader ...></desy-button-loader>

...

Expand

title	Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del botón.
text	string	Contenido del texto de ayuda en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Si para elementos a y button y cuando no se especifica html.
html	string	Contenido del texto en formato HTML.	Si para elementos a y button y cuando no se especifica text.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.
element	string	Elemento HTML que se utilizará para representar el botón. Los valores posibles son: a (por defecto, si se incluye un href) button (por defecto) input
state	string	Estado del componente. Los valores posibles son: is-loading → Representa el estado "cargando". Muestra el spinner de carga. Deberá añadirse la clase "c-button-loader--is-loading" al parámetro classes. is-success → Representa el estado "éxito". Muestra el icono ✓. Deberá añadirse la clase "c-button-loader--is-success" al parámetro classes. Por defecto, o si no se especifica el valor, se muestra el contenido de los parámetros text o html.
successText	string	Texto que se interpretará por los lectores de pantalla cuando se llegue al estado de "éxito".
loaderText	string	Texto que se interpretará por los lectores de pantalla mientras está en el estado de "cargando".
loaderClasses	string	Clases que se aplican sobre spinner.
name	string	Nombre o atributo name del elemento que representa el botón. Nota: sólo para los elementos button e input.
value	any	Valor del botón a enviar como parte del formulario. Nota: sólo para el elemento button.
type	string	Tipo del botón. Los valores posibles son: submit (por defecto) button reset Nota: sólo para los elementos button e input.
disabled	boolean	Indica si el botón está deshabilitado.
preventDoubleClick	boolean	Evita un doble click. Nota: sólo para los elementos button e input.
href	string	Ruta externa a la que se redirigirá al pulsar el botón. Nota: sólo para el elemento a.
target	string	Pestaña en la que se abrirá el enlace. Nota: sólo para el elemento a con href.
routerLink	string\|string[]	Ruta interna relativa al proyecto (ver https://angular.io/api/router/RouterLink).
routerLinkActiveClasses	string\|string[]	Clases que se añadirán al componente cuando la ruta especificada en routerLink sea la actual (ver https://angular.io/api/router/RouterLinkActive).

Propiedades de accesibilidad
El componente button-loader admite los siguientes parámetros de accesibilidad.

Expand

title	Eventos de salida

Evento	Tipo	Descripción
clickEvent	DOM Event	Se emite al pulsar sobre el botón.

Expand

title	Ejemplos

Image Removed

Image Added

Button-loader con entrada de texto

Code Block

language	xml

<desy-button-loader id="send" (clickEvent)="handleClickEvent($event)"  text="Enviar" ariaLabel="Prueba del componente button"></desy-button-loader>

Code Block
@Component({ selector: '...', templateUrl: '...', ... }) export class DemoButtonComponent { ... handleClickEvent(event: any): void { ... } ... }

Button-loader con contenido

Code Block

language	xml

<desy-button-loader id="send" (clickEvent)="handleClickEvent($event)"  ariaLabel="Prueba del componente button">Button-loader <strong>&nbsp;with HTML</strong></desy-button-loader>

Code Block

language	xml

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoButtonComponent {
	...
	handleClickEvent(event: any): void {
	   ...
	}
	...
}

Image Removed

Image Added

Button-loader con entrada de html y recogiendo el evento de salida

Code Block

language	xml

<desy-button-loader id="delete" classes="c-button-loader--alert" html="Botón con icono<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path fill=\"currentColor\" stroke=\"none\" d=\"M14.621 7.928a.643.643 0 00-.478-.214H3.857a.643.643 0 00-.643.711l.965 9A.643.643 0 004.82 18h8.358a.643.643 0 00.642-.575l.965-9a.643.643 0 00-.165-.497zM16.071 3.59h-3.214a.321.321 0 01-.321-.322V2.25A2.253 2.253 0 0010.286 0H7.714a2.26 2.26 0 00-2.25 2.215L5.45 3.272a.323.323 0 01-.322.318H1.93a1.286 1.286 0 000 2.571H16.07a1.286 1.286 0 000-2.571zM7.393 2.245a.323.323 0 01.321-.316h2.572a.321.321 0 01.321.321v1.018a.321.321 0 01-.321.322H7.699a.323.323 0 01-.322-.327z\"/>
"></desy-button-loader>

Image Removed

Image Added

Button-loader cargando

Code Block

language	xml

<desy-button-loader text="Comenzar" state="is-loading" classes="c-button-loader--is-loading" loaderText="Ejecutando proceso"></desy-button-loader>

Image Removed

Image Added

Button-loader exito

Code Block

language	xml

<desy-button-loader text="Comenzar" state="is-success" classes="c-button-loader--is-succes" successText="Proceso ejecutado correctamente"></desy-button-loader>

...

Code Block

language	xml

<desy-dropdown ...></desy-dropdown>

Permite generar un desplegable

...

Expand

title	Propiedades de entrada

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.
hiddenText	string	Contenido del texto oculto en formato texto plano
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 tooltip.
classesContainer	string	Clases CSS separadas por espacio que se aplicarán sobre el container del componente.
disabled	boolean	Deshabilita el boton
caller	TemplateRef <any>	Template para mostrar dentro del tooltip

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

Expand

title	Eventos de salida

Evento	Tipo	Descripción
clickEvent	DOM Event	Se emite al pulsar sobre el botón.

Expand

title	Ejemplos

Dropdown base

Code Block

language	xml

<desy-dropdown text="Desplegable" [caller]="caller"></desy-dropdown>
<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>

...

Image Added

Dropdown con menu

Code Block

language	html

<ng-template #caller1>
      <ul>
        <li>
          <a href="" class="flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">Link 1</a>
        </li>
        <li>
          <a href="" class="flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">Link 2</a>
        </li>
        <li>
          <a href="" class="flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">Link 3</a>
        </li>
      </ul>
    </ng-template>
<desy-dropdown text="Desplegable" [caller]="caller1"></desy-dropdown>

...

Image Added

Dropdown con menu y contenido

Code Block

language	html

<ng-template #caller1>
      <ul>
        <li>
          <a href="" class="flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">Link 1</a>
        </li>
        <li>
          <a href="" class="flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">Link 2</a>
        </li>
        <li>
          <a href="" class="flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">Link 3</a>
        </li>
      </ul>
    </ng-template>
<desy-dropdown [caller]="caller1">Desplegable <strong>&nbsp;con HTML</strong><svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></desy-dropdown>

Image Modified

Listbox

...

Code Block

language	xml

<desy-listbox ...></desy-listbox>

...

Expand

title	Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del listado.	Sí
text	string	Contenido del botón en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Sí, cuando no se especifica html.
html	string	Contenido del botón en formato HTML.	Sí, cuando no se especifica text.
isMultiselectable	boolean	Indica si se pueden seleccionar varias opciones
doesChangeButtonText	boolean	Indica si, en caso de selección única, la opción seleccionada se muestra como texto del botón.
label	ListboxLabelData	Permite especificar el texto descriptivo que precede al botón.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el botón.
classesTooltip	string	Clases CSS separadas por espacio que se aplicarán sobre el tooltip.
classesContainer	string	Clases CSS separadas por espacio que se aplicarán sobre el container del componente.
idPrefix	string	Prefijo para la id de los items. Si no se especifica se utilizará el id + ‘-listbox-item’.
disabled	boolean	Deshabilita el boton
items	ListboxItemData[]	Permite especificar los items del listado. Permite utilizar two-way binding para detectar cuando se activan o desactivan los items.

ListboxLabelData

Propiedad	Tipo	Descripción	Obligatorio
text	string	Contenido del label en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Sí, cuando no se especifica html.
html	string	Contenido del label en formato HTML.	Sí, cuando no se especifica text.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el label.

ListboxItemData

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del item. Si no se especifica, se utilizará el prefijo del listbox + el índice en la lista.
text	string	Contenido del item en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Sí, cuando no se especifica html.
html	string	Contenido del item en formato HTML.
active	boolean	Indica si el item está activo. Esta propiedad se modifica cuando el usuario selecciona o deselecciona el item.
title	string	Atributo html title del item.

El item admite los siguientes parámetros de accesibilidad.

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

Expand

title	Contenido

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

ListboxLabelComponent

Code Block

language	xml

<desy-listbox-label ...>...</desy-listbox-label>

Permite utilizar el contenido especificado como descripción que precede al botón.

Admite las mismas propiedades de entrada que el objeto ListboxLabelData.

ListboxItemComponent

Code Block

language	xml

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

Permite utilizar el contenido especificado como item del listado a mostrar.

Admite las mismas propiedades de entrada que el objeto ListboxItemData.

Expand

title	Eventos de salida

Evento	Tipo	Descripción
itemsChange	DOM Event	Se emite cuando se produce un cambio en los items (como activar o desactivar una opción).
activeItemChange	DOM Event	Se emite el item activo cuando este se selecciona.

Expand

title	Ejemplos

Listbox base

Code Block

language	xml

<desy-listbox text="Ejemplo" [label]="{ text: 'Texto de label' }" [isMultiselectable]="true" [id]="'listbox'"
              [items]="[
                {text: 'item1'}, 
                {html: 'item2 {{ svgIcon }}'},
                {text: 'item editable'}]"></desy-listbox>

Image Removed

Image Added

Listbox con contenido

Code Block

language	html

<desy-listbox text="Ejemplo" [doesChangeButtonText]="true" [id]="'listbox'">
  <desy-listbox-label>Texto de label</desy-listbox-label>
  <desy-listbox-item>item1</desy-listbox-item>
  <desy-listbox-item>item2 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Archivo" focusable="false" role="img"><path d="M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z" fill="currentColor"/><path d="M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z" fill="currentColor"/></svg></desy-listbox-item>
  <desy-listbox-item>item editable</desy-listbox-item>
</desy-listbox>

...

Anchor
errorMessage
errorMessage
Pill

...

Code Block

language	xml

<desy-pill ...></desy-pill>

...

Expand

title	Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
text	string	Contenido del texto de ayuda 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.
type	string	Tipo de pill. Los valores posibles son: span (por defecto) button a
href	string	Ruta externa a la que se redirigirá al pulsar el botón de tipo pill. No se aplicará cuando se especifique la propiedad routerLink. Por defecto # Nota: sólo para el elemento a.
target	string	Pestaña en la que se abrirá el enlace. Nota: sólo para el elemento a con href.
routerLink	string\|string[]	Ruta interna relativa al proyecto (ver https://angular.io/api/router/RouterLink).
routerLinkActiveClasses	string\|string[]	Clases que se añadirán al componente cuando la ruta especificada en routerLink sea la actual (ver https://angular.io/api/router/RouterLinkActive).

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

Expand

title	Eventos de salida

Evento	Tipo	Descripción
clickEvent	DOM Event	Se emite al pulsar sobre el botón.

Expand

title	Ejemplos

Image Removed

Image Added

pill

Code Block

language	xml

<desy-pill id="example-pill" text="Focussed" classes="ds-focus" type="button" (clickEvent)="gestionarClick($event)"></desy-pill>

Pill con contenido

Code Block

language	xml

<desy-pill id="example-pill" classes="ds-focus" type="button" (clickEvent)="gestionarClick($event)">Esto es un pill <strong>&nbsp;con HTML</strong><svg viewBox="0 0 140 140" class=" self-center ml-2 " aria-hidden="true" width=" .75em " height=" .75em "><path fill="currentColor" d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z"></path></svg></desy-pill>

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

Versions Compared

Old Version 1

New Version Current

Key

Button

Propiedades de accesibilidad

Button con entrada de texto

Button con contenido

Button con entrada de html y recogiendo el evento de salida

Button Loader

Button-loader con entrada de texto

Button-loader con contenido

Button-loader con entrada de html y recogiendo el evento de salida

Button-loader cargando

Button-loader exito

Dropdown base

Dropdown con menu

Dropdown con menu y contenido

Listbox

Listbox base

Anchor
errorMessage
errorMessage
Pill

pill

Pill con contenido

Accesibilidad

Page Comparison

Versions Compared

Old Version 1

New Version Current

Key

Button

Propiedades de accesibilidad

Button con entrada de texto

Button con contenido

Button con entrada de html y recogiendo el evento de salida

Button Loader

Button-loader con entrada de texto

Button-loader con contenido

Button-loader con entrada de html y recogiendo el evento de salida

Button-loader cargando

Button-loader exito

Dropdown

Dropdown base

Dropdown con menu

Dropdown con menu y contenido

Listbox

Listbox base

AnchorerrorMessageerrorMessagePill

pill

Pill con contenido

Accesibilidad

Anchor
errorMessage
errorMessage
Pill